singularity-components 0.1.129 → 0.1.131

package/dist/components/index.d.ts

@@ -17,7 +17,10 @@ export { TextParagraph } from './primitives/text/text-paragraph.js';
 export { TextSpan } from './primitives/text/text-span.js';
 export { TextTime } from './primitives/text/text-time.js';
 export { UiImage } from './primitives/ui-image.js';
-export { BaseImageProps, ImageComponentType, ImageProvider, useImage } from './providers/ImageContext.js';
+export { UiLink } from './primitives/ui-link.js';
+export { BaseImageProps, DefaultImage, ImageComponentType, ImageProvider, useImage } from './providers/ImageContext.js';
+export { BaseLinkProps, DefaultLink, LinkComponentType, LinkProvider, useLink } from './providers/LinkContext.js';
+export { SingularityProvider } from './providers/SingularityContext.js';
 export { BlogPost } from './units/cards/blog-card.js';
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardImage, CardTitle } from './units/cards/card.js';
 export { Cards, CardsProps, getGridColsClass } from './units/cards/cards.js';

package/dist/components/primitives/button/button.js

@@ -47,24 +47,48 @@ function Button({
   const iconAnimateCss = "sg:animate-spin";
   const LucideIconStart = iconStart && icons[iconStart];
   const LucideIconEnd = iconEnd && icons[iconEnd];
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+  if (asChild) {
+    const child = React.Children.only(children);
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        "data-slot": "button",
+        className: cn(buttonVariantsProps({ variant, size, className })),
+        ...props,
+        children: React.cloneElement(
+          child,
+          {},
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            LucideIconStart && /* @__PURE__ */ jsx(
+              LucideIconStart,
+              {
+                className: clsx(iconStartAnimate && iconAnimateCss)
+              }
+            ),
+            child.props.children,
+            LucideIconEnd && /* @__PURE__ */ jsx(
+              LucideIconEnd,
+              {
+                className: clsx(iconEndAnimate && iconAnimateCss)
+              }
+            )
+          ] })
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
     Comp,
     {
-      "data-slot": "button",
       className: cn(buttonVariantsProps({ variant, size, className })),
       ...props,
       children: [
-        LucideIconStart && /* @__PURE__ */ jsx(
-          LucideIconStart,
-          {
-            className: clsx(iconStartAnimate && iconAnimateCss)
-          }
-        ),
+        LucideIconStart && /* @__PURE__ */ jsx(LucideIconStart, { className: clsx(iconStartAnimate && iconAnimateCss) }),
         children,
         LucideIconEnd && /* @__PURE__ */ jsx(LucideIconEnd, { className: clsx(iconEndAnimate && iconAnimateCss) })
       ]
     }
-  ) });
+  );
 }
 export {
   Button,

package/dist/components/primitives/button/button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/primitives/button/button.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { icons } from \"lucide-react\";\r\nimport clsx from \"clsx\";\r\nimport { cn } from \"../../../utils\";\r\n\r\nconst buttonVariants = {\r\n  variant: {\r\n    default:\r\n      \"sg:bg-primary sg:text-primary-foreground sg:shadow-xs sg:hover:bg-primary/90\",\r\n    destructive:\r\n      \"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\",\r\n    outline:\r\n      \"sg:border sg:border-border sg:shadow-xs sg:hover:bg-accent sg:hover:text-accent-foreground\",\r\n    secondary:\r\n      \"sg:bg-secondary sg:text-secondary-foreground sg:shadow-xs sg:hover:bg-secondary/80\",\r\n    ghost:\r\n      \"sg:hover:bg-accent sg:hover:text-accent-foreground sg:dark:hover:bg-accent/50\",\r\n    link: \"sg:text-primary sg:underline-offset-4 sg:hover:underline\",\r\n  },\r\n  size: {\r\n    default: \"sg:h-9 sg:px-4 sg:py-2 sg:has-[>svg]:px-3\",\r\n    sm: \"sg:h-8 sg:rounded-md sg:gap-1.5 sg:px-3 sg:has-[>svg]:px-2.5\",\r\n    lg: \"sg:h-10 sg:rounded-md sg:px-6 sg:has-[>svg]:px-4\",\r\n    icon: \"sg:size-9\",\r\n  },\r\n};\r\n\r\nconst buttonVariantsProps = cva(\r\n  \"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\",\r\n  {\r\n    variants: buttonVariants,\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n      size: \"default\",\r\n    },\r\n  }\r\n);\r\n\r\ntype Props = React.ComponentProps<\"button\"> &\r\n  VariantProps<typeof buttonVariantsProps> & {\r\n    asChild?: boolean;\r\n    iconStart?: keyof typeof icons;\r\n    iconStartAnimate?: boolean;\r\n    iconEnd?: keyof typeof icons;\r\n    iconEndAnimate?: boolean;\r\n  };\r\n\r\nfunction Button({\r\n  className,\r\n  variant,\r\n  size,\r\n  asChild = false,\r\n  iconStart,\r\n  iconStartAnimate,\r\n  iconEnd,\r\n  iconEndAnimate,\r\n  children,\r\n  ...props\r\n}: Props) {\r\n  const Comp = asChild ? Slot : \"button\";\r\n  const iconAnimateCss = \"sg:animate-spin\";\r\n\r\n  const LucideIconStart = iconStart && icons[iconStart];\r\n  const LucideIconEnd = iconEnd && icons[iconEnd];\r\n\r\n  return (\r\n    <>\r\n      <Comp\r\n        data-slot=\"button\"\r\n        className={cn(buttonVariantsProps({ variant, size, className }))}\r\n        {...props}\r\n      >\r\n        {LucideIconStart && (\r\n          <LucideIconStart\r\n            className={clsx(iconStartAnimate && iconAnimateCss)}\r\n          />\r\n        )}\r\n        {children}\r\n        {LucideIconEnd && (\r\n          <LucideIconEnd className={clsx(iconEndAnimate && iconAnimateCss)} />\r\n        )}\r\n      </Comp>\r\n    </>\r\n  );\r\n}\r\n\r\nexport { Button, buttonVariantsProps, buttonVariants };\r\n"],"mappings":"AAoEI,mBAOM,KANJ,YADF;AApEJ,YAAY,WAAW;AACvB,SAAS,YAAY;AACrB,SAAS,WAA8B;AACvC,SAAS,aAAa;AACtB,OAAO,UAAU;AACjB,SAAS,UAAU;AAEnB,MAAM,iBAAiB;AAAA,EACrB,SAAS;AAAA,IACP,SACE;AAAA,IACF,aACE;AAAA,IACF,SACE;AAAA,IACF,WACE;AAAA,IACF,OACE;AAAA,IACF,MAAM;AAAA,EACR;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,EACR;AACF;AAEA,MAAM,sBAAsB;AAAA,EAC1B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAWA,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAU;AACR,QAAM,OAAO,UAAU,OAAO;AAC9B,QAAM,iBAAiB;AAEvB,QAAM,kBAAkB,aAAa,MAAM,SAAS;AACpD,QAAM,gBAAgB,WAAW,MAAM,OAAO;AAE9C,SACE,gCACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,oBAAoB,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,MAC9D,GAAG;AAAA,MAEH;AAAA,2BACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,KAAK,oBAAoB,cAAc;AAAA;AAAA,QACpD;AAAA,QAED;AAAA,QACA,iBACC,oBAAC,iBAAc,WAAW,KAAK,kBAAkB,cAAc,GAAG;AAAA;AAAA;AAAA,EAEtE,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/primitives/button/button.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { icons } from \"lucide-react\";\r\nimport clsx from \"clsx\";\r\nimport { cn } from \"../../../utils\";\r\n\r\nconst buttonVariants = {\r\n  variant: {\r\n    default:\r\n      \"sg:bg-primary sg:text-primary-foreground sg:shadow-xs sg:hover:bg-primary/90\",\r\n    destructive:\r\n      \"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\",\r\n    outline:\r\n      \"sg:border sg:border-border sg:shadow-xs sg:hover:bg-accent sg:hover:text-accent-foreground\",\r\n    secondary:\r\n      \"sg:bg-secondary sg:text-secondary-foreground sg:shadow-xs sg:hover:bg-secondary/80\",\r\n    ghost:\r\n      \"sg:hover:bg-accent sg:hover:text-accent-foreground sg:dark:hover:bg-accent/50\",\r\n    link: \"sg:text-primary sg:underline-offset-4 sg:hover:underline\",\r\n  },\r\n  size: {\r\n    default: \"sg:h-9 sg:px-4 sg:py-2 sg:has-[>svg]:px-3\",\r\n    sm: \"sg:h-8 sg:rounded-md sg:gap-1.5 sg:px-3 sg:has-[>svg]:px-2.5\",\r\n    lg: \"sg:h-10 sg:rounded-md sg:px-6 sg:has-[>svg]:px-4\",\r\n    icon: \"sg:size-9\",\r\n  },\r\n};\r\n\r\nconst buttonVariantsProps = cva(\r\n  \"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\",\r\n  {\r\n    variants: buttonVariants,\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n      size: \"default\",\r\n    },\r\n  }\r\n);\r\n\r\ntype Props = React.ComponentProps<\"button\"> &\r\n  VariantProps<typeof buttonVariantsProps> & {\r\n    asChild?: boolean;\r\n    iconStart?: keyof typeof icons;\r\n    iconStartAnimate?: boolean;\r\n    iconEnd?: keyof typeof icons;\r\n    iconEndAnimate?: boolean;\r\n  };\r\n\r\nfunction Button({\r\n  className,\r\n  variant,\r\n  size,\r\n  asChild = false,\r\n  iconStart,\r\n  iconStartAnimate,\r\n  iconEnd,\r\n  iconEndAnimate,\r\n  children,\r\n  ...props\r\n}: Props) {\r\n  const Comp = asChild ? Slot : \"button\";\r\n  const iconAnimateCss = \"sg:animate-spin\";\r\n\r\n  const LucideIconStart = iconStart && icons[iconStart];\r\n  const LucideIconEnd = iconEnd && icons[iconEnd];\r\n\r\n  if (asChild) {\r\n    const child = React.Children.only(children) as React.ReactElement<{\r\n      children?: React.ReactNode;\r\n    }>;\r\n\r\n    return (\r\n      <Comp\r\n        data-slot=\"button\"\r\n        className={cn(buttonVariantsProps({ variant, size, className }))}\r\n        {...props}\r\n      >\r\n        {React.cloneElement(\r\n          child,\r\n          {},\r\n          <>\r\n            {LucideIconStart && (\r\n              <LucideIconStart\r\n                className={clsx(iconStartAnimate && iconAnimateCss)}\r\n              />\r\n            )}\r\n            {child.props.children}\r\n            {LucideIconEnd && (\r\n              <LucideIconEnd\r\n                className={clsx(iconEndAnimate && iconAnimateCss)}\r\n              />\r\n            )}\r\n          </>\r\n        )}\r\n      </Comp>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <Comp\r\n      className={cn(buttonVariantsProps({ variant, size, className }))}\r\n      {...props}\r\n    >\r\n      {LucideIconStart && (\r\n        <LucideIconStart className={clsx(iconStartAnimate && iconAnimateCss)} />\r\n      )}\r\n      {children}\r\n      {LucideIconEnd && (\r\n        <LucideIconEnd className={clsx(iconEndAnimate && iconAnimateCss)} />\r\n      )}\r\n    </Comp>\r\n  );\r\n}\r\n\r\nexport { Button, buttonVariantsProps, buttonVariants };\r\n"],"mappings":"AAiFU,mBAEI,KAFJ;AAjFV,YAAY,WAAW;AACvB,SAAS,YAAY;AACrB,SAAS,WAA8B;AACvC,SAAS,aAAa;AACtB,OAAO,UAAU;AACjB,SAAS,UAAU;AAEnB,MAAM,iBAAiB;AAAA,EACrB,SAAS;AAAA,IACP,SACE;AAAA,IACF,aACE;AAAA,IACF,SACE;AAAA,IACF,WACE;AAAA,IACF,OACE;AAAA,IACF,MAAM;AAAA,EACR;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,EACR;AACF;AAEA,MAAM,sBAAsB;AAAA,EAC1B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAWA,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAU;AACR,QAAM,OAAO,UAAU,OAAO;AAC9B,QAAM,iBAAiB;AAEvB,QAAM,kBAAkB,aAAa,MAAM,SAAS;AACpD,QAAM,gBAAgB,WAAW,MAAM,OAAO;AAE9C,MAAI,SAAS;AACX,UAAM,QAAQ,MAAM,SAAS,KAAK,QAAQ;AAI1C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,WAAW,GAAG,oBAAoB,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,QAC9D,GAAG;AAAA,QAEH,gBAAM;AAAA,UACL;AAAA,UACA,CAAC;AAAA,UACD,iCACG;AAAA,+BACC;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,KAAK,oBAAoB,cAAc;AAAA;AAAA,YACpD;AAAA,YAED,MAAM,MAAM;AAAA,YACZ,iBACC;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,KAAK,kBAAkB,cAAc;AAAA;AAAA,YAClD;AAAA,aAEJ;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,oBAAoB,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,MAC9D,GAAG;AAAA,MAEH;AAAA,2BACC,oBAAC,mBAAgB,WAAW,KAAK,oBAAoB,cAAc,GAAG;AAAA,QAEvE;AAAA,QACA,iBACC,oBAAC,iBAAc,WAAW,KAAK,kBAAkB,cAAc,GAAG;AAAA;AAAA;AAAA,EAEtE;AAEJ;","names":[]}

