@choco-vanille/ui 1.1.2 → 1.3.0

package/dist/components/layout/flex/index.d.ts

@@ -1,5 +1,4 @@
 export { default as Flex } from './Flex.tsx';
 export { FLEX_STYLES } from './styles/Flex.css.ts';
-export type { FlexRecipeVariants } from './styles/Flex.css.ts';
 export type { FlexProps } from './types/Flex.props.ts';
 export type { FlexDirection, FlexWrap, FlexAlign, FlexJustify } from './types/Flex.types.ts';

package/dist/components/layout/flex/styles/Flex.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+import { RuntimeFn } from '@vanilla-extract/recipes';
 export declare const FLEX_STYLES: {
     recipe: RuntimeFn<{
         inline: {
@@ -8,4 +8,3 @@ export declare const FLEX_STYLES: {
         };
     }>;
 };
-export type FlexRecipeVariants = NonNullable<RecipeVariants<typeof FLEX_STYLES.recipe>>;

package/dist/components/layout/flex/types/Flex.props.d.ts

@@ -1,6 +1,5 @@
-import { FlexRecipeVariants } from '../styles/Flex.css.ts';
 import { BoxProps } from '../../box/types/Box.props.ts';
 export type FlexProps = Omit<BoxProps, 'display'> & {
     /** Renders the flex container as `inline-flex` instead of `flex`. */
-    inline?: FlexRecipeVariants['inline'];
+    inline?: boolean;
 };

package/dist/components/layout/grid/Grid.cjs

@@ -1,2 +1,2 @@
-"use strict";const q=require("react/jsx-runtime"),x=require("./styles/Grid.css.cjs"),G=require("../../../utils/cn.cjs"),p=require("react"),R=require("../box/Box.cjs"),e=p.memo(({columns:r,gridAutoRows:s,gridTemplateRows:c,gridAutoFlow:i,alignItems:t,justifyItems:n,alignContent:o,justifyContent:u,gap:m="md",className:a,...d})=>q.jsx(R,{gap:m,className:G.cn(x.GRID_STYLES.recipe({columns:r,gridAutoRows:s,gridTemplateRows:c,gridAutoFlow:i,alignItems:t,justifyItems:n,alignContent:o,justifyContent:u}),a),...d}));e.displayName="Grid";module.exports=e;
+"use strict";const q=require("react/jsx-runtime"),x=require("./styles/Grid.css.cjs"),G=require("../../../utils/cn.cjs"),p=require("react"),j=require("../box/Box.cjs"),e=p.memo(({columns:r,gridAutoRows:s,gridTemplateRows:c,gridAutoFlow:i,alignItems:t,justifyItems:n,alignContent:o,justifyContent:u,gap:m="md",className:a,...d})=>q.jsx(j,{gap:m,className:G.cn(x.GRID_STYLES.recipe({columns:r,gridAutoRows:s,gridTemplateRows:c,gridAutoFlow:i,alignItems:t,justifyItems:n,alignContent:o,justifyContent:u}),a),...d}));e.displayName="Grid";module.exports=e;
 //# sourceMappingURL=Grid.cjs.map

package/dist/components/layout/grid/index.d.ts

@@ -1,5 +1,4 @@
 export { default as Grid } from './Grid.tsx';
 export { GRID_STYLES } from './styles/Grid.css.ts';
-export type { GridRecipeVariants } from './styles/Grid.css.ts';
 export type { GridProps } from './types/Grid.props.ts';
-export type { GridColumns, GridAutoRows, GridFlow, GridAlign, GridJustifyItems, GridAlignContent, GridJustifyContent } from './types/Grid.types.ts';
+export type { GridColumns, GridAutoRows, GridTemplateRows, GridFlow, GridAlign, GridJustifyItems, GridAlignContent, GridJustifyContent, } from './types/Grid.types.ts';

package/dist/components/layout/grid/styles/Grid.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+import { RuntimeFn } from '@vanilla-extract/recipes';
 export declare const GRID_STYLES: {
     recipe: RuntimeFn<{
         columns: {
@@ -172,4 +172,3 @@ export declare const GRID_STYLES: {
         };
     }>;
 };
-export type GridRecipeVariants = NonNullable<RecipeVariants<typeof GRID_STYLES.recipe>>;

package/dist/components/layout/grid/types/Grid.props.d.ts

@@ -1,20 +1,20 @@
-import { GridRecipeVariants } from '../styles/Grid.css.ts';
 import { BoxProps } from '../../box/types/Box.props.ts';
+import { GridAlign, GridAlignContent, GridAutoRows, GridColumns, GridFlow, GridJustifyContent, GridJustifyItems, GridTemplateRows } from './Grid.types.ts';
 export type GridProps = Omit<BoxProps, 'display' | 'alignItems' | 'alignContent' | 'justifyContent'> & {
     /** The number of equal-width columns in the grid. */
-    columns?: GridRecipeVariants['columns'];
+    columns?: GridColumns;
     /** The track size for implicitly created grid rows. */
-    gridAutoRows?: GridRecipeVariants['gridAutoRows'];
+    gridAutoRows?: GridAutoRows;
     /** The explicit row track sizing for the grid. */
-    gridTemplateRows?: GridRecipeVariants['gridTemplateRows'];
+    gridTemplateRows?: GridTemplateRows;
     /** The auto-placement algorithm for grid items. */
-    gridAutoFlow?: GridRecipeVariants['gridAutoFlow'];
+    gridAutoFlow?: GridFlow;
     /** The default alignment of grid items along the block axis. */
-    alignItems?: GridRecipeVariants['alignItems'];
+    alignItems?: GridAlign;
     /** The default alignment of grid items along the inline axis. */
-    justifyItems?: GridRecipeVariants['justifyItems'];
+    justifyItems?: GridJustifyItems;
     /** The alignment of the grid tracks along the block axis. */
-    alignContent?: GridRecipeVariants['alignContent'];
+    alignContent?: GridAlignContent;
     /** The alignment of the grid tracks along the inline axis. */
-    justifyContent?: GridRecipeVariants['justifyContent'];
+    justifyContent?: GridJustifyContent;
 };

package/dist/components/layout/image/index.d.ts

@@ -1,5 +1,4 @@
 export { default as Image } from './Image.tsx';
 export { IMAGE_STYLES } from './styles/Image.css.ts';
-export type { ImageRecipeVariants } from './styles/Image.css.ts';
 export type { ImageProps } from './types/Image.props.ts';
 export type { ImageObjectFit, ImageObjectPosition } from './types/Image.types.ts';

package/dist/components/layout/image/styles/Image.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+import { RuntimeFn } from '@vanilla-extract/recipes';
 export declare const IMAGE_STYLES: {
     recipe: RuntimeFn<{
         objectFit: {
@@ -161,4 +161,3 @@ export declare const IMAGE_STYLES: {
         backgroundColor: Record<"background" | "foreground" | "text" | "textSecondary" | "textTertiary" | "card" | "cardForeground" | "popover" | "popoverForeground" | "muted" | "mutedForeground" | "overlay" | "primary" | "primaryHover" | "primaryActive" | "primaryForeground" | "primarySubtle" | "primarySubtleHover" | "primarySubtleActive" | "primarySubtleForeground" | "primarySubtleBorder" | "link" | "linkHover" | "linkActive" | "secondary" | "secondaryHover" | "secondaryActive" | "secondaryForeground" | "secondarySubtle" | "secondarySubtleHover" | "secondarySubtleActive" | "secondarySubtleForeground" | "secondarySubtleBorder" | "tertiary" | "tertiaryHover" | "tertiaryActive" | "tertiaryForeground" | "tertiarySubtle" | "tertiarySubtleHover" | "tertiarySubtleActive" | "tertiarySubtleForeground" | "tertiarySubtleBorder" | "success" | "successHover" | "successActive" | "successForeground" | "successSubtle" | "successSubtleHover" | "successSubtleActive" | "successSubtleForeground" | "successSubtleBorder" | "warning" | "warningHover" | "warningActive" | "warningForeground" | "warningSubtle" | "warningSubtleHover" | "warningSubtleActive" | "warningSubtleForeground" | "warningSubtleBorder" | "info" | "infoHover" | "infoActive" | "infoForeground" | "infoSubtle" | "infoSubtleHover" | "infoSubtleActive" | "infoSubtleForeground" | "infoSubtleBorder" | "destructive" | "destructiveHover" | "destructiveActive" | "destructiveForeground" | "destructiveSubtle" | "destructiveSubtleHover" | "destructiveSubtleActive" | "destructiveSubtleForeground" | "destructiveSubtleBorder" | "purple" | "purpleHover" | "purpleActive" | "purpleForeground" | "purpleSubtle" | "purpleSubtleHover" | "purpleSubtleActive" | "purpleSubtleForeground" | "purpleSubtleBorder" | "pink" | "pinkHover" | "pinkActive" | "pinkForeground" | "pinkSubtle" | "pinkSubtleHover" | "pinkSubtleActive" | "pinkSubtleForeground" | "pinkSubtleBorder" | "orange" | "orangeHover" | "orangeActive" | "orangeForeground" | "orangeSubtle" | "orangeSubtleHover" | "orangeSubtleActive" | "orangeSubtleForeground" | "orangeSubtleBorder" | "teal" | "tealHover" | "tealActive" | "tealForeground" | "tealSubtle" | "tealSubtleHover" | "tealSubtleActive" | "tealSubtleForeground" | "tealSubtleBorder" | "cyan" | "cyanHover" | "cyanActive" | "cyanForeground" | "cyanSubtle" | "cyanSubtleHover" | "cyanSubtleActive" | "cyanSubtleForeground" | "cyanSubtleBorder" | "indigo" | "indigoHover" | "indigoActive" | "indigoForeground" | "indigoSubtle" | "indigoSubtleHover" | "indigoSubtleActive" | "indigoSubtleForeground" | "indigoSubtleBorder" | "border" | "borderStrong" | "input" | "ring" | "highlight" | "highlightForeground" | "skeleton" | "skeletonForeground" | "transparent", Record<string, string>>;
     }>;
 };
-export type ImageRecipeVariants = NonNullable<RecipeVariants<typeof IMAGE_STYLES.recipe>>;

package/dist/components/layout/image/types/Image.props.d.ts

@@ -1,5 +1,6 @@
 import { CSSProperties, ImgHTMLAttributes, RefAttributes } from 'react';
-import { ImageRecipeVariants } from '../styles/Image.css.ts';
+import { BoxBorderRadius, BoxColor } from '../../box/types/Box.types.ts';
+import { ImageMargin, ImageObjectFit, ImageObjectPosition, ImageSpace } from './Image.types.ts';
 export type ImageProps = ImgHTMLAttributes<HTMLImageElement> & RefAttributes<HTMLImageElement> & {
     /** The CSS `width` of the image. */
     width?: CSSProperties['width'];
@@ -16,15 +17,15 @@ export type ImageProps = ImgHTMLAttributes<HTMLImageElement> & RefAttributes<HTM
     /** The CSS `aspect-ratio` of the image. */
     aspectRatio?: CSSProperties['aspectRatio'];
     /** The CSS `object-fit` value of the image. */
-    objectFit?: ImageRecipeVariants['objectFit'];
+    objectFit?: ImageObjectFit;
     /** The CSS `object-position` value of the image. */
-    objectPosition?: ImageRecipeVariants['objectPosition'];
+    objectPosition?: ImageObjectPosition;
     /** The border radius token applied to the image. */
-    borderRadius?: ImageRecipeVariants['borderRadius'];
+    borderRadius?: BoxBorderRadius;
     /** The padding token applied to the image. */
-    padding?: ImageRecipeVariants['padding'];
+    padding?: ImageSpace;
     /** The margin token applied to the image. Supports `auto`. */
-    margin?: ImageRecipeVariants['margin'];
+    margin?: ImageMargin;
     /** The theme color token applied to the image's background color. */
-    backgroundColor?: ImageRecipeVariants['backgroundColor'];
+    backgroundColor?: BoxColor;
 };

package/dist/components/layout/image/types/Image.types.d.ts

@@ -2,3 +2,7 @@
 export type ImageObjectFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
 /** Object-position values supported by the Image component. */
 export type ImageObjectPosition = 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/** Spacing tokens supported by the Image component's recipe. */
+export type ImageSpace = 'none' | 'px' | 'xxs' | 'xs' | 'xs2' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
+/** Margin tokens supported by the Image component's recipe. */
+export type ImageMargin = 'auto' | ImageSpace;

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

@@ -1,6 +1,7 @@
 export * from './box';
 export * from './flex';
 export * from './grid';
+export * from './inset';
 export * from './image';
 export * from './separator';
 export * from './form';

package/dist/components/layout/inset/Inset.cjs

@@ -0,0 +1,2 @@
+"use strict";const v=require("react/jsx-runtime"),p=require("../../../constants/styles/spaceVariants.const.cjs"),m=require("../box/Box.cjs");require("../box/styles/Box.css.cjs");const s=require("./styles/Inset.css.cjs"),n=require("./utils/resolveInsetPadding.utils.cjs"),T=require("../../../utils/cn.cjs"),_=require("react"),t=_.memo(({space:e,side:r="all",clip:d="border-box",padding:i,paddingX:o,paddingY:a,paddingTop:g,paddingRight:l,paddingBottom:I,paddingLeft:c,className:u,style:P,...S})=>{const q={[s.INSET_STYLES.insetSpaceProperty]:p.SPACE_VARIANTS[e],...P};return v.jsx(m,{padding:n.resolveInsetPadding(i,e),paddingX:n.resolveInsetPadding(o,e),paddingY:n.resolveInsetPadding(a,e),paddingTop:n.resolveInsetPadding(g,e),paddingRight:n.resolveInsetPadding(l,e),paddingBottom:n.resolveInsetPadding(I,e),paddingLeft:n.resolveInsetPadding(c,e),className:T.cn(s.INSET_STYLES.recipe({clip:d,side:r}),u),style:q,...S})});t.displayName="Inset";module.exports=t;
+//# sourceMappingURL=Inset.cjs.map

package/dist/components/layout/inset/Inset.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Inset.cjs","sources":["../../../../src/components/layout/inset/Inset.tsx"],"sourcesContent":["import { SPACE_VARIANTS } from '@constants/styles/spaceVariants.const.ts'\r\nimport { Box } from '@components/layout/box'\r\nimport { INSET_STYLES } from '@components/layout/inset/styles/Inset.css.ts'\r\nimport type { InsetProps } from '@components/layout/inset/types/Inset.props.ts'\r\nimport { resolveInsetPadding } from '@components/layout/inset/utils/resolveInsetPadding.utils.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type CSSProperties, type FC } from 'react'\r\n\r\nconst Inset: FC<InsetProps> = memo(({\r\n    space,\r\n    side = 'all',\r\n    clip = 'border-box',\r\n    padding,\r\n    paddingX,\r\n    paddingY,\r\n    paddingTop,\r\n    paddingRight,\r\n    paddingBottom,\r\n    paddingLeft,\r\n    className,\r\n    style,\r\n    ...props\r\n}) => {\r\n    const insetStyle = {\r\n        [INSET_STYLES.insetSpaceProperty]: SPACE_VARIANTS[space],\r\n        ...style,\r\n    }\r\n\r\n    return (\r\n        <Box\r\n            padding={resolveInsetPadding(padding, space)}\r\n            paddingX={resolveInsetPadding(paddingX, space)}\r\n            paddingY={resolveInsetPadding(paddingY, space)}\r\n            paddingTop={resolveInsetPadding(paddingTop, space)}\r\n            paddingRight={resolveInsetPadding(paddingRight, space)}\r\n            paddingBottom={resolveInsetPadding(paddingBottom, space)}\r\n            paddingLeft={resolveInsetPadding(paddingLeft, space)}\r\n            className={cn(INSET_STYLES.recipe({ clip, side }), className)}\r\n            style={insetStyle as CSSProperties}\r\n            {...props}\r\n        />\r\n    )\r\n})\r\n\r\nInset.displayName = 'Inset'\r\n\r\nexport default Inset\r\n"],"names":["Inset","memo","space","side","clip","padding","paddingX","paddingY","paddingTop","paddingRight","paddingBottom","paddingLeft","className","style","props","insetStyle","INSET_STYLES","SPACE_VARIANTS","jsx","Box","resolveInsetPadding","cn"],"mappings":"qUAQMA,EAAwBC,EAAAA,KAAK,CAAC,CAChC,MAAAC,EACA,KAAAC,EAAO,MACP,KAAAC,EAAO,aACP,QAAAC,EACA,SAAAC,EACA,SAAAC,EACA,WAAAC,EACA,aAAAC,EACA,cAAAC,EACA,YAAAC,EACA,UAAAC,EACA,MAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAa,CACf,CAACC,eAAa,kBAAkB,EAAGC,EAAAA,eAAef,CAAK,EACvD,GAAGW,CAAA,EAGP,OACIK,EAAAA,IAACC,EAAA,CACG,QAASC,EAAAA,oBAAoBf,EAASH,CAAK,EAC3C,SAAUkB,EAAAA,oBAAoBd,EAAUJ,CAAK,EAC7C,SAAUkB,EAAAA,oBAAoBb,EAAUL,CAAK,EAC7C,WAAYkB,EAAAA,oBAAoBZ,EAAYN,CAAK,EACjD,aAAckB,EAAAA,oBAAoBX,EAAcP,CAAK,EACrD,cAAekB,EAAAA,oBAAoBV,EAAeR,CAAK,EACvD,YAAakB,EAAAA,oBAAoBT,EAAaT,CAAK,EACnD,UAAWmB,EAAAA,GAAGL,EAAAA,aAAa,OAAO,CAAE,KAAAZ,EAAM,KAAAD,CAAA,CAAM,EAAGS,CAAS,EAC5D,MAAOG,EACN,GAAGD,CAAA,CAAA,CAGhB,CAAC,EAEDd,EAAM,YAAc"}

package/dist/components/layout/inset/Inset.d.ts

@@ -0,0 +1,4 @@
+import { InsetProps } from './types/Inset.props.ts';
+import { FC } from 'react';
+declare const Inset: FC<InsetProps>;
+export default Inset;

package/dist/components/layout/inset/Inset.js

@@ -0,0 +1,48 @@
+import { jsx as x } from "react/jsx-runtime";
+import { SPACE_VARIANTS as y } from "../../../constants/styles/spaceVariants.const.js";
+import N from "../box/Box.js";
+import "../box/styles/Box.css.js";
+import { INSET_STYLES as r } from "./styles/Inset.css.js";
+import { resolveInsetPadding as t } from "./utils/resolveInsetPadding.utils.js";
+import { cn as T } from "../../../utils/cn.js";
+import { memo as A } from "react";
+const E = A(({
+  space: o,
+  side: i = "all",
+  clip: m = "border-box",
+  padding: d,
+  paddingX: n,
+  paddingY: e,
+  paddingTop: p,
+  paddingRight: a,
+  paddingBottom: f,
+  paddingLeft: g,
+  className: l,
+  style: s,
+  ...S
+}) => {
+  const I = {
+    [r.insetSpaceProperty]: y[o],
+    ...s
+  };
+  return /* @__PURE__ */ x(
+    N,
+    {
+      padding: t(d, o),
+      paddingX: t(n, o),
+      paddingY: t(e, o),
+      paddingTop: t(p, o),
+      paddingRight: t(a, o),
+      paddingBottom: t(f, o),
+      paddingLeft: t(g, o),
+      className: T(r.recipe({ clip: m, side: i }), l),
+      style: I,
+      ...S
+    }
+  );
+});
+E.displayName = "Inset";
+export {
+  E as default
+};
+//# sourceMappingURL=Inset.js.map

package/dist/components/layout/inset/Inset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Inset.js","sources":["../../../../src/components/layout/inset/Inset.tsx"],"sourcesContent":["import { SPACE_VARIANTS } from '@constants/styles/spaceVariants.const.ts'\r\nimport { Box } from '@components/layout/box'\r\nimport { INSET_STYLES } from '@components/layout/inset/styles/Inset.css.ts'\r\nimport type { InsetProps } from '@components/layout/inset/types/Inset.props.ts'\r\nimport { resolveInsetPadding } from '@components/layout/inset/utils/resolveInsetPadding.utils.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type CSSProperties, type FC } from 'react'\r\n\r\nconst Inset: FC<InsetProps> = memo(({\r\n    space,\r\n    side = 'all',\r\n    clip = 'border-box',\r\n    padding,\r\n    paddingX,\r\n    paddingY,\r\n    paddingTop,\r\n    paddingRight,\r\n    paddingBottom,\r\n    paddingLeft,\r\n    className,\r\n    style,\r\n    ...props\r\n}) => {\r\n    const insetStyle = {\r\n        [INSET_STYLES.insetSpaceProperty]: SPACE_VARIANTS[space],\r\n        ...style,\r\n    }\r\n\r\n    return (\r\n        <Box\r\n            padding={resolveInsetPadding(padding, space)}\r\n            paddingX={resolveInsetPadding(paddingX, space)}\r\n            paddingY={resolveInsetPadding(paddingY, space)}\r\n            paddingTop={resolveInsetPadding(paddingTop, space)}\r\n            paddingRight={resolveInsetPadding(paddingRight, space)}\r\n            paddingBottom={resolveInsetPadding(paddingBottom, space)}\r\n            paddingLeft={resolveInsetPadding(paddingLeft, space)}\r\n            className={cn(INSET_STYLES.recipe({ clip, side }), className)}\r\n            style={insetStyle as CSSProperties}\r\n            {...props}\r\n        />\r\n    )\r\n})\r\n\r\nInset.displayName = 'Inset'\r\n\r\nexport default Inset\r\n"],"names":["Inset","memo","space","side","clip","padding","paddingX","paddingY","paddingTop","paddingRight","paddingBottom","paddingLeft","className","style","props","insetStyle","INSET_STYLES","SPACE_VARIANTS","jsx","Box","resolveInsetPadding","cn"],"mappings":";;;;;;;;AAQA,MAAMA,IAAwBC,EAAK,CAAC;AAAA,EAChC,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAa;AAAA,IACf,CAACC,EAAa,kBAAkB,GAAGC,EAAef,CAAK;AAAA,IACvD,GAAGW;AAAA,EAAA;AAGP,SACI,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,SAASC,EAAoBf,GAASH,CAAK;AAAA,MAC3C,UAAUkB,EAAoBd,GAAUJ,CAAK;AAAA,MAC7C,UAAUkB,EAAoBb,GAAUL,CAAK;AAAA,MAC7C,YAAYkB,EAAoBZ,GAAYN,CAAK;AAAA,MACjD,cAAckB,EAAoBX,GAAcP,CAAK;AAAA,MACrD,eAAekB,EAAoBV,GAAeR,CAAK;AAAA,MACvD,aAAakB,EAAoBT,GAAaT,CAAK;AAAA,MACnD,WAAWmB,EAAGL,EAAa,OAAO,EAAE,MAAAZ,GAAM,MAAAD,EAAA,CAAM,GAAGS,CAAS;AAAA,MAC5D,OAAOG;AAAA,MACN,GAAGD;AAAA,IAAA;AAAA,EAAA;AAGhB,CAAC;AAEDd,EAAM,cAAc;"}

package/dist/components/layout/inset/constants/index.d.ts

@@ -0,0 +1 @@
+export { INSET_CLIPS, INSET_SIDES, } from './insetSides.const.ts';

package/dist/components/layout/inset/constants/insetSides.const.d.ts

@@ -0,0 +1,13 @@
+export declare const INSET_SIDES: {
+    readonly all: "all";
+    readonly block: "block";
+    readonly inline: "inline";
+    readonly top: "top";
+    readonly right: "right";
+    readonly bottom: "bottom";
+    readonly left: "left";
+};
+export declare const INSET_CLIPS: {
+    readonly borderBox: "border-box";
+    readonly paddingBox: "padding-box";
+};

package/dist/components/layout/inset/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Inset } from './Inset.tsx';
+export { INSET_STYLES } from './styles/Inset.css.ts';
+export type { InsetProps } from './types/Inset.props.ts';
+export type { InsetClip, InsetPadding, InsetSide, InsetSpace, } from './types/Inset.types.ts';

package/dist/components/layout/inset/styles/Inset.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                           */const e=require("@vanilla-extract/recipes/createRuntimeFn");var i={insetSpace:"var(--v7yz9i0)",insetSpaceProperty:"--v7yz9i0",recipe:e.createRuntimeFn({defaultClassName:"v7yz9i1",variantClassNames:{clip:{"border-box":"v7yz9i2","padding-box":"v7yz9i3"},side:{all:"v7yz9i4",block:"v7yz9i5",inline:"v7yz9i6",top:"v7yz9i7",right:"v7yz9i8",bottom:"v7yz9i9",left:"v7yz9ia"}},defaultVariants:{clip:"border-box",side:"all"},compoundVariants:[]})};exports.INSET_STYLES=i;
+//# sourceMappingURL=Inset.css.cjs.map

package/dist/components/layout/inset/styles/Inset.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Inset.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/layout/inset/styles/Inset.css.d.ts

@@ -0,0 +1,43 @@
+import { RuntimeFn } from '@vanilla-extract/recipes';
+export declare const INSET_STYLES: {
+    insetSpace: `var(--${string})`;
+    insetSpaceProperty: string;
+    recipe: RuntimeFn<{
+        clip: {
+            "border-box": {
+                backgroundClip: "border-box";
+                clipPath: "inset(0)";
+            };
+            "padding-box": {
+                backgroundClip: "padding-box";
+            };
+        };
+        side: {
+            all: {
+                margin: string;
+            };
+            block: {
+                marginBlock: string;
+            };
+            inline: {
+                marginInline: string;
+            };
+            top: {
+                marginBlockStart: string;
+                marginInline: string;
+            };
+            right: {
+                marginBlock: string;
+                marginInlineEnd: string;
+            };
+            bottom: {
+                marginInline: string;
+                marginBlockEnd: string;
+            };
+            left: {
+                marginBlock: string;
+                marginInlineStart: string;
+            };
+        };
+    }>;
+};

package/dist/components/layout/inset/styles/Inset.css.js

@@ -0,0 +1,7 @@
+/* empty css                         */
+import { createRuntimeFn as i } from "@vanilla-extract/recipes/createRuntimeFn";
+var r = { insetSpace: "var(--v7yz9i0)", insetSpaceProperty: "--v7yz9i0", recipe: i({ defaultClassName: "v7yz9i1", variantClassNames: { clip: { "border-box": "v7yz9i2", "padding-box": "v7yz9i3" }, side: { all: "v7yz9i4", block: "v7yz9i5", inline: "v7yz9i6", top: "v7yz9i7", right: "v7yz9i8", bottom: "v7yz9i9", left: "v7yz9ia" } }, defaultVariants: { clip: "border-box", side: "all" }, compoundVariants: [] }) };
+export {
+  r as INSET_STYLES
+};
+//# sourceMappingURL=Inset.css.js.map

package/dist/components/layout/inset/styles/Inset.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Inset.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/components/layout/inset/types/Inset.props.d.ts

@@ -0,0 +1,24 @@
+import { BoxProps } from '../../box/types/Box.props.ts';
+import { InsetClip, InsetPadding, InsetSide, InsetSpace } from './Inset.types.ts';
+export type InsetProps = Omit<BoxProps, 'padding' | 'paddingX' | 'paddingY' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft'> & {
+    /** The surrounding-container padding token negated to create the bleed. */
+    space: InsetSpace;
+    /** The logical side to bleed. Defaults to `all`. */
+    side?: InsetSide;
+    /** The boundary used to clip overflowing content. Defaults to `border-box`. */
+    clip?: InsetClip;
+    /** Padding applied to all sides. `current` uses the space token. */
+    padding?: InsetPadding;
+    /** Padding applied to the inline axis. `current` uses the space token. */
+    paddingX?: InsetPadding;
+    /** Padding applied to the block axis. `current` uses the space token. */
+    paddingY?: InsetPadding;
+    /** Padding applied to the block start. `current` uses the space token. */
+    paddingTop?: InsetPadding;
+    /** Padding applied to the inline end. `current` uses the space token. */
+    paddingRight?: InsetPadding;
+    /** Padding applied to the block end. `current` uses the space token. */
+    paddingBottom?: InsetPadding;
+    /** Padding applied to the inline start. `current` uses the space token. */
+    paddingLeft?: InsetPadding;
+};

package/dist/components/layout/inset/types/Inset.types.d.ts

@@ -0,0 +1,10 @@
+import { Space } from '../../../../theme/tokens/spacing.ts';
+import { INSET_CLIPS, INSET_SIDES } from '../constants/insetSides.const.ts';
+/** Semantic spacing tokens supported by the Inset component. */
+export type InsetSpace = keyof Space;
+/** Logical sides that can bleed outside the surrounding container. */
+export type InsetSide = (typeof INSET_SIDES)[keyof typeof INSET_SIDES];
+/** The boundary to which overflowing content is clipped. */
+export type InsetClip = (typeof INSET_CLIPS)[keyof typeof INSET_CLIPS];
+/** Padding tokens for preserving space beside bleeding content. */
+export type InsetPadding = 'current' | InsetSpace;

package/dist/components/layout/inset/utils/resolveInsetPadding.utils.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=(e,t)=>e==="current"?t:e;exports.resolveInsetPadding=r;
+//# sourceMappingURL=resolveInsetPadding.utils.cjs.map

package/dist/components/layout/inset/utils/resolveInsetPadding.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveInsetPadding.utils.cjs","sources":["../../../../../src/components/layout/inset/utils/resolveInsetPadding.utils.ts"],"sourcesContent":["import type {\r\n    InsetPadding,\r\n    InsetSpace,\r\n} from '@components/layout/inset/types/Inset.types.ts'\r\n\r\nexport const resolveInsetPadding = (\r\n    padding: InsetPadding | undefined,\r\n    space: InsetSpace,\r\n) => padding === 'current' ? space : padding\r\n"],"names":["resolveInsetPadding","padding","space"],"mappings":"gFAKO,MAAMA,EAAsB,CAC/BC,EACAC,IACCD,IAAY,UAAYC,EAAQD"}

package/dist/components/layout/inset/utils/resolveInsetPadding.utils.d.ts

@@ -0,0 +1,2 @@
+import { InsetPadding, InsetSpace } from '../types/Inset.types.ts';
+export declare const resolveInsetPadding: (padding: InsetPadding | undefined, space: InsetSpace) => "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "px" | "xxs" | "xs2" | "sm2" | "md2" | "lg2" | "3xl" | "4xl" | "5xl" | undefined;

package/dist/components/layout/inset/utils/resolveInsetPadding.utils.js

@@ -0,0 +1,5 @@
+const t = (e, r) => e === "current" ? r : e;
+export {
+  t as resolveInsetPadding
+};
+//# sourceMappingURL=resolveInsetPadding.utils.js.map

package/dist/components/layout/inset/utils/resolveInsetPadding.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveInsetPadding.utils.js","sources":["../../../../../src/components/layout/inset/utils/resolveInsetPadding.utils.ts"],"sourcesContent":["import type {\r\n    InsetPadding,\r\n    InsetSpace,\r\n} from '@components/layout/inset/types/Inset.types.ts'\r\n\r\nexport const resolveInsetPadding = (\r\n    padding: InsetPadding | undefined,\r\n    space: InsetSpace,\r\n) => padding === 'current' ? space : padding\r\n"],"names":["resolveInsetPadding","padding","space"],"mappings":"AAKO,MAAMA,IAAsB,CAC/BC,GACAC,MACCD,MAAY,YAAYC,IAAQD;"}

package/dist/components/layout/separator/Separator.cjs

@@ -1,2 +1,2 @@
-"use strict";const a=require("react/jsx-runtime"),c=require("../box/Box.cjs"),i=require("./styles/Separator.css.cjs"),n=require("../../../utils/cn.cjs"),u=require("react"),e=u.memo(({orientation:r="horizontal",color:s,className:t,...o})=>a.jsx(c,{as:"div",role:"separator",className:n.cn(i.SEPARATOR_STYLES.recipe({orientation:r,color:s}),t),...o}));e.displayName="Separator";module.exports=e;
+"use strict";const o=require("react/jsx-runtime"),c=require("../box/Box.cjs"),i=require("./styles/Separator.css.cjs"),n=require("../../../utils/cn.cjs"),u=require("react"),e=u.memo(({orientation:r="horizontal",color:s,className:a,...t})=>o.jsx(c,{as:"div",role:"separator",className:n.cn(i.SEPARATOR_STYLES.recipe({orientation:r,color:s}),a),...t,"aria-orientation":r}));e.displayName="Separator";module.exports=e;
 //# sourceMappingURL=Separator.cjs.map

package/dist/components/layout/separator/Separator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.cjs","sources":["../../../../src/components/layout/separator/Separator.tsx"],"sourcesContent":["import Box from '@components/layout/box/Box.tsx'\r\nimport { SEPARATOR_STYLES } from '@components/layout/separator/styles/Separator.css.ts'\r\nimport type { SeparatorProps } from '@components/layout/separator/types/Separator.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\n\r\n/**\r\n * A thin visual divider used to separate content.\r\n * Renders a horizontal line by default; use `orientation=\"vertical\"` for a vertical rule.\r\n */\r\nconst Separator: FC<SeparatorProps> = memo(({\r\n    orientation = 'horizontal',\r\n    color,\r\n    className,\r\n    ...props\r\n}) => {\r\n    return (\r\n        <Box\r\n            as={'div'}\r\n            role={'separator'}\r\n            className={cn(SEPARATOR_STYLES.recipe({ orientation, color }), className)}\r\n            {...props}\r\n        />\r\n    )\r\n})\r\n\r\nSeparator.displayName = 'Separator'\r\n\r\nexport default Separator\r\n"],"names":["Separator","memo","orientation","color","className","props","jsx","Box","cn","SEPARATOR_STYLES"],"mappings":"4KAUMA,EAAgCC,EAAAA,KAAK,CAAC,CACxC,YAAAC,EAAc,aACd,MAAAC,EACA,UAAAC,EACA,GAAGC,CACP,IAEQC,EAAAA,IAACC,EAAA,CACG,GAAI,MACJ,KAAM,YACN,UAAWC,EAAAA,GAAGC,EAAAA,iBAAiB,OAAO,CAAE,YAAAP,EAAa,MAAAC,CAAA,CAAO,EAAGC,CAAS,EACvE,GAAGC,CAAA,CAAA,CAGf,EAEDL,EAAU,YAAc"}
+{"version":3,"file":"Separator.cjs","sources":["../../../../src/components/layout/separator/Separator.tsx"],"sourcesContent":["import Box from '@components/layout/box/Box.tsx'\r\nimport { SEPARATOR_STYLES } from '@components/layout/separator/styles/Separator.css.ts'\r\nimport type { SeparatorProps } from '@components/layout/separator/types/Separator.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\n\r\n/**\r\n * A thin visual divider used to separate content.\r\n * Renders a horizontal line by default; use `orientation=\"vertical\"` for a vertical rule.\r\n */\r\nconst Separator: FC<SeparatorProps> = memo(({\r\n    orientation = 'horizontal',\r\n    color,\r\n    className,\r\n    ...props\r\n}) => {\r\n    return (\r\n        <Box\r\n            as={'div'}\r\n            role={'separator'}\r\n            className={cn(SEPARATOR_STYLES.recipe({ orientation, color }), className)}\r\n            {...props}\r\n            aria-orientation={orientation}\r\n        />\r\n    )\r\n})\r\n\r\nSeparator.displayName = 'Separator'\r\n\r\nexport default Separator\r\n"],"names":["Separator","memo","orientation","color","className","props","jsx","Box","cn","SEPARATOR_STYLES"],"mappings":"4KAUMA,EAAgCC,EAAAA,KAAK,CAAC,CACxC,YAAAC,EAAc,aACd,MAAAC,EACA,UAAAC,EACA,GAAGC,CACP,IAEQC,EAAAA,IAACC,EAAA,CACG,GAAI,MACJ,KAAM,YACN,UAAWC,EAAAA,GAAGC,EAAAA,iBAAiB,OAAO,CAAE,YAAAP,EAAa,MAAAC,CAAA,CAAO,EAAGC,CAAS,EACvE,GAAGC,EACJ,mBAAkBH,CAAA,CAAA,CAG7B,EAEDF,EAAU,YAAc"}

package/dist/components/layout/separator/Separator.js

@@ -14,7 +14,8 @@ const f = s(({
     as: "div",
     role: "separator",
     className: i(p.recipe({ orientation: r, color: o }), a),
-    ...m
+    ...m,
+    "aria-orientation": r
   }
 ));
 f.displayName = "Separator";

package/dist/components/layout/separator/Separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.js","sources":["../../../../src/components/layout/separator/Separator.tsx"],"sourcesContent":["import Box from '@components/layout/box/Box.tsx'\r\nimport { SEPARATOR_STYLES } from '@components/layout/separator/styles/Separator.css.ts'\r\nimport type { SeparatorProps } from '@components/layout/separator/types/Separator.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\n\r\n/**\r\n * A thin visual divider used to separate content.\r\n * Renders a horizontal line by default; use `orientation=\"vertical\"` for a vertical rule.\r\n */\r\nconst Separator: FC<SeparatorProps> = memo(({\r\n    orientation = 'horizontal',\r\n    color,\r\n    className,\r\n    ...props\r\n}) => {\r\n    return (\r\n        <Box\r\n            as={'div'}\r\n            role={'separator'}\r\n            className={cn(SEPARATOR_STYLES.recipe({ orientation, color }), className)}\r\n            {...props}\r\n        />\r\n    )\r\n})\r\n\r\nSeparator.displayName = 'Separator'\r\n\r\nexport default Separator\r\n"],"names":["Separator","memo","orientation","color","className","props","jsx","Box","cn","SEPARATOR_STYLES"],"mappings":";;;;;AAUA,MAAMA,IAAgCC,EAAK,CAAC;AAAA,EACxC,aAAAC,IAAc;AAAA,EACd,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACP,MAEQ,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,WAAWC,EAAGC,EAAiB,OAAO,EAAE,aAAAP,GAAa,OAAAC,EAAA,CAAO,GAAGC,CAAS;AAAA,IACvE,GAAGC;AAAA,EAAA;AAAA,CAGf;AAEDL,EAAU,cAAc;"}
+{"version":3,"file":"Separator.js","sources":["../../../../src/components/layout/separator/Separator.tsx"],"sourcesContent":["import Box from '@components/layout/box/Box.tsx'\r\nimport { SEPARATOR_STYLES } from '@components/layout/separator/styles/Separator.css.ts'\r\nimport type { SeparatorProps } from '@components/layout/separator/types/Separator.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\n\r\n/**\r\n * A thin visual divider used to separate content.\r\n * Renders a horizontal line by default; use `orientation=\"vertical\"` for a vertical rule.\r\n */\r\nconst Separator: FC<SeparatorProps> = memo(({\r\n    orientation = 'horizontal',\r\n    color,\r\n    className,\r\n    ...props\r\n}) => {\r\n    return (\r\n        <Box\r\n            as={'div'}\r\n            role={'separator'}\r\n            className={cn(SEPARATOR_STYLES.recipe({ orientation, color }), className)}\r\n            {...props}\r\n            aria-orientation={orientation}\r\n        />\r\n    )\r\n})\r\n\r\nSeparator.displayName = 'Separator'\r\n\r\nexport default Separator\r\n"],"names":["Separator","memo","orientation","color","className","props","jsx","Box","cn","SEPARATOR_STYLES"],"mappings":";;;;;AAUA,MAAMA,IAAgCC,EAAK,CAAC;AAAA,EACxC,aAAAC,IAAc;AAAA,EACd,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACP,MAEQ,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,WAAWC,EAAGC,EAAiB,OAAO,EAAE,aAAAP,GAAa,OAAAC,EAAA,CAAO,GAAGC,CAAS;AAAA,IACvE,GAAGC;AAAA,IACJ,oBAAkBH;AAAA,EAAA;AAAA,CAG7B;AAEDF,EAAU,cAAc;"}

package/dist/components/layout/separator/constants/index.d.ts

@@ -0,0 +1,4 @@
+export declare const SEPARATOR_ORIENTATIONS: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};

package/dist/components/layout/separator/index.d.ts

@@ -1,5 +1,4 @@
 export { default as Separator } from './Separator.tsx';
 export { SEPARATOR_STYLES } from './styles/Separator.css.ts';
-export type { SeparatorRecipeVariants } from './styles/Separator.css.ts';
 export type { SeparatorProps } from './types/Separator.props.ts';
-export type { SeparatorOrientation } from './types/Separator.types.ts';
+export type { SeparatorColor, SeparatorOrientation, } from './types/Separator.types.ts';

package/dist/components/layout/separator/styles/Separator.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+import { RuntimeFn } from '@vanilla-extract/recipes';
 export declare const SEPARATOR_STYLES: {
     recipe: RuntimeFn<{
         orientation: {
@@ -14,4 +14,3 @@ export declare const SEPARATOR_STYLES: {
         color: Record<"background" | "foreground" | "text" | "textSecondary" | "textTertiary" | "card" | "cardForeground" | "popover" | "popoverForeground" | "muted" | "mutedForeground" | "overlay" | "primary" | "primaryHover" | "primaryActive" | "primaryForeground" | "primarySubtle" | "primarySubtleHover" | "primarySubtleActive" | "primarySubtleForeground" | "primarySubtleBorder" | "link" | "linkHover" | "linkActive" | "secondary" | "secondaryHover" | "secondaryActive" | "secondaryForeground" | "secondarySubtle" | "secondarySubtleHover" | "secondarySubtleActive" | "secondarySubtleForeground" | "secondarySubtleBorder" | "tertiary" | "tertiaryHover" | "tertiaryActive" | "tertiaryForeground" | "tertiarySubtle" | "tertiarySubtleHover" | "tertiarySubtleActive" | "tertiarySubtleForeground" | "tertiarySubtleBorder" | "success" | "successHover" | "successActive" | "successForeground" | "successSubtle" | "successSubtleHover" | "successSubtleActive" | "successSubtleForeground" | "successSubtleBorder" | "warning" | "warningHover" | "warningActive" | "warningForeground" | "warningSubtle" | "warningSubtleHover" | "warningSubtleActive" | "warningSubtleForeground" | "warningSubtleBorder" | "info" | "infoHover" | "infoActive" | "infoForeground" | "infoSubtle" | "infoSubtleHover" | "infoSubtleActive" | "infoSubtleForeground" | "infoSubtleBorder" | "destructive" | "destructiveHover" | "destructiveActive" | "destructiveForeground" | "destructiveSubtle" | "destructiveSubtleHover" | "destructiveSubtleActive" | "destructiveSubtleForeground" | "destructiveSubtleBorder" | "purple" | "purpleHover" | "purpleActive" | "purpleForeground" | "purpleSubtle" | "purpleSubtleHover" | "purpleSubtleActive" | "purpleSubtleForeground" | "purpleSubtleBorder" | "pink" | "pinkHover" | "pinkActive" | "pinkForeground" | "pinkSubtle" | "pinkSubtleHover" | "pinkSubtleActive" | "pinkSubtleForeground" | "pinkSubtleBorder" | "orange" | "orangeHover" | "orangeActive" | "orangeForeground" | "orangeSubtle" | "orangeSubtleHover" | "orangeSubtleActive" | "orangeSubtleForeground" | "orangeSubtleBorder" | "teal" | "tealHover" | "tealActive" | "tealForeground" | "tealSubtle" | "tealSubtleHover" | "tealSubtleActive" | "tealSubtleForeground" | "tealSubtleBorder" | "cyan" | "cyanHover" | "cyanActive" | "cyanForeground" | "cyanSubtle" | "cyanSubtleHover" | "cyanSubtleActive" | "cyanSubtleForeground" | "cyanSubtleBorder" | "indigo" | "indigoHover" | "indigoActive" | "indigoForeground" | "indigoSubtle" | "indigoSubtleHover" | "indigoSubtleActive" | "indigoSubtleForeground" | "indigoSubtleBorder" | "border" | "borderStrong" | "input" | "ring" | "highlight" | "highlightForeground" | "skeleton" | "skeletonForeground" | "transparent", Record<string, string>>;
     }>;
 };
-export type SeparatorRecipeVariants = NonNullable<RecipeVariants<typeof SEPARATOR_STYLES.recipe>>;

package/dist/components/layout/separator/types/Separator.props.d.ts

@@ -1,8 +1,8 @@
 import { BoxProps } from '../../box/types/Box.props.ts';
-import { SeparatorRecipeVariants } from '../styles/Separator.css.ts';
-export type SeparatorProps = Omit<BoxProps, 'children'> & {
+import { SeparatorColor, SeparatorOrientation } from './Separator.types.ts';
+export type SeparatorProps = Omit<BoxProps, 'children' | 'aria-orientation'> & {
     /** The orientation of the separator. Defaults to `horizontal`. */
-    orientation?: SeparatorRecipeVariants['orientation'];
+    orientation?: SeparatorOrientation;
     /** The theme color token applied to the separator's background color. */
-    color?: SeparatorRecipeVariants['color'];
+    color?: SeparatorColor;
 };

package/dist/components/layout/separator/types/Separator.types.d.ts

@@ -1,2 +1,6 @@
+import { ThemeColorValue } from '../../../../theme/types/index.ts';
+import { SEPARATOR_ORIENTATIONS } from '../constants';
 /** Orientation values for the Separator component. */
-export type SeparatorOrientation = 'horizontal' | 'vertical';
+export type SeparatorOrientation = (typeof SEPARATOR_ORIENTATIONS)[keyof typeof SEPARATOR_ORIENTATIONS];
+/** Theme colors supported by the Separator component. */
+export type SeparatorColor = ThemeColorValue;

package/dist/components/navigation/breadcrumbs/Breadcrumbs.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),a=require("react"),A=require("../../foundation/icon/Icon.cjs");require("../../foundation/icon/styles/Icon.css.cjs");const h=require("../../foundation/typography/Typography.cjs");require("../../foundation/typography/styles/Typography.css.cjs");const u=require("./components/breadcrumbs-item/BreadcrumbsItem.cjs"),t=require("./constants/breadcrumbsSeparators.const.cjs"),s=require("./styles/Breadcrumbs.css.cjs"),n=a.memo(({"aria-label":l,children:S,color:R,separator:o=t.BREADCRUMBS_SEPARATORS.chevron,className:B,ref:m,...p})=>{const c=a.Children.toArray(S).filter(r=>a.isValidElement(r)),E=c.some(({props:r})=>r.current);return e.jsx("nav",{ref:m,"aria-label":l,className:B,...p,children:e.jsx("ol",{className:s.BREADCRUMBS_STYLES.list,children:c.map((r,i)=>{const d=E?r.props.current===!0:i===c.length-1;return e.jsxs("li",{className:s.BREADCRUMBS_STYLES.item,children:[i>0&&(o===t.BREADCRUMBS_SEPARATORS.chevron?e.jsx(A,{icon:"lucide:chevron-right",size:"sm",className:s.BREADCRUMBS_STYLES.separator}):e.jsx(h,{as:"span",variant:"span",className:s.BREADCRUMBS_STYLES.separatorText,"aria-hidden":"true",children:t.BREADCRUMBS_SEPARATOR_SYMBOLS[o]})),e.jsx(u,{...r.props,current:d,color:r.props.color??R})]},r.key)})})})});n.displayName="Breadcrumbs";n.Item=u;module.exports=n;
+//# sourceMappingURL=Breadcrumbs.cjs.map

package/dist/components/navigation/breadcrumbs/Breadcrumbs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.cjs","sources":["../../../../src/components/navigation/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import {\r\n    Children,\r\n    isValidElement,\r\n    memo,\r\n    type ReactElement,\r\n} from 'react'\r\n\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport BreadcrumbsItem from '@components/navigation/breadcrumbs/components/breadcrumbs-item/BreadcrumbsItem.tsx'\r\nimport type { BreadcrumbsItemProps } from '@components/navigation/breadcrumbs/components/breadcrumbs-item/types/BreadcrumbsItem.props.ts'\r\nimport {\r\n    BREADCRUMBS_SEPARATOR_SYMBOLS,\r\n    BREADCRUMBS_SEPARATORS,\r\n} from '@components/navigation/breadcrumbs/constants'\r\nimport { BREADCRUMBS_STYLES } from '@components/navigation/breadcrumbs/styles/Breadcrumbs.css.ts'\r\nimport type { BreadcrumbsCompound } from '@components/navigation/breadcrumbs/types/BreadcrumbsCompound.ts'\r\nimport type { BreadcrumbsProps } from '@components/navigation/breadcrumbs/types/Breadcrumbs.props.ts'\r\n\r\nconst Breadcrumbs = memo(({\r\n    'aria-label': ariaLabel,\r\n    children,\r\n    color,\r\n    separator = BREADCRUMBS_SEPARATORS.chevron,\r\n    className,\r\n    ref,\r\n    ...props\r\n}: BreadcrumbsProps) => {\r\n    const items = Children.toArray(children).filter(\r\n        (child): child is ReactElement<BreadcrumbsItemProps> =>\r\n            isValidElement<BreadcrumbsItemProps>(child),\r\n    )\r\n    const hasExplicitCurrent = items.some(({ props: item }) => item.current)\r\n\r\n    return (\r\n        <nav\r\n            ref={ref}\r\n            aria-label={ariaLabel}\r\n            className={className}\r\n            {...props}\r\n        >\r\n            <ol className={BREADCRUMBS_STYLES.list}>\r\n                {items.map((item, index) => {\r\n                    const isCurrent = hasExplicitCurrent\r\n                        ? item.props.current === true\r\n                        : index === items.length - 1\r\n\r\n                    return (\r\n                        <li\r\n                            key={item.key}\r\n                            className={BREADCRUMBS_STYLES.item}\r\n                        >\r\n                            {index > 0 &&\r\n                                (separator === BREADCRUMBS_SEPARATORS.chevron ? (\r\n                                    <Icon\r\n                                        icon={'lucide:chevron-right'}\r\n                                        size={'sm'}\r\n                                        className={BREADCRUMBS_STYLES.separator}\r\n                                    />\r\n                                ) : (\r\n                                    <Typography\r\n                                        as={'span'}\r\n                                        variant={'span'}\r\n                                        className={BREADCRUMBS_STYLES.separatorText}\r\n                                        aria-hidden={'true'}\r\n                                    >\r\n                                        {BREADCRUMBS_SEPARATOR_SYMBOLS[separator]}\r\n                                    </Typography>\r\n                                ))}\r\n                            <BreadcrumbsItem\r\n                                {...item.props}\r\n                                current={isCurrent}\r\n                                color={item.props.color ?? color}\r\n                            />\r\n                        </li>\r\n                    )\r\n                })}\r\n            </ol>\r\n        </nav>\r\n    )\r\n}) as unknown as BreadcrumbsCompound\r\n\r\nBreadcrumbs.displayName = 'Breadcrumbs'\r\nBreadcrumbs.Item = BreadcrumbsItem\r\n\r\nexport default Breadcrumbs\r\n"],"names":["Breadcrumbs","memo","ariaLabel","children","color","separator","BREADCRUMBS_SEPARATORS","className","ref","props","items","Children","child","isValidElement","hasExplicitCurrent","item","jsx","BREADCRUMBS_STYLES","index","isCurrent","jsxs","Icon","Typography","BreadcrumbsItem"],"mappings":"6cAmBMA,EAAcC,EAAAA,KAAK,CAAC,CACtB,aAAcC,EACd,SAAAC,EACA,MAAAC,EACA,UAAAC,EAAYC,EAAAA,uBAAuB,QACnC,UAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAwB,CACpB,MAAMC,EAAQC,EAAAA,SAAS,QAAQR,CAAQ,EAAE,OACpCS,GACGC,EAAAA,eAAqCD,CAAK,CAAA,EAE5CE,EAAqBJ,EAAM,KAAK,CAAC,CAAE,MAAOK,CAAA,IAAWA,EAAK,OAAO,EAEvE,OACIC,EAAAA,IAAC,MAAA,CACG,IAAAR,EACA,aAAYN,EACZ,UAAAK,EACC,GAAGE,EAEJ,SAAAO,EAAAA,IAAC,MAAG,UAAWC,EAAAA,mBAAmB,KAC7B,SAAAP,EAAM,IAAI,CAACK,EAAMG,IAAU,CACxB,MAAMC,EAAYL,EACZC,EAAK,MAAM,UAAY,GACvBG,IAAUR,EAAM,OAAS,EAE/B,OACIU,EAAAA,KAAC,KAAA,CAEG,UAAWH,EAAAA,mBAAmB,KAE7B,SAAA,CAAAC,EAAQ,IACJb,IAAcC,EAAAA,uBAAuB,QAClCU,EAAAA,IAACK,EAAA,CACG,KAAM,uBACN,KAAM,KACN,UAAWJ,EAAAA,mBAAmB,SAAA,CAAA,EAGlCD,EAAAA,IAACM,EAAA,CACG,GAAI,OACJ,QAAS,OACT,UAAWL,EAAAA,mBAAmB,cAC9B,cAAa,OAEZ,yCAA8BZ,CAAS,CAAA,CAAA,GAGpDW,EAAAA,IAACO,EAAA,CACI,GAAGR,EAAK,MACT,QAASI,EACT,MAAOJ,EAAK,MAAM,OAASX,CAAA,CAAA,CAC/B,CAAA,EAxBKW,EAAK,GAAA,CA2BtB,CAAC,CAAA,CACL,CAAA,CAAA,CAGZ,CAAC,EAEDf,EAAY,YAAc,cAC1BA,EAAY,KAAOuB"}

package/dist/components/navigation/breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,3 @@
+import { BreadcrumbsCompound } from './types/BreadcrumbsCompound.ts';
+declare const Breadcrumbs: BreadcrumbsCompound;
+export default Breadcrumbs;

package/dist/components/navigation/breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,74 @@
+import { jsx as e, jsxs as S } from "react/jsx-runtime";
+import { memo as f, Children as A, isValidElement as E } from "react";
+import C from "../../foundation/icon/Icon.js";
+import "../../foundation/icon/styles/Icon.css.js";
+import b from "../../foundation/typography/Typography.js";
+import "../../foundation/typography/styles/Typography.css.js";
+import i from "./components/breadcrumbs-item/BreadcrumbsItem.js";
+import { BREADCRUMBS_SEPARATORS as m, BREADCRUMBS_SEPARATOR_SYMBOLS as v } from "./constants/breadcrumbsSeparators.const.js";
+import { BREADCRUMBS_STYLES as o } from "./styles/Breadcrumbs.css.js";
+const c = f(({
+  "aria-label": n,
+  children: l,
+  color: p,
+  separator: s = m.chevron,
+  className: u,
+  ref: d,
+  ...h
+}) => {
+  const a = A.toArray(l).filter(
+    (r) => E(r)
+  ), B = a.some(({ props: r }) => r.current);
+  return /* @__PURE__ */ e(
+    "nav",
+    {
+      ref: d,
+      "aria-label": n,
+      className: u,
+      ...h,
+      children: /* @__PURE__ */ e("ol", { className: o.list, children: a.map((r, t) => {
+        const R = B ? r.props.current === !0 : t === a.length - 1;
+        return /* @__PURE__ */ S(
+          "li",
+          {
+            className: o.item,
+            children: [
+              t > 0 && (s === m.chevron ? /* @__PURE__ */ e(
+                C,
+                {
+                  icon: "lucide:chevron-right",
+                  size: "sm",
+                  className: o.separator
+                }
+              ) : /* @__PURE__ */ e(
+                b,
+                {
+                  as: "span",
+                  variant: "span",
+                  className: o.separatorText,
+                  "aria-hidden": "true",
+                  children: v[s]
+                }
+              )),
+              /* @__PURE__ */ e(
+                i,
+                {
+                  ...r.props,
+                  current: R,
+                  color: r.props.color ?? p
+                }
+              )
+            ]
+          },
+          r.key
+        );
+      }) })
+    }
+  );
+});
+c.displayName = "Breadcrumbs";
+c.Item = i;
+export {
+  c as default
+};
+//# sourceMappingURL=Breadcrumbs.js.map