singularity-components 0.1.80 → 0.1.82

package/dist/main.d.ts

@@ -39,17 +39,19 @@ type Props$2 = React$1.ComponentProps<"button"> & VariantProps<typeof buttonVari
 };
 declare function Button({ className, variant, size, asChild, iconStart, iconStartAnimate, iconEnd, iconEndAnimate, children, ...props }: Props$2): react_jsx_runtime.JSX.Element;
 
-type ValidBreakpoint = "" | "sm:" | "md:" | "lg:" | "xl:" | "2xl:";
-type ValidMarginDirection = "m-" | "mx-" | "my-" | "mt-" | "mr-" | "mb-" | "ml-";
-type ValidSize = "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "px" | "auto";
-type TailwindMarginClass = "" | `${ValidBreakpoint}${ValidMarginDirection}${ValidSize}`;
+type Breakpoint = "" | "sm:" | "md:" | "lg:" | "xl:" | "2xl:";
+type MarginDirection = "m-" | "mx-" | "my-" | "mt-" | "mr-" | "mb-" | "ml-";
+type Size = "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "px" | "auto";
+type TailwindMarginClassValue = `${Breakpoint}${MarginDirection}${Size}`;
+type TailwindMarginClass = TailwindMarginClassValue[];
 type OmitClassProperty<T1, T2 extends string> = Omit<T1, T2>;