package/dist/components/primitives/index.d.ts

@@ -17,6 +17,7 @@ export { TextParagraph } from './text/text-paragraph.js';
 export { TextSpan } from './text/text-span.js';
 export { TextTime } from './text/text-time.js';
 export { UiImage } from './ui-image.js';
+export { UiLink } from './ui-link.js';
 import 'react/jsx-runtime';
 import 'react';
 import '@radix-ui/react-accordion';
@@ -27,3 +28,4 @@ import '@radix-ui/react-separator';
 import './text/internal/text-element.js';
 import '../../lib/types.js';
 import '../providers/ImageContext.js';
+import '../providers/LinkContext.js';

package/dist/components/primitives/index.js

@@ -17,4 +17,5 @@ export * from "./text/text-paragraph";
 export * from "./text/text-span";
 export * from "./text/text-time";
 export * from "./ui-image";
+export * from "./ui-link";
 //# sourceMappingURL=index.js.map

package/dist/components/primitives/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/primitives/index.ts"],"sourcesContent":["export * from \"./accordion/accordion\";\r\nexport * from \"./alert/alert\";\r\nexport * from \"./badge/badge\";\r\nexport * from \"./badge/badges\";\r\nexport * from \"./button/button\";\r\nexport * from \"./icon/icon\";\r\nexport * from \"./input/input\";\r\nexport * from \"./layout/layout\";\r\nexport * from \"./separator/separator\";\r\nexport * from \"./skeleton/skeleton\";\r\nexport * from \"./spinner/spinner\";\r\nexport * from \"./stack/stack\";\r\nexport * from \"./table/table\";\r\nexport * from \"./text/text-div\";\r\nexport * from \"./text/text-heading\";\r\nexport * from \"./text/text-paragraph\";\r\nexport * from \"./text/text-span\";\r\nexport * from \"./text/text-time\";\r\nexport * from \"./ui-image\";\r\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/primitives/index.ts"],"sourcesContent":["export * from \"./accordion/accordion\";\r\nexport * from \"./alert/alert\";\r\nexport * from \"./badge/badge\";\r\nexport * from \"./badge/badges\";\r\nexport * from \"./button/button\";\r\nexport * from \"./icon/icon\";\r\nexport * from \"./input/input\";\r\nexport * from \"./layout/layout\";\r\nexport * from \"./separator/separator\";\r\nexport * from \"./skeleton/skeleton\";\r\nexport * from \"./spinner/spinner\";\r\nexport * from \"./stack/stack\";\r\nexport * from \"./table/table\";\r\nexport * from \"./text/text-div\";\r\nexport * from \"./text/text-heading\";\r\nexport * from \"./text/text-paragraph\";\r\nexport * from \"./text/text-span\";\r\nexport * from \"./text/text-time\";\r\nexport * from \"./ui-image\";\r\nexport * from \"./ui-link\";\r\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/components/primitives/layout/layout.js

@@ -10,7 +10,7 @@ const bgColors = {
   pink: "sg:bg-pink",
   gradient1: "sg:bg-[linear-gradient(135deg,hsl(var(--sg-primary-light))_0%,hsl(var(--sg-pink))_50%,hsl(var(--sg-orange))_100%)]",
   gradient2: "sg:bg-[radial-gradient(1200px_300px_at_10%_-20%,hsl(var(--sg-gradient-1)/0.15),transparent),radial-gradient(800px_200px_at_90%_-20%,hsl(var(--sg-gradient-2)/0.15),transparent)]",
-  "primarylight-pink-orange": "sg:bg-[linear-gradient(135deg,hsl(var(--sg-primary-light)/0.1)_0%,hsl(var(--sg-pink)/0.1)_50%,hsl(var(--sg-orange)/0.1)_100%)]"
+  "primarylight-pink-orange": "sg:bg-[linear-gradient(135deg,hsl(var(--sg-primary-light)/0.1)_0%,hsl(var(--sg-pink)/0.1)_50%,hsl(var(--sg-orange)/0.1)_100%)] sg:[mask-image:linear-gradient(to_bottom,hsl(var(--sg-white))_0%,hsl(var(--sg-white))_60%,transparent_100%)] sg:dark:[mask-image:linear-gradient(to_bottom,hsl(var(--sg-black))_0%,hsl(var(--sg-black))_60%,transparent_100%)]"
 };
 const layoutVariants = {
   type: {

package/dist/components/primitives/layout/layout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/primitives/layout/layout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\n\nconst bgColors = {\n  transparent: \"sg:bg-transparent\",\n  white: \"sg:bg-white\",\n  black: \"sg:bg-black\",\n  orange: \"sg:bg-orange\",\n  pink: \"sg:bg-pink\",\n  gradient1:\n    \"sg:bg-[linear-gradient(135deg,hsl(var(--sg-primary-light))_0%,hsl(var(--sg-pink))_50%,hsl(var(--sg-orange))_100%)]\",\n  gradient2:\n    \"sg:bg-[radial-gradient(1200px_300px_at_10%_-20%,hsl(var(--sg-gradient-1)/0.15),transparent),radial-gradient(800px_200px_at_90%_-20%,hsl(var(--sg-gradient-2)/0.15),transparent)]\",\n  \"primarylight-pink-orange\":\n    \"sg:bg-[linear-gradient(135deg,hsl(var(--sg-primary-light)/0.1)_0%,hsl(var(--sg-pink)/0.1)_50%,hsl(var(--sg-orange)/0.1)_100%)]\",\n};\n\nconst layoutVariants = {\n  type: {\n    full: \"sg:w-full\",\n    wide: \"sg:w-full sg:px-4\",\n    col: \"sg:mx-auto sg:max-w-[768px] sg:px-4 sg:md:px-0\",\n  },\n  cols: {\n    \"100\": \"\",\n    \"66-33\": \"sg:md:grid-cols-[2fr_1fr]\",\n    \"50-50\": \"sg:md:grid-cols-2\",\n    \"33-33-33\": \"sg:md:grid-cols-3\",\n    \"25-25-25-25\": \"sg:md:grid-cols-4\",\n  },\n  bgColor: bgColors,\n};\n\nconst layoutVariantsProps = cva(\"sg:grid sg:grid-cols-1 sg:gap-4\", {\n  variants: layoutVariants,\n  defaultVariants: {\n    type: \"col\",\n    cols: \"100\",\n  },\n});\n\nexport interface LayoutProps\n  extends React.HTMLAttributes<HTMLElement>,\n    VariantProps<typeof layoutVariantsProps> {\n  as?: \"div\" | \"section\" | \"article\" | \"main\" | \"header\" | \"footer\";\n}\n\nfunction Layout({\n  children,\n  className,\n  type,\n  cols,\n  bgColor,\n  as: Component = \"div\",\n  ...props\n}: React.PropsWithChildren<LayoutProps>) {\n  const allowedInLayout = (\n    content: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  ): boolean => {\n    if (content.type === Layout.Col1) {\n      return true;\n    } else if (\n      content.type === Layout.Col2 &&\n      (cols === \"66-33\" ||\n        cols === \"50-50\" ||\n        cols === \"33-33-33\" ||\n        cols === \"25-25-25-25\")\n    ) {\n      return true;\n    } else if (\n      content.type === Layout.Col3 &&\n      (cols === \"33-33-33\" || cols === \"25-25-25-25\")\n    ) {\n      return true;\n    } else if (content.type === Layout.Col4 && cols === \"25-25-25-25\") {\n      return true;\n    }\n\n    console.error(\n      \"Content not allowed in column for variant\",\n      cols,\n      content.type\n    );\n    return false;\n  };\n\n  const renderColumn = (\n    content: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  ) => {\n    if (!allowedInLayout(content)) {\n      return;\n    }\n    return content;\n  };\n\n  return (\n    <Component\n      {...props}\n      className={cn(bgColors[bgColor ?? \"transparent\"], className)}\n    >\n      <div className={cn(layoutVariantsProps({ type, cols }))}>\n        {React.Children.map(children, (child) =>\n          React.isValidElement(child) ? renderColumn(child) : <></>\n        )}\n      </div>\n    </Component>\n  );\n}\n\ntype colProp = {\n  children?: React.ReactNode;\n  hideDiv?: boolean;\n  className?: string;\n  as?: \"div\" | \"section\" | \"article\" | \"main\" | \"header\" | \"footer\";\n};\n\nfunction Col({ children, hideDiv, className, as: Component = \"div\" }: colProp) {\n  return hideDiv ? (\n    <>{children}</>\n  ) : (\n    <Component className={className}>{children}</Component>\n  );\n}\n\nLayout.Col1 = Col;\nLayout.Col2 = Col;\nLayout.Col3 = Col;\nLayout.Col4 = Col;\n\nexport { Layout, layoutVariantsProps, layoutVariants };\n"],"mappings":"AAuG8D;AAvG9D,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,UAAU;AAEnB,MAAM,WAAW;AAAA,EACf,aAAa;AAAA,EACb,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,WACE;AAAA,EACF,WACE;AAAA,EACF,4BACE;AACJ;AAEA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,eAAe;AAAA,EACjB;AAAA,EACA,SAAS;AACX;AAEA,MAAM,sBAAsB,IAAI,mCAAmC;AAAA,EACjE,UAAU;AAAA,EACV,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF,CAAC;AAQD,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI,YAAY;AAAA,EAChB,GAAG;AACL,GAAyC;AACvC,QAAM,kBAAkB,CACtB,YACY;AACZ,QAAI,QAAQ,SAAS,OAAO,MAAM;AAChC,aAAO;AAAA,IACT,WACE,QAAQ,SAAS,OAAO,SACvB,SAAS,WACR,SAAS,WACT,SAAS,cACT,SAAS,gBACX;AACA,aAAO;AAAA,IACT,WACE,QAAQ,SAAS,OAAO,SACvB,SAAS,cAAc,SAAS,gBACjC;AACA,aAAO;AAAA,IACT,WAAW,QAAQ,SAAS,OAAO,QAAQ,SAAS,eAAe;AACjE,aAAO;AAAA,IACT;AAEA,YAAQ;AAAA,MACN;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,IACV;AACA,WAAO;AAAA,EACT;AAEA,QAAM,eAAe,CACnB,YACG;AACH,QAAI,CAAC,gBAAgB,OAAO,GAAG;AAC7B;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,SAAS,WAAW,aAAa,GAAG,SAAS;AAAA,MAE3D,8BAAC,SAAI,WAAW,GAAG,oBAAoB,EAAE,MAAM,KAAK,CAAC,CAAC,GACnD,gBAAM,SAAS;AAAA,QAAI;AAAA,QAAU,CAAC,UAC7B,MAAM,eAAe,KAAK,IAAI,aAAa,KAAK,IAAI,gCAAE;AAAA,MACxD,GACF;AAAA;AAAA,EACF;AAEJ;AASA,SAAS,IAAI,EAAE,UAAU,SAAS,WAAW,IAAI,YAAY,MAAM,GAAY;AAC7E,SAAO,UACL,gCAAG,UAAS,IAEZ,oBAAC,aAAU,WAAuB,UAAS;AAE/C;AAEA,OAAO,OAAO;AACd,OAAO,OAAO;AACd,OAAO,OAAO;AACd,OAAO,OAAO;","names":[]}
+{"version":3,"sources":["../../../../src/components/primitives/layout/layout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\n\nconst bgColors = {\n  transparent: \"sg:bg-transparent\",\n  white: \"sg:bg-white\",\n  black: \"sg:bg-black\",\n  orange: \"sg:bg-orange\",\n  pink: \"sg:bg-pink\",\n  gradient1:\n    \"sg:bg-[linear-gradient(135deg,hsl(var(--sg-primary-light))_0%,hsl(var(--sg-pink))_50%,hsl(var(--sg-orange))_100%)]\",\n  gradient2:\n    \"sg:bg-[radial-gradient(1200px_300px_at_10%_-20%,hsl(var(--sg-gradient-1)/0.15),transparent),radial-gradient(800px_200px_at_90%_-20%,hsl(var(--sg-gradient-2)/0.15),transparent)]\",\n  \"primarylight-pink-orange\":\n    \"sg:bg-[linear-gradient(135deg,hsl(var(--sg-primary-light)/0.1)_0%,hsl(var(--sg-pink)/0.1)_50%,hsl(var(--sg-orange)/0.1)_100%)] sg:[mask-image:linear-gradient(to_bottom,hsl(var(--sg-white))_0%,hsl(var(--sg-white))_60%,transparent_100%)] sg:dark:[mask-image:linear-gradient(to_bottom,hsl(var(--sg-black))_0%,hsl(var(--sg-black))_60%,transparent_100%)]\",\n};\n\nconst layoutVariants = {\n  type: {\n    full: \"sg:w-full\",\n    wide: \"sg:w-full sg:px-4\",\n    col: \"sg:mx-auto sg:max-w-[768px] sg:px-4 sg:md:px-0\",\n  },\n  cols: {\n    \"100\": \"\",\n    \"66-33\": \"sg:md:grid-cols-[2fr_1fr]\",\n    \"50-50\": \"sg:md:grid-cols-2\",\n    \"33-33-33\": \"sg:md:grid-cols-3\",\n    \"25-25-25-25\": \"sg:md:grid-cols-4\",\n  },\n  bgColor: bgColors,\n};\n\nconst layoutVariantsProps = cva(\"sg:grid sg:grid-cols-1 sg:gap-4\", {\n  variants: layoutVariants,\n  defaultVariants: {\n    type: \"col\",\n    cols: \"100\",\n  },\n});\n\nexport interface LayoutProps\n  extends React.HTMLAttributes<HTMLElement>,\n    VariantProps<typeof layoutVariantsProps> {\n  as?: \"div\" | \"section\" | \"article\" | \"main\" | \"header\" | \"footer\";\n}\n\nfunction Layout({\n  children,\n  className,\n  type,\n  cols,\n  bgColor,\n  as: Component = \"div\",\n  ...props\n}: React.PropsWithChildren<LayoutProps>) {\n  const allowedInLayout = (\n    content: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  ): boolean => {\n    if (content.type === Layout.Col1) {\n      return true;\n    } else if (\n      content.type === Layout.Col2 &&\n      (cols === \"66-33\" ||\n        cols === \"50-50\" ||\n        cols === \"33-33-33\" ||\n        cols === \"25-25-25-25\")\n    ) {\n      return true;\n    } else if (\n      content.type === Layout.Col3 &&\n      (cols === \"33-33-33\" || cols === \"25-25-25-25\")\n    ) {\n      return true;\n    } else if (content.type === Layout.Col4 && cols === \"25-25-25-25\") {\n      return true;\n    }\n\n    console.error(\n      \"Content not allowed in column for variant\",\n      cols,\n      content.type\n    );\n    return false;\n  };\n\n  const renderColumn = (\n    content: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  ) => {\n    if (!allowedInLayout(content)) {\n      return;\n    }\n    return content;\n  };\n\n  return (\n    <Component\n      {...props}\n      className={cn(bgColors[bgColor ?? \"transparent\"], className)}\n    >\n      <div className={cn(layoutVariantsProps({ type, cols }))}>\n        {React.Children.map(children, (child) =>\n          React.isValidElement(child) ? renderColumn(child) : <></>\n        )}\n      </div>\n    </Component>\n  );\n}\n\ntype colProp = {\n  children?: React.ReactNode;\n  hideDiv?: boolean;\n  className?: string;\n  as?: \"div\" | \"section\" | \"article\" | \"main\" | \"header\" | \"footer\";\n};\n\nfunction Col({ children, hideDiv, className, as: Component = \"div\" }: colProp) {\n  return hideDiv ? (\n    <>{children}</>\n  ) : (\n    <Component className={className}>{children}</Component>\n  );\n}\n\nLayout.Col1 = Col;\nLayout.Col2 = Col;\nLayout.Col3 = Col;\nLayout.Col4 = Col;\n\nexport { Layout, layoutVariantsProps, layoutVariants };\n"],"mappings":"AAuG8D;AAvG9D,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,UAAU;AAEnB,MAAM,WAAW;AAAA,EACf,aAAa;AAAA,EACb,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,WACE;AAAA,EACF,WACE;AAAA,EACF,4BACE;AACJ;AAEA,MAAM,iBAAiB;AAAA,EACrB,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,KAAK;AAAA,EACP;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,eAAe;AAAA,EACjB;AAAA,EACA,SAAS;AACX;AAEA,MAAM,sBAAsB,IAAI,mCAAmC;AAAA,EACjE,UAAU;AAAA,EACV,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF,CAAC;AAQD,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI,YAAY;AAAA,EAChB,GAAG;AACL,GAAyC;AACvC,QAAM,kBAAkB,CACtB,YACY;AACZ,QAAI,QAAQ,SAAS,OAAO,MAAM;AAChC,aAAO;AAAA,IACT,WACE,QAAQ,SAAS,OAAO,SACvB,SAAS,WACR,SAAS,WACT,SAAS,cACT,SAAS,gBACX;AACA,aAAO;AAAA,IACT,WACE,QAAQ,SAAS,OAAO,SACvB,SAAS,cAAc,SAAS,gBACjC;AACA,aAAO;AAAA,IACT,WAAW,QAAQ,SAAS,OAAO,QAAQ,SAAS,eAAe;AACjE,aAAO;AAAA,IACT;AAEA,YAAQ;AAAA,MACN;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,IACV;AACA,WAAO;AAAA,EACT;AAEA,QAAM,eAAe,CACnB,YACG;AACH,QAAI,CAAC,gBAAgB,OAAO,GAAG;AAC7B;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,SAAS,WAAW,aAAa,GAAG,SAAS;AAAA,MAE3D,8BAAC,SAAI,WAAW,GAAG,oBAAoB,EAAE,MAAM,KAAK,CAAC,CAAC,GACnD,gBAAM,SAAS;AAAA,QAAI;AAAA,QAAU,CAAC,UAC7B,MAAM,eAAe,KAAK,IAAI,aAAa,KAAK,IAAI,gCAAE;AAAA,MACxD,GACF;AAAA;AAAA,EACF;AAEJ;AASA,SAAS,IAAI,EAAE,UAAU,SAAS,WAAW,IAAI,YAAY,MAAM,GAAY;AAC7E,SAAO,UACL,gCAAG,UAAS,IAEZ,oBAAC,aAAU,WAAuB,UAAS;AAE/C;AAEA,OAAO,OAAO;AACd,OAAO,OAAO;AACd,OAAO,OAAO;AACd,OAAO,OAAO;","names":[]}

package/dist/components/primitives/separator/separator.js

@@ -1,37 +1,27 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import { cn } from "../../../utils";
-import { UiImage } from "../ui-image";
 function Separator({
   className,
   orientation = "horizontal",
   decorative = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      SeparatorPrimitive.Root,
-      {
-        "data-slot": "separator",
-        decorative,
-        orientation,
-        className: cn(
-          "sg:bg-border sg:shrink-0 sg:data-[orientation=horizontal]:h-px sg:data-[orientation=horizontal]:w-full sg:data-[orientation=vertical]:h-full sg:data-[orientation=vertical]:w-px sg:my-4",
-          className
-        ),
-        ...props
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      UiImage,
-      {
-        src: "https://imgcdn.stablediffusionweb.com/2024/5/14/a3099eb1-b368-4bff-9d99-9a929c44b9a1.jpg",
-        alt: ""
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(
+    SeparatorPrimitive.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "sg:bg-border sg:shrink-0 sg:data-[orientation=horizontal]:h-px sg:data-[orientation=horizontal]:w-full sg:data-[orientation=vertical]:h-full sg:data-[orientation=vertical]:w-px sg:my-4",
+        className
+      ),
+      ...props
+    }
+  );
 }
 export {
   Separator

package/dist/components/primitives/separator/separator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/primitives/separator/separator.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\";\nimport { cn } from \"../../../utils\";\nimport { UiImage } from \"../ui-image\";\n\nexport function Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <>\n      <SeparatorPrimitive.Root\n        data-slot=\"separator\"\n        decorative={decorative}\n        orientation={orientation}\n        className={cn(\n          \"sg:bg-border sg:shrink-0 sg:data-[orientation=horizontal]:h-px sg:data-[orientation=horizontal]:w-full sg:data-[orientation=vertical]:h-full sg:data-[orientation=vertical]:w-px sg:my-4\",\n          className\n        )}\n        {...props}\n      />\n      <UiImage\n        src=\"https://imgcdn.stablediffusionweb.com/2024/5/14/a3099eb1-b368-4bff-9d99-9a929c44b9a1.jpg\"\n        alt=\"\"\n        // width=\"100\"\n        // height=\"100\"\n      />\n    </>\n  );\n}\n"],"mappings":";AAcI,mBACE,KADF;AAZJ,YAAY,WAAW;AACvB,YAAY,wBAAwB;AACpC,SAAS,UAAU;AACnB,SAAS,eAAe;AAEjB,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,cAAc;AAAA,EACd,aAAa;AAAA,EACb,GAAG;AACL,GAAyD;AACvD,SACE,iCACE;AAAA;AAAA,MAAC,mBAAmB;AAAA,MAAnB;AAAA,QACC,aAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAI;AAAA,QACJ,KAAI;AAAA;AAAA,IAGN;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/primitives/separator/separator.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\";\nimport { cn } from \"../../../utils\";\n\nexport function Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"sg:bg-border sg:shrink-0 sg:data-[orientation=horizontal]:h-px sg:data-[orientation=horizontal]:w-full sg:data-[orientation=vertical]:h-full sg:data-[orientation=vertical]:w-px sg:my-4\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":";AAYI;AAXJ,YAAY,WAAW;AACvB,YAAY,wBAAwB;AACpC,SAAS,UAAU;AAEZ,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,cAAc;AAAA,EACd,aAAa;AAAA,EACb,GAAG;AACL,GAAyD;AACvD,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/primitives/ui-image.js

@@ -1,16 +1,25 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import React, { useEffect, useState } from "react";
-import { useImage } from "../providers/ImageContext";
+import {
+  DefaultImage,
+  useImage
+} from "../providers/ImageContext";
 const UiImage = (props) => {
   const [isClient, setIsClient] = useState(false);
   const ImageComponent = useImage();
-  console.log("UiImage", props);
   useEffect(() => {
     setIsClient(true);
   }, []);
   if (!isClient) {
-    return /* @__PURE__ */ jsx("img", { src: props.src, alt: props.alt, className: props.className });
+    return /* @__PURE__ */ jsx(
+      DefaultImage,
+      {
+        src: props.src,
+        alt: props.alt,
+        className: props.className
+      }
+    );
   }
   return /* @__PURE__ */ jsx(ImageComponent, { ...props });
 };

package/dist/components/primitives/ui-image.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/primitives/ui-image.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { useImage, type BaseImageProps } from \"../providers/ImageContext\";\r\n\r\nexport const UiImage: React.FC<BaseImageProps> = (props) => {\r\n  const [isClient, setIsClient] = useState(false);\r\n  const ImageComponent = useImage();\r\n\r\n  console.log(\"UiImage\", props);\r\n\r\n  useEffect(() => {\r\n    setIsClient(true);\r\n  }, []);\r\n\r\n  if (!isClient) {\r\n    return <img src={props.src} alt={props.alt} className={props.className} />;\r\n  }\r\n\r\n  return <ImageComponent {...props} />;\r\n};\r\n"],"mappings":";AAeW;AAdX,OAAO,SAAS,WAAW,gBAAgB;AAC3C,SAAS,gBAAqC;AAEvC,MAAM,UAAoC,CAAC,UAAU;AAC1D,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,iBAAiB,SAAS;AAEhC,UAAQ,IAAI,WAAW,KAAK;AAE5B,YAAU,MAAM;AACd,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,UAAU;AACb,WAAO,oBAAC,SAAI,KAAK,MAAM,KAAK,KAAK,MAAM,KAAK,WAAW,MAAM,WAAW;AAAA,EAC1E;AAEA,SAAO,oBAAC,kBAAgB,GAAG,OAAO;AACpC;","names":[]}
+{"version":3,"sources":["../../../src/components/primitives/ui-image.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport {\r\n  DefaultImage,\r\n  useImage,\r\n  type BaseImageProps,\r\n} from \"../providers/ImageContext\";\r\n\r\nexport const UiImage: React.FC<BaseImageProps> = (props) => {\r\n  const [isClient, setIsClient] = useState(false);\r\n  const ImageComponent = useImage();\r\n\r\n  useEffect(() => {\r\n    setIsClient(true);\r\n  }, []);\r\n\r\n  if (!isClient) {\r\n    return (\r\n      <DefaultImage\r\n        src={props.src}\r\n        alt={props.alt}\r\n        className={props.className}\r\n      />\r\n    );\r\n  }\r\n\r\n  return <ImageComponent {...props} />;\r\n};\r\n"],"mappings":";AAkBM;AAjBN,OAAO,SAAS,WAAW,gBAAgB;AAC3C;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAEA,MAAM,UAAoC,CAAC,UAAU;AAC1D,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,iBAAiB,SAAS;AAEhC,YAAU,MAAM;AACd,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,UAAU;AACb,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,MAAM;AAAA,QACX,KAAK,MAAM;AAAA,QACX,WAAW,MAAM;AAAA;AAAA,IACnB;AAAA,EAEJ;AAEA,SAAO,oBAAC,kBAAgB,GAAG,OAAO;AACpC;","names":[]}

package/dist/components/primitives/ui-link.d.ts

@@ -0,0 +1,6 @@
+import React__default from 'react';
+import { BaseLinkProps } from '../providers/LinkContext.js';
+
+declare const UiLink: React__default.FC<BaseLinkProps>;
+
+export { UiLink };

package/dist/components/primitives/ui-link.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import React, { useEffect, useState } from "react";
+import {
+  DefaultLink,
+  useLink
+} from "../providers/LinkContext";
+const UiLink = (props) => {
+  const [isClient, setIsClient] = useState(false);
+  const LinkComponent = useLink();
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+  if (!isClient) {
+    return /* @__PURE__ */ jsx(DefaultLink, { href: props.href, className: props.className, children: props.children });
+  }
+  return /* @__PURE__ */ jsx(LinkComponent, { ...props, children: props.children });
+};
+export {
+  UiLink
+};
+//# sourceMappingURL=ui-link.js.map

package/dist/components/primitives/ui-link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/primitives/ui-link.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport {\r\n  DefaultLink,\r\n  useLink,\r\n  type BaseLinkProps,\r\n} from \"../providers/LinkContext\";\r\n\r\nexport const UiLink: React.FC<BaseLinkProps> = (props) => {\r\n  const [isClient, setIsClient] = useState(false);\r\n  const LinkComponent = useLink();\r\n\r\n  useEffect(() => {\r\n    setIsClient(true);\r\n  }, []);\r\n\r\n  if (!isClient) {\r\n    return (\r\n      <DefaultLink href={props.href} className={props.className}>\r\n        {props.children}\r\n      </DefaultLink>\r\n    );\r\n  }\r\n\r\n  return <LinkComponent {...props}>{props.children}</LinkComponent>;\r\n};\r\n"],"mappings":";AAkBM;AAjBN,OAAO,SAAS,WAAW,gBAAgB;AAC3C;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAEA,MAAM,SAAkC,CAAC,UAAU;AACxD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,gBAAgB,QAAQ;AAE9B,YAAU,MAAM;AACd,gBAAY,IAAI;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,UAAU;AACb,WACE,oBAAC,eAAY,MAAM,MAAM,MAAM,WAAW,MAAM,WAC7C,gBAAM,UACT;AAAA,EAEJ;AAEA,SAAO,oBAAC,iBAAe,GAAG,OAAQ,gBAAM,UAAS;AACnD;","names":[]}

