@sustaina/shared-ui 1.40.0 → 1.40.2

package/dist/index.d.mts

@@ -152,7 +152,7 @@ declare const AdvanceSearch: React__default.FC<AdvanceSearchProps>;
 
 declare const buttonVariants: (props?: ({
     variant?: "cancel" | "default" | "link" | "secondary" | "destructive" | "warning" | "cottonYellowDark" | "cottonGreen" | "cottonBlue" | "cottonRed" | "cottonAccent" | "cottonYellow" | "cottonBlack" | "defaultOutline" | "destructiveOutline" | "outline" | "ghost" | "defaultSelect" | null | undefined;
-    size?: "default" | "option" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
+    size?: "default" | "option" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg" | "icon-rounded" | "icon-xs-rounded" | "icon-sm-rounded" | "icon-md-rounded" | "icon-lg-rounded" | null | undefined;
     active?: boolean | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, active, asChild, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
@@ -1559,11 +1559,11 @@ interface TruncatedMouseEnterDivProps {
 }
 declare const TruncatedMouseEnterDiv: ({ value, className, tooltipProps, tooltipContentProps, arrowClassName }: TruncatedMouseEnterDivProps) => react_jsx_runtime.JSX.Element;
 
-type TabSelectItem<T extends string> = {
+type TabSelectItem<T extends string = string> = {
     id: T;
     label: string;
 };
-interface TabSelectProps<T extends string> {
+interface TabSelectProps<T extends string = string> {
     items: TabSelectItem<T>[];
     onSelectTab: (state: T) => void;
     labelWrapperClassName?: string;
@@ -1571,7 +1571,7 @@ interface TabSelectProps<T extends string> {
     activeBorderClassName?: string;
     separatorClassName?: string;
 }
-declare const TabSelect: <T extends string>({ items, onSelectTab, labelWrapperClassName, labelClassName, activeBorderClassName, separatorClassName, ...rest }: ComponentProps<"div"> & TabSelectProps<T>) => react_jsx_runtime.JSX.Element | null;
+declare const TabSelect: <T extends string = string>({ items, onSelectTab, labelWrapperClassName, labelClassName, activeBorderClassName, separatorClassName, ...rest }: ComponentProps<"div"> & TabSelectProps<T>) => react_jsx_runtime.JSX.Element | null;
 
 declare function isDefined<T>(value: T | null | undefined): value is NonNullable<T>;
 declare function isEmptyObject(value: any): boolean;

package/dist/index.d.ts

@@ -152,7 +152,7 @@ declare const AdvanceSearch: React__default.FC<AdvanceSearchProps>;
 
 declare const buttonVariants: (props?: ({
     variant?: "cancel" | "default" | "link" | "secondary" | "destructive" | "warning" | "cottonYellowDark" | "cottonGreen" | "cottonBlue" | "cottonRed" | "cottonAccent" | "cottonYellow" | "cottonBlack" | "defaultOutline" | "destructiveOutline" | "outline" | "ghost" | "defaultSelect" | null | undefined;
-    size?: "default" | "option" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
+    size?: "default" | "option" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg" | "icon-rounded" | "icon-xs-rounded" | "icon-sm-rounded" | "icon-md-rounded" | "icon-lg-rounded" | null | undefined;
     active?: boolean | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, active, asChild, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
@@ -1559,11 +1559,11 @@ interface TruncatedMouseEnterDivProps {
 }
 declare const TruncatedMouseEnterDiv: ({ value, className, tooltipProps, tooltipContentProps, arrowClassName }: TruncatedMouseEnterDivProps) => react_jsx_runtime.JSX.Element;
 
-type TabSelectItem<T extends string> = {
+type TabSelectItem<T extends string = string> = {
     id: T;
     label: string;
 };
-interface TabSelectProps<T extends string> {
+interface TabSelectProps<T extends string = string> {
     items: TabSelectItem<T>[];
     onSelectTab: (state: T) => void;
     labelWrapperClassName?: string;
@@ -1571,7 +1571,7 @@ interface TabSelectProps<T extends string> {
     activeBorderClassName?: string;
     separatorClassName?: string;
 }
-declare const TabSelect: <T extends string>({ items, onSelectTab, labelWrapperClassName, labelClassName, activeBorderClassName, separatorClassName, ...rest }: ComponentProps<"div"> & TabSelectProps<T>) => react_jsx_runtime.JSX.Element | null;
+declare const TabSelect: <T extends string = string>({ items, onSelectTab, labelWrapperClassName, labelClassName, activeBorderClassName, separatorClassName, ...rest }: ComponentProps<"div"> & TabSelectProps<T>) => react_jsx_runtime.JSX.Element | null;
 
 declare function isDefined<T>(value: T | null | undefined): value is NonNullable<T>;
 declare function isEmptyObject(value: any): boolean;

package/dist/index.js

@@ -3013,25 +3013,65 @@ var ConditionNumberInput = ({ row, control, onClear }) => /* @__PURE__ */ jsxRun
     }
   }
 );
-var cotton = "hover:ring-2 active:ring-0 focus-visible:ring-2 text-primary-foreground ";
+var cotton = "hover:ring-2 active:ring-0 focus-visible:ring-2 text-primary-foreground disabled:bg-sus-secondary-gray-5 disabled:text-sus-secondary-gray-8";
+var outline = "bg-none disabled:bg-none disabled:border-sus-secondary-gray-5 disabled:text-sus-secondary-gray-8";
 var buttonVariants = classVarianceAuthority.cva(
-  "disabled:bg-sus-secondary-gray-5 disabled:text-sus-secondary-gray-8 inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer",
   {
     variants: {
       variant: {
-        default: cotton + "bg-sus-primary-green-9 hover:bg-sus-primary-green-8 hover:ring-sus-primary-green-8/20 focus-visible:ring-2 focus-visible:bg-sus-primary-green-8 active:bg-sus-primary-green-10 focus-visible:ring-sus-primary-green-10",
-        destructive: cotton + "bg-sus-button-red-2 hover:bg-sus-button-red-1 hover:ring-sus-button-red-1/20 focus-visible:ring-2 active:bg-sus-button-red-3 focus-visible:bg-sus-button-red-1 focus-visible:ring-sus-button-red-3",
-        cancel: cotton + "bg-sus-button-accent-2 hover:bg-sus-button-accent-1 hover:ring-sus-button-accent-1/20 focus-visible:ring-2 active:bg-sus-button-accent-3 focus-visible:bg-sus-button-accent-1 focus-visible:ring-sus-button-accent-3",
-        warning: cotton + "bg-sus-button-yellow-2 hover:bg-sus-button-yellow-1 hover:ring-sus-button-yellow-1/20 focus-visible:ring-2 active:bg-sus-button-yellow-3 focus-visible:bg-sus-button-yellow-1 focus-visible:ring-sus-button-yellow-3",
-        cottonYellowDark: cotton + "bg-sus-button-yellowdark-2 hover:bg-sus-button-yellowdark-1 hover:ring-sus-button-yellowdark-1/20 focus-visible:ring-2 active:bg-sus-button-yellowdark-3 focus-visible:bg-sus-button-yellowdark-1 focus-visible:ring-sus-button-yellowdark-3",
-        cottonGreen: cotton + "bg-sus-button-green-2 hover:bg-sus-button-green-1 hover:ring-sus-button-green-1/20 focus-visible:ring-2 active:bg-sus-button-green-3 focus-visible:bg-sus-button-green-1 focus-visible:ring-sus-button-green-3",
-        cottonBlue: cotton + "bg-sus-button-blue-2 hover:bg-sus-button-blue-1 hover:ring-sus-button-blue-1/20 focus-visible:ring-2 active:bg-sus-button-blue-3 focus-visible:bg-sus-button-blue-1 focus-visible:ring-sus-button-blue-3",
-        cottonRed: cotton + "bg-sus-button-red-2 hover:bg-sus-button-red-1 hover:ring-sus-button-red-1/20 focus-visible:ring-2 active:bg-sus-button-red-3 focus-visible:bg-sus-button-red-1 focus-visible:ring-sus-button-red-3",
-        cottonAccent: cotton + "bg-sus-button-accent-2 hover:bg-sus-button-accent-1 hover:ring-sus-button-accent-1/20 focus-visible:ring-2 active:bg-sus-button-accent-3 focus-visible:bg-sus-button-accent-1 focus-visible:ring-sus-button-accent-3",
-        cottonYellow: cotton + "bg-sus-button-yellow-2 hover:bg-sus-button-yellow-1 hover:ring-sus-button-yellow-1/20 focus-visible:ring-2 active:bg-sus-button-yellow-3 focus-visible:bg-sus-button-yellow-1 focus-visible:ring-sus-button-yellow-3",
-        cottonBlack: cotton + "bg-sus-button-black-2 hover:bg-sus-button-black-1 hover:ring-sus-button-black-1/20 focus-visible:ring-2 active:bg-sus-button-black-3 focus-visible:bg-sus-button-black-1 focus-visible:ring-sus-button-black-3",
-        defaultOutline: "border border-sus-primary-green-9 text-black hover:border-sus-primary-green-8 hover:text-sus-primary-green-8 active:border-sus-primary-green-9 active:text-black  focus-visible:border-sus-primary-green-10 focus-visible:text-sus-primary-green-10",
-        destructiveOutline: "border border-sus-button-red-2 text-black hover:border-sus-button-red-1 hover:text-sus-button-red-1 active:border-sus-button-red-2 active:text-black  focus-visible:border-sus-button-red-3 focus-visible:text-sus-button-red-3",
+        default: cn(
+          cotton,
+          "bg-sus-primary-green-9 hover:bg-sus-primary-green-8 hover:ring-sus-primary-green-8/20 focus-visible:ring-2 focus-visible:bg-sus-primary-green-8 active:bg-sus-primary-green-10 focus-visible:ring-sus-primary-green-10"
+        ),
+        destructive: cn(
+          cotton,
+          "bg-sus-button-red-2 hover:bg-sus-button-red-1 hover:ring-sus-button-red-1/20 focus-visible:ring-2 active:bg-sus-button-red-3 focus-visible:bg-sus-button-red-1 focus-visible:ring-sus-button-red-3"
+        ),
+        cancel: cn(
+          cotton,
+          "bg-sus-button-accent-2 hover:bg-sus-button-accent-1 hover:ring-sus-button-accent-1/20 focus-visible:ring-2 active:bg-sus-button-accent-3 focus-visible:bg-sus-button-accent-1 focus-visible:ring-sus-button-accent-3"
+        ),
+        warning: cn(
+          cotton,
+          "bg-sus-button-yellow-2 hover:bg-sus-button-yellow-1 hover:ring-sus-button-yellow-1/20 focus-visible:ring-2 active:bg-sus-button-yellow-3 focus-visible:bg-sus-button-yellow-1 focus-visible:ring-sus-button-yellow-3"
+        ),
+        cottonYellowDark: cn(
+          cotton,
+          "bg-sus-button-yellowdark-2 hover:bg-sus-button-yellowdark-1 hover:ring-sus-button-yellowdark-1/20 focus-visible:ring-2 active:bg-sus-button-yellowdark-3 focus-visible:bg-sus-button-yellowdark-1 focus-visible:ring-sus-button-yellowdark-3"
+        ),
+        cottonGreen: cn(
+          cotton,
+          "bg-sus-button-green-2 hover:bg-sus-button-green-1 hover:ring-sus-button-green-1/20 focus-visible:ring-2 active:bg-sus-button-green-3 focus-visible:bg-sus-button-green-1 focus-visible:ring-sus-button-green-3"
+        ),
+        cottonBlue: cn(
+          cotton,
+          "bg-sus-button-blue-2 hover:bg-sus-button-blue-1 hover:ring-sus-button-blue-1/20 focus-visible:ring-2 active:bg-sus-button-blue-3 focus-visible:bg-sus-button-blue-1 focus-visible:ring-sus-button-blue-3"
+        ),
+        cottonRed: cn(
+          cotton,
+          "bg-sus-button-red-2 hover:bg-sus-button-red-1 hover:ring-sus-button-red-1/20 focus-visible:ring-2 active:bg-sus-button-red-3 focus-visible:bg-sus-button-red-1 focus-visible:ring-sus-button-red-3"
+        ),
+        cottonAccent: cn(
+          cotton,
+          "bg-sus-button-accent-2 hover:bg-sus-button-accent-1 hover:ring-sus-button-accent-1/20 focus-visible:ring-2 active:bg-sus-button-accent-3 focus-visible:bg-sus-button-accent-1 focus-visible:ring-sus-button-accent-3"
+        ),
+        cottonYellow: cn(
+          cotton,
+          "bg-sus-button-yellow-2 hover:bg-sus-button-yellow-1 hover:ring-sus-button-yellow-1/20 focus-visible:ring-2 active:bg-sus-button-yellow-3 focus-visible:bg-sus-button-yellow-1 focus-visible:ring-sus-button-yellow-3"
+        ),
+        cottonBlack: cn(
+          cotton,
+          "bg-sus-button-black-2 hover:bg-sus-button-black-1 hover:ring-sus-button-black-1/20 focus-visible:ring-2 active:bg-sus-button-black-3 focus-visible:bg-sus-button-black-1 focus-visible:ring-sus-button-black-3"
+        ),
+        defaultOutline: cn(
+          outline,
+          "border border-sus-primary-green-9 text-black hover:border-sus-primary-green-8 hover:text-sus-primary-green-8 active:border-sus-primary-green-9 active:text-black  focus-visible:border-sus-primary-green-10 focus-visible:text-sus-primary-green-10"
+        ),
+        destructiveOutline: cn(
+          outline,
+          "border border-sus-button-red-2 text-black hover:border-sus-button-red-1 hover:text-sus-button-red-1 active:border-sus-button-red-2 active:text-black  focus-visible:border-sus-button-red-3 focus-visible:text-sus-button-red-3"
+        ),
         outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
@@ -3043,11 +3083,16 @@ var buttonVariants = classVarianceAuthority.cva(
         option: "py-5 h-9 px-4  has-[>svg]:px-3",
         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9 rounded-full",
-        "icon-xs": "size-5 rounded-full",
-        "icon-sm": "size-[22px] rounded-full",
-        "icon-md": "size-9 rounded-full",
-        "icon-lg": "size-10 rounded-full"
+        icon: "size-9",
+        "icon-xs": "size-5",
+        "icon-sm": "size-[22px]",
+        "icon-md": "size-9",
+        "icon-lg": "size-10",
+        "icon-rounded": "size-9 rounded-full",
+        "icon-xs-rounded": "size-5 rounded-full",
+        "icon-sm-rounded": "size-[22px] rounded-full",
+        "icon-md-rounded": "size-9 rounded-full",
+        "icon-lg-rounded": "size-10 rounded-full"
       },
       active: {
         true: "",
@@ -10350,7 +10395,8 @@ var FormulaEditor = ({
       {
         type: "button",
         onClick: () => insertOperator(operator.value),
-        className: "min-w-10 rounded-sm px-3 bg-sus-blue-3",
+        variant: "cottonBlue",
+        className: "min-w-10 rounded-sm px-3",
         disabled: isEditorDisabled,
         children: operator.label
       },
@@ -12827,7 +12873,7 @@ var TabSelect = ({
             {
               hidden: index >= items.length - 1,
               orientation: "vertical",
-              className: cn("h-[70%]! mx-3.5 bg-sus-secondary-gray-3", separatorClassName)
+              className: cn("h-[70%]! mx-2 bg-sus-secondary-gray-3", separatorClassName)
             }
           )
         ] }, `key-${index}`);