commerce-toolkit 0.1.1 → 0.3.0

package/dist/category-card-link-BqMAG9Op.js

@@ -0,0 +1,211 @@
+import { jsx as n } from "react/jsx-runtime";
+import { S as g } from "./index-DD8W7cMj.js";
+import { c } from "./utils-BOGlfttm.js";
+import { createContext as h, useMemo as x, use as y } from "react";
+const u = h(void 0);
+function w({
+  className: r,
+  children: o,
+  as: t,
+  textColorScheme: a = "light",
+  iconColorScheme: e = "light",
+  aspectRatio: l = "5:6",
+  textSize: i = "small",
+  showOverlay: d = !0,
+  ...f
+}) {
+  const m = t ?? "article", v = x(
+    () => ({
+      textColorScheme: a,
+      iconColorScheme: e,
+      aspectRatio: l,
+      textSize: i,
+      showOverlay: d
+    }),
+    [a, e, l, i, d]
+  );
+  return /* @__PURE__ */ n(u.Provider, { value: v, children: /* @__PURE__ */ n(
+    m,
+    {
+      className: c(
+        "group relative flex w-full max-w-md cursor-pointer flex-col gap-2 rounded-[var(--category-card-border-radius,1rem)] font-[var(--category-card-font-family,var(--font-family-body))] @container",
+        {
+          small: "gap-2",
+          medium: "gap-3",
+          large: "gap-4",
+          "x-large": "gap-5"
+        }[i],
+        r
+      ),
+      "data-slot": "category-card-root",
+      ...f,
+      children: o
+    }
+  ) });
+}
+function s() {
+  const r = y(u);
+  if (r === void 0)
+    throw new Error("useCategoryCard must be used within a CategoryCardRoot");
+  return r;
+}
+function N({ className: r, children: o, ...t }) {
+  const { iconColorScheme: a } = s();
+  return /* @__PURE__ */ n(
+    g,
+    {
+      className: c(
+        "absolute right-5 top-5 z-10 transition-transform duration-700 ease-out group-hover:-translate-y-1.5 group-hover:translate-x-1.5",
+        {
+          light: "text-[var(--category-card-light-icon,hsl(var(--foreground)))]",
+          dark: "text-[var(--category-card-dark-icon,hsl(var(--background)))]"
+        }[a],
+        r
+      ),
+      "data-slot": "category-card-icon",
+      ...t,
+      children: o
+    }
+  );
+}
+function S({
+  className: r,
+  children: o,
+  ...t
+}) {
+  const { textColorScheme: a, aspectRatio: e } = s();
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: c(
+        "relative overflow-hidden rounded-[inherit] group-focus:ring-[var(--category-card-focus,hsl(var(--primary)))] group-focus-visible:ring-2",
+        {
+          light: "bg-[var(--category-card-light-background,hsl(var(--contrast-100)))]",
+          dark: "bg-[var(--category-card-dark-background,hsl(var(--contrast-500)))]"
+        }[a],
+        {
+          "5:6": "aspect-[5/6]",
+          "3:4": "aspect-[3/4]",
+          "1:1": "aspect-square"
+        }[e],
+        r
+      ),
+      "data-slot": "category-card-thumbnail",
+      ...t,
+      children: o
+    }
+  );
+}
+function _({
+  className: r,
+  children: o,
+  asChild: t = !1,
+  ...a
+}) {
+  const { textColorScheme: e } = s();
+  return /* @__PURE__ */ n(
+    t ? g : "img",
+    {
+      className: c(
+        "h-full w-full scale-100 select-none object-cover transition-transform duration-500 ease-out group-hover:scale-110",
+        {
+          light: "bg-[var(--category-card-light-background,hsl(var(--contrast-100)))]",
+          dark: "bg-[var(--category-card-dark-background,hsl(var(--contrast-500)))]"
+        }[e],
+        r
+      ),
+      "data-slot": "category-card-image",
+      ...a
+    }
+  );
+}
+function R({ className: r, children: o, ...t }) {
+  const { textColorScheme: a } = s();
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: c(
+        "break-words p-4 text-4xl font-bold leading-none tracking-tight transition-transform duration-500 ease-out group-hover:scale-105",
+        {
+          light: "[color:color-mix(in_oklab,hsl(var(--foreground))_30%,transparent)]",
+          dark: "[color:color-mix(in_oklab,hsl(var(--background))_30%,transparent)]"
+        }[a],
+        r
+      ),
+      "data-slot": "category-card-fallback",
+      ...t,
+      children: o
+    }
+  );
+}
+function j({ children: r, className: o, ...t }) {
+  const { showOverlay: a } = s();
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: c(
+        "absolute inset-0 flex items-end p-6 @xs:p-8",
+        a && "bg-gradient-to-b from-foreground/0 from-50% via-foreground/0 via-50% to-foreground/50 to-100%",
+        o
+      ),
+      "data-slot": "category-card-overlay",
+      ...t,
+      children: r
+    }
+  );
+}
+function E({ children: r, className: o, ...t }) {
+  const { textSize: a, textColorScheme: e } = s();
+  return /* @__PURE__ */ n(
+    "h3",
+    {
+      className: c(
+        "font-medium leading-tight",
+        {
+          small: "text-lg tracking-normal @xs:text-xl",
+          medium: "text-xl tracking-normal @xs:text-2xl",
+          large: "text-2xl tracking-tight @xs:text-3xl",
+          "x-large": "text-3xl tracking-tight @xs:text-4xl"
+        }[a],
+        {
+          light: "text-[var(--category-card-light-text,hsl(var(--foreground)))]",
+          dark: "text-[var(--category-card-dark-text,hsl(var(--background)))]"
+        }[e],
+        o
+      ),
+      "data-slot": "category-card-title",
+      ...t,
+      children: r
+    }
+  );
+}
+function I({ asChild: r = !1, className: o, ...t }) {
+  const { textColorScheme: a } = s();
+  return /* @__PURE__ */ n(
+    r ? g : "a",
+    {
+      className: c(
+        "absolute inset-0 rounded-[var(--category-card-border-radius,1rem)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--category-card-focus,hsl(var(--primary)))] focus-visible:ring-offset-4",
+        {
+          light: "ring-offset-[var(--category-card-light-offset,hsl(var(--background)))]",
+          dark: "ring-offset-[var(--category-card-dark-offset,hsl(var(--foreground)))]"
+        }[a],
+        o
+      ),
+      "data-slot": "category-card-link",
+      ...t
+    }
+  );
+}
+export {
+  w as C,
+  N as a,
+  S as b,
+  _ as c,
+  R as d,
+  j as e,
+  E as f,
+  I as g,
+  s as u
+};
+//# sourceMappingURL=category-card-link-BqMAG9Op.js.map