package/dist/components/providers/ImageContext.d.ts

@@ -7,6 +7,7 @@ interface BaseImageProps {
     [key: string]: any;
 }
 type ImageComponentType<P extends BaseImageProps = BaseImageProps> = React__default.ComponentType<P>;
+declare const DefaultImage: ImageComponentType;
 interface ImageProviderProps {
     ImageComponent: ImageComponentType;
     children: ReactNode;
@@ -14,4 +15,4 @@ interface ImageProviderProps {
 declare const ImageProvider: React__default.FC<ImageProviderProps>;
 declare const useImage: <P extends BaseImageProps = BaseImageProps>() => ImageComponentType<P>;
 
-export { type BaseImageProps, type ImageComponentType, ImageProvider, useImage };
+export { type BaseImageProps, DefaultImage, type ImageComponentType, ImageProvider, useImage };

package/dist/components/providers/ImageContext.js

@@ -17,6 +17,7 @@ const useImage = () => {
   return ctx.ImageComponent;
 };
 export {
+  DefaultImage,
   ImageProvider,
   useImage
 };

package/dist/components/providers/ImageContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/providers/ImageContext.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { createContext, useContext, type ReactNode } from \"react\";\r\n\r\n// Define a generic interface for props all images share\r\nexport interface BaseImageProps {\r\n  src: string;\r\n  alt?: string;\r\n  className?: string;\r\n  [key: string]: any; // allow framework-specific props (e.g., width, height, priority)\r\n}\r\n\r\n// Define the ImageComponent type\r\nexport type ImageComponentType<P extends BaseImageProps = BaseImageProps> =\r\n  React.ComponentType<P>;\r\n\r\n// Define the context value\r\ninterface ImageContextValue {\r\n  ImageComponent: ImageComponentType;\r\n}\r\n\r\n// Default <img> fallback\r\nconst DefaultImage: ImageComponentType = ({ src, alt, ...rest }) => (\r\n  <img src={src} alt={alt} {...rest} />\r\n);\r\n\r\n// Create the context\r\nconst ImageContext = createContext<ImageContextValue>({\r\n  ImageComponent: DefaultImage,\r\n});\r\n\r\n// Provider props (type-safe)\r\ninterface ImageProviderProps {\r\n  ImageComponent: ImageComponentType;\r\n  children: ReactNode;\r\n}\r\n\r\nexport const ImageProvider: React.FC<ImageProviderProps> = ({\r\n  ImageComponent,\r\n  children,\r\n}) => (\r\n  <ImageContext.Provider value={{ ImageComponent }}>\r\n    {children}\r\n  </ImageContext.Provider>\r\n);\r\n\r\nexport const useImage = <\r\n  P extends BaseImageProps = BaseImageProps\r\n>(): ImageComponentType<P> => {\r\n  const ctx = useContext(ImageContext);\r\n  if (!ctx) {\r\n    throw new Error(\"useImage must be used within an ImageProvider\");\r\n  }\r\n  return ctx.ImageComponent as ImageComponentType<P>;\r\n};\r\n"],"mappings":";AAsBE;AArBF,OAAO,SAAS,eAAe,kBAAkC;AAoBjE,MAAM,eAAmC,CAAC,EAAE,KAAK,KAAK,GAAG,KAAK,MAC5D,oBAAC,SAAI,KAAU,KAAW,GAAG,MAAM;AAIrC,MAAM,eAAe,cAAiC;AAAA,EACpD,gBAAgB;AAClB,CAAC;AAQM,MAAM,gBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AACF,MACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,eAAe,GAC5C,UACH;AAGK,MAAM,WAAW,MAEM;AAC5B,QAAM,MAAM,WAAW,YAAY;AACnC,MAAI,CAAC,KAAK;AACR,UAAM,IAAI,MAAM,+CAA+C;AAAA,EACjE;AACA,SAAO,IAAI;AACb;","names":[]}
+{"version":3,"sources":["../../../src/components/providers/ImageContext.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { createContext, useContext, type ReactNode } from \"react\";\r\n\r\n// Define a generic interface for props all images share\r\nexport interface BaseImageProps {\r\n  src: string;\r\n  alt?: string;\r\n  className?: string;\r\n  [key: string]: any; // allow framework-specific props (e.g., width, height, priority)\r\n}\r\n\r\n// Define the ImageComponent type\r\nexport type ImageComponentType<P extends BaseImageProps = BaseImageProps> =\r\n  React.ComponentType<P>;\r\n\r\n// Define the context value\r\ninterface ImageContextValue {\r\n  ImageComponent: ImageComponentType;\r\n}\r\n\r\n// Default <img> fallback\r\nexport const DefaultImage: ImageComponentType = ({ src, alt, ...rest }) => (\r\n  <img src={src} alt={alt} {...rest} />\r\n);\r\n\r\n// Create the context\r\nconst ImageContext = createContext<ImageContextValue>({\r\n  ImageComponent: DefaultImage,\r\n});\r\n\r\n// Provider props (type-safe)\r\ninterface ImageProviderProps {\r\n  ImageComponent: ImageComponentType;\r\n  children: ReactNode;\r\n}\r\n\r\nexport const ImageProvider: React.FC<ImageProviderProps> = ({\r\n  ImageComponent,\r\n  children,\r\n}) => (\r\n  <ImageContext.Provider value={{ ImageComponent }}>\r\n    {children}\r\n  </ImageContext.Provider>\r\n);\r\n\r\nexport const useImage = <\r\n  P extends BaseImageProps = BaseImageProps\r\n>(): ImageComponentType<P> => {\r\n  const ctx = useContext(ImageContext);\r\n  if (!ctx) {\r\n    throw new Error(\"useImage must be used within an ImageProvider\");\r\n  }\r\n  return ctx.ImageComponent as ImageComponentType<P>;\r\n};\r\n"],"mappings":";AAsBE;AArBF,OAAO,SAAS,eAAe,kBAAkC;AAoB1D,MAAM,eAAmC,CAAC,EAAE,KAAK,KAAK,GAAG,KAAK,MACnE,oBAAC,SAAI,KAAU,KAAW,GAAG,MAAM;AAIrC,MAAM,eAAe,cAAiC;AAAA,EACpD,gBAAgB;AAClB,CAAC;AAQM,MAAM,gBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AACF,MACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,eAAe,GAC5C,UACH;AAGK,MAAM,WAAW,MAEM;AAC5B,QAAM,MAAM,WAAW,YAAY;AACnC,MAAI,CAAC,KAAK;AACR,UAAM,IAAI,MAAM,+CAA+C;AAAA,EACjE;AACA,SAAO,IAAI;AACb;","names":[]}