+type OmitClassName<T> = OmitClassProperty<T, "className">;
 
 declare const headingVariants: (props?: ({
     variant?: "h1" | "h2" | "h3" | "h4" | null | undefined;
     foreground?: "default" | "muted" | "primary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface HeadingProps extends OmitClassProperty<React__default.HTMLAttributes<HTMLHeadingElement>, "className">, VariantProps<typeof headingVariants> {
+interface HeadingProps extends OmitClassName<React__default.HTMLAttributes<HTMLHeadingElement>>, VariantProps<typeof headingVariants> {
     as?: "h1" | "h2" | "h3" | "h4";
     className?: TailwindMarginClass;
 }
@@ -107,10 +109,10 @@ declare function TableCaption({ className, ...props }: React$1.ComponentProps<"c
 
 declare const textVariants: (props?: ({
     size?: "base" | "sm" | "lg" | "xs" | "xl" | null | undefined;
-    foreground?: "accent" | "default" | "destructive" | "secondary" | "muted" | "primary" | null | undefined;
+    foreground?: "default" | "destructive" | "secondary" | "muted" | "primary" | "accent" | null | undefined;
     weight?: "bold" | "normal" | "medium" | "semibold" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface TextProps extends OmitClassProperty<React__default.HTMLAttributes<HTMLDivElement>, "className">, VariantProps<typeof textVariants> {
+interface TextProps extends OmitClassName<React__default.HTMLAttributes<HTMLDivElement>>, VariantProps<typeof textVariants> {
     className?: TailwindMarginClass;
 }
 declare const Text: React__default.FC<TextProps>;

package/dist/main.js

@@ -2,7 +2,7 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as React from 'react';
 import { forwardRef, createElement } from 'react';
 import clsx2, { clsx } from 'clsx';
-import { extendTailwindMerge, twMerge } from 'tailwind-merge';
+import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import { Slot } from '@radix-ui/react-slot';
@@ -20006,10 +20006,22 @@ var __iconNode1609 = [
 ];
 var ZoomOut = createLucideIcon("zoom-out", __iconNode1609);
 function cn(...inputs) {
-  const twMergeWithPrefix = extendTailwindMerge({
-    prefix: "sg:"
-  });
-  return twMergeWithPrefix(twMerge(clsx(inputs)));
+  const classString = clsx(inputs);
+  const allOriginalClasses = classString.split(/\s+/).filter(Boolean);
+  const prefixedClasses = allOriginalClasses.filter((c) => c.startsWith("sg:"));
+  const unprefixedClasses = allOriginalClasses.filter(
+    (c) => !c.startsWith("sg:")
+  );
+  const allClassesWithRemovedPrefix = allOriginalClasses.map(
+    (c) => c.replace("sg:", "")
+  );
+  const mergedClasses = twMerge(allClassesWithRemovedPrefix).split(/\s+/).filter(Boolean);
+  return mergedClasses.map((c) => {
+    if (prefixedClasses.includes("sg:" + c) && !unprefixedClasses.includes(c)) {
+      return "sg:" + c;
+    }
+    return c;
+  }).join(" ");
 }
 function Accordion({
   ...props
@@ -20024,7 +20036,7 @@ function AccordionItem({
     AccordionPrimitive.Item,
     {
       "data-slot": "accordion-item",
-      className: cn("sg:border-b last:sg:border-b-0", className),
+      className: cn("sg:border-b sg:last:border-b-0", className),
       ...props
     }
   );
@@ -20039,7 +20051,7 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "focus-visible:sg:border-ring focus-visible:sg:ring-ring/50 sg:flex sg:flex-1 sg:items-start sg:justify-between sg:gap-4 sg:rounded-md sg:py-4 sg:text-left sg:text-sm sg:font-medium sg:transition-all sg:outline-none hover:sg:underline focus-visible:sg:ring-[3px] disabled:sg:pointer-events-none disabled:sg:opacity-50 [&[data-state=open]>svg]:sg:rotate-180",
+        "sg:focus-visible:border-ring sg:focus-visible:ring-ring/50 sg:flex sg:flex-1 sg:items-start sg:justify-between sg:gap-4 sg:rounded-md sg:py-4 sg:text-left sg:text-sm sg:font-medium sg:transition-all sg:outline-none sg:hover:underline sg:focus-visible:ring-[3px] sg:disabled:pointer-events-none sg:disabled:opacity-50 sg:[&[data-state=open]>svg]:rotate-180",
         className
       ),
       ...props,
@@ -20059,7 +20071,7 @@ function AccordionContent({
     AccordionPrimitive.Content,
     {
       "data-slot": "accordion-content",
-      className: "data-[state=closed]:sg:animate-accordion-up data-[state=open]:sg:animate-accordion-down sg:overflow-hidden sg:text-sm",
+      className: "sg:data-[state=closed]:animate-accordion-up sg:data-[state=open]:animate-accordion-down sg:overflow-hidden sg:text-sm",
       ...props,
       children: /* @__PURE__ */ jsx("div", { className: cn("sg:pt-0 sg:pb-4", className), children })
     }
@@ -20124,14 +20136,14 @@ function AlertDescription({
   );
 }
 var badgeVariants = cva(
-  "sg:inline-flex sg:items-center sg:justify-center sg:rounded-md sg:border sg:px-2 sg:py-0.5 sg:text-xs sg:font-medium sg:w-fit sg:whitespace-nowrap sg:shrink-0 [&>svg]:sg:size-3 sg:gap-1 [&>svg]:sg:pointer-events-none focus-visible:sg:border-ring focus-visible:sg:ring-ring/50 focus-visible:sg:ring-[3px] aria-invalid:sg:ring-destructive/20 dark:aria-invalid:sg:ring-destructive/40 aria-invalid:sg:border-destructive sg:transition-[color,box-shadow] sg:overflow-hidden",
+  "sg:inline-flex sg:items-center sg:justify-center sg:rounded-md sg:border sg:px-2 sg:py-0.5 sg:text-xs sg:font-medium sg:w-fit sg:whitespace-nowrap sg:shrink-0 sg:[&>svg]:size-3 sg:gap-1 sg:[&>svg]:pointer-events-none sg:focus-visible:border-ring sg:focus-visible:ring-ring/50 sg:focus-visible:ring-[3px] sg:aria-invalid:ring-destructive/20 sg:dark:aria-invalid:ring-destructive/40 sg:aria-invalid:border-destructive sg:transition-[color,box-shadow] sg:overflow-hidden",
   {
     variants: {
       variant: {
-        default: "sg:border-transparent sg:bg-primary sg:text-primary-foreground [a&]:hover:sg:bg-primary/90",
-        secondary: "sg:border-transparent sg:bg-secondary sg:text-secondary-foreground [a&]:hover:sg:bg-secondary/90",
-        destructive: "sg:border-transparent sg:bg-destructive sg:text-white [a&]:hover:sg:bg-destructive/90 focus-visible:sg:ring-destructive/20 dark:focus-visible:sg:ring-destructive/40 dark:sg:bg-destructive/60",
-        outline: "sg:text-foreground [a&]:hover:sg:bg-accent [a&]:hover:sg:text-accent-foreground"
+        default: "sg:border-transparent sg:bg-primary sg:text-primary-foreground sg:[a&]:hover:bg-primary/90",
+        secondary: "sg:border-transparent sg:bg-secondary sg:text-secondary-foreground sg:[a&]:hover:bg-secondary/90",
+        destructive: "sg:border-transparent sg:bg-destructive sg:text-white sg:[a&]:hover:bg-destructive/90 sg:focus-visible:ring-destructive/20 sg:dark:focus-visible:ring-destructive/40 sg:dark:bg-destructive/60",
+        outline: "sg:text-foreground sg:[a&]:hover:bg-accent sg:[a&]:hover:text-accent-foreground"
       }
     },
     defaultVariants: {
@@ -20156,21 +20168,21 @@ function Badge2({
   );
 }
 var buttonVariants = cva(
-  "sg:inline-flex sg:items-center sg:justify-center sg:gap-2 sg:whitespace-nowrap sg:rounded-md sg:text-sm sg:font-medium sg:transition-all disabled:sg:pointer-events-none disabled:sg:opacity-50 [&_svg]:sg:pointer-events-none [&_svg:not([class*=size-])]:sg:size-4 sg:shrink-0 [&_svg]:sg:shrink-0 sg:outline-none focus-visible:sg:border-ring focus-visible:sg:ring-ring/50 focus-visible:sg:ring-[3px] aria-invalid:sg:ring-destructive/20 dark:aria-invalid:sg:ring-destructive/40 aria-invalid:sg:border-destructive",
+  "sg:inline-flex sg:items-center sg:justify-center sg:gap-2 sg:whitespace-nowrap sg:cursor-pointer sg:rounded-md sg:text-sm sg:font-medium sg:transition-all sg:disabled:pointer-events-none sg:disabled:opacity-50 sg:[&_svg]:pointer-events-none sg:[&_svg:not([class*=size-])]:size-4 sg:shrink-0 sg:[&_svg]:shrink-0 sg:outline-none sg:focus-visible:border-ring sg:focus-visible:ring-ring/50 sg:focus-visible:ring-[3px] sg:aria-invalid:ring-destructive/20 sg:dark:aria-invalid:ring-destructive/40 sg:aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: "sg:bg-primary sg:text-primary-foreground sg:shadow-xs hover:sg:bg-primary/90",
-        destructive: "sg:bg-destructive sg:text-white sg:shadow-xs hover:sg:bg-destructive/90 focus-visible:sg:ring-destructive/20 dark:focus-visible:sg:ring-destructive/40 dark:sg:bg-destructive/60",
-        outline: "sg:border sg:bg-background sg:shadow-xs hover:sg:bg-accent hover:sg:text-accent-foreground dark:sg:bg-input/30 dark:sg:border-input dark:hover:sg:bg-input/50",
-        secondary: "sg:bg-secondary sg:text-secondary-foreground sg:shadow-xs hover:sg:bg-secondary/80",
-        ghost: "hover:sg:bg-accent hover:sg:text-accent-foreground dark:hover:sg:bg-accent/50",
-        link: "sg:text-primary sg:underline-offset-4 hover:sg:underline"
+        default: "sg:bg-primary sg:text-primary-foreground sg:shadow-xs sg:hover:bg-primary/90",
+        destructive: "sg:bg-destructive sg:text-white sg:shadow-xs sg:hover:bg-destructive/90 sg:focus-visible:ring-destructive/20 sg:dark:focus-visible:ring-destructive/40 sg:dark:bg-destructive/60",
+        outline: "sg:border sg:bg-background sg:shadow-xs sg:hover:bg-accent sg:hover:text-accent-foreground sg:dark:bg-input/30 sg:dark:border-input sg:dark:hover:bg-input/50",
+        secondary: "sg:bg-secondary sg:text-secondary-foreground sg:shadow-xs sg:hover:bg-secondary/80",
+        ghost: "sg:hover:bg-accent sg:hover:text-accent-foreground sg:dark:hover:bg-accent/50",
+        link: "sg:text-primary sg:underline-offset-4 sg:hover:underline"
       },
       size: {
-        default: "sg:h-9 sg:px-4 sg:py-2 has-[>svg]:sg:px-3",
-        sm: "sg:h-8 sg:rounded-md sg:gap-1.5 sg:px-3 has-[>svg]:sg:px-2.5",
-        lg: "sg:h-10 sg:rounded-md sg:px-6 has-[>svg]:sg:px-4",
+        default: "sg:h-9 sg:px-4 sg:py-2 sg:has-[>svg]:px-3",
+        sm: "sg:h-8 sg:rounded-md sg:gap-1.5 sg:px-3 sg:has-[>svg]:px-2.5",
+        lg: "sg:h-10 sg:rounded-md sg:px-6 sg:has-[>svg]:px-4",
         icon: "sg:size-9"
       }
     },
@@ -20293,9 +20305,9 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "file:sg:text-foreground placeholder:sg:text-muted-foreground selection:sg:bg-primary selection:sg:text-primary-foreground dark:sg:bg-input/30 sg:border-input sg:flex sg:h-9 sg:w-full sg:min-w-0 sg:rounded-md sg:border sg:bg-transparent sg:px-3 sg:py-1 sg:text-base sg:shadow-xs sg:transition-[color,box-shadow] sg:outline-none file:sg:inline-flex file:sg:h-7 file:sg:border-0 file:sg:bg-transparent file:sg:text-sm file:sg:font-medium disabled:sg:pointer-events-none disabled:sg:cursor-not-allowed disabled:sg:opacity-50 md:sg:text-sm",
-        "focus-visible:sg:border-ring focus-visible:sg:ring-ring/50 focus-visible:sg:ring-[3px]",
-        "aria-invalid:sg:ring-destructive/20 dark:aria-invalid:sg:ring-destructive/40 aria-invalid:sg:border-destructive",
+        "sg:file:text-foreground sg:placeholder:text-muted-foreground sg:selection:bg-primary sg:selection:text-primary-foreground sg:dark:bg-input/30 sg:border-input sg:flex sg:h-9 sg:w-full sg:min-w-0 sg:rounded-md sg:border sg:bg-transparent sg:px-3 sg:py-1 sg:text-base sg:shadow-xs sg:transition-[color,box-shadow] sg:outline-none sg:file:inline-flex sg:file:h-7 sg:file:border-0 sg:file:bg-transparent sg:file:text-sm sg:file:font-medium sg:disabled:pointer-events-none sg:disabled:cursor-not-allowed sg:disabled:opacity-50 sg:md:text-sm",
+        "sg:focus-visible:border-ring sg:focus-visible:ring-ring/50 sg:focus-visible:ring-[3px]",
+        "sg:aria-invalid:ring-destructive/20 sg:dark:aria-invalid:ring-destructive/40 sg:aria-invalid:border-destructive",
         className
       ),
       ...props
@@ -20440,7 +20452,7 @@ function TableHeader({ className, ...props }) {
     "thead",
     {
       "data-slot": "table-header",
-      className: cn("[&_tr]:sg:border-b", className),
+      className: cn("sg:[&_tr]:border-b", className),
       ...props
     }
   );
@@ -20450,7 +20462,7 @@ function TableBody({ className, ...props }) {
     "tbody",
     {
       "data-slot": "table-body",
-      className: cn("[&_tr:last-child]:sg:border-0", className),
+      className: cn("sg:[&_tr:last-child]:border-0", className),
       ...props
     }
   );
@@ -20461,7 +20473,7 @@ function TableFooter({ className, ...props }) {
     {
       "data-slot": "table-footer",
       className: cn(
-        "sg:bg-muted/50 sg:border-t sg:font-medium [&>tr]:last:sg:border-b-0",
+        "sg:bg-muted/50 sg:border-t sg:font-medium sg:[&>tr]:last:border-b-0",
         className
       ),
       ...props
@@ -20474,7 +20486,7 @@ function TableRow({ className, ...props }) {
     {
       "data-slot": "table-row",
       className: cn(
-        "hover:sg:bg-muted/50 data-[state=selected]:sg:bg-muted sg:border-b sg:transition-colors",
+        "sg:hover:bg-muted/50 sg:data-[state=selected]:bg-muted sg:border-b sg:transition-colors",
         className
       ),
       ...props
@@ -20487,7 +20499,7 @@ function TableHead({ className, ...props }) {
     {
       "data-slot": "table-head",
       className: cn(
-        "sg:text-foreground sg:h-10 sg:px-2 sg:text-left sg:align-middle sg:font-medium sg:whitespace-nowrap [&:has([role=checkbox])]:sg:pr-0 [&>[role=checkbox]]:sg:translate-y-[2px]",
+        "sg:text-foreground sg:h-10 sg:px-2 sg:text-left sg:align-middle sg:font-medium sg:whitespace-nowrap sg:[&:has([role=checkbox])]:pr-0 sg:[&>[role=checkbox]]:translate-y-[2px]",
         className
       ),
       ...props
@@ -20500,7 +20512,7 @@ function TableCell({ className, ...props }) {
     {
       "data-slot": "table-cell",
       className: cn(
-        "sg:p-2 sg:align-middle sg:whitespace-nowrap [&:has([role=checkbox])]:sg:pr-0 [&>[role=checkbox]]:sg:translate-y-[2px]",
+        "sg:p-2 sg:align-middle sg:whitespace-nowrap sg:[&:has([role=checkbox])]:pr-0 sg:[&>[role=checkbox]]:translate-y-[2px]",
         className
       ),
       ...props