singularity-components 0.1.98 → 0.1.100

package/dist/main.js

@@ -20945,6 +20945,13 @@ function Badge2({
     }
   );
 }
+var Badges = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: cn("sg:flex sg:flex-wrap sg:gap-2", className), ...props, children });
+};
 var buttonVariants = cva(
   "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",
   {
@@ -21005,6 +21012,99 @@ function Button({
     }
   ) });
 }
+var Card = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "sg:rounded-xl sg:bg-card sg:text-card-foreground sg:group sg:overflow-hidden sg:border-0 sg:bg-gradient-to-br sg:from-background sg:to-background/60 sg:shadow-lg sg:ring-1 sg:ring-gray/60",
+      className
+    ),
+    ...props
+  }
+));
+Card.displayName = "Card";
+var CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("sg:flex sg:flex-col sg:space-y-1.5 sg:p-6", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "sg:font-semibold sg:leading-none sg:tracking-tight",
+      className
+    ),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("sg:text-sm sg:text-muted-foreground", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardImage = React.forwardRef(
+  ({ className, src, alt = "", ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("sg:relative sg:h-48 sg:overflow-hidden", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt,
+            className: "sg:h-full sg:w-full sg:object-cover sg:transition-transform sg:duration-500 sg:group-hover:scale-105",
+            loading: "lazy"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "sg:absolute sg:inset-0 sg:bg-gradient-to-t sg:from-background/80 sg:to-transparent" })
+      ]
+    }
+  )
+);
+CardImage.displayName = "CardImage";
+var CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("sg:p-6 sg:pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("sg:flex sg:items-center sg:p-6 sg:pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+var Cards = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "sg:grid sg:gap-6 sg:sm:grid-cols-2 sg:lg:grid-cols-3",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
 var iconVariants = cva("", {
   variants: {
     size: {
@@ -21134,8 +21234,8 @@ function Layout({
     }
   );
 }
-function Col({ children, hideDiv }) {
-  return hideDiv ? /* @__PURE__ */ jsx(Fragment, { children }) : /* @__PURE__ */ jsx("div", { children });
+function Col({ children, hideDiv, className }) {
+  return hideDiv ? /* @__PURE__ */ jsx(Fragment, { children }) : /* @__PURE__ */ jsx("div", { className, children });
 }
 Layout.Col1 = Col;
 Layout.Col2 = Col;
@@ -21392,6 +21492,7 @@ var textBodyVariants = cva("", {
     },
     foreground: {
       default: "sg:text-foreground",
+      muted: "sg:text-muted-foreground",
       black: "sg:text-black",
       white: "sg:text-white",
       gray: "sg:text-gray",
@@ -21435,36 +21536,43 @@ var TextBody = ({
     }
   );
 };
-var textDisplayVariants = cva("sg:block sg:font-bold sg:tracking-tight", {
+var textDisplayVariants = cva("sg:block sg:tracking-tight", {
   variants: {
     size: {
-      sm: "sg:text-4xl",
-      md: "sg:text-5xl",
-      lg: "sg:text-6xl"
+      xs: "sg:text-xs",
+      sm: "sg:text-sm",
+      md: "sg:text-md",
+      lg: "sg:text-lg",
+      xl: "sg:text-xl",
+      "2xl": "sg:text-2xl",
+      "3xl": "sg:text-3xl"
+    },
+    weight: {
+      normal: "sg:font-normal",
+      medium: "sg:font-medium",
+      semibold: "sg:font-semibold",
+      bold: "sg:font-bold"
     },
     foreground: {
       default: "sg:text-foreground",
+      muted: "sg:text-muted-foreground",
       black: "sg:text-black",
       white: "sg:text-white",
       gray: "sg:text-gray",
       primary: "sg:text-primary",
-      secondary: "sg:text-secondary"
-    },
-    gradient: {
-      none: "",
-      true: "sg:text-transparent sg:bg-clip-text sg:bg-gradient-to-r sg:from-blue sg:via-orange sg:to-red"
+      secondary: "sg:text-secondary",
+      gradient: "sg:text-transparent sg:bg-clip-text sg:bg-gradient-to-r sg:from-blue sg:via-orange sg:to-red"
     }
   },
   defaultVariants: {
     size: "md",
-    foreground: "default",
-    gradient: "none"
+    weight: "normal",
+    foreground: "default"
   }
 });
 var TextDisplay = ({
   children,
   size,
-  gradient,
   foreground,
   className,
   ...props
@@ -21475,7 +21583,6 @@ var TextDisplay = ({
       className: cn(
         textDisplayVariants({
           size,
-          gradient,
           foreground
         }),
         className
@@ -21488,13 +21595,14 @@ var TextDisplay = ({
 var textHeadingVariants = cva("", {
   variants: {
     variant: {
-      h1: "sg:text-4xl sg:font-bold sg:tracking-tight sg:lg:text-5xl",
-      h2: "sg:text-3xl sg:font-semibold sg:tracking-tight sg:transition-colors sg:first:mt-0",
-      h3: "sg:text-2xl sg:font-semibold sg:tracking-tight",
-      h4: "sg:text-xl sg:font-semibold sg:tracking-tight"
+      h1: "sg:text-xl sg:font-bold sg:tracking-tight sg:lg:text-4xl",
+      h2: "sg:text-xl sg:font-semibold sg:tracking-tight sg:transition-colors sg:first:mt-0 sg:lg:text-3xl",
+      h3: "sg:text-xl sg:font-semibold sg:tracking-tight sg:lg:text-2xl",
+      h4: "sg:text-lg sg:font-semibold sg:tracking-tight"
     },
     foreground: {
       default: "sg:text-foreground",
+      muted: "sg:text-muted-foreground",
       black: "sg:text-black",
       white: "sg:text-white",
       gray: "sg:text-gray",
@@ -34670,6 +34778,6 @@ lucide-react/dist/esm/lucide-react.js:
    *)
 */
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge2 as Badge, Button, Icon2 as Icon, Input, Layout, Separator, Skeleton, Spinner, Stack, Table3 as Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TextBody, TextDisplay, TextHeading, badgeVariants, buttonVariants, iconVariants, layoutVariants, stackVariants };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge2 as Badge, Badges, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardImage, CardTitle, Cards, Icon2 as Icon, Input, Layout, Separator, Skeleton, Spinner, Stack, Table3 as Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TextBody, TextDisplay, TextHeading, badgeVariants, buttonVariants, iconVariants, layoutVariants, stackVariants };
 //# sourceMappingURL=main.js.map
 //# sourceMappingURL=main.js.map