package/dist/components/providers/LinkContext.d.ts

@@ -0,0 +1,18 @@
+import React__default, { HTMLAttributeAnchorTarget, ReactNode } from 'react';
+
+interface BaseLinkProps {
+    href: string;
+    target?: HTMLAttributeAnchorTarget;
+    className?: string;
+    [key: string]: any;
+}
+type LinkComponentType<P extends BaseLinkProps = BaseLinkProps> = React__default.ComponentType<P>;
+declare const DefaultLink: LinkComponentType;
+interface LinkProviderProps {
+    LinkComponent: LinkComponentType;
+    children: ReactNode;
+}
+declare const LinkProvider: React__default.FC<LinkProviderProps>;
+declare const useLink: <P extends BaseLinkProps = BaseLinkProps>() => LinkComponentType<P>;
+
+export { type BaseLinkProps, DefaultLink, type LinkComponentType, LinkProvider, useLink };

package/dist/components/providers/LinkContext.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import React, {
+  createContext,
+  useContext
+} from "react";
+const DefaultLink = ({ href, ...rest }) => /* @__PURE__ */ jsx("a", { href, ...rest });
+const LinkContext = createContext({
+  LinkComponent: DefaultLink
+});
+const LinkProvider = ({
+  LinkComponent,
+  children
+}) => /* @__PURE__ */ jsx(LinkContext.Provider, { value: { LinkComponent }, children });
+const useLink = () => {
+  const ctx = useContext(LinkContext);
+  if (!ctx) {
+    throw new Error("useLink must be used within an LinkProvider");
+  }
+  return ctx.LinkComponent;
+};
+export {
+  DefaultLink,
+  LinkProvider,
+  useLink
+};
+//# sourceMappingURL=LinkContext.js.map