package/dist/category-card-link-BqMAG9Op.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"category-card-link-BqMAG9Op.js","sources":["../src/components/category-card/primitives/category-card-root.tsx","../src/components/category-card/primitives/category-card-icon.tsx","../src/components/category-card/primitives/category-card-thumbnail.tsx","../src/components/category-card/primitives/category-card-image.tsx","../src/components/category-card/primitives/category-card-fallback.tsx","../src/components/category-card/primitives/category-card-overlay.tsx","../src/components/category-card/primitives/category-card-title.tsx","../src/components/category-card/primitives/category-card-link.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, use, useMemo } from 'react';\nimport type { ComponentProps, ElementType } from 'react';\n\nimport { cn } from '@/lib';\n\ninterface CategoryCardContext {\n  textColorScheme: 'light' | 'dark';\n  iconColorScheme: 'light' | 'dark';\n  aspectRatio: '5:6' | '3:4' | '1:1';\n  textSize: 'small' | 'medium' | 'large' | 'x-large';\n  showOverlay: boolean;\n}\n\nexport const CategoryCardContext = createContext<CategoryCardContext | undefined>(undefined);\n\nexport type CategoryCardRootProps<E extends ElementType = 'article'> = Omit<\n  ComponentProps<E>,\n  'as'\n> & {\n  as?: E;\n  textColorScheme?: 'light' | 'dark';\n  iconColorScheme?: 'light' | 'dark';\n  aspectRatio?: '5:6' | '3:4' | '1:1';\n  textSize?: 'small' | 'medium' | 'large' | 'x-large';\n  showOverlay?: boolean;\n};\n\nexport function CategoryCardRoot<T extends ElementType = 'article'>({\n  className,\n  children,\n  as,\n  textColorScheme = 'light',\n  iconColorScheme = 'light',\n  aspectRatio = '5:6',\n  textSize = 'small',\n  showOverlay = true,\n  ...props\n}: CategoryCardRootProps<T>) {\n  const CategoryCardRootElement = as ?? 'article';\n\n  const contextValues = useMemo(\n    () => ({\n      textColorScheme,\n      iconColorScheme,\n      aspectRatio,\n      textSize,\n      showOverlay,\n    }),\n    [textColorScheme, iconColorScheme, aspectRatio, textSize, showOverlay],\n  );\n\n  return (\n    <CategoryCardContext.Provider value={contextValues}>\n      <CategoryCardRootElement\n        className={cn(\n          'group relative flex w-full max-w-md cursor-pointer flex-col gap-2 rounded-[var(--category-card-border-radius,1rem)] font-[var(--category-card-font-family,var(--font-family-body))] @container',\n          {\n            small: 'gap-2',\n            medium: 'gap-3',\n            large: 'gap-4',\n            'x-large': 'gap-5',\n          }[textSize],\n          className,\n        )}\n        data-slot=\"category-card-root\"\n        {...props}\n      >\n        {children}\n      </CategoryCardRootElement>\n    </CategoryCardContext.Provider>\n  );\n}\n\nexport function useCategoryCard() {\n  const context = use(CategoryCardContext);\n\n  if (context === undefined) {\n    throw new Error('useCategoryCard must be used within a CategoryCardRoot');\n  }\n\n  return context;\n}\n","'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport type { ComponentProps } from 'react';\n\nimport { useCategoryCard } from '@/components/category-card';\nimport { cn } from '@/lib';\n\nexport type CategoryCardIconProps = ComponentProps<typeof Slot>;\n\nexport function CategoryCardIcon({ className, children, ...props }: CategoryCardIconProps) {\n  const { iconColorScheme } = useCategoryCard();\n\n  return (\n    <Slot\n      className={cn(\n        'absolute right-5 top-5 z-10 transition-transform duration-700 ease-out group-hover:-translate-y-1.5 group-hover:translate-x-1.5',\n        {\n          light: 'text-[var(--category-card-light-icon,hsl(var(--foreground)))]',\n          dark: 'text-[var(--category-card-dark-icon,hsl(var(--background)))]',\n        }[iconColorScheme],\n        className,\n      )}\n      data-slot=\"category-card-icon\"\n      {...props}\n    >\n      {children}\n    </Slot>\n  );\n}\n","'use client';\n\nimport type { ComponentProps } from 'react';\n\nimport { useCategoryCard } from '@/components/category-card';\nimport { cn } from '@/lib';\n\nexport type CategoryCardThumbnailProps = ComponentProps<'div'>;\n\nexport function CategoryCardThumbnail({\n  className,\n  children,\n  ...props\n}: CategoryCardThumbnailProps) {\n  const { textColorScheme, aspectRatio } = useCategoryCard();\n\n  return (\n    <div\n      className={cn(\n        'relative overflow-hidden rounded-[inherit] group-focus:ring-[var(--category-card-focus,hsl(var(--primary)))] group-focus-visible:ring-2',\n        {\n          light: 'bg-[var(--category-card-light-background,hsl(var(--contrast-100)))]',\n          dark: 'bg-[var(--category-card-dark-background,hsl(var(--contrast-500)))]',\n        }[textColorScheme],\n        {\n          '5:6': 'aspect-[5/6]',\n          '3:4': 'aspect-[3/4]',\n          '1:1': 'aspect-square',\n        }[aspectRatio],\n        className,\n      )}\n      data-slot=\"category-card-thumbnail\"\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n","'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport type { ComponentProps } from 'react';\n\nimport { useCategoryCard } from '@/components/category-card';\nimport { cn } from '@/lib';\n\nexport type CategoryCardImageProps = ComponentProps<'img'> & {\n  asChild?: boolean;\n};\n\nexport function CategoryCardImage({\n  className,\n  children,\n  asChild = false,\n  ...props\n}: CategoryCardImageProps) {\n  const { textColorScheme } = useCategoryCard();\n\n  const Component = asChild ? Slot : 'img';\n\n  return (\n    <Component\n      className={cn(\n        'h-full w-full scale-100 select-none object-cover transition-transform duration-500 ease-out group-hover:scale-110',\n        {\n          light: 'bg-[var(--category-card-light-background,hsl(var(--contrast-100)))]',\n          dark: 'bg-[var(--category-card-dark-background,hsl(var(--contrast-500)))]',\n        }[textColorScheme],\n        className,\n      )}\n      data-slot=\"category-card-image\"\n      {...props}\n    />\n  );\n}\n","'use client';\n\nimport type { ComponentProps } from 'react';\n\nimport { useCategoryCard } from '@/components/category-card';\nimport { cn } from '@/lib';\n\nexport type CategoryCardFallbackProps = ComponentProps<'div'>;\n\nexport function CategoryCardFallback({ className, children, ...props }: CategoryCardFallbackProps) {\n  const { textColorScheme } = useCategoryCard();\n\n  return (\n    <div\n      className={cn(\n        'break-words p-4 text-4xl font-bold leading-none tracking-tight transition-transform duration-500 ease-out group-hover:scale-105',\n        {\n          light: '[color:color-mix(in_oklab,hsl(var(--foreground))_30%,transparent)]',\n          dark: '[color:color-mix(in_oklab,hsl(var(--background))_30%,transparent)]',\n        }[textColorScheme],\n        className,\n      )}\n      data-slot=\"category-card-fallback\"\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n","'use client';\n\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nimport { useCategoryCard } from '../primitives';\n\nexport type CategoryCardOverlayProps = ComponentProps<'div'>;\n\nexport function CategoryCardOverlay({ children, className, ...props }: CategoryCardOverlayProps) {\n  const { showOverlay } = useCategoryCard();\n\n  return (\n    <div\n      className={cn(\n        'absolute inset-0 flex items-end p-6 @xs:p-8',\n        showOverlay &&\n          'bg-gradient-to-b from-foreground/0 from-50% via-foreground/0 via-50% to-foreground/50 to-100%',\n        className,\n      )}\n      data-slot=\"category-card-overlay\"\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n","'use client';\n\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nimport { useCategoryCard } from '../primitives';\n\nexport type CategoryCardTitleProps = ComponentProps<'h3'>;\n\nexport function CategoryCardTitle({ children, className, ...props }: CategoryCardTitleProps) {\n  const { textSize, textColorScheme } = useCategoryCard();\n\n  return (\n    <h3\n      className={cn(\n        'font-medium leading-tight',\n        {\n          small: 'text-lg tracking-normal @xs:text-xl',\n          medium: 'text-xl tracking-normal @xs:text-2xl',\n          large: 'text-2xl tracking-tight @xs:text-3xl',\n          'x-large': 'text-3xl tracking-tight @xs:text-4xl',\n        }[textSize],\n        {\n          light: 'text-[var(--category-card-light-text,hsl(var(--foreground)))]',\n          dark: 'text-[var(--category-card-dark-text,hsl(var(--background)))]',\n        }[textColorScheme],\n        className,\n      )}\n      data-slot=\"category-card-title\"\n      {...props}\n    >\n      {children}\n    </h3>\n  );\n}\n","'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport type { ComponentProps } from 'react';\n\nimport { useCategoryCard } from '@/components/category-card';\nimport { cn } from '@/lib';\n\nexport interface CategoryCardLinkProps extends ComponentProps<'a'> {\n  asChild?: boolean;\n}\n\nexport function CategoryCardLink({ asChild = false, className, ...props }: CategoryCardLinkProps) {\n  const { textColorScheme } = useCategoryCard();\n\n  const Component = asChild ? Slot : 'a';\n\n  return (\n    <Component\n      className={cn(\n        'absolute inset-0 rounded-[var(--category-card-border-radius,1rem)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--category-card-focus,hsl(var(--primary)))] focus-visible:ring-offset-4',\n        {\n          light: 'ring-offset-[var(--category-card-light-offset,hsl(var(--background)))]',\n          dark: 'ring-offset-[var(--category-card-dark-offset,hsl(var(--foreground)))]',\n        }[textColorScheme],\n        className,\n      )}\n      data-slot=\"category-card-link\"\n      {...props}\n    />\n  );\n}\n"],"names":["CategoryCardContext","createContext","CategoryCardRoot","className","children","as","textColorScheme","iconColorScheme","aspectRatio","textSize","showOverlay","props","CategoryCardRootElement","contextValues","useMemo","jsx","cn","useCategoryCard","context","use","CategoryCardIcon","Slot","CategoryCardThumbnail","CategoryCardImage","asChild","CategoryCardFallback","CategoryCardOverlay","CategoryCardTitle","CategoryCardLink"],"mappings":"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"}

