{"version":3,"sources":["../src/button/button.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The height, font size and padding of the button\n   *\n   * @default \"large\"\n   */\n  size?: \"small\" | \"large\";\n\n  /**\n   * The background and fill of the button\n   *\n   * @default \"primary\"\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\" | \"inverted\";\n\n  /**\n   * Make the button use 100% width available.\n   * Using the \"mobile\" it only stretch to full width on smaller screens\n   */\n  fullWidth?: boolean | \"mobile\";\n\n  /**\n   * Specify that there is an icon in the button.\n   * `icon`: There is only an icon in the button.\n   * `icon=\"leading\"`: There is an icon before the text.\n   * `icon=\"trailing\"`: There is an icon after the text.\n   *\n   * @default false\n   */\n  icon?: boolean | \"leading\" | \"trailing\";\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\n/**\n * Button component\n *\n * @example\n * <Button variant=\"primary\">Primary</Button>\n * <Button variant=\"secondary\" size=\"large\">Secondary</Button>\n * <Button variant=\"inverted\">Inverted</Button>\n * <Button variant=\"tertiary\" fullWidth=\"mobile\">Tertiary</Button>\n * <Button icon=\"leading\"><LeadingIcon />Leading icon</Button>\n *\n * @example\n * // If used for navigation use the `asChild` prop with a anchor element as a child.\n * <Button asChild><a href=\"/home\">Home</a></Button>\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      asChild,\n      children,\n      variant = \"primary\",\n      size = \"large\",\n      fullWidth = false,\n      icon = false,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : \"button\";\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-button\",\n          `hds-button--${size}`,\n          `hds-button--${variant}`,\n          {\n            \"hds-button--full\": fullWidth === true,\n            \"hds-button--mobile-full\": fullWidth === \"mobile\",\n            \"hds-button--only-icon\": icon === true,\n            \"hds-button--leading-icon\": icon === \"leading\",\n            \"hds-button--trailing-icon\": icon === \"trailing\",\n          },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nButton.displayName = \"Button\";\n"],"mappings":";;;;;;;AAAA,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,YAAY;AAwEf;AAjBC,IAAM,SAAS;AAAA,EACpB,CACE,IAUA,QACG;AAXH,iBACE;AAAA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,MACP;AAAA,IAlEN,IA2DI,IAQK,iBARL,IAQK;AAAA,MAPH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,UAAU,OAAO;AAEnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,eAAe,IAAI;AAAA,UACnB,eAAe,OAAO;AAAA,UACtB;AAAA,YACE,oBAAoB,cAAc;AAAA,YAClC,2BAA2B,cAAc;AAAA,YACzC,yBAAyB,SAAS;AAAA,YAClC,4BAA4B,SAAS;AAAA,YACrC,6BAA6B,SAAS;AAAA,UACxC;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,SACI,OAfL;AAAA,QAiBE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;","names":[]}