package/dist/components/providers/LinkContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/providers/LinkContext.tsx"],"sourcesContent":["\"use client\";\r\nimport React, {\r\n  createContext,\r\n  useContext,\r\n  type HTMLAttributeAnchorTarget,\r\n  type ReactNode,\r\n} from \"react\";\r\n\r\nexport interface BaseLinkProps {\r\n  href: string;\r\n  target?: HTMLAttributeAnchorTarget;\r\n  className?: string;\r\n  [key: string]: any; // allow framework-specific props\r\n}\r\n\r\n// Define the LinkComponent type\r\nexport type LinkComponentType<P extends BaseLinkProps = BaseLinkProps> =\r\n  React.ComponentType<P>;\r\n\r\n// Define the context value\r\ninterface LinkContextValue {\r\n  LinkComponent: LinkComponentType;\r\n}\r\n\r\n// Default <a> fallback\r\nexport const DefaultLink: LinkComponentType = ({ href, ...rest }) => (\r\n  <a href={href} {...rest} />\r\n);\r\n\r\n// Create the context\r\nconst LinkContext = createContext<LinkContextValue>({\r\n  LinkComponent: DefaultLink,\r\n});\r\n\r\n// Provider props (type-safe)\r\ninterface LinkProviderProps {\r\n  LinkComponent: LinkComponentType;\r\n  children: ReactNode;\r\n}\r\n\r\nexport const LinkProvider: React.FC<LinkProviderProps> = ({\r\n  LinkComponent,\r\n  children,\r\n}) => (\r\n  <LinkContext.Provider value={{ LinkComponent }}>\r\n    {children}\r\n  </LinkContext.Provider>\r\n);\r\n\r\nexport const useLink = <\r\n  P extends BaseLinkProps = BaseLinkProps\r\n>(): LinkComponentType<P> => {\r\n  const ctx = useContext(LinkContext);\r\n  if (!ctx) {\r\n    throw new Error(\"useLink must be used within an LinkProvider\");\r\n  }\r\n  return ctx.LinkComponent as LinkComponentType<P>;\r\n};\r\n"],"mappings":";AA0BE;AAzBF,OAAO;AAAA,EACL;AAAA,EACA;AAAA,OAGK;AAmBA,MAAM,cAAiC,CAAC,EAAE,MAAM,GAAG,KAAK,MAC7D,oBAAC,OAAE,MAAa,GAAG,MAAM;AAI3B,MAAM,cAAc,cAAgC;AAAA,EAClD,eAAe;AACjB,CAAC;AAQM,MAAM,eAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AACF,MACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,cAAc,GAC1C,UACH;AAGK,MAAM,UAAU,MAEM;AAC3B,QAAM,MAAM,WAAW,WAAW;AAClC,MAAI,CAAC,KAAK;AACR,UAAM,IAAI,MAAM,6CAA6C;AAAA,EAC/D;AACA,SAAO,IAAI;AACb;","names":[]}