package/dist/category-card-link-BwSFHFcd.cjs

@@ -0,0 +1,2 @@
+"use strict";const n=require("react/jsx-runtime"),i=require("./index-DGaxX11V.cjs"),c=require("./utils-LBH114_M.cjs"),d=require("react"),f=d.createContext(void 0);function m({className:r,children:o,as:t,textColorScheme:a="light",iconColorScheme:e="light",aspectRatio:l="5:6",textSize:g="small",showOverlay:u=!0,...x}){const v=t??"article",y=d.useMemo(()=>({textColorScheme:a,iconColorScheme:e,aspectRatio:l,textSize:g,showOverlay:u}),[a,e,l,g,u]);return n.jsx(f.Provider,{value:y,children:n.jsx(v,{className:c.cn("group relative flex w-full max-w-md cursor-pointer flex-col gap-2 rounded-[var(--category-card-border-radius,1rem)] font-[var(--category-card-font-family,var(--font-family-body))] @container",{small:"gap-2",medium:"gap-3",large:"gap-4","x-large":"gap-5"}[g],r),"data-slot":"category-card-root",...x,children:o})})}function s(){const r=d.use(f);if(r===void 0)throw new Error("useCategoryCard must be used within a CategoryCardRoot");return r}function C({className:r,children:o,...t}){const{iconColorScheme:a}=s();return n.jsx(i.Slot,{className:c.cn("absolute right-5 top-5 z-10 transition-transform duration-700 ease-out group-hover:-translate-y-1.5 group-hover:translate-x-1.5",{light:"text-[var(--category-card-light-icon,hsl(var(--foreground)))]",dark:"text-[var(--category-card-dark-icon,hsl(var(--background)))]"}[a],r),"data-slot":"category-card-icon",...t,children:o})}function h({className:r,children:o,...t}){const{textColorScheme:a,aspectRatio:e}=s();return n.jsx("div",{className:c.cn("relative overflow-hidden rounded-[inherit] group-focus:ring-[var(--category-card-focus,hsl(var(--primary)))] group-focus-visible:ring-2",{light:"bg-[var(--category-card-light-background,hsl(var(--contrast-100)))]",dark:"bg-[var(--category-card-dark-background,hsl(var(--contrast-500)))]"}[a],{"5:6":"aspect-[5/6]","3:4":"aspect-[3/4]","1:1":"aspect-square"}[e],r),"data-slot":"category-card-thumbnail",...t,children:o})}function b({className:r,children:o,asChild:t=!1,...a}){const{textColorScheme:e}=s(),l=t?i.Slot:"img";return n.jsx(l,{className:c.cn("h-full w-full scale-100 select-none object-cover transition-transform duration-500 ease-out group-hover:scale-110",{light:"bg-[var(--category-card-light-background,hsl(var(--contrast-100)))]",dark:"bg-[var(--category-card-dark-background,hsl(var(--contrast-500)))]"}[e],r),"data-slot":"category-card-image",...a})}function k({className:r,children:o,...t}){const{textColorScheme:a}=s();return n.jsx("div",{className:c.cn("break-words p-4 text-4xl font-bold leading-none tracking-tight transition-transform duration-500 ease-out group-hover:scale-105",{light:"[color:color-mix(in_oklab,hsl(var(--foreground))_30%,transparent)]",dark:"[color:color-mix(in_oklab,hsl(var(--background))_30%,transparent)]"}[a],r),"data-slot":"category-card-fallback",...t,children:o})}function p({children:r,className:o,...t}){const{showOverlay:a}=s();return n.jsx("div",{className:c.cn("absolute inset-0 flex items-end p-6 @xs:p-8",a&&"bg-gradient-to-b from-foreground/0 from-50% via-foreground/0 via-50% to-foreground/50 to-100%",o),"data-slot":"category-card-overlay",...t,children:r})}function j({children:r,className:o,...t}){const{textSize:a,textColorScheme:e}=s();return n.jsx("h3",{className:c.cn("font-medium leading-tight",{small:"text-lg tracking-normal @xs:text-xl",medium:"text-xl tracking-normal @xs:text-2xl",large:"text-2xl tracking-tight @xs:text-3xl","x-large":"text-3xl tracking-tight @xs:text-4xl"}[a],{light:"text-[var(--category-card-light-text,hsl(var(--foreground)))]",dark:"text-[var(--category-card-dark-text,hsl(var(--background)))]"}[e],o),"data-slot":"category-card-title",...t,children:r})}function w({asChild:r=!1,className:o,...t}){const{textColorScheme:a}=s(),e=r?i.Slot:"a";return n.jsx(e,{className:c.cn("absolute inset-0 rounded-[var(--category-card-border-radius,1rem)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--category-card-focus,hsl(var(--primary)))] focus-visible:ring-offset-4",{light:"ring-offset-[var(--category-card-light-offset,hsl(var(--background)))]",dark:"ring-offset-[var(--category-card-dark-offset,hsl(var(--foreground)))]"}[a],o),"data-slot":"category-card-link",...t})}exports.CategoryCardFallback=k;exports.CategoryCardIcon=C;exports.CategoryCardImage=b;exports.CategoryCardLink=w;exports.CategoryCardOverlay=p;exports.CategoryCardRoot=m;exports.CategoryCardThumbnail=h;exports.CategoryCardTitle=j;exports.useCategoryCard=s;
+//# sourceMappingURL=category-card-link-BwSFHFcd.cjs.map

