npm - @helpwave/hightide - Versions diffs - 0.1.23 → 0.1.25 - Mend

@helpwave/hightide 0.1.23 → 0.1.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (167) hide show

package/dist/components/table/TableSortButton.js CHANGED Viewed

@@ -63,7 +63,6 @@ var ButtonUtil = {
 };
 var SolidButton = (0, import_react.forwardRef)(function SolidButton2({
   children,
-  disabled = false,
   color = "primary",
   size = "medium",
   startIcon,
@@ -73,35 +72,33 @@ var SolidButton = (0, import_react.forwardRef)(function SolidButton2({
   ...restProps
 }, ref) {
   const colorClasses = {
-    primary: "bg-button-solid-primary-background text-button-solid-primary-text",
-    secondary: "bg-button-solid-secondary-background text-button-solid-secondary-text",
-    tertiary: "bg-button-solid-tertiary-background text-button-solid-tertiary-text",
-    positive: "bg-button-solid-positive-background text-button-solid-positive-text",
-    warning: "bg-button-solid-warning-background text-button-solid-warning-text",
-    negative: "bg-button-solid-negative-background text-button-solid-negative-text",
-    neutral: "bg-button-solid-neutral-background text-button-solid-neutral-text"
+    primary: "not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text",
+    secondary: "not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text",
+    tertiary: "not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text",
+    positive: "not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text",
+    warning: "not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text",
+    negative: "not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text",
+    neutral: "not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text"
   }[color];
   const iconColorClasses = {
-    primary: "text-button-solid-primary-icon",
-    secondary: "text-button-solid-secondary-icon",
-    tertiary: "text-button-solid-tertiary-icon",
-    positive: "text-button-solid-positive-icon",
-    warning: "text-button-solid-warning-icon",
-    negative: "text-button-solid-negative-icon",
-    neutral: "text-button-solid-neutral-icon"
+    primary: "not-group-disabled:text-button-solid-primary-icon",
+    secondary: "not-group-disabled:text-button-solid-secondary-icon",
+    tertiary: "not-group-disabled:text-button-solid-tertiary-icon",
+    positive: "not-group-disabled:text-button-solid-positive-icon",
+    warning: "not-group-disabled:text-button-solid-warning-icon",
+    negative: "not-group-disabled:text-button-solid-negative-icon",
+    neutral: "not-group-disabled:text-button-solid-neutral-icon"
   }[color];
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "button",
     {
       ref,
       onClick,
-      disabled,
       className: (0, import_clsx.default)(
-        "font-semibold",
-        {
-          "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
-          [(0, import_clsx.default)(colorClasses, "hover:brightness-90")]: !disabled
-        },
+        "group font-semibold",
+        colorClasses,
+        "not-disabled:hover:brightness-90",
+        "disabled:text-disabled-text disabled:bg-disabled-background",
         ButtonUtil.paddingMapping[size],
         className
       ),
@@ -110,10 +107,10 @@ var SolidButton = (0, import_react.forwardRef)(function SolidButton2({
         startIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "span",
           {
-            className: (0, import_clsx.default)({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
+            className: (0, import_clsx.default)(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
             children: startIcon
           }
         ),
@@ -121,10 +118,10 @@ var SolidButton = (0, import_react.forwardRef)(function SolidButton2({
         endIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "span",
           {
-            className: (0, import_clsx.default)({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
+            className: (0, import_clsx.default)(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
             children: endIcon
           }
         )
@@ -134,32 +131,32 @@ var SolidButton = (0, import_react.forwardRef)(function SolidButton2({
 });
 var IconButton = ({
   children,
-  disabled = false,
   color = "primary",
   size = "medium",
   className,
   ...restProps
 }) => {
   const colorClasses = {
-    primary: "bg-button-solid-primary-background text-button-solid-primary-text",
-    secondary: "bg-button-solid-secondary-background text-button-solid-secondary-text",
-    tertiary: "bg-button-solid-tertiary-background text-button-solid-tertiary-text",
-    positive: "bg-button-solid-positive-background text-button-solid-positive-text",
-    warning: "bg-button-solid-warning-background text-button-solid-warning-text",
-    negative: "bg-button-solid-negative-background text-button-solid-negative-text",
-    neutral: "bg-button-solid-neutral-background text-button-solid-neutral-text",
-    transparent: "bg-transparent"
+    primary: "not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text",
+    secondary: "not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text",
+    tertiary: "not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text",
+    positive: "not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text",
+    warning: "not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text",
+    negative: "not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text",
+    neutral: "not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text",
+    transparent: "not-disabled:bg-transparent"
   }[color];
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     {
-      disabled,
       className: (0, import_clsx.default)(
+        colorClasses,
+        "not-disabled:hover:brightness-90",
+        "disabled:text-disabled-text",
         {
-          "text-disabled-text bg-disabled-background cursor-not-allowed": disabled && color !== "transparent",
-          "text-disabled-text cursor-not-allowed opacity-70": disabled && color === "transparent",
-          "hover:bg-button-text-hover-background": !disabled && color === "transparent",
-          [(0, import_clsx.default)(colorClasses, "hover:brightness-90")]: !disabled
+          "disabled:bg-disabled-background": color !== "transparent",
+          "disabled:opacity-70": color === "transparent",
+          "not-disabled:hover:bg-button-text-hover-background": color === "transparent"
         },
         ButtonUtil.iconPaddingMapping[size],
         className

package/dist/components/table/TableSortButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/table/TableSortButton.tsx","../../../src/components/user-action/Button.tsx"],"sourcesContent":["import { ChevronDown, ChevronsUpDown, ChevronUp } from 'lucide-react'\nimport type { IconButtonProps } from '../user-action/Button'\nimport { IconButton } from '../user-action/Button'\nimport clsx from 'clsx'\nimport type { SortDirection } from '@tanstack/react-table'\n\nexport type TableSortButtonProps = IconButtonProps & {\n sortDirection: SortDirection \| false,\n invert?: boolean,\n}\n\n/*\n An Extension of the normal button that displays the sorting state right of the content\n /\nexport const TableSortButton = ({\n sortDirection,\n invert = false,\n color = 'neutral',\n className,\n ...buttonProps\n }: TableSortButtonProps) => {\n let icon = <ChevronsUpDown className=\"w-full h-full\"/>\n if (sortDirection) {\n let usedSortDirection = sortDirection\n if (invert) {\n usedSortDirection = usedSortDirection === 'desc' ? 'asc' : 'desc'\n }\n icon = usedSortDirection === 'asc' ? (<ChevronUp className=\"w-full h-full\"/>) : (\n <ChevronDown className=\"w-full h-full\"/>)\n }\n\n return (\n <IconButton\n size=\"tiny\"\n color={color}\n className={clsx(className)}\n {...buttonProps}\n >\n {icon}\n </IconButton>\n )\n}","import type { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef } from 'react'\nimport clsx from 'clsx'\n\n\nexport const ButtonColorUtil = {\n solid: ['primary', 'secondary', 'tertiary', 'positive', 'warning', 'negative', 'neutral'] as const,\n text: ['primary', 'negative', 'neutral'] as const,\n outline: ['primary'] as const,\n}\n\nexport const IconButtonUtil = {\n icon: [...ButtonColorUtil.solid, 'transparent'] as const,\n}\n\n\n/\n The allowed colors for the SolidButton and IconButton\n /\nexport type SolidButtonColor = typeof ButtonColorUtil.solid[number]\n/\n The allowed colors for the OutlineButton\n /\nexport type OutlineButtonColor = typeof ButtonColorUtil.outline[number]\n/\n The allowed colors for the TextButton\n /\nexport type TextButtonColor = typeof ButtonColorUtil.text[number]\n/\n The allowed colors for the IconButton\n /\nexport type IconButtonColor = typeof IconButtonUtil.icon[number]\n\n\n/\n The different sizes for a button\n /\ntype ButtonSizes = 'small' \| 'medium' \| 'large'\n\ntype IconButtonSize = 'tiny' \| 'small' \| 'medium' \| 'large'\n\n/\n The shard properties between all button types\n /\nexport type ButtonProps = PropsWithChildren<{\n /\n @default 'medium'\n /\n size?: ButtonSizes,\n}> & ButtonHTMLAttributes<Element>\n\nconst paddingMapping: Record<ButtonSizes, string> = {\n small: 'btn-sm',\n medium: 'btn-md',\n large: 'btn-lg'\n}\n\nconst iconPaddingMapping: Record<IconButtonSize, string> = {\n tiny: 'icon-btn-xs',\n small: 'icon-btn-sm',\n medium: 'icon-btn-md',\n large: 'icon-btn-lg'\n}\n\nexport const ButtonUtil = {\n paddingMapping,\n iconPaddingMapping\n}\n\ntype ButtonWithIconsProps = ButtonProps & {\n startIcon?: ReactNode,\n endIcon?: ReactNode,\n}\n\nexport type SolidButtonProps = ButtonWithIconsProps & {\n color?: SolidButtonColor,\n}\n\nexport type OutlineButtonProps = ButtonWithIconsProps & {\n color?: OutlineButtonColor,\n}\n\nexport type TextButtonProps = ButtonWithIconsProps & {\n color?: TextButtonColor,\n coloredHoverBackground?: boolean,\n}\n\n/\n The shard properties between all button types\n /\nexport type IconButtonProps = PropsWithChildren<{\n /\n @default 'medium'\n /\n size?: IconButtonSize,\n color?: IconButtonColor,\n}> & ButtonHTMLAttributes<Element>\n\n/\n A button with a solid background and different sizes\n /\nconst SolidButton = forwardRef<HTMLButtonElement, SolidButtonProps>(function SolidButton({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }, ref) {\n const colorClasses = {\n primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-solid-primary-icon',\n secondary: 'text-button-solid-secondary-icon',\n tertiary: 'text-button-solid-tertiary-icon',\n positive: 'text-button-solid-positive-icon',\n warning: 'text-button-solid-warning-icon',\n negative: 'text-button-solid-negative-icon',\n neutral: 'text-button-solid-neutral-icon',\n }[color]\n\n return (\n <button\n ref={ref}\n onClick={onClick}\n disabled={disabled}\n className={clsx(\n 'font-semibold',\n {\n 'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n})\n\n/\n A button with an outline border and different sizes\n /\nconst OutlineButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: OutlineButtonProps) => {\n const colorClasses = {\n primary: 'bg-transparent border-2 border-button-outline-primary-text text-button-outline-primary-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-outline-primary-icon',\n }[color]\n return (\n <button\n onClick={onClick}\n disabled={disabled}\n className={clsx(\n 'font-semibold',\n {\n 'text-disabled-text border-disabled-outline cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-80')]: !disabled,\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n/\n A text that is a button that can have different sizes\n /\nconst TextButton = ({\n children,\n disabled = false,\n color = 'neutral',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n coloredHoverBackground = true,\n className,\n ...restProps\n }: TextButtonProps) => {\n const colorClasses = {\n primary: 'bg-transparent text-button-text-primary-text',\n negative: 'bg-transparent text-button-text-negative-text',\n neutral: 'bg-transparent text-button-text-neutral-text',\n }[color]\n\n const backgroundColor = {\n primary: 'hover:bg-button-text-primary-text/20',\n negative: 'hover:bg-button-text-negative-text/20',\n neutral: 'hover:bg-button-text-neutral-text/20',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-text-primary-icon',\n negative: 'text-button-text-negative-icon',\n neutral: 'text-button-text-neutral-icon',\n }[color]\n\n return (\n <button\n onClick={onClick}\n disabled={disabled}\n className={clsx(\n 'font-semibold',\n {\n 'text-disabled-text cursor-not-allowed': disabled,\n [colorClasses]: !disabled,\n [backgroundColor]: !disabled && coloredHoverBackground,\n 'hover:bg-button-text-hover-background': !disabled && !coloredHoverBackground,\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n\n/\n A button for icons with a solid background and different sizes\n */\nconst IconButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n className,\n ...restProps\n }: IconButtonProps) => {\n const colorClasses = {\n primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n transparent: 'bg-transparent',\n }[color]\n\n return (\n <button\n disabled={disabled}\n className={clsx(\n {\n 'text-disabled-text bg-disabled-background cursor-not-allowed': disabled && color !== 'transparent',\n 'text-disabled-text cursor-not-allowed opacity-70': disabled && color === 'transparent',\n 'hover:bg-button-text-hover-background': !disabled && color === 'transparent',\n [clsx(colorClasses, 'hover:brightness-90')]: !disabled,\n },\n ButtonUtil.iconPaddingMapping[size],\n className\n )}\n {...restProps}\n >\n {children}\n </button>\n )\n}\n\nexport { SolidButton, OutlineButton, TextButton, IconButton }\n"],"mappings":"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","names":["SolidButton","clsx","clsx","import_clsx","import_jsx_runtime","clsx"]}
1	+ {"version":3,"sources":["../../../src/components/table/TableSortButton.tsx","../../../src/components/user-action/Button.tsx"],"sourcesContent":["import { ChevronDown, ChevronsUpDown, ChevronUp } from 'lucide-react'\nimport type { IconButtonProps } from '../user-action/Button'\nimport { IconButton } from '../user-action/Button'\nimport clsx from 'clsx'\nimport type { SortDirection } from '@tanstack/react-table'\n\nexport type TableSortButtonProps = IconButtonProps & {\n sortDirection: SortDirection \| false,\n invert?: boolean,\n}\n\n/*\n An Extension of the normal button that displays the sorting state right of the content\n /\nexport const TableSortButton = ({\n sortDirection,\n invert = false,\n color = 'neutral',\n className,\n ...buttonProps\n }: TableSortButtonProps) => {\n let icon = <ChevronsUpDown className=\"w-full h-full\"/>\n if (sortDirection) {\n let usedSortDirection = sortDirection\n if (invert) {\n usedSortDirection = usedSortDirection === 'desc' ? 'asc' : 'desc'\n }\n icon = usedSortDirection === 'asc' ? (<ChevronUp className=\"w-full h-full\"/>) : (\n <ChevronDown className=\"w-full h-full\"/>)\n }\n\n return (\n <IconButton\n size=\"tiny\"\n color={color}\n className={clsx(className)}\n {...buttonProps}\n >\n {icon}\n </IconButton>\n )\n}","import type { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef } from 'react'\nimport clsx from 'clsx'\n\n\nexport const ButtonColorUtil = {\n solid: ['primary', 'secondary', 'tertiary', 'positive', 'warning', 'negative', 'neutral'] as const,\n text: ['primary', 'negative', 'neutral'] as const,\n outline: ['primary'] as const,\n}\n\nexport const IconButtonUtil = {\n icon: [...ButtonColorUtil.solid, 'transparent'] as const,\n}\n\n\n/\n The allowed colors for the SolidButton and IconButton\n /\nexport type SolidButtonColor = typeof ButtonColorUtil.solid[number]\n/\n The allowed colors for the OutlineButton\n /\nexport type OutlineButtonColor = typeof ButtonColorUtil.outline[number]\n/\n The allowed colors for the TextButton\n /\nexport type TextButtonColor = typeof ButtonColorUtil.text[number]\n/\n The allowed colors for the IconButton\n /\nexport type IconButtonColor = typeof IconButtonUtil.icon[number]\n\n\n/\n The different sizes for a button\n /\ntype ButtonSizes = 'small' \| 'medium' \| 'large'\n\ntype IconButtonSize = 'tiny' \| 'small' \| 'medium' \| 'large'\n\n/\n The shard properties between all button types\n /\nexport type ButtonProps = PropsWithChildren<{\n /\n @default 'medium'\n /\n size?: ButtonSizes,\n}> & ButtonHTMLAttributes<Element>\n\nconst paddingMapping: Record<ButtonSizes, string> = {\n small: 'btn-sm',\n medium: 'btn-md',\n large: 'btn-lg'\n}\n\nconst iconPaddingMapping: Record<IconButtonSize, string> = {\n tiny: 'icon-btn-xs',\n small: 'icon-btn-sm',\n medium: 'icon-btn-md',\n large: 'icon-btn-lg'\n}\n\nexport const ButtonUtil = {\n paddingMapping,\n iconPaddingMapping\n}\n\ntype ButtonWithIconsProps = ButtonProps & {\n startIcon?: ReactNode,\n endIcon?: ReactNode,\n}\n\nexport type SolidButtonProps = ButtonWithIconsProps & {\n color?: SolidButtonColor,\n}\n\nexport type OutlineButtonProps = ButtonWithIconsProps & {\n color?: OutlineButtonColor,\n}\n\nexport type TextButtonProps = ButtonWithIconsProps & {\n color?: TextButtonColor,\n coloredHoverBackground?: boolean,\n}\n\n/\n The shard properties between all button types\n /\nexport type IconButtonProps = PropsWithChildren<{\n /\n @default 'medium'\n /\n size?: IconButtonSize,\n color?: IconButtonColor,\n}> & ButtonHTMLAttributes<Element>\n\n/\n A button with a solid background and different sizes\n /\nconst SolidButton = forwardRef<HTMLButtonElement, SolidButtonProps>(function SolidButton({\n children,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }, ref) {\n const colorClasses = {\n primary: 'not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text',\n secondary: 'not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text',\n tertiary: 'not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text',\n positive: 'not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text',\n warning: 'not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text',\n negative: 'not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text',\n neutral: 'not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'not-group-disabled:text-button-solid-primary-icon',\n secondary: 'not-group-disabled:text-button-solid-secondary-icon',\n tertiary: 'not-group-disabled:text-button-solid-tertiary-icon',\n positive: 'not-group-disabled:text-button-solid-positive-icon',\n warning: 'not-group-disabled:text-button-solid-warning-icon',\n negative: 'not-group-disabled:text-button-solid-negative-icon',\n neutral: 'not-group-disabled:text-button-solid-neutral-icon',\n }[color]\n\n return (\n <button\n ref={ref}\n onClick={onClick}\n className={clsx(\n 'group font-semibold',\n colorClasses,\n 'not-disabled:hover:brightness-90',\n 'disabled:text-disabled-text disabled:bg-disabled-background',\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx(\n iconColorClasses,\n 'group-disabled:text-disabled-icon'\n )}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx(\n iconColorClasses,\n 'group-disabled:text-disabled-icon'\n )}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n})\n\n/\n A button with an outline border and different sizes\n /\nconst OutlineButton = ({\n children,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: OutlineButtonProps) => {\n const colorClasses = {\n primary: 'not-disabled:border-button-outline-primary-text not-disabled:text-button-outline-primary-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'not-group-disabled:text-button-outline-primary-icon',\n }[color]\n return (\n <button\n onClick={onClick}\n className={clsx(\n 'group font-semibold bg-transparent border-2 ',\n 'not-disabled:hover:brightness-80',\n colorClasses,\n 'disabled:text-disabled-text disabled:border-disabled-outline',\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx(\n iconColorClasses,\n 'group-disabled:text-disabled-icon'\n )}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx(\n iconColorClasses,\n 'group-disabled:text-disabled-icon'\n )}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n/\n A text that is a button that can have different sizes\n /\nconst TextButton = ({\n children,\n color = 'neutral',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n coloredHoverBackground = true,\n className,\n ...restProps\n }: TextButtonProps) => {\n const colorClasses = {\n primary: 'not-disabled:bg-transparent not-disabled:text-button-text-primary-text',\n negative: 'not-disabled:bg-transparent not-disabled:text-button-text-negative-text',\n neutral: 'not-disabled:bg-transparent not-disabled:text-button-text-neutral-text',\n }[color]\n\n const backgroundColor = {\n primary: 'not-disabled:hover:bg-button-text-primary-text/20',\n negative: 'not-disabled:hover:bg-button-text-negative-text/20',\n neutral: 'not-disabled:hover:bg-button-text-neutral-text/20',\n }[color]\n\n const iconColorClasses = {\n primary: 'not-group-disabled:text-button-text-primary-icon',\n negative: 'not-group-disabled:text-button-text-negative-icon',\n neutral: 'not-group-disabled:text-button-text-neutral-icon',\n }[color]\n\n return (\n <button\n onClick={onClick}\n className={clsx(\n 'group font-semibold',\n 'disabled:text-disabled-text',\n colorClasses,\n {\n [backgroundColor]: coloredHoverBackground,\n 'not-disabled:hover:bg-button-text-hover-background': !coloredHoverBackground,\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx(\n iconColorClasses,\n 'group-disabled:text-disabled-icon'\n )}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx(\n iconColorClasses,\n 'group-disabled:text-disabled-icon'\n )}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n\n/\n A button for icons with a solid background and different sizes\n */\nconst IconButton = ({\n children,\n color = 'primary',\n size = 'medium',\n className,\n ...restProps\n }: IconButtonProps) => {\n const colorClasses = {\n primary: 'not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text',\n secondary: 'not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text',\n tertiary: 'not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text',\n positive: 'not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text',\n warning: 'not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text',\n negative: 'not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text',\n neutral: 'not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text',\n transparent: 'not-disabled:bg-transparent',\n }[color]\n\n return (\n <button\n className={clsx(\n colorClasses,\n 'not-disabled:hover:brightness-90',\n 'disabled:text-disabled-text',\n {\n 'disabled:bg-disabled-background': color !== 'transparent',\n 'disabled:opacity-70': color === 'transparent',\n 'not-disabled:hover:bg-button-text-hover-background': color === 'transparent',\n },\n ButtonUtil.iconPaddingMapping[size],\n className\n )}\n {...restProps}\n >\n {children}\n </button>\n )\n}\n\nexport { SolidButton, OutlineButton, TextButton, IconButton }\n"],"mappings":"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","names":["SolidButton","clsx","clsx","import_clsx","import_jsx_runtime","clsx"]}

package/dist/components/table/TableSortButton.mjs CHANGED Viewed

@@ -30,7 +30,6 @@ var ButtonUtil = {
 };
 var SolidButton = forwardRef(function SolidButton2({
   children,
-  disabled = false,
   color = "primary",
   size = "medium",
   startIcon,
@@ -40,35 +39,33 @@ var SolidButton = forwardRef(function SolidButton2({
   ...restProps
 }, ref) {
   const colorClasses = {
-    primary: "bg-button-solid-primary-background text-button-solid-primary-text",
-    secondary: "bg-button-solid-secondary-background text-button-solid-secondary-text",
-    tertiary: "bg-button-solid-tertiary-background text-button-solid-tertiary-text",
-    positive: "bg-button-solid-positive-background text-button-solid-positive-text",
-    warning: "bg-button-solid-warning-background text-button-solid-warning-text",
-    negative: "bg-button-solid-negative-background text-button-solid-negative-text",
-    neutral: "bg-button-solid-neutral-background text-button-solid-neutral-text"
+    primary: "not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text",
+    secondary: "not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text",
+    tertiary: "not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text",
+    positive: "not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text",
+    warning: "not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text",
+    negative: "not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text",
+    neutral: "not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text"
   }[color];
   const iconColorClasses = {
-    primary: "text-button-solid-primary-icon",
-    secondary: "text-button-solid-secondary-icon",
-    tertiary: "text-button-solid-tertiary-icon",
-    positive: "text-button-solid-positive-icon",
-    warning: "text-button-solid-warning-icon",
-    negative: "text-button-solid-negative-icon",
-    neutral: "text-button-solid-neutral-icon"
+    primary: "not-group-disabled:text-button-solid-primary-icon",
+    secondary: "not-group-disabled:text-button-solid-secondary-icon",
+    tertiary: "not-group-disabled:text-button-solid-tertiary-icon",
+    positive: "not-group-disabled:text-button-solid-positive-icon",
+    warning: "not-group-disabled:text-button-solid-warning-icon",
+    negative: "not-group-disabled:text-button-solid-negative-icon",
+    neutral: "not-group-disabled:text-button-solid-neutral-icon"
   }[color];
   return /* @__PURE__ */ jsxs(
     "button",
     {
       ref,
       onClick,
-      disabled,
       className: clsx(
-        "font-semibold",
-        {
-          "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
-          [clsx(colorClasses, "hover:brightness-90")]: !disabled
-        },
+        "group font-semibold",
+        colorClasses,
+        "not-disabled:hover:brightness-90",
+        "disabled:text-disabled-text disabled:bg-disabled-background",
         ButtonUtil.paddingMapping[size],
         className
       ),
@@ -77,10 +74,10 @@ var SolidButton = forwardRef(function SolidButton2({
         startIcon && /* @__PURE__ */ jsx(
           "span",
           {
-            className: clsx({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
+            className: clsx(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
             children: startIcon
           }
         ),
@@ -88,10 +85,10 @@ var SolidButton = forwardRef(function SolidButton2({
         endIcon && /* @__PURE__ */ jsx(
           "span",
           {
-            className: clsx({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
+            className: clsx(
+              iconColorClasses,
+              "group-disabled:text-disabled-icon"
+            ),
             children: endIcon
           }
         )
@@ -101,32 +98,32 @@ var SolidButton = forwardRef(function SolidButton2({
 });
 var IconButton = ({
   children,
-  disabled = false,
   color = "primary",
   size = "medium",
   className,
   ...restProps
 }) => {
   const colorClasses = {
-    primary: "bg-button-solid-primary-background text-button-solid-primary-text",
-    secondary: "bg-button-solid-secondary-background text-button-solid-secondary-text",
-    tertiary: "bg-button-solid-tertiary-background text-button-solid-tertiary-text",
-    positive: "bg-button-solid-positive-background text-button-solid-positive-text",
-    warning: "bg-button-solid-warning-background text-button-solid-warning-text",
-    negative: "bg-button-solid-negative-background text-button-solid-negative-text",
-    neutral: "bg-button-solid-neutral-background text-button-solid-neutral-text",
-    transparent: "bg-transparent"
+    primary: "not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text",
+    secondary: "not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text",
+    tertiary: "not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text",
+    positive: "not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text",
+    warning: "not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text",
+    negative: "not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text",
+    neutral: "not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text",
+    transparent: "not-disabled:bg-transparent"
   }[color];
   return /* @__PURE__ */ jsx(
     "button",
     {
-      disabled,
       className: clsx(
+        colorClasses,
+        "not-disabled:hover:brightness-90",
+        "disabled:text-disabled-text",
         {
-          "text-disabled-text bg-disabled-background cursor-not-allowed": disabled && color !== "transparent",
-          "text-disabled-text cursor-not-allowed opacity-70": disabled && color === "transparent",
-          "hover:bg-button-text-hover-background": !disabled && color === "transparent",
-          [clsx(colorClasses, "hover:brightness-90")]: !disabled
+          "disabled:bg-disabled-background": color !== "transparent",
+          "disabled:opacity-70": color === "transparent",
+          "not-disabled:hover:bg-button-text-hover-background": color === "transparent"
         },
         ButtonUtil.iconPaddingMapping[size],
         className

package/dist/components/table/TableSortButton.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/table/TableSortButton.tsx","../../../src/components/user-action/Button.tsx"],"sourcesContent":["import { ChevronDown, ChevronsUpDown, ChevronUp } from 'lucide-react'\nimport type { IconButtonProps } from '../user-action/Button'\nimport { IconButton } from '../user-action/Button'\nimport clsx from 'clsx'\nimport type { SortDirection } from '@tanstack/react-table'\n\nexport type TableSortButtonProps = IconButtonProps & {\n sortDirection: SortDirection \| false,\n invert?: boolean,\n}\n\n/*\n An Extension of the normal button that displays the sorting state right of the content\n /\nexport const TableSortButton = ({\n sortDirection,\n invert = false,\n color = 'neutral',\n className,\n ...buttonProps\n }: TableSortButtonProps) => {\n let icon = <ChevronsUpDown className=\"w-full h-full\"/>\n if (sortDirection) {\n let usedSortDirection = sortDirection\n if (invert) {\n usedSortDirection = usedSortDirection === 'desc' ? 'asc' : 'desc'\n }\n icon = usedSortDirection === 'asc' ? (<ChevronUp className=\"w-full h-full\"/>) : (\n <ChevronDown className=\"w-full h-full\"/>)\n }\n\n return (\n <IconButton\n size=\"tiny\"\n color={color}\n className={clsx(className)}\n {...buttonProps}\n >\n {icon}\n </IconButton>\n )\n}","import type { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef } from 'react'\nimport clsx from 'clsx'\n\n\nexport const ButtonColorUtil = {\n solid: ['primary', 'secondary', 'tertiary', 'positive', 'warning', 'negative', 'neutral'] as const,\n text: ['primary', 'negative', 'neutral'] as const,\n outline: ['primary'] as const,\n}\n\nexport const IconButtonUtil = {\n icon: [...ButtonColorUtil.solid, 'transparent'] as const,\n}\n\n\n/\n The allowed colors for the SolidButton and IconButton\n /\nexport type SolidButtonColor = typeof ButtonColorUtil.solid[number]\n/\n The allowed colors for the OutlineButton\n /\nexport type OutlineButtonColor = typeof ButtonColorUtil.outline[number]\n/\n The allowed colors for the TextButton\n /\nexport type TextButtonColor = typeof ButtonColorUtil.text[number]\n/\n The allowed colors for the IconButton\n /\nexport type IconButtonColor = typeof IconButtonUtil.icon[number]\n\n\n/\n The different sizes for a button\n /\ntype ButtonSizes = 'small' \| 'medium' \| 'large'\n\ntype IconButtonSize = 'tiny' \| 'small' \| 'medium' \| 'large'\n\n/\n The shard properties between all button types\n /\nexport type ButtonProps = PropsWithChildren<{\n /\n @default 'medium'\n /\n size?: ButtonSizes,\n}> & ButtonHTMLAttributes<Element>\n\nconst paddingMapping: Record<ButtonSizes, string> = {\n small: 'btn-sm',\n medium: 'btn-md',\n large: 'btn-lg'\n}\n\nconst iconPaddingMapping: Record<IconButtonSize, string> = {\n tiny: 'icon-btn-xs',\n small: 'icon-btn-sm',\n medium: 'icon-btn-md',\n large: 'icon-btn-lg'\n}\n\nexport const ButtonUtil = {\n paddingMapping,\n iconPaddingMapping\n}\n\ntype ButtonWithIconsProps = ButtonProps & {\n startIcon?: ReactNode,\n endIcon?: ReactNode,\n}\n\nexport type SolidButtonProps = ButtonWithIconsProps & {\n color?: SolidButtonColor,\n}\n\nexport type OutlineButtonProps = ButtonWithIconsProps & {\n color?: OutlineButtonColor,\n}\n\nexport type TextButtonProps = ButtonWithIconsProps & {\n color?: TextButtonColor,\n coloredHoverBackground?: boolean,\n}\n\n/\n The shard properties between all button types\n /\nexport type IconButtonProps = PropsWithChildren<{\n /\n @default 'medium'\n /\n size?: IconButtonSize,\n color?: IconButtonColor,\n}> & ButtonHTMLAttributes<Element>\n\n/\n A button with a solid background and different sizes\n /\nconst SolidButton = forwardRef<HTMLButtonElement, SolidButtonProps>(function SolidButton({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }, ref) {\n const colorClasses = {\n primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-solid-primary-icon',\n secondary: 'text-button-solid-secondary-icon',\n tertiary: 'text-button-solid-tertiary-icon',\n positive: 'text-button-solid-positive-icon',\n warning: 'text-button-solid-warning-icon',\n negative: 'text-button-solid-negative-icon',\n neutral: 'text-button-solid-neutral-icon',\n }[color]\n\n return (\n <button\n ref={ref}\n onClick={onClick}\n disabled={disabled}\n className={clsx(\n 'font-semibold',\n {\n 'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n})\n\n/\n A button with an outline border and different sizes\n /\nconst OutlineButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: OutlineButtonProps) => {\n const colorClasses = {\n primary: 'bg-transparent border-2 border-button-outline-primary-text text-button-outline-primary-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-outline-primary-icon',\n }[color]\n return (\n <button\n onClick={onClick}\n disabled={disabled}\n className={clsx(\n 'font-semibold',\n {\n 'text-disabled-text border-disabled-outline cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-80')]: !disabled,\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n/\n A text that is a button that can have different sizes\n /\nconst TextButton = ({\n children,\n disabled = false,\n color = 'neutral',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n coloredHoverBackground = true,\n className,\n ...restProps\n }: TextButtonProps) => {\n const colorClasses = {\n primary: 'bg-transparent text-button-text-primary-text',\n negative: 'bg-transparent text-button-text-negative-text',\n neutral: 'bg-transparent text-button-text-neutral-text',\n }[color]\n\n const backgroundColor = {\n primary: 'hover:bg-button-text-primary-text/20',\n negative: 'hover:bg-button-text-negative-text/20',\n neutral: 'hover:bg-button-text-neutral-text/20',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-text-primary-icon',\n negative: 'text-button-text-negative-icon',\n neutral: 'text-button-text-neutral-icon',\n }[color]\n\n return (\n <button\n onClick={onClick}\n disabled={disabled}\n className={clsx(\n 'font-semibold',\n {\n 'text-disabled-text cursor-not-allowed': disabled,\n [colorClasses]: !disabled,\n [backgroundColor]: !disabled && coloredHoverBackground,\n 'hover:bg-button-text-hover-background': !disabled && !coloredHoverBackground,\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n\n/\n A button for icons with a solid background and different sizes\n */\nconst IconButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n className,\n ...restProps\n }: IconButtonProps) => {\n const colorClasses = {\n primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n transparent: 'bg-transparent',\n }[color]\n\n return (\n <button\n disabled={disabled}\n className={clsx(\n {\n 'text-disabled-text bg-disabled-background cursor-not-allowed': disabled && color !== 'transparent',\n 'text-disabled-text cursor-not-allowed opacity-70': disabled && color === 'transparent',\n 'hover:bg-button-text-hover-background': !disabled && color === 'transparent',\n [clsx(colorClasses, 'hover:brightness-90')]: !disabled,\n },\n ButtonUtil.iconPaddingMapping[size],\n className\n )}\n {...restProps}\n >\n {children}\n </button>\n )\n}\n\nexport { SolidButton, OutlineButton, TextButton, IconButton }\n"],"mappings":"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","names":["SolidButton","clsx","jsx"]}
1	+ {"version":3,"sources":["../../../src/components/table/TableSortButton.tsx","../../../src/components/user-action/Button.tsx"],"sourcesContent":["import { ChevronDown, ChevronsUpDown, ChevronUp } from 'lucide-react'\nimport type { IconButtonProps } from '../user-action/Button'\nimport { IconButton } from '../user-action/Button'\nimport clsx from 'clsx'\nimport type { SortDirection } from '@tanstack/react-table'\n\nexport type TableSortButtonProps = IconButtonProps & {\n sortDirection: SortDirection \| false,\n invert?: boolean,\n}\n\n/*\n An Extension of the normal button that displays the sorting state right of the content\n /\nexport const TableSortButton = ({\n sortDirection,\n invert = false,\n color = 'neutral',\n className,\n ...buttonProps\n }: TableSortButtonProps) => {\n let icon = <ChevronsUpDown className=\"w-full h-full\"/>\n if (sortDirection) {\n let usedSortDirection = sortDirection\n if (invert) {\n usedSortDirection = usedSortDirection === 'desc' ? 'asc' : 'desc'\n }\n icon = usedSortDirection === 'asc' ? (<ChevronUp className=\"w-full h-full\"/>) : (\n <ChevronDown className=\"w-full h-full\"/>)\n }\n\n return (\n <IconButton\n size=\"tiny\"\n color={color}\n className={clsx(className)}\n {...buttonProps}\n >\n {icon}\n </IconButton>\n )\n}","import type { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react'\nimport { forwardRef } from 'react'\nimport clsx from 'clsx'\n\n\nexport const ButtonColorUtil = {\n solid: ['primary', 'secondary', 'tertiary', 'positive', 'warning', 'negative', 'neutral'] as const,\n text: ['primary', 'negative', 'neutral'] as const,\n outline: ['primary'] as const,\n}\n\nexport const IconButtonUtil = {\n icon: [...ButtonColorUtil.solid, 'transparent'] as const,\n}\n\n\n/\n The allowed colors for the SolidButton and IconButton\n /\nexport type SolidButtonColor = typeof ButtonColorUtil.solid[number]\n/\n The allowed colors for the OutlineButton\n /\nexport type OutlineButtonColor = typeof ButtonColorUtil.outline[number]\n/\n The allowed colors for the TextButton\n /\nexport type TextButtonColor = typeof ButtonColorUtil.text[number]\n/\n The allowed colors for the IconButton\n /\nexport type IconButtonColor = typeof IconButtonUtil.icon[number]\n\n\n/\n The different sizes for a button\n /\ntype ButtonSizes = 'small' \| 'medium' \| 'large'\n\ntype IconButtonSize = 'tiny' \| 'small' \| 'medium' \| 'large'\n\n/\n The shard properties between all button types\n /\nexport type ButtonProps = PropsWithChildren<{\n /\n @default 'medium'\n /\n size?: ButtonSizes,\n}> & ButtonHTMLAttributes<Element>\n\nconst paddingMapping: Record<ButtonSizes, string> = {\n small: 'btn-sm',\n medium: 'btn-md',\n large: 'btn-lg'\n}\n\nconst iconPaddingMapping: Record<IconButtonSize, string> = {\n tiny: 'icon-btn-xs',\n small: 'icon-btn-sm',\n medium: 'icon-btn-md',\n large: 'icon-btn-lg'\n}\n\nexport const ButtonUtil = {\n paddingMapping,\n iconPaddingMapping\n}\n\ntype ButtonWithIconsProps = ButtonProps & {\n startIcon?: ReactNode,\n endIcon?: ReactNode,\n}\n\nexport type SolidButtonProps = ButtonWithIconsProps & {\n color?: SolidButtonColor,\n}\n\nexport type OutlineButtonProps = ButtonWithIconsProps & {\n color?: OutlineButtonColor,\n}\n\nexport type TextButtonProps = ButtonWithIconsProps & {\n color?: TextButtonColor,\n coloredHoverBackground?: boolean,\n}\n\n/\n The shard properties between all button types\n /\nexport type IconButtonProps = PropsWithChildren<{\n /\n @default 'medium'\n /\n size?: IconButtonSize,\n color?: IconButtonColor,\n}> & ButtonHTMLAttributes<Element>\n\n/\n A button with a solid background and different sizes\n /\nconst SolidButton = forwardRef<HTMLButtonElement, SolidButtonProps>(function SolidButton({\n children,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }, ref) {\n const colorClasses = {\n primary: 'not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text',\n secondary: 'not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text',\n tertiary: 'not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text',\n positive: 'not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text',\n warning: 'not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text',\n negative: 'not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text',\n neutral: 'not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'not-group-disabled:text-button-solid-primary-icon',\n secondary: 'not-group-disabled:text-button-solid-secondary-icon',\n tertiary: 'not-group-disabled:text-button-solid-tertiary-icon',\n positive: 'not-group-disabled:text-button-solid-positive-icon',\n warning: 'not-group-disabled:text-button-solid-warning-icon',\n negative: 'not-group-disabled:text-button-solid-negative-icon',\n neutral: 'not-group-disabled:text-button-solid-neutral-icon',\n }[color]\n\n return (\n <button\n ref={ref}\n onClick={onClick}\n className={clsx(\n 'group font-semibold',\n colorClasses,\n 'not-disabled:hover:brightness-90',\n 'disabled:text-disabled-text disabled:bg-disabled-background',\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx(\n iconColorClasses,\n 'group-disabled:text-disabled-icon'\n )}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx(\n iconColorClasses,\n 'group-disabled:text-disabled-icon'\n )}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n})\n\n/\n A button with an outline border and different sizes\n /\nconst OutlineButton = ({\n children,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: OutlineButtonProps) => {\n const colorClasses = {\n primary: 'not-disabled:border-button-outline-primary-text not-disabled:text-button-outline-primary-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'not-group-disabled:text-button-outline-primary-icon',\n }[color]\n return (\n <button\n onClick={onClick}\n className={clsx(\n 'group font-semibold bg-transparent border-2 ',\n 'not-disabled:hover:brightness-80',\n colorClasses,\n 'disabled:text-disabled-text disabled:border-disabled-outline',\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx(\n iconColorClasses,\n 'group-disabled:text-disabled-icon'\n )}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx(\n iconColorClasses,\n 'group-disabled:text-disabled-icon'\n )}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n/\n A text that is a button that can have different sizes\n /\nconst TextButton = ({\n children,\n color = 'neutral',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n coloredHoverBackground = true,\n className,\n ...restProps\n }: TextButtonProps) => {\n const colorClasses = {\n primary: 'not-disabled:bg-transparent not-disabled:text-button-text-primary-text',\n negative: 'not-disabled:bg-transparent not-disabled:text-button-text-negative-text',\n neutral: 'not-disabled:bg-transparent not-disabled:text-button-text-neutral-text',\n }[color]\n\n const backgroundColor = {\n primary: 'not-disabled:hover:bg-button-text-primary-text/20',\n negative: 'not-disabled:hover:bg-button-text-negative-text/20',\n neutral: 'not-disabled:hover:bg-button-text-neutral-text/20',\n }[color]\n\n const iconColorClasses = {\n primary: 'not-group-disabled:text-button-text-primary-icon',\n negative: 'not-group-disabled:text-button-text-negative-icon',\n neutral: 'not-group-disabled:text-button-text-neutral-icon',\n }[color]\n\n return (\n <button\n onClick={onClick}\n className={clsx(\n 'group font-semibold',\n 'disabled:text-disabled-text',\n colorClasses,\n {\n [backgroundColor]: coloredHoverBackground,\n 'not-disabled:hover:bg-button-text-hover-background': !coloredHoverBackground,\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx(\n iconColorClasses,\n 'group-disabled:text-disabled-icon'\n )}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx(\n iconColorClasses,\n 'group-disabled:text-disabled-icon'\n )}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n\n/\n A button for icons with a solid background and different sizes\n */\nconst IconButton = ({\n children,\n color = 'primary',\n size = 'medium',\n className,\n ...restProps\n }: IconButtonProps) => {\n const colorClasses = {\n primary: 'not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text',\n secondary: 'not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text',\n tertiary: 'not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text',\n positive: 'not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text',\n warning: 'not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text',\n negative: 'not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text',\n neutral: 'not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text',\n transparent: 'not-disabled:bg-transparent',\n }[color]\n\n return (\n <button\n className={clsx(\n colorClasses,\n 'not-disabled:hover:brightness-90',\n 'disabled:text-disabled-text',\n {\n 'disabled:bg-disabled-background': color !== 'transparent',\n 'disabled:opacity-70': color === 'transparent',\n 'not-disabled:hover:bg-button-text-hover-background': color === 'transparent',\n },\n ButtonUtil.iconPaddingMapping[size],\n className\n )}\n {...restProps}\n >\n {children}\n </button>\n )\n}\n\nexport { SolidButton, OutlineButton, TextButton, IconButton }\n"],"mappings":"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","names":["SolidButton","clsx","jsx"]}

package/dist/components/user-action/Button.d.mts CHANGED Viewed

@@ -87,14 +87,14 @@ declare const SolidButton: react.ForwardRefExoticComponent<{
 /**
  * A button with an outline border and different sizes
  */
-declare const OutlineButton: ({ children, disabled, color, size, startIcon, endIcon, onClick, className, ...restProps }: OutlineButtonProps) => react_jsx_runtime.JSX.Element;
+declare const OutlineButton: ({ children, color, size, startIcon, endIcon, onClick, className, ...restProps }: OutlineButtonProps) => react_jsx_runtime.JSX.Element;
 /**
  * A text that is a button that can have different sizes
  */
-declare const TextButton: ({ children, disabled, color, size, startIcon, endIcon, onClick, coloredHoverBackground, className, ...restProps }: TextButtonProps) => react_jsx_runtime.JSX.Element;
+declare const TextButton: ({ children, color, size, startIcon, endIcon, onClick, coloredHoverBackground, className, ...restProps }: TextButtonProps) => react_jsx_runtime.JSX.Element;
 /**
  * A button for icons with a solid background and different sizes
  */
-declare const IconButton: ({ children, disabled, color, size, className, ...restProps }: IconButtonProps) => react_jsx_runtime.JSX.Element;
+declare const IconButton: ({ children, color, size, className, ...restProps }: IconButtonProps) => react_jsx_runtime.JSX.Element;
 export { ButtonColorUtil, type ButtonProps, ButtonUtil, IconButton, type IconButtonColor, type IconButtonProps, IconButtonUtil, OutlineButton, type OutlineButtonColor, type OutlineButtonProps, SolidButton, type SolidButtonColor, type SolidButtonProps, TextButton, type TextButtonColor, type TextButtonProps };

package/dist/components/user-action/Button.d.ts CHANGED Viewed

@@ -87,14 +87,14 @@ declare const SolidButton: react.ForwardRefExoticComponent<{
 /**
  * A button with an outline border and different sizes
  */
-declare const OutlineButton: ({ children, disabled, color, size, startIcon, endIcon, onClick, className, ...restProps }: OutlineButtonProps) => react_jsx_runtime.JSX.Element;
+declare const OutlineButton: ({ children, color, size, startIcon, endIcon, onClick, className, ...restProps }: OutlineButtonProps) => react_jsx_runtime.JSX.Element;
 /**
  * A text that is a button that can have different sizes
  */
-declare const TextButton: ({ children, disabled, color, size, startIcon, endIcon, onClick, coloredHoverBackground, className, ...restProps }: TextButtonProps) => react_jsx_runtime.JSX.Element;
+declare const TextButton: ({ children, color, size, startIcon, endIcon, onClick, coloredHoverBackground, className, ...restProps }: TextButtonProps) => react_jsx_runtime.JSX.Element;
 /**
  * A button for icons with a solid background and different sizes
  */
-declare const IconButton: ({ children, disabled, color, size, className, ...restProps }: IconButtonProps) => react_jsx_runtime.JSX.Element;
+declare const IconButton: ({ children, color, size, className, ...restProps }: IconButtonProps) => react_jsx_runtime.JSX.Element;
 export { ButtonColorUtil, type ButtonProps, ButtonUtil, IconButton, type IconButtonColor, type IconButtonProps, IconButtonUtil, OutlineButton, type OutlineButtonColor, type OutlineButtonProps, SolidButton, type SolidButtonColor, type SolidButtonProps, TextButton, type TextButtonColor, type TextButtonProps };