package/dist/components/providers/SingularityContext.d.ts

@@ -0,0 +1,12 @@
+import { ImageComponentType } from './ImageContext.js';
+import { LinkComponentType } from './LinkContext.js';
+import React__default, { ReactNode } from 'react';
+
+interface SingularityProviderProps {
+    ImageComponent?: ImageComponentType;
+    LinkComponent?: LinkComponentType;
+    children: ReactNode;
+}
+declare const SingularityProvider: React__default.FC<SingularityProviderProps>;
+
+export { SingularityProvider };

package/dist/components/providers/SingularityContext.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import React, {} from "react";
+import {
+  ImageProvider,
+  DefaultImage
+} from "./ImageContext";
+import {
+  LinkProvider,
+  DefaultLink
+} from "./LinkContext";
+const SingularityProvider = ({
+  ImageComponent = DefaultImage,
+  LinkComponent = DefaultLink,
+  children
+}) => {
+  return /* @__PURE__ */ jsx(ImageProvider, { ImageComponent, children: /* @__PURE__ */ jsx(LinkProvider, { LinkComponent, children }) });
+};
+export {
+  SingularityProvider
+};
+//# sourceMappingURL=SingularityContext.js.map

package/dist/components/providers/SingularityContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/providers/SingularityContext.tsx"],"sourcesContent":["\"use client\";\nimport React, { type ReactNode } from \"react\";\nimport {\n  ImageProvider,\n  type ImageComponentType,\n  DefaultImage,\n} from \"./ImageContext\";\nimport {\n  LinkProvider,\n  type LinkComponentType,\n  DefaultLink,\n} from \"./LinkContext\";\n\ninterface SingularityProviderProps {\n  ImageComponent?: ImageComponentType;\n  LinkComponent?: LinkComponentType;\n  children: ReactNode;\n}\n\nexport const SingularityProvider: React.FC<SingularityProviderProps> = ({\n  ImageComponent = DefaultImage,\n  LinkComponent = DefaultLink,\n  children,\n}) => {\n  return (\n    <ImageProvider ImageComponent={ImageComponent}>\n      <LinkProvider LinkComponent={LinkComponent}>{children}</LinkProvider>\n    </ImageProvider>\n  );\n};\n"],"mappings":";AA0BM;AAzBN,OAAO,eAA+B;AACtC;AAAA,EACE;AAAA,EAEA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EAEA;AAAA,OACK;AAQA,MAAM,sBAA0D,CAAC;AAAA,EACtE,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB;AACF,MAAM;AACJ,SACE,oBAAC,iBAAc,gBACb,8BAAC,gBAAa,eAA+B,UAAS,GACxD;AAEJ;","names":[]}