package/dist/category-card-link-BwSFHFcd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"category-card-link-BwSFHFcd.cjs","sources":["../src/components/category-card/primitives/category-card-root.tsx","../src/components/category-card/primitives/category-card-icon.tsx","../src/components/category-card/primitives/category-card-thumbnail.tsx","../src/components/category-card/primitives/category-card-image.tsx","../src/components/category-card/primitives/category-card-fallback.tsx","../src/components/category-card/primitives/category-card-overlay.tsx","../src/components/category-card/primitives/category-card-title.tsx","../src/components/category-card/primitives/category-card-link.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, use, useMemo } from 'react';\nimport type { ComponentProps, ElementType } from 'react';\n\nimport { cn } from '@/lib';\n\ninterface CategoryCardContext {\n  textColorScheme: 'light' | 'dark';\n  iconColorScheme: 'light' | 'dark';\n  aspectRatio: '5:6' | '3:4' | '1:1';\n  textSize: 'small' | 'medium' | 'large' | 'x-large';\n  showOverlay: boolean;\n}\n\nexport const CategoryCardContext = createContext<CategoryCardContext | undefined>(undefined);\n\nexport type CategoryCardRootProps<E extends ElementType = 'article'> = Omit<\n  ComponentProps<E>,\n  'as'\n> & {\n  as?: E;\n  textColorScheme?: 'light' | 'dark';\n  iconColorScheme?: 'light' | 'dark';\n  aspectRatio?: '5:6' | '3:4' | '1:1';\n  textSize?: 'small' | 'medium' | 'large' | 'x-large';\n  showOverlay?: boolean;\n};\n\nexport function CategoryCardRoot<T extends ElementType = 'article'>({\n  className,\n  children,\n  as,\n  textColorScheme = 'light',\n  iconColorScheme = 'light',\n  aspectRatio = '5:6',\n  textSize = 'small',\n  showOverlay = true,\n  ...props\n}: CategoryCardRootProps<T>) {\n  const CategoryCardRootElement = as ?? 'article';\n\n  const contextValues = useMemo(\n    () => ({\n      textColorScheme,\n      iconColorScheme,\n      aspectRatio,\n      textSize,\n      showOverlay,\n    }),\n    [textColorScheme, iconColorScheme, aspectRatio, textSize, showOverlay],\n  );\n\n  return (\n    <CategoryCardContext.Provider value={contextValues}>\n      <CategoryCardRootElement\n        className={cn(\n          'group relative flex w-full max-w-md cursor-pointer flex-col gap-2 rounded-[var(--category-card-border-radius,1rem)] font-[var(--category-card-font-family,var(--font-family-body))] @container',\n          {\n            small: 'gap-2',\n            medium: 'gap-3',\n            large: 'gap-4',\n            'x-large': 'gap-5',\n          }[textSize],\n          className,\n        )}\n        data-slot=\"category-card-root\"\n        {...props}\n      >\n        {children}\n      </CategoryCardRootElement>\n    </CategoryCardContext.Provider>\n  );\n}\n\nexport function useCategoryCard() {\n  const context = use(CategoryCardContext);\n\n  if (context === undefined) {\n    throw new Error('useCategoryCard must be used within a CategoryCardRoot');\n  }\n\n  return context;\n}\n","'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport type { ComponentProps } from 'react';\n\nimport { useCategoryCard } from '@/components/category-card';\nimport { cn } from '@/lib';\n\nexport type CategoryCardIconProps = ComponentProps<typeof Slot>;\n\nexport function CategoryCardIcon({ className, children, ...props }: CategoryCardIconProps) {\n  const { iconColorScheme } = useCategoryCard();\n\n  return (\n    <Slot\n      className={cn(\n        'absolute right-5 top-5 z-10 transition-transform duration-700 ease-out group-hover:-translate-y-1.5 group-hover:translate-x-1.5',\n        {\n          light: 'text-[var(--category-card-light-icon,hsl(var(--foreground)))]',\n          dark: 'text-[var(--category-card-dark-icon,hsl(var(--background)))]',\n        }[iconColorScheme],\n        className,\n      )}\n      data-slot=\"category-card-icon\"\n      {...props}\n    >\n      {children}\n    </Slot>\n  );\n}\n","'use client';\n\nimport type { ComponentProps } from 'react';\n\nimport { useCategoryCard } from '@/components/category-card';\nimport { cn } from '@/lib';\n\nexport type CategoryCardThumbnailProps = ComponentProps<'div'>;\n\nexport function CategoryCardThumbnail({\n  className,\n  children,\n  ...props\n}: CategoryCardThumbnailProps) {\n  const { textColorScheme, aspectRatio } = useCategoryCard();\n\n  return (\n    <div\n      className={cn(\n        'relative overflow-hidden rounded-[inherit] group-focus:ring-[var(--category-card-focus,hsl(var(--primary)))] group-focus-visible:ring-2',\n        {\n          light: 'bg-[var(--category-card-light-background,hsl(var(--contrast-100)))]',\n          dark: 'bg-[var(--category-card-dark-background,hsl(var(--contrast-500)))]',\n        }[textColorScheme],\n        {\n          '5:6': 'aspect-[5/6]',\n          '3:4': 'aspect-[3/4]',\n          '1:1': 'aspect-square',\n        }[aspectRatio],\n        className,\n      )}\n      data-slot=\"category-card-thumbnail\"\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n","'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport type { ComponentProps } from 'react';\n\nimport { useCategoryCard } from '@/components/category-card';\nimport { cn } from '@/lib';\n\nexport type CategoryCardImageProps = ComponentProps<'img'> & {\n  asChild?: boolean;\n};\n\nexport function CategoryCardImage({\n  className,\n  children,\n  asChild = false,\n  ...props\n}: CategoryCardImageProps) {\n  const { textColorScheme } = useCategoryCard();\n\n  const Component = asChild ? Slot : 'img';\n\n  return (\n    <Component\n      className={cn(\n        'h-full w-full scale-100 select-none object-cover transition-transform duration-500 ease-out group-hover:scale-110',\n        {\n          light: 'bg-[var(--category-card-light-background,hsl(var(--contrast-100)))]',\n          dark: 'bg-[var(--category-card-dark-background,hsl(var(--contrast-500)))]',\n        }[textColorScheme],\n        className,\n      )}\n      data-slot=\"category-card-image\"\n      {...props}\n    />\n  );\n}\n","'use client';\n\nimport type { ComponentProps } from 'react';\n\nimport { useCategoryCard } from '@/components/category-card';\nimport { cn } from '@/lib';\n\nexport type CategoryCardFallbackProps = ComponentProps<'div'>;\n\nexport function CategoryCardFallback({ className, children, ...props }: CategoryCardFallbackProps) {\n  const { textColorScheme } = useCategoryCard();\n\n  return (\n    <div\n      className={cn(\n        'break-words p-4 text-4xl font-bold leading-none tracking-tight transition-transform duration-500 ease-out group-hover:scale-105',\n        {\n          light: '[color:color-mix(in_oklab,hsl(var(--foreground))_30%,transparent)]',\n          dark: '[color:color-mix(in_oklab,hsl(var(--background))_30%,transparent)]',\n        }[textColorScheme],\n        className,\n      )}\n      data-slot=\"category-card-fallback\"\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n","'use client';\n\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nimport { useCategoryCard } from '../primitives';\n\nexport type CategoryCardOverlayProps = ComponentProps<'div'>;\n\nexport function CategoryCardOverlay({ children, className, ...props }: CategoryCardOverlayProps) {\n  const { showOverlay } = useCategoryCard();\n\n  return (\n    <div\n      className={cn(\n        'absolute inset-0 flex items-end p-6 @xs:p-8',\n        showOverlay &&\n          'bg-gradient-to-b from-foreground/0 from-50% via-foreground/0 via-50% to-foreground/50 to-100%',\n        className,\n      )}\n      data-slot=\"category-card-overlay\"\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n","'use client';\n\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nimport { useCategoryCard } from '../primitives';\n\nexport type CategoryCardTitleProps = ComponentProps<'h3'>;\n\nexport function CategoryCardTitle({ children, className, ...props }: CategoryCardTitleProps) {\n  const { textSize, textColorScheme } = useCategoryCard();\n\n  return (\n    <h3\n      className={cn(\n        'font-medium leading-tight',\n        {\n          small: 'text-lg tracking-normal @xs:text-xl',\n          medium: 'text-xl tracking-normal @xs:text-2xl',\n          large: 'text-2xl tracking-tight @xs:text-3xl',\n          'x-large': 'text-3xl tracking-tight @xs:text-4xl',\n        }[textSize],\n        {\n          light: 'text-[var(--category-card-light-text,hsl(var(--foreground)))]',\n          dark: 'text-[var(--category-card-dark-text,hsl(var(--background)))]',\n        }[textColorScheme],\n        className,\n      )}\n      data-slot=\"category-card-title\"\n      {...props}\n    >\n      {children}\n    </h3>\n  );\n}\n","'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport type { ComponentProps } from 'react';\n\nimport { useCategoryCard } from '@/components/category-card';\nimport { cn } from '@/lib';\n\nexport interface CategoryCardLinkProps extends ComponentProps<'a'> {\n  asChild?: boolean;\n}\n\nexport function CategoryCardLink({ asChild = false, className, ...props }: CategoryCardLinkProps) {\n  const { textColorScheme } = useCategoryCard();\n\n  const Component = asChild ? Slot : 'a';\n\n  return (\n    <Component\n      className={cn(\n        'absolute inset-0 rounded-[var(--category-card-border-radius,1rem)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--category-card-focus,hsl(var(--primary)))] focus-visible:ring-offset-4',\n        {\n          light: 'ring-offset-[var(--category-card-light-offset,hsl(var(--background)))]',\n          dark: 'ring-offset-[var(--category-card-dark-offset,hsl(var(--foreground)))]',\n        }[textColorScheme],\n        className,\n      )}\n      data-slot=\"category-card-link\"\n      {...props}\n    />\n  );\n}\n"],"names":["CategoryCardContext","createContext","CategoryCardRoot","className","children","as","textColorScheme","iconColorScheme","aspectRatio","textSize","showOverlay","props","CategoryCardRootElement","contextValues","useMemo","jsx","cn","useCategoryCard","context","use","CategoryCardIcon","Slot","CategoryCardThumbnail","CategoryCardImage","asChild","Component","CategoryCardFallback","CategoryCardOverlay","CategoryCardTitle","CategoryCardLink"],"mappings":"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"}

package/dist/category-card.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),d=require("react"),c=require("./utils-LBH114_M.cjs"),g=require("./index-DGaxX11V.cjs"),h=require("./skeleton-box-yQLivCqg.cjs"),y=require("./skeleton-text-CLzoDFvz.cjs"),x=d.createContext(void 0);function k({className:r,children:a,as:t,textColorScheme:e="light",iconColorScheme:n="light",aspectRatio:l="5:6",textSize:i="small",showOverlay:u=!0,...f}){const m=t??"article",v=d.useMemo(()=>({textColorScheme:e,iconColorScheme:n,aspectRatio:l,textSize:i,showOverlay:u}),[e,n,l,i,u]);return o.jsx(x.Provider,{value:v,children:o.jsx(m,{className:c.cn("group relative flex w-full max-w-md cursor-pointer flex-col gap-2 rounded-[var(--category-card-border-radius,1rem)] font-[var(--category-card-font-family,var(--font-family-body))] @container",{small:"gap-2",medium:"gap-3",large:"gap-4","x-large":"gap-5"}[i],r),"data-slot":"category-card-root",...f,children:a})})}function s(){const r=d.use(x);if(r===void 0)throw new Error("useCategoryCard must be used within a CategoryCardRoot");return r}function b({className:r,children:a,...t}){const{iconColorScheme:e}=s();return o.jsx(g.Slot,{className:c.cn("absolute right-5 top-5 z-10 transition-transform duration-700 ease-out group-hover:-translate-y-1.5 group-hover:translate-x-1.5",{light:"text-[var(--category-card-light-icon,hsl(var(--foreground)))]",dark:"text-[var(--category-card-dark-icon,hsl(var(--background)))]"}[e],r),"data-slot":"category-card-icon",...t,children:a})}function C({className:r,children:a,...t}){const{textColorScheme:e,aspectRatio:n}=s();return o.jsx("div",{className:c.cn("relative overflow-hidden rounded-[inherit] group-focus:ring-[var(--category-card-focus,hsl(var(--primary)))] group-focus-visible:ring-2",{light:"bg-[var(--category-card-light-background,hsl(var(--contrast-100)))]",dark:"bg-[var(--category-card-dark-background,hsl(var(--contrast-500)))]"}[e],{"5:6":"aspect-[5/6]","3:4":"aspect-[3/4]","1:1":"aspect-square"}[n],r),"data-slot":"category-card-thumbnail",...t,children:a})}function p({className:r,children:a,asChild:t=!1,...e}){const{textColorScheme:n}=s(),l=t?g.Slot:"img";return o.jsx(l,{className:c.cn("h-full w-full scale-100 select-none object-cover transition-transform duration-500 ease-out group-hover:scale-110",{light:"bg-[var(--category-card-light-background,hsl(var(--contrast-100)))]",dark:"bg-[var(--category-card-dark-background,hsl(var(--contrast-500)))]"}[n],r),"data-slot":"category-card-image",...e})}function j({className:r,children:a,...t}){const{textColorScheme:e}=s();return o.jsx("div",{className:c.cn("break-words p-4 text-4xl font-bold leading-none tracking-tight transition-transform duration-500 ease-out group-hover:scale-105",{light:"[color:color-mix(in_oklab,hsl(var(--foreground))_30%,transparent)]",dark:"[color:color-mix(in_oklab,hsl(var(--background))_30%,transparent)]"}[e],r),"data-slot":"category-card-fallback",...t,children:a})}function N({children:r,className:a,...t}){const{showOverlay:e}=s();return o.jsx("div",{className:c.cn("absolute inset-0 flex items-end p-6 @xs:p-8",e&&"bg-gradient-to-b from-foreground/0 from-50% via-foreground/0 via-50% to-foreground/50 to-100%",a),"data-slot":"category-card-overlay",...t,children:r})}function S({children:r,className:a,...t}){const{textSize:e,textColorScheme:n}=s();return o.jsx("h3",{className:c.cn("font-medium leading-tight",{small:"text-lg tracking-normal @xs:text-xl",medium:"text-xl tracking-normal @xs:text-2xl",large:"text-2xl tracking-tight @xs:text-3xl","x-large":"text-3xl tracking-tight @xs:text-4xl"}[e],{light:"text-[var(--category-card-light-text,hsl(var(--foreground)))]",dark:"text-[var(--category-card-dark-text,hsl(var(--background)))]"}[n],a),"data-slot":"category-card-title",...t,children:r})}function q({asChild:r=!1,className:a,...t}){const{textColorScheme:e}=s(),n=r?g.Slot:"a";return o.jsx(n,{className:c.cn("absolute inset-0 rounded-[var(--category-card-border-radius,1rem)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--category-card-focus,hsl(var(--primary)))] focus-visible:ring-offset-4",{light:"ring-offset-[var(--category-card-light-offset,hsl(var(--background)))]",dark:"ring-offset-[var(--category-card-dark-offset,hsl(var(--foreground)))]"}[e],a),"data-slot":"category-card-link",...t})}function w({className:r,...a}){const{aspectRatio:t}=s();return o.jsxs("div",{className:c.cn("@container",r),...a,"data-slot":"category-card-skeleton",children:[o.jsx(h.SkeletonBox,{className:c.cn("rounded-[var(--category-card-border-radius,1rem)]",{"5:6":"aspect-[5/6]","3:4":"aspect-[3/4]","1:1":"aspect-square"}[t])}),o.jsx("div",{className:"mt-3",children:o.jsx(y.SkeletonText,{characterCount:10,className:"rounded text-lg"})})]})}exports.Fallback=j;exports.Icon=b;exports.Image=p;exports.Link=q;exports.Overlay=N;exports.Root=k;exports.Skeleton=w;exports.Thumbnail=C;exports.Title=S;exports.useCategoryCard=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./category-card-link-BwSFHFcd.cjs"),a=require("react/jsx-runtime"),r=require("./utils-LBH114_M.cjs"),n=require("./skeleton-box-yQLivCqg.cjs"),c=require("./skeleton-text-CLzoDFvz.cjs");function l({className:t,...o}){const{aspectRatio:s}=e.useCategoryCard();return a.jsxs("div",{className:r.cn("@container",t),...o,"data-slot":"category-card-skeleton",children:[a.jsx(n.SkeletonBox,{className:r.cn("rounded-[var(--category-card-border-radius,1rem)]",{"5:6":"aspect-[5/6]","3:4":"aspect-[3/4]","1:1":"aspect-square"}[s])}),a.jsx("div",{className:"mt-3",children:a.jsx(c.SkeletonText,{characterCount:10,className:"rounded text-lg"})})]})}exports.Fallback=e.CategoryCardFallback;exports.Icon=e.CategoryCardIcon;exports.Image=e.CategoryCardImage;exports.Link=e.CategoryCardLink;exports.Overlay=e.CategoryCardOverlay;exports.Root=e.CategoryCardRoot;exports.Thumbnail=e.CategoryCardThumbnail;exports.Title=e.CategoryCardTitle;exports.useCategoryCard=e.useCategoryCard;exports.Skeleton=l;
 //# sourceMappingURL=category-card.cjs.map