package/dist/components/providers/index.d.ts

@@ -1,2 +1,4 @@
-export { BaseImageProps, ImageComponentType, ImageProvider, useImage } from './ImageContext.js';
+export { BaseImageProps, DefaultImage, ImageComponentType, ImageProvider, useImage } from './ImageContext.js';
+export { BaseLinkProps, DefaultLink, LinkComponentType, LinkProvider, useLink } from './LinkContext.js';
+export { SingularityProvider } from './SingularityContext.js';
 import 'react';

package/dist/components/providers/index.js

@@ -1,2 +1,4 @@
 export * from "./ImageContext";
+export * from "./LinkContext";
+export * from "./SingularityContext";
 //# sourceMappingURL=index.js.map

package/dist/components/providers/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/providers/index.ts"],"sourcesContent":["export * from \"./ImageContext\";\r\n"],"mappings":"AAAA,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/providers/index.ts"],"sourcesContent":["export * from \"./ImageContext\";\r\nexport * from \"./LinkContext\";\r\nexport * from \"./SingularityContext\";"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/components/units/cards/blog-card.js

@@ -6,15 +6,14 @@ import { Badge } from "../../primitives/badge/badge";
 import { TextSpan } from "../../primitives/text/text-span";
 import { Button } from "../../primitives/button/button";
 import { TextParagraph } from "../../primitives/text/text-paragraph";
-import { Icon } from "../../primitives/icon/icon";
 import { formatDate } from "../../../lib";
 import { UiImage } from "../../primitives/ui-image";
+import { UiLink } from "../../primitives";
 function BlogCard({ post }) {
   return /* @__PURE__ */ jsxs(
     Card,
     {
-      className: "sg:group sg:overflow-hidden sg:hover:shadow-lg sg:transition-all sg:duration-300 sg:cursor-pointer sg:flex sg:flex-col",
-      onClick: () => console.log("OnClick blog card", post.id),
+      className: "sg:group sg:overflow-hidden sg:hover:shadow-lg sg:transition-all sg:duration-300 sg:flex sg:flex-col",
       children: [
         /* @__PURE__ */ jsxs("div", { className: "sg:relative sg:h-48 sg:overflow-hidden", children: [
           /* @__PURE__ */ jsx(
@@ -23,7 +22,7 @@ function BlogCard({ post }) {
               src: post.image,
               alt: post.title,
               className: "sg:w-full sg:h-full sg:object-cover sg:transition-transform sg:duration-300 sg:group-hover:scale-110",
-              fill: true
+              fill: "true"
             }
           ),
           /* @__PURE__ */ jsx(
@@ -39,7 +38,7 @@ function BlogCard({ post }) {
             TextHeading,
             {
               variant: "h3",
-              className: "sg:mb-2 sg:group-hover:text-[hsl(var(--sg-primary))] sg:transition-colors",
+              className: "sg:mb-2 sg:group-hover:text-primary sg:transition-colors",
               children: post.title
             }
           ),
@@ -56,16 +55,15 @@ function BlogCard({ post }) {
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "sg:flex sg:items-center sg:justify-between", children: [
             /* @__PURE__ */ jsx(TextSpan, { size: "sm", foreground: "muted", children: formatDate(post.date) }),
-            /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx(
               Button,
               {
+                asChild: true,
                 variant: "ghost",
                 size: "sm",
-                className: "sg:group-hover:text-[hsl(var(--sg-primary))]",
-                children: [
-                  "Read More",
-                  /* @__PURE__ */ jsx(Icon, { icon: "ArrowRight", className: "sg:ml-2 sg:h-4 sg:w-4" })
-                ]
+                className: "sg:group-hover:text-primary",
+                iconEnd: "ArrowRight",
+                children: /* @__PURE__ */ jsx(UiLink, { href: `${post.id}`, children: "Read More" })
               }
             )
           ] })

package/dist/components/units/cards/blog-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/units/cards/blog-card.tsx"],"sourcesContent":["import { Clock, User } from \"lucide-react\";\r\nimport { TextHeading } from \"../../primitives/text/text-heading\";\r\nimport { Card, CardContent } from \"./card\";\r\nimport { Badge } from \"../../primitives/badge/badge\";\r\nimport { TextSpan } from \"../../primitives/text/text-span\";\r\nimport { Button } from \"../../primitives/button/button\";\r\nimport { TextParagraph } from \"../../primitives/text/text-paragraph\";\r\nimport { Icon } from \"../../primitives/icon/icon\";\r\nimport { formatDate } from \"../../../lib\";\r\nimport { UiImage } from \"../../primitives/ui-image\";\r\n\r\nexport interface BlogPost {\r\n  id: number;\r\n  title: string;\r\n  excerpt: string;\r\n  author: string;\r\n  date: Date;\r\n  readTime: string;\r\n  category: string;\r\n  image: string;\r\n}\r\n\r\ninterface BlogCardProps {\r\n  post: BlogPost;\r\n}\r\n\r\nexport default function BlogCard({ post }: BlogCardProps) {\r\n  return (\r\n    <Card\r\n      key={post.id}\r\n      className=\"sg:group sg:overflow-hidden sg:hover:shadow-lg sg:transition-all sg:duration-300 sg:cursor-pointer sg:flex sg:flex-col\"\r\n      // onClick={() => onNavigateToPost(post.id)}\r\n      onClick={() => console.log(\"OnClick blog card\", post.id)}\r\n    >\r\n      <div className=\"sg:relative sg:h-48 sg:overflow-hidden\">\r\n        <UiImage\r\n          src={post.image}\r\n          alt={post.title}\r\n          className=\"sg:w-full sg:h-full sg:object-cover sg:transition-transform sg:duration-300 sg:group-hover:scale-110\"\r\n          fill\r\n        />\r\n        <div\r\n          className={`sg:absolute sg:inset-0 sg:opacity-20 sg:group-hover:opacity-30 sg:transition-opacity`}\r\n        />\r\n        <Badge className=\"sg:absolute sg:top-4 sg:left-4\">\r\n          {post.category}\r\n        </Badge>\r\n      </div>\r\n\r\n      {/* Content */}\r\n      <CardContent className=\"sg:p-6 sg:flex-1 sg:flex sg:flex-col\">\r\n        <TextHeading\r\n          variant=\"h3\"\r\n          className=\"sg:mb-2 sg:group-hover:text-[hsl(var(--sg-primary))] sg:transition-colors\"\r\n        >\r\n          {post.title}\r\n        </TextHeading>\r\n        <TextParagraph foreground=\"muted\" className=\"sg:mb-4 sg:flex-1\">\r\n          {post.excerpt}\r\n        </TextParagraph>\r\n\r\n        {/* Meta */}\r\n        <div className=\"sg:flex sg:items-center sg:gap-4 sg:mb-4\">\r\n          <div className=\"sg:flex sg:items-center sg:gap-1\">\r\n            <User className=\"h-4 w-4\" />\r\n            <TextSpan size=\"sm\" foreground=\"muted\">\r\n              {post.author}\r\n            </TextSpan>\r\n          </div>\r\n          <div className=\"sg:flex sg:items-center sg:gap-1\">\r\n            <Clock className=\"sg:h-4 sg:w-4\" />\r\n            <TextSpan size=\"sm\" foreground=\"muted\">\r\n              {post.readTime}\r\n            </TextSpan>\r\n          </div>\r\n        </div>\r\n\r\n        <div className=\"sg:flex sg:items-center sg:justify-between\">\r\n          <TextSpan size=\"sm\" foreground=\"muted\">\r\n            {formatDate(post.date)}\r\n          </TextSpan>\r\n          <Button\r\n            variant=\"ghost\"\r\n            size=\"sm\"\r\n            className=\"sg:group-hover:text-[hsl(var(--sg-primary))]\"\r\n          >\r\n            Read More\r\n            <Icon icon=\"ArrowRight\" className=\"sg:ml-2 sg:h-4 sg:w-4\" />\r\n          </Button>\r\n        </div>\r\n      </CardContent>\r\n    </Card>\r\n  );\r\n}\r\n"],"mappings":"AAkCM,SACE,KADF;AAlCN,SAAS,OAAO,YAAY;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,MAAM,mBAAmB;AAClC,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAiBT,SAAR,SAA0B,EAAE,KAAK,GAAkB;AACxD,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,WAAU;AAAA,MAEV,SAAS,MAAM,QAAQ,IAAI,qBAAqB,KAAK,EAAE;AAAA,MAEvD;AAAA,6BAAC,SAAI,WAAU,0CACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,KAAK,KAAK;AAAA,cACV,KAAK,KAAK;AAAA,cACV,WAAU;AAAA,cACV,MAAI;AAAA;AAAA,UACN;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA;AAAA,UACb;AAAA,UACA,oBAAC,SAAM,WAAU,kCACd,eAAK,UACR;AAAA,WACF;AAAA,QAGA,qBAAC,eAAY,WAAU,wCACrB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,WAAU;AAAA,cAET,eAAK;AAAA;AAAA,UACR;AAAA,UACA,oBAAC,iBAAc,YAAW,SAAQ,WAAU,qBACzC,eAAK,SACR;AAAA,UAGA,qBAAC,SAAI,WAAU,4CACb;AAAA,iCAAC,SAAI,WAAU,oCACb;AAAA,kCAAC,QAAK,WAAU,WAAU;AAAA,cAC1B,oBAAC,YAAS,MAAK,MAAK,YAAW,SAC5B,eAAK,QACR;AAAA,eACF;AAAA,YACA,qBAAC,SAAI,WAAU,oCACb;AAAA,kCAAC,SAAM,WAAU,iBAAgB;AAAA,cACjC,oBAAC,YAAS,MAAK,MAAK,YAAW,SAC5B,eAAK,UACR;AAAA,eACF;AAAA,aACF;AAAA,UAEA,qBAAC,SAAI,WAAU,8CACb;AAAA,gCAAC,YAAS,MAAK,MAAK,YAAW,SAC5B,qBAAW,KAAK,IAAI,GACvB;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,WAAU;AAAA,gBACX;AAAA;AAAA,kBAEC,oBAAC,QAAK,MAAK,cAAa,WAAU,yBAAwB;AAAA;AAAA;AAAA,YAC5D;AAAA,aACF;AAAA,WACF;AAAA;AAAA;AAAA,IA7DK,KAAK;AAAA,EA8DZ;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/units/cards/blog-card.tsx"],"sourcesContent":["import { Clock, User } from \"lucide-react\";\r\nimport { TextHeading } from \"../../primitives/text/text-heading\";\r\nimport { Card, CardContent } from \"./card\";\r\nimport { Badge } from \"../../primitives/badge/badge\";\r\nimport { TextSpan } from \"../../primitives/text/text-span\";\r\nimport { Button } from \"../../primitives/button/button\";\r\nimport { TextParagraph } from \"../../primitives/text/text-paragraph\";\r\nimport { formatDate } from \"../../../lib\";\r\nimport { UiImage } from \"../../primitives/ui-image\";\r\nimport { UiLink } from \"../../primitives\";\r\n\r\nexport interface BlogPost {\r\n  id: number;\r\n  title: string;\r\n  excerpt: string;\r\n  author: string;\r\n  date: Date;\r\n  readTime: string;\r\n  category: string;\r\n  image: string;\r\n}\r\n\r\ninterface BlogCardProps {\r\n  post: BlogPost;\r\n}\r\n\r\nexport default function BlogCard({ post }: BlogCardProps) {\r\n  return (\r\n    <Card\r\n      key={post.id}\r\n      className=\"sg:group sg:overflow-hidden sg:hover:shadow-lg sg:transition-all sg:duration-300 sg:flex sg:flex-col\"\r\n    >\r\n      <div className=\"sg:relative sg:h-48 sg:overflow-hidden\">\r\n        <UiImage\r\n          src={post.image}\r\n          alt={post.title}\r\n          className=\"sg:w-full sg:h-full sg:object-cover sg:transition-transform sg:duration-300 sg:group-hover:scale-110\"\r\n          fill=\"true\"\r\n        />\r\n        <div\r\n          className={`sg:absolute sg:inset-0 sg:opacity-20 sg:group-hover:opacity-30 sg:transition-opacity`}\r\n        />\r\n        <Badge className=\"sg:absolute sg:top-4 sg:left-4\">\r\n          {post.category}\r\n        </Badge>\r\n      </div>\r\n\r\n      {/* Content */}\r\n      <CardContent className=\"sg:p-6 sg:flex-1 sg:flex sg:flex-col\">\r\n        <TextHeading\r\n          variant=\"h3\"\r\n          className=\"sg:mb-2 sg:group-hover:text-primary sg:transition-colors\"\r\n        >\r\n          {post.title}\r\n        </TextHeading>\r\n        <TextParagraph foreground=\"muted\" className=\"sg:mb-4 sg:flex-1\">\r\n          {post.excerpt}\r\n        </TextParagraph>\r\n\r\n        {/* Meta */}\r\n        <div className=\"sg:flex sg:items-center sg:gap-4 sg:mb-4\">\r\n          <div className=\"sg:flex sg:items-center sg:gap-1\">\r\n            <User className=\"h-4 w-4\" />\r\n            <TextSpan size=\"sm\" foreground=\"muted\">\r\n              {post.author}\r\n            </TextSpan>\r\n          </div>\r\n          <div className=\"sg:flex sg:items-center sg:gap-1\">\r\n            <Clock className=\"sg:h-4 sg:w-4\" />\r\n            <TextSpan size=\"sm\" foreground=\"muted\">\r\n              {post.readTime}\r\n            </TextSpan>\r\n          </div>\r\n        </div>\r\n\r\n        <div className=\"sg:flex sg:items-center sg:justify-between\">\r\n          <TextSpan size=\"sm\" foreground=\"muted\">\r\n            {formatDate(post.date)}\r\n          </TextSpan>\r\n          <Button\r\n            asChild\r\n            variant=\"ghost\"\r\n            size=\"sm\"\r\n            className=\"sg:group-hover:text-primary\"\r\n            iconEnd=\"ArrowRight\"\r\n          >\r\n            <UiLink href={`${post.id}`}>Read More</UiLink>\r\n          </Button>\r\n        </div>\r\n      </CardContent>\r\n    </Card>\r\n  );\r\n}\r\n"],"mappings":"AAgCM,SACE,KADF;AAhCN,SAAS,OAAO,YAAY;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,MAAM,mBAAmB;AAClC,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AACxB,SAAS,cAAc;AAiBR,SAAR,SAA0B,EAAE,KAAK,GAAkB;AACxD,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,WAAU;AAAA,MAEV;AAAA,6BAAC,SAAI,WAAU,0CACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,KAAK,KAAK;AAAA,cACV,KAAK,KAAK;AAAA,cACV,WAAU;AAAA,cACV,MAAK;AAAA;AAAA,UACP;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA;AAAA,UACb;AAAA,UACA,oBAAC,SAAM,WAAU,kCACd,eAAK,UACR;AAAA,WACF;AAAA,QAGA,qBAAC,eAAY,WAAU,wCACrB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,WAAU;AAAA,cAET,eAAK;AAAA;AAAA,UACR;AAAA,UACA,oBAAC,iBAAc,YAAW,SAAQ,WAAU,qBACzC,eAAK,SACR;AAAA,UAGA,qBAAC,SAAI,WAAU,4CACb;AAAA,iCAAC,SAAI,WAAU,oCACb;AAAA,kCAAC,QAAK,WAAU,WAAU;AAAA,cAC1B,oBAAC,YAAS,MAAK,MAAK,YAAW,SAC5B,eAAK,QACR;AAAA,eACF;AAAA,YACA,qBAAC,SAAI,WAAU,oCACb;AAAA,kCAAC,SAAM,WAAU,iBAAgB;AAAA,cACjC,oBAAC,YAAS,MAAK,MAAK,YAAW,SAC5B,eAAK,UACR;AAAA,eACF;AAAA,aACF;AAAA,UAEA,qBAAC,SAAI,WAAU,8CACb;AAAA,gCAAC,YAAS,MAAK,MAAK,YAAW,SAC5B,qBAAW,KAAK,IAAI,GACvB;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAO;AAAA,gBACP,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,SAAQ;AAAA,gBAER,8BAAC,UAAO,MAAM,GAAG,KAAK,EAAE,IAAI,uBAAS;AAAA;AAAA,YACvC;AAAA,aACF;AAAA,WACF;AAAA;AAAA;AAAA,IA5DK,KAAK;AAAA,EA6DZ;AAEJ;","names":[]}

package/dist/index.d.ts

@@ -17,7 +17,10 @@ export { TextParagraph } from './components/primitives/text/text-paragraph.js';
 export { TextSpan } from './components/primitives/text/text-span.js';
 export { TextTime } from './components/primitives/text/text-time.js';
 export { UiImage } from './components/primitives/ui-image.js';
-export { BaseImageProps, ImageComponentType, ImageProvider, useImage } from './components/providers/ImageContext.js';
+export { UiLink } from './components/primitives/ui-link.js';
+export { BaseImageProps, DefaultImage, ImageComponentType, ImageProvider, useImage } from './components/providers/ImageContext.js';
+export { BaseLinkProps, DefaultLink, LinkComponentType, LinkProvider, useLink } from './components/providers/LinkContext.js';
+export { SingularityProvider } from './components/providers/SingularityContext.js';
 export { BlogPost } from './components/units/cards/blog-card.js';
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardImage, CardTitle } from './components/units/cards/card.js';
 export { Cards, CardsProps, getGridColsClass } from './components/units/cards/cards.js';