package/dist/category-card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"category-card.cjs","sources":["../src/components/category-card/primitives/category-card-root.tsx","../src/components/category-card/primitives/category-card-icon.tsx","../src/components/category-card/primitives/category-card-thumbnail.tsx","../src/components/category-card/primitives/category-card-image.tsx","../src/components/category-card/primitives/category-card-fallback.tsx","../src/components/category-card/primitives/category-card-overlay.tsx","../src/components/category-card/primitives/category-card-title.tsx","../src/components/category-card/primitives/category-card-link.tsx","../src/components/category-card/primitives/category-card-skeleton.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, use, useMemo } from 'react';\nimport type { ComponentProps, ElementType } from 'react';\n\nimport { cn } from '@/lib';\n\ninterface CategoryCardContext {\n  textColorScheme: 'light' | 'dark';\n  iconColorScheme: 'light' | 'dark';\n  aspectRatio: '5:6' | '3:4' | '1:1';\n  textSize: 'small' | 'medium' | 'large' | 'x-large';\n  showOverlay: boolean;\n}\n\nexport const CategoryCardContext = createContext<CategoryCardContext | undefined>(undefined);\n\nexport type CategoryCardRootProps<E extends ElementType = 'article'> = Omit<\n  ComponentProps<E>,\n  'as'\n> & {\n  as?: E;\n  textColorScheme?: 'light' | 'dark';\n  iconColorScheme?: 'light' | 'dark';\n  aspectRatio?: '5:6' | '3:4' | '1:1';\n  textSize?: 'small' | 'medium' | 'large' | 'x-large';\n  showOverlay?: boolean;\n};\n\nexport function CategoryCardRoot<T extends ElementType = 'article'>({\n  className,\n  children,\n  as,\n  textColorScheme = 'light',\n  iconColorScheme = 'light',\n  aspectRatio = '5:6',\n  textSize = 'small',\n  showOverlay = true,\n  ...props\n}: CategoryCardRootProps<T>) {\n  const CategoryCardRootElement = as ?? 'article';\n\n  const contextValues = useMemo(\n    () => ({\n      textColorScheme,\n      iconColorScheme,\n      aspectRatio,\n      textSize,\n      showOverlay,\n    }),\n    [textColorScheme, iconColorScheme, aspectRatio, textSize, showOverlay],\n  );\n\n  return (\n    <CategoryCardContext.Provider value={contextValues}>\n      <CategoryCardRootElement\n        className={cn(\n          'group relative flex w-full max-w-md cursor-pointer flex-col gap-2 rounded-[var(--category-card-border-radius,1rem)] font-[var(--category-card-font-family,var(--font-family-body))] @container',\n          {\n            small: 'gap-2',\n            medium: 'gap-3',\n            large: 'gap-4',\n            'x-large': 'gap-5',\n          }[textSize],\n          className,\n        )}\n        data-slot=\"category-card-root\"\n        {...props}\n      >\n        {children}\n      </CategoryCardRootElement>\n    </CategoryCardContext.Provider>\n  );\n}\n\nexport function useCategoryCard() {\n  const context = use(CategoryCardContext);\n\n  if (context === undefined) {\n    throw new Error('useCategoryCard must be used within a CategoryCardRoot');\n  }\n\n  return context;\n}\n","'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport type { ComponentProps } from 'react';\n\nimport { useCategoryCard } from '@/components/category-card';\nimport { cn } from '@/lib';\n\nexport type CategoryCardIconProps = ComponentProps<typeof Slot>;\n\nexport function CategoryCardIcon({ className, children, ...props }: CategoryCardIconProps) {\n  const { iconColorScheme } = useCategoryCard();\n\n  return (\n    <Slot\n      className={cn(\n        'absolute right-5 top-5 z-10 transition-transform duration-700 ease-out group-hover:-translate-y-1.5 group-hover:translate-x-1.5',\n        {\n          light: 'text-[var(--category-card-light-icon,hsl(var(--foreground)))]',\n          dark: 'text-[var(--category-card-dark-icon,hsl(var(--background)))]',\n        }[iconColorScheme],\n        className,\n      )}\n      data-slot=\"category-card-icon\"\n      {...props}\n    >\n      {children}\n    </Slot>\n  );\n}\n","'use client';\n\nimport type { ComponentProps } from 'react';\n\nimport { useCategoryCard } from '@/components/category-card';\nimport { cn } from '@/lib';\n\nexport type CategoryCardThumbnailProps = ComponentProps<'div'>;\n\nexport function CategoryCardThumbnail({\n  className,\n  children,\n  ...props\n}: CategoryCardThumbnailProps) {\n  const { textColorScheme, aspectRatio } = useCategoryCard();\n\n  return (\n    <div\n      className={cn(\n        'relative overflow-hidden rounded-[inherit] group-focus:ring-[var(--category-card-focus,hsl(var(--primary)))] group-focus-visible:ring-2',\n        {\n          light: 'bg-[var(--category-card-light-background,hsl(var(--contrast-100)))]',\n          dark: 'bg-[var(--category-card-dark-background,hsl(var(--contrast-500)))]',\n        }[textColorScheme],\n        {\n          '5:6': 'aspect-[5/6]',\n          '3:4': 'aspect-[3/4]',\n          '1:1': 'aspect-square',\n        }[aspectRatio],\n        className,\n      )}\n      data-slot=\"category-card-thumbnail\"\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n","'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport type { ComponentProps } from 'react';\n\nimport { useCategoryCard } from '@/components/category-card';\nimport { cn } from '@/lib';\n\nexport type CategoryCardImageProps = ComponentProps<'img'> & {\n  asChild?: boolean;\n};\n\nexport function CategoryCardImage({\n  className,\n  children,\n  asChild = false,\n  ...props\n}: CategoryCardImageProps) {\n  const { textColorScheme } = useCategoryCard();\n\n  const Component = asChild ? Slot : 'img';\n\n  return (\n    <Component\n      className={cn(\n        'h-full w-full scale-100 select-none object-cover transition-transform duration-500 ease-out group-hover:scale-110',\n        {\n          light: 'bg-[var(--category-card-light-background,hsl(var(--contrast-100)))]',\n          dark: 'bg-[var(--category-card-dark-background,hsl(var(--contrast-500)))]',\n        }[textColorScheme],\n        className,\n      )}\n      data-slot=\"category-card-image\"\n      {...props}\n    />\n  );\n}\n","'use client';\n\nimport type { ComponentProps } from 'react';\n\nimport { useCategoryCard } from '@/components/category-card';\nimport { cn } from '@/lib';\n\nexport type CategoryCardFallbackProps = ComponentProps<'div'>;\n\nexport function CategoryCardFallback({ className, children, ...props }: CategoryCardFallbackProps) {\n  const { textColorScheme } = useCategoryCard();\n\n  return (\n    <div\n      className={cn(\n        'break-words p-4 text-4xl font-bold leading-none tracking-tight transition-transform duration-500 ease-out group-hover:scale-105',\n        {\n          light: '[color:color-mix(in_oklab,hsl(var(--foreground))_30%,transparent)]',\n          dark: '[color:color-mix(in_oklab,hsl(var(--background))_30%,transparent)]',\n        }[textColorScheme],\n        className,\n      )}\n      data-slot=\"category-card-fallback\"\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n","'use client';\n\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nimport { useCategoryCard } from '../primitives';\n\nexport type CategoryCardOverlayProps = ComponentProps<'div'>;\n\nexport function CategoryCardOverlay({ children, className, ...props }: CategoryCardOverlayProps) {\n  const { showOverlay } = useCategoryCard();\n\n  return (\n    <div\n      className={cn(\n        'absolute inset-0 flex items-end p-6 @xs:p-8',\n        showOverlay &&\n          'bg-gradient-to-b from-foreground/0 from-50% via-foreground/0 via-50% to-foreground/50 to-100%',\n        className,\n      )}\n      data-slot=\"category-card-overlay\"\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n","'use client';\n\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '@/lib';\n\nimport { useCategoryCard } from '../primitives';\n\nexport type CategoryCardTitleProps = ComponentProps<'h3'>;\n\nexport function CategoryCardTitle({ children, className, ...props }: CategoryCardTitleProps) {\n  const { textSize, textColorScheme } = useCategoryCard();\n\n  return (\n    <h3\n      className={cn(\n        'font-medium leading-tight',\n        {\n          small: 'text-lg tracking-normal @xs:text-xl',\n          medium: 'text-xl tracking-normal @xs:text-2xl',\n          large: 'text-2xl tracking-tight @xs:text-3xl',\n          'x-large': 'text-3xl tracking-tight @xs:text-4xl',\n        }[textSize],\n        {\n          light: 'text-[var(--category-card-light-text,hsl(var(--foreground)))]',\n          dark: 'text-[var(--category-card-dark-text,hsl(var(--background)))]',\n        }[textColorScheme],\n        className,\n      )}\n      data-slot=\"category-card-title\"\n      {...props}\n    >\n      {children}\n    </h3>\n  );\n}\n","'use client';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport type { ComponentProps } from 'react';\n\nimport { useCategoryCard } from '@/components/category-card';\nimport { cn } from '@/lib';\n\nexport interface CategoryCardLinkProps extends ComponentProps<'a'> {\n  asChild?: boolean;\n}\n\nexport function CategoryCardLink({ asChild = false, className, ...props }: CategoryCardLinkProps) {\n  const { textColorScheme } = useCategoryCard();\n\n  const Component = asChild ? Slot : 'a';\n\n  return (\n    <Component\n      className={cn(\n        'absolute inset-0 rounded-[var(--category-card-border-radius,1rem)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--category-card-focus,hsl(var(--primary)))] focus-visible:ring-offset-4',\n        {\n          light: 'ring-offset-[var(--category-card-light-offset,hsl(var(--background)))]',\n          dark: 'ring-offset-[var(--category-card-dark-offset,hsl(var(--foreground)))]',\n        }[textColorScheme],\n        className,\n      )}\n      data-slot=\"category-card-link\"\n      {...props}\n    />\n  );\n}\n","import type { ComponentProps } from 'react';\n\nimport * as SkeletonPrimitive from '@/components/skeleton';\nimport { cn } from '@/lib';\n\nimport { useCategoryCard } from '../primitives';\n\nexport type CategoryCardSkeletonProps = ComponentProps<'div'>;\n\nexport function CategoryCardSkeleton({ className, ...props }: CategoryCardSkeletonProps) {\n  const { aspectRatio } = useCategoryCard();\n\n  return (\n    <div className={cn('@container', className)} {...props} data-slot=\"category-card-skeleton\">\n      <SkeletonPrimitive.Box\n        className={cn(\n          'rounded-[var(--category-card-border-radius,1rem)]',\n          {\n            '5:6': 'aspect-[5/6]',\n            '3:4': 'aspect-[3/4]',\n            '1:1': 'aspect-square',\n          }[aspectRatio],\n        )}\n      />\n      <div className=\"mt-3\">\n        <SkeletonPrimitive.Text characterCount={10} className=\"rounded text-lg\" />\n      </div>\n    </div>\n  );\n}\n"],"names":["CategoryCardContext","createContext","CategoryCardRoot","className","children","as","textColorScheme","iconColorScheme","aspectRatio","textSize","showOverlay","props","CategoryCardRootElement","contextValues","useMemo","jsx","cn","useCategoryCard","context","use","CategoryCardIcon","Slot","CategoryCardThumbnail","CategoryCardImage","asChild","Component","CategoryCardFallback","CategoryCardOverlay","CategoryCardTitle","CategoryCardLink","CategoryCardSkeleton","jsxs","SkeletonPrimitive.Box","SkeletonPrimitive.Text"],"mappings":"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"}
+{"version":3,"file":"category-card.cjs","sources":["../src/components/category-card/primitives/category-card-skeleton.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport * as SkeletonPrimitive from '@/components/skeleton';\nimport { cn } from '@/lib';\n\nimport { useCategoryCard } from '../primitives';\n\nexport type CategoryCardSkeletonProps = ComponentProps<'div'>;\n\nexport function CategoryCardSkeleton({ className, ...props }: CategoryCardSkeletonProps) {\n  const { aspectRatio } = useCategoryCard();\n\n  return (\n    <div className={cn('@container', className)} {...props} data-slot=\"category-card-skeleton\">\n      <SkeletonPrimitive.Box\n        className={cn(\n          'rounded-[var(--category-card-border-radius,1rem)]',\n          {\n            '5:6': 'aspect-[5/6]',\n            '3:4': 'aspect-[3/4]',\n            '1:1': 'aspect-square',\n          }[aspectRatio],\n        )}\n      />\n      <div className=\"mt-3\">\n        <SkeletonPrimitive.Text characterCount={10} className=\"rounded text-lg\" />\n      </div>\n    </div>\n  );\n}\n"],"names":["CategoryCardSkeleton","className","props","aspectRatio","useCategoryCard","jsxs","cn","jsx","SkeletonPrimitive.Box","SkeletonPrimitive.Text"],"mappings":"yRASO,SAASA,EAAqB,CAAE,UAAAC,EAAW,GAAGC,GAAoC,CACvF,KAAM,CAAE,YAAAC,CAAA,EAAgBC,kBAAA,EAExB,OACEC,OAAC,MAAA,CAAI,UAAWC,EAAAA,GAAG,aAAcL,CAAS,EAAI,GAAGC,EAAO,YAAU,yBAChE,SAAA,CAAAK,EAAAA,IAACC,EAAAA,YAAA,CACC,UAAWF,EAAAA,GACT,oDACA,CACE,MAAO,eACP,MAAO,eACP,MAAO,eAAA,EACPH,CAAW,CAAA,CACf,CAAA,EAEFI,EAAAA,IAAC,MAAA,CAAI,UAAU,OACb,SAAAA,EAAAA,IAACE,EAAAA,aAAA,CAAuB,eAAgB,GAAI,UAAU,iBAAA,CAAkB,CAAA,CAC1E,CAAA,EACF,CAEJ"}

package/dist/category-card.js

@@ -1,233 +1,38 @@
-import { jsx as e, jsxs as h } from "react/jsx-runtime";
-import { createContext as x, useMemo as y, use as p } from "react";
-import { c as n } from "./utils-BOGlfttm.js";
-import { S as d } from "./index-DD8W7cMj.js";
-import { S as C } from "./skeleton-box-BSzQ5f9Y.js";
-import { S as k } from "./skeleton-text-Dd4GbnEz.js";
-const u = x(void 0);
-function I({
-  className: r,
-  children: t,
-  as: a,
-  textColorScheme: o = "light",
-  iconColorScheme: c = "light",
-  aspectRatio: l = "5:6",
-  textSize: i = "small",
-  showOverlay: g = !0,
-  ...m
-}) {
-  const f = a ?? "article", v = y(
-    () => ({
-      textColorScheme: o,
-      iconColorScheme: c,
-      aspectRatio: l,
-      textSize: i,
-      showOverlay: g
-    }),
-    [o, c, l, i, g]
-  );
-  return /* @__PURE__ */ e(u.Provider, { value: v, children: /* @__PURE__ */ e(
-    f,
-    {
-      className: n(
-        "group relative flex w-full max-w-md cursor-pointer flex-col gap-2 rounded-[var(--category-card-border-radius,1rem)] font-[var(--category-card-font-family,var(--font-family-body))] @container",
-        {
-          small: "gap-2",
-          medium: "gap-3",
-          large: "gap-4",
-          "x-large": "gap-5"
-        }[i],
-        r
-      ),
-      "data-slot": "category-card-root",
-      ...m,
-      children: t
-    }
-  ) });
-}
-function s() {
-  const r = p(u);
-  if (r === void 0)
-    throw new Error("useCategoryCard must be used within a CategoryCardRoot");
-  return r;
-}
-function _({ className: r, children: t, ...a }) {
-  const { iconColorScheme: o } = s();
-  return /* @__PURE__ */ e(
-    d,
-    {
-      className: n(
-        "absolute right-5 top-5 z-10 transition-transform duration-700 ease-out group-hover:-translate-y-1.5 group-hover:translate-x-1.5",
-        {
-          light: "text-[var(--category-card-light-icon,hsl(var(--foreground)))]",
-          dark: "text-[var(--category-card-dark-icon,hsl(var(--background)))]"
-        }[o],
-        r
-      ),
-      "data-slot": "category-card-icon",
-      ...a,
-      children: t
-    }
-  );
-}
-function j({
-  className: r,
-  children: t,
-  ...a
-}) {
-  const { textColorScheme: o, aspectRatio: c } = s();
-  return /* @__PURE__ */ e(
-    "div",
-    {
-      className: n(
-        "relative overflow-hidden rounded-[inherit] group-focus:ring-[var(--category-card-focus,hsl(var(--primary)))] group-focus-visible:ring-2",
-        {
-          light: "bg-[var(--category-card-light-background,hsl(var(--contrast-100)))]",
-          dark: "bg-[var(--category-card-dark-background,hsl(var(--contrast-500)))]"
-        }[o],
-        {
-          "5:6": "aspect-[5/6]",
-          "3:4": "aspect-[3/4]",
-          "1:1": "aspect-square"
-        }[c],
-        r
-      ),
-      "data-slot": "category-card-thumbnail",
-      ...a,
-      children: t
-    }
-  );
-}
-function q({
-  className: r,
-  children: t,
-  asChild: a = !1,
-  ...o
-}) {
-  const { textColorScheme: c } = s();
-  return /* @__PURE__ */ e(
-    a ? d : "img",
-    {
-      className: n(
-        "h-full w-full scale-100 select-none object-cover transition-transform duration-500 ease-out group-hover:scale-110",
-        {
-          light: "bg-[var(--category-card-light-background,hsl(var(--contrast-100)))]",
-          dark: "bg-[var(--category-card-dark-background,hsl(var(--contrast-500)))]"
-        }[c],
-        r
-      ),
-      "data-slot": "category-card-image",
-      ...o
-    }
-  );
-}
-function E({ className: r, children: t, ...a }) {
-  const { textColorScheme: o } = s();
-  return /* @__PURE__ */ e(
-    "div",
-    {
-      className: n(
-        "break-words p-4 text-4xl font-bold leading-none tracking-tight transition-transform duration-500 ease-out group-hover:scale-105",
-        {
-          light: "[color:color-mix(in_oklab,hsl(var(--foreground))_30%,transparent)]",
-          dark: "[color:color-mix(in_oklab,hsl(var(--background))_30%,transparent)]"
-        }[o],
-        r
-      ),
-      "data-slot": "category-card-fallback",
-      ...a,
-      children: t
-    }
-  );
-}
-function F({ children: r, className: t, ...a }) {
-  const { showOverlay: o } = s();
-  return /* @__PURE__ */ e(
-    "div",
-    {
-      className: n(
-        "absolute inset-0 flex items-end p-6 @xs:p-8",
-        o && "bg-gradient-to-b from-foreground/0 from-50% via-foreground/0 via-50% to-foreground/50 to-100%",
-        t
-      ),
-      "data-slot": "category-card-overlay",
-      ...a,
-      children: r
-    }
-  );
-}
-function L({ children: r, className: t, ...a }) {
-  const { textSize: o, textColorScheme: c } = s();
-  return /* @__PURE__ */ e(
-    "h3",
-    {
-      className: n(
-        "font-medium leading-tight",
-        {
-          small: "text-lg tracking-normal @xs:text-xl",
-          medium: "text-xl tracking-normal @xs:text-2xl",
-          large: "text-2xl tracking-tight @xs:text-3xl",
-          "x-large": "text-3xl tracking-tight @xs:text-4xl"
-        }[o],
-        {
-          light: "text-[var(--category-card-light-text,hsl(var(--foreground)))]",
-          dark: "text-[var(--category-card-dark-text,hsl(var(--background)))]"
-        }[c],
-        t
-      ),
-      "data-slot": "category-card-title",
-      ...a,
-      children: r
-    }
-  );
-}
-function O({ asChild: r = !1, className: t, ...a }) {
-  const { textColorScheme: o } = s();
-  return /* @__PURE__ */ e(
-    r ? d : "a",
-    {
-      className: n(
-        "absolute inset-0 rounded-[var(--category-card-border-radius,1rem)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--category-card-focus,hsl(var(--primary)))] focus-visible:ring-offset-4",
-        {
-          light: "ring-offset-[var(--category-card-light-offset,hsl(var(--background)))]",
-          dark: "ring-offset-[var(--category-card-dark-offset,hsl(var(--foreground)))]"
-        }[o],
-        t
-      ),
-      "data-slot": "category-card-link",
-      ...a
-    }
-  );
-}
-function B({ className: r, ...t }) {
-  const { aspectRatio: a } = s();
-  return /* @__PURE__ */ h("div", { className: n("@container", r), ...t, "data-slot": "category-card-skeleton", children: [
-    /* @__PURE__ */ e(
-      C,
+import { u as s } from "./category-card-link-BqMAG9Op.js";
+import { d as x, a as C, c as S, g as y, e as b, C as h, b as v, f as N } from "./category-card-link-BqMAG9Op.js";
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { c as e } from "./utils-BOGlfttm.js";
+import { S as n } from "./skeleton-box-BSzQ5f9Y.js";
+import { S as m } from "./skeleton-text-Dd4GbnEz.js";
+function f({ className: r, ...o }) {
+  const { aspectRatio: t } = s();
+  return /* @__PURE__ */ c("div", { className: e("@container", r), ...o, "data-slot": "category-card-skeleton", children: [
+    /* @__PURE__ */ a(
+      n,
       {
-        className: n(
+        className: e(
           "rounded-[var(--category-card-border-radius,1rem)]",
           {
             "5:6": "aspect-[5/6]",
             "3:4": "aspect-[3/4]",
             "1:1": "aspect-square"
-          }[a]
+          }[t]
         )
       }
     ),
-    /* @__PURE__ */ e("div", { className: "mt-3", children: /* @__PURE__ */ e(k, { characterCount: 10, className: "rounded text-lg" }) })
+    /* @__PURE__ */ a("div", { className: "mt-3", children: /* @__PURE__ */ a(m, { characterCount: 10, className: "rounded text-lg" }) })
   ] });
 }
 export {
-  E as Fallback,
-  _ as Icon,
-  q as Image,
-  O as Link,
-  F as Overlay,
-  I as Root,
-  B as Skeleton,
-  j as Thumbnail,
-  L as Title,
+  x as Fallback,
+  C as Icon,
+  S as Image,
+  y as Link,
+  b as Overlay,
+  h as Root,
+  f as Skeleton,
+  v as Thumbnail,
+  N as Title,
   s as useCategoryCard
 };
 //# sourceMappingURL=category-card.js.map