@choco-vanille/ui 1.1.1 → 1.2.0

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

@@ -0,0 +1,174 @@
+import { RuntimeFn } from '@vanilla-extract/recipes';
+export declare const GRID_STYLES: {
+    recipe: RuntimeFn<{
+        columns: {
+            none: {
+                gridTemplateColumns: "none";
+            };
+            1: {
+                gridTemplateColumns: "repeat(1, minmax(0, 1fr))";
+            };
+            2: {
+                gridTemplateColumns: "repeat(2, minmax(0, 1fr))";
+            };
+            3: {
+                gridTemplateColumns: "repeat(3, minmax(0, 1fr))";
+            };
+            4: {
+                gridTemplateColumns: "repeat(4, minmax(0, 1fr))";
+            };
+            5: {
+                gridTemplateColumns: "repeat(5, minmax(0, 1fr))";
+            };
+            6: {
+                gridTemplateColumns: "repeat(6, minmax(0, 1fr))";
+            };
+            7: {
+                gridTemplateColumns: "repeat(7, minmax(0, 1fr))";
+            };
+            8: {
+                gridTemplateColumns: "repeat(8, minmax(0, 1fr))";
+            };
+            9: {
+                gridTemplateColumns: "repeat(9, minmax(0, 1fr))";
+            };
+            10: {
+                gridTemplateColumns: "repeat(10, minmax(0, 1fr))";
+            };
+            11: {
+                gridTemplateColumns: "repeat(11, minmax(0, 1fr))";
+            };
+            12: {
+                gridTemplateColumns: "repeat(12, minmax(0, 1fr))";
+            };
+        };
+        gridAutoRows: {
+            auto: {
+                gridAutoRows: "auto";
+            };
+            min: {
+                gridAutoRows: "min-content";
+            };
+            max: {
+                gridAutoRows: "max-content";
+            };
+            fr: {
+                gridAutoRows: "minmax(0, 1fr)";
+            };
+        };
+        gridTemplateRows: {
+            none: {
+                gridTemplateRows: "none";
+            };
+            auto: {
+                gridTemplateRows: "auto";
+            };
+            min: {
+                gridTemplateRows: "min-content";
+            };
+            max: {
+                gridTemplateRows: "max-content";
+            };
+            '1fr': {
+                gridTemplateRows: "1fr";
+            };
+            '0fr': {
+                gridTemplateRows: "0fr";
+            };
+        };
+        gridAutoFlow: {
+            row: {
+                gridAutoFlow: "row";
+            };
+            column: {
+                gridAutoFlow: "column";
+            };
+            dense: {
+                gridAutoFlow: "dense";
+            };
+            'row-dense': {
+                gridAutoFlow: "row dense";
+            };
+            'column-dense': {
+                gridAutoFlow: "column dense";
+            };
+        };
+        alignItems: {
+            start: {
+                alignItems: "start";
+            };
+            end: {
+                alignItems: "end";
+            };
+            center: {
+                alignItems: "center";
+            };
+            stretch: {
+                alignItems: "stretch";
+            };
+            baseline: {
+                alignItems: "baseline";
+            };
+        };
+        justifyItems: {
+            start: {
+                justifyItems: "start";
+            };
+            end: {
+                justifyItems: "end";
+            };
+            center: {
+                justifyItems: "center";
+            };
+            stretch: {
+                justifyItems: "stretch";
+            };
+        };
+        alignContent: {
+            start: {
+                alignContent: "start";
+            };
+            end: {
+                alignContent: "end";
+            };
+            center: {
+                alignContent: "center";
+            };
+            stretch: {
+                alignContent: "stretch";
+            };
+            between: {
+                alignContent: "space-between";
+            };
+            around: {
+                alignContent: "space-around";
+            };
+            evenly: {
+                alignContent: "space-evenly";
+            };
+        };
+        justifyContent: {
+            start: {
+                justifyContent: "start";
+            };
+            end: {
+                justifyContent: "end";
+            };
+            center: {
+                justifyContent: "center";
+            };
+            stretch: {
+                justifyContent: "stretch";
+            };
+            between: {
+                justifyContent: "space-between";
+            };
+            around: {
+                justifyContent: "space-around";
+            };
+            evenly: {
+                justifyContent: "space-evenly";
+            };
+        };
+    }>;
+};

package/dist/components/layout/grid/styles/Grid.css.js

@@ -0,0 +1,7 @@
+/* empty css                        */
+import { createRuntimeFn as d } from "@vanilla-extract/recipes/createRuntimeFn";
+var v = { recipe: d({ defaultClassName: "_2fgvjd0", variantClassNames: { columns: { 1: "_2fgvjd1", 2: "_2fgvjd2", 3: "_2fgvjd3", 4: "_2fgvjd4", 5: "_2fgvjd5", 6: "_2fgvjd6", 7: "_2fgvjd7", 8: "_2fgvjd8", 9: "_2fgvjd9", 10: "_2fgvjda", 11: "_2fgvjdb", 12: "_2fgvjdc", none: "_2fgvjdd" }, gridAutoRows: { auto: "_2fgvjde", min: "_2fgvjdf", max: "_2fgvjdg", fr: "_2fgvjdh" }, gridTemplateRows: { none: "_2fgvjdi", auto: "_2fgvjdj", min: "_2fgvjdk", max: "_2fgvjdl", "1fr": "_2fgvjdm", "0fr": "_2fgvjdn" }, gridAutoFlow: { row: "_2fgvjdo", column: "_2fgvjdp", dense: "_2fgvjdq", "row-dense": "_2fgvjdr", "column-dense": "_2fgvjds" }, alignItems: { start: "_2fgvjdt", end: "_2fgvjdu", center: "_2fgvjdv", stretch: "_2fgvjdw", baseline: "_2fgvjdx" }, justifyItems: { start: "_2fgvjdy", end: "_2fgvjdz", center: "_2fgvjd10", stretch: "_2fgvjd11" }, alignContent: { start: "_2fgvjd12", end: "_2fgvjd13", center: "_2fgvjd14", stretch: "_2fgvjd15", between: "_2fgvjd16", around: "_2fgvjd17", evenly: "_2fgvjd18" }, justifyContent: { start: "_2fgvjd19", end: "_2fgvjd1a", center: "_2fgvjd1b", stretch: "_2fgvjd1c", between: "_2fgvjd1d", around: "_2fgvjd1e", evenly: "_2fgvjd1f" } }, defaultVariants: {}, compoundVariants: [] }) };
+export {
+  v as GRID_STYLES
+};
+//# sourceMappingURL=Grid.css.js.map

package/dist/components/layout/grid/styles/Grid.css.js.map

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

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

@@ -0,0 +1,20 @@
+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?: GridColumns;
+    /** The track size for implicitly created grid rows. */
+    gridAutoRows?: GridAutoRows;
+    /** The explicit row track sizing for the grid. */
+    gridTemplateRows?: GridTemplateRows;
+    /** The auto-placement algorithm for grid items. */
+    gridAutoFlow?: GridFlow;
+    /** The default alignment of grid items along the block axis. */
+    alignItems?: GridAlign;
+    /** The default alignment of grid items along the inline axis. */
+    justifyItems?: GridJustifyItems;
+    /** The alignment of the grid tracks along the block axis. */
+    alignContent?: GridAlignContent;
+    /** The alignment of the grid tracks along the inline axis. */
+    justifyContent?: GridJustifyContent;
+};

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

@@ -0,0 +1,16 @@
+/** Number of equal columns (repeat(N, 1fr)) or common patterns. */
+export type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none';
+/** grid-auto-rows values for the Grid component. */
+export type GridAutoRows = 'auto' | 'min' | 'max' | 'fr';
+/** grid-template-rows values for the Grid component. */
+export type GridTemplateRows = 'none' | 'auto' | 'min' | 'max' | '1fr' | '0fr';
+/** grid-auto-flow values. */
+export type GridFlow = 'row' | 'column' | 'dense' | 'row-dense' | 'column-dense';
+/** align-items values for the Grid component. */
+export type GridAlign = 'start' | 'end' | 'center' | 'stretch' | 'baseline';
+/** justify-items values for the Grid component. */
+export type GridJustifyItems = 'start' | 'end' | 'center' | 'stretch';
+/** align-content values for the Grid component. */
+export type GridAlignContent = 'start' | 'end' | 'center' | 'stretch' | 'between' | 'around' | 'evenly';
+/** justify-content values for the Grid component. */
+export type GridJustifyContent = 'start' | 'end' | 'center' | 'stretch' | 'between' | 'around' | 'evenly';

package/dist/components/layout/image/Image.cjs

@@ -0,0 +1,2 @@
+"use strict";const g=require("react/jsx-runtime"),o=require("./styles/Image.css.cjs"),A=require("../../../utils/cn.cjs"),a=require("react"),n=a.memo(({alt:u,objectFit:e,objectPosition:s,borderRadius:c,padding:m,margin:r,backgroundColor:t,width:i,minWidth:q,maxWidth:I,height:l,minHeight:p,maxHeight:x,aspectRatio:N,className:y,style:E,ref:M,...S})=>{const _=a.useMemo(()=>o.IMAGE_STYLES.recipe({objectFit:e,objectPosition:s,borderRadius:c,padding:m,margin:r,backgroundColor:t}),[e,s,c,m,r,t]);return g.jsx("img",{ref:M,alt:u,className:A.cn(_,y),style:{width:i,minWidth:q,maxWidth:I,height:l,minHeight:p,maxHeight:x,aspectRatio:N,...E},...S})});n.displayName="Image";module.exports=n;
+//# sourceMappingURL=Image.cjs.map

package/dist/components/layout/image/Image.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.cjs","sources":["../../../../src/components/layout/image/Image.tsx"],"sourcesContent":["import { IMAGE_STYLES } from '@components/layout/image/styles/Image.css.ts'\r\nimport type { ImageProps } from '@components/layout/image/types/Image.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, useMemo, type FC } from 'react'\r\n\r\nconst Image: FC<ImageProps> = memo(({\r\n    alt,\r\n    objectFit,\r\n    objectPosition,\r\n    borderRadius,\r\n    padding,\r\n    margin,\r\n    backgroundColor,\r\n    width,\r\n    minWidth,\r\n    maxWidth,\r\n    height,\r\n    minHeight,\r\n    maxHeight,\r\n    aspectRatio,\r\n    className,\r\n    style,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const recipeClassName = useMemo(\r\n        () =>\r\n            IMAGE_STYLES.recipe({\r\n                objectFit,\r\n                objectPosition,\r\n                borderRadius,\r\n                padding,\r\n                margin,\r\n                backgroundColor,\r\n            }),\r\n        [\r\n            objectFit,\r\n            objectPosition,\r\n            borderRadius,\r\n            padding,\r\n            margin,\r\n            backgroundColor,\r\n        ],\r\n    )\r\n\r\n    return (\r\n        <img\r\n            ref={ref}\r\n            alt={alt}\r\n            className={cn(recipeClassName, className)}\r\n            style={{\r\n                width,\r\n                minWidth,\r\n                maxWidth,\r\n                height,\r\n                minHeight,\r\n                maxHeight,\r\n                aspectRatio,\r\n                ...style,\r\n            }}\r\n            {...props}\r\n        />\r\n    )\r\n})\r\n\r\nImage.displayName = 'Image'\r\n\r\nexport default Image\r\n"],"names":["Image","memo","alt","objectFit","objectPosition","borderRadius","padding","margin","backgroundColor","width","minWidth","maxWidth","height","minHeight","maxHeight","aspectRatio","className","style","ref","props","recipeClassName","useMemo","IMAGE_STYLES","jsx","cn"],"mappings":"4IAKMA,EAAwBC,EAAAA,KAAK,CAAC,CAChC,IAAAC,EACA,UAAAC,EACA,eAAAC,EACA,aAAAC,EACA,QAAAC,EACA,OAAAC,EACA,gBAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,OAAAC,EACA,UAAAC,EACA,UAAAC,EACA,YAAAC,EACA,UAAAC,EACA,MAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAkBC,EAAAA,QACpB,IACIC,EAAAA,aAAa,OAAO,CAChB,UAAAnB,EACA,eAAAC,EACA,aAAAC,EACA,QAAAC,EACA,OAAAC,EACA,gBAAAC,CAAA,CACH,EACL,CACIL,EACAC,EACAC,EACAC,EACAC,EACAC,CAAA,CACJ,EAGJ,OACIe,EAAAA,IAAC,MAAA,CACG,IAAAL,EACA,IAAAhB,EACA,UAAWsB,EAAAA,GAAGJ,EAAiBJ,CAAS,EACxC,MAAO,CACH,MAAAP,EACA,SAAAC,EACA,SAAAC,EACA,OAAAC,EACA,UAAAC,EACA,UAAAC,EACA,YAAAC,EACA,GAAGE,CAAA,EAEN,GAAGE,CAAA,CAAA,CAGhB,CAAC,EAEDnB,EAAM,YAAc"}

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

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

package/dist/components/layout/image/Image.js

@@ -0,0 +1,67 @@
+import { jsx as u } from "react/jsx-runtime";
+import { IMAGE_STYLES as A } from "./styles/Image.css.js";
+import { cn as G } from "../../../utils/cn.js";
+import { memo as L, useMemo as T } from "react";
+const Y = L(({
+  alt: t,
+  objectFit: m,
+  objectPosition: e,
+  borderRadius: s,
+  padding: r,
+  margin: p,
+  backgroundColor: a,
+  width: f,
+  minWidth: o,
+  maxWidth: l,
+  height: c,
+  minHeight: I,
+  maxHeight: N,
+  aspectRatio: i,
+  className: x,
+  style: y,
+  ref: E,
+  ...M
+}) => {
+  const S = T(
+    () => A.recipe({
+      objectFit: m,
+      objectPosition: e,
+      borderRadius: s,
+      padding: r,
+      margin: p,
+      backgroundColor: a
+    }),
+    [
+      m,
+      e,
+      s,
+      r,
+      p,
+      a
+    ]
+  );
+  return /* @__PURE__ */ u(
+    "img",
+    {
+      ref: E,
+      alt: t,
+      className: G(S, x),
+      style: {
+        width: f,
+        minWidth: o,
+        maxWidth: l,
+        height: c,
+        minHeight: I,
+        maxHeight: N,
+        aspectRatio: i,
+        ...y
+      },
+      ...M
+    }
+  );
+});
+Y.displayName = "Image";
+export {
+  Y as default
+};
+//# sourceMappingURL=Image.js.map

package/dist/components/layout/image/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sources":["../../../../src/components/layout/image/Image.tsx"],"sourcesContent":["import { IMAGE_STYLES } from '@components/layout/image/styles/Image.css.ts'\r\nimport type { ImageProps } from '@components/layout/image/types/Image.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, useMemo, type FC } from 'react'\r\n\r\nconst Image: FC<ImageProps> = memo(({\r\n    alt,\r\n    objectFit,\r\n    objectPosition,\r\n    borderRadius,\r\n    padding,\r\n    margin,\r\n    backgroundColor,\r\n    width,\r\n    minWidth,\r\n    maxWidth,\r\n    height,\r\n    minHeight,\r\n    maxHeight,\r\n    aspectRatio,\r\n    className,\r\n    style,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const recipeClassName = useMemo(\r\n        () =>\r\n            IMAGE_STYLES.recipe({\r\n                objectFit,\r\n                objectPosition,\r\n                borderRadius,\r\n                padding,\r\n                margin,\r\n                backgroundColor,\r\n            }),\r\n        [\r\n            objectFit,\r\n            objectPosition,\r\n            borderRadius,\r\n            padding,\r\n            margin,\r\n            backgroundColor,\r\n        ],\r\n    )\r\n\r\n    return (\r\n        <img\r\n            ref={ref}\r\n            alt={alt}\r\n            className={cn(recipeClassName, className)}\r\n            style={{\r\n                width,\r\n                minWidth,\r\n                maxWidth,\r\n                height,\r\n                minHeight,\r\n                maxHeight,\r\n                aspectRatio,\r\n                ...style,\r\n            }}\r\n            {...props}\r\n        />\r\n    )\r\n})\r\n\r\nImage.displayName = 'Image'\r\n\r\nexport default Image\r\n"],"names":["Image","memo","alt","objectFit","objectPosition","borderRadius","padding","margin","backgroundColor","width","minWidth","maxWidth","height","minHeight","maxHeight","aspectRatio","className","style","ref","props","recipeClassName","useMemo","IMAGE_STYLES","jsx","cn"],"mappings":";;;;AAKA,MAAMA,IAAwBC,EAAK,CAAC;AAAA,EAChC,KAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAkBC;AAAA,IACpB,MACIC,EAAa,OAAO;AAAA,MAChB,WAAAnB;AAAA,MACA,gBAAAC;AAAA,MACA,cAAAC;AAAA,MACA,SAAAC;AAAA,MACA,QAAAC;AAAA,MACA,iBAAAC;AAAA,IAAA,CACH;AAAA,IACL;AAAA,MACIL;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,MACAC;AAAA,IAAA;AAAA,EACJ;AAGJ,SACI,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAL;AAAA,MACA,KAAAhB;AAAA,MACA,WAAWsB,EAAGJ,GAAiBJ,CAAS;AAAA,MACxC,OAAO;AAAA,QACH,OAAAP;AAAA,QACA,UAAAC;AAAA,QACA,UAAAC;AAAA,QACA,QAAAC;AAAA,QACA,WAAAC;AAAA,QACA,WAAAC;AAAA,QACA,aAAAC;AAAA,QACA,GAAGE;AAAA,MAAA;AAAA,MAEN,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGhB,CAAC;AAEDnB,EAAM,cAAc;"}

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

@@ -0,0 +1,4 @@
+export { default as Image } from './Image.tsx';
+export { IMAGE_STYLES } 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.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                              */;/* empty css                           */const o=require("@vanilla-extract/recipes/createRuntimeFn");var n={recipe:o.createRuntimeFn({defaultClassName:"kunpco0",variantClassNames:{objectFit:{contain:"kunpco1",cover:"kunpco2",fill:"kunpco3",none:"kunpco4","scale-down":"kunpco5"},objectPosition:{center:"kunpco6",top:"kunpco7",bottom:"kunpco8",left:"kunpco9",right:"kunpcoa","top-left":"kunpcob","top-right":"kunpcoc","bottom-left":"kunpcod","bottom-right":"kunpcoe"},borderRadius:{none:"kunpcof",xs:"kunpcog",sm:"kunpcoh",md:"kunpcoi",lg:"kunpcoj",xl:"kunpcok","2xl":"kunpcol",full:"kunpcom"},padding:{none:"kunpcon",px:"kunpcoo",xxs:"kunpcop",xs:"kunpcoq",xs2:"kunpcor",sm:"kunpcos",md:"kunpcot",lg:"kunpcou",xl:"kunpcov","2xl":"kunpcow","3xl":"kunpcox","4xl":"kunpcoy","5xl":"kunpcoz"},margin:{auto:"kunpco10",none:"kunpco11",px:"kunpco12",xxs:"kunpco13",xs:"kunpco14",xs2:"kunpco15",sm:"kunpco16",md:"kunpco17",lg:"kunpco18",xl:"kunpco19","2xl":"kunpco1a","3xl":"kunpco1b","4xl":"kunpco1c","5xl":"kunpco1d"},backgroundColor:{background:"kunpco1e",foreground:"kunpco1f",text:"kunpco1g",textSecondary:"kunpco1h",textTertiary:"kunpco1i",card:"kunpco1j",cardForeground:"kunpco1k",popover:"kunpco1l",popoverForeground:"kunpco1m",muted:"kunpco1n",mutedForeground:"kunpco1o",overlay:"kunpco1p",primary:"kunpco1q",primaryHover:"kunpco1r",primaryActive:"kunpco1s",primaryForeground:"kunpco1t",primarySubtle:"kunpco1u",primarySubtleHover:"kunpco1v",primarySubtleActive:"kunpco1w",primarySubtleForeground:"kunpco1x",primarySubtleBorder:"kunpco1y",link:"kunpco1z",linkHover:"kunpco20",linkActive:"kunpco21",secondary:"kunpco22",secondaryHover:"kunpco23",secondaryActive:"kunpco24",secondaryForeground:"kunpco25",secondarySubtle:"kunpco26",secondarySubtleHover:"kunpco27",secondarySubtleActive:"kunpco28",secondarySubtleForeground:"kunpco29",secondarySubtleBorder:"kunpco2a",tertiary:"kunpco2b",tertiaryHover:"kunpco2c",tertiaryActive:"kunpco2d",tertiaryForeground:"kunpco2e",tertiarySubtle:"kunpco2f",tertiarySubtleHover:"kunpco2g",tertiarySubtleActive:"kunpco2h",tertiarySubtleForeground:"kunpco2i",tertiarySubtleBorder:"kunpco2j",success:"kunpco2k",successHover:"kunpco2l",successActive:"kunpco2m",successForeground:"kunpco2n",successSubtle:"kunpco2o",successSubtleHover:"kunpco2p",successSubtleActive:"kunpco2q",successSubtleForeground:"kunpco2r",successSubtleBorder:"kunpco2s",warning:"kunpco2t",warningHover:"kunpco2u",warningActive:"kunpco2v",warningForeground:"kunpco2w",warningSubtle:"kunpco2x",warningSubtleHover:"kunpco2y",warningSubtleActive:"kunpco2z",warningSubtleForeground:"kunpco30",warningSubtleBorder:"kunpco31",info:"kunpco32",infoHover:"kunpco33",infoActive:"kunpco34",infoForeground:"kunpco35",infoSubtle:"kunpco36",infoSubtleHover:"kunpco37",infoSubtleActive:"kunpco38",infoSubtleForeground:"kunpco39",infoSubtleBorder:"kunpco3a",destructive:"kunpco3b",destructiveHover:"kunpco3c",destructiveActive:"kunpco3d",destructiveForeground:"kunpco3e",destructiveSubtle:"kunpco3f",destructiveSubtleHover:"kunpco3g",destructiveSubtleActive:"kunpco3h",destructiveSubtleForeground:"kunpco3i",destructiveSubtleBorder:"kunpco3j",purple:"kunpco3k",purpleHover:"kunpco3l",purpleActive:"kunpco3m",purpleForeground:"kunpco3n",purpleSubtle:"kunpco3o",purpleSubtleHover:"kunpco3p",purpleSubtleActive:"kunpco3q",purpleSubtleForeground:"kunpco3r",purpleSubtleBorder:"kunpco3s",pink:"kunpco3t",pinkHover:"kunpco3u",pinkActive:"kunpco3v",pinkForeground:"kunpco3w",pinkSubtle:"kunpco3x",pinkSubtleHover:"kunpco3y",pinkSubtleActive:"kunpco3z",pinkSubtleForeground:"kunpco40",pinkSubtleBorder:"kunpco41",orange:"kunpco42",orangeHover:"kunpco43",orangeActive:"kunpco44",orangeForeground:"kunpco45",orangeSubtle:"kunpco46",orangeSubtleHover:"kunpco47",orangeSubtleActive:"kunpco48",orangeSubtleForeground:"kunpco49",orangeSubtleBorder:"kunpco4a",teal:"kunpco4b",tealHover:"kunpco4c",tealActive:"kunpco4d",tealForeground:"kunpco4e",tealSubtle:"kunpco4f",tealSubtleHover:"kunpco4g",tealSubtleActive:"kunpco4h",tealSubtleForeground:"kunpco4i",tealSubtleBorder:"kunpco4j",cyan:"kunpco4k",cyanHover:"kunpco4l",cyanActive:"kunpco4m",cyanForeground:"kunpco4n",cyanSubtle:"kunpco4o",cyanSubtleHover:"kunpco4p",cyanSubtleActive:"kunpco4q",cyanSubtleForeground:"kunpco4r",cyanSubtleBorder:"kunpco4s",indigo:"kunpco4t",indigoHover:"kunpco4u",indigoActive:"kunpco4v",indigoForeground:"kunpco4w",indigoSubtle:"kunpco4x",indigoSubtleHover:"kunpco4y",indigoSubtleActive:"kunpco4z",indigoSubtleForeground:"kunpco50",indigoSubtleBorder:"kunpco51",border:"kunpco52",borderStrong:"kunpco53",input:"kunpco54",ring:"kunpco55",highlight:"kunpco56",highlightForeground:"kunpco57",skeleton:"kunpco58",skeletonForeground:"kunpco59",transparent:"kunpco5a"}},defaultVariants:{},compoundVariants:[]})};exports.IMAGE_STYLES=n;
+//# sourceMappingURL=Image.css.cjs.map

package/dist/components/layout/image/styles/Image.css.cjs.map

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

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

@@ -0,0 +1,163 @@
+import { RuntimeFn } from '@vanilla-extract/recipes';
+export declare const IMAGE_STYLES: {
+    recipe: RuntimeFn<{
+        objectFit: {
+            contain: {
+                objectFit: "contain";
+            };
+            cover: {
+                objectFit: "cover";
+            };
+            fill: {
+                objectFit: "fill";
+            };
+            none: {
+                objectFit: "none";
+            };
+            'scale-down': {
+                objectFit: "scale-down";
+            };
+        };
+        objectPosition: {
+            center: {
+                objectPosition: "center";
+            };
+            top: {
+                objectPosition: "top";
+            };
+            bottom: {
+                objectPosition: "bottom";
+            };
+            left: {
+                objectPosition: "left";
+            };
+            right: {
+                objectPosition: "right";
+            };
+            'top-left': {
+                objectPosition: "left top";
+            };
+            'top-right': {
+                objectPosition: "right top";
+            };
+            'bottom-left': {
+                objectPosition: "left bottom";
+            };
+            'bottom-right': {
+                objectPosition: "right bottom";
+            };
+        };
+        borderRadius: {
+            none: {
+                borderRadius: `var(--${string})`;
+            };
+            xs: {
+                borderRadius: `var(--${string})`;
+            };
+            sm: {
+                borderRadius: `var(--${string})`;
+            };
+            md: {
+                borderRadius: `var(--${string})`;
+            };
+            lg: {
+                borderRadius: `var(--${string})`;
+            };
+            xl: {
+                borderRadius: `var(--${string})`;
+            };
+            '2xl': {
+                borderRadius: `var(--${string})`;
+            };
+            full: {
+                borderRadius: `var(--${string})`;
+            };
+        };
+        padding: {
+            none: {
+                padding: `var(--${string})`;
+            };
+            px: {
+                padding: `var(--${string})`;
+            };
+            xxs: {
+                padding: `var(--${string})`;
+            };
+            xs: {
+                padding: `var(--${string})`;
+            };
+            xs2: {
+                padding: `var(--${string})`;
+            };
+            sm: {
+                padding: `var(--${string})`;
+            };
+            md: {
+                padding: `var(--${string})`;
+            };
+            lg: {
+                padding: `var(--${string})`;
+            };
+            xl: {
+                padding: `var(--${string})`;
+            };
+            '2xl': {
+                padding: `var(--${string})`;
+            };
+            '3xl': {
+                padding: `var(--${string})`;
+            };
+            '4xl': {
+                padding: `var(--${string})`;
+            };
+            '5xl': {
+                padding: `var(--${string})`;
+            };
+        };
+        margin: {
+            auto: {
+                margin: "auto";
+            };
+            none: {
+                margin: `var(--${string})`;
+            };
+            px: {
+                margin: `var(--${string})`;
+            };
+            xxs: {
+                margin: `var(--${string})`;
+            };
+            xs: {
+                margin: `var(--${string})`;
+            };
+            xs2: {
+                margin: `var(--${string})`;
+            };
+            sm: {
+                margin: `var(--${string})`;
+            };
+            md: {
+                margin: `var(--${string})`;
+            };
+            lg: {
+                margin: `var(--${string})`;
+            };
+            xl: {
+                margin: `var(--${string})`;
+            };
+            '2xl': {
+                margin: `var(--${string})`;
+            };
+            '3xl': {
+                margin: `var(--${string})`;
+            };
+            '4xl': {
+                margin: `var(--${string})`;
+            };
+            '5xl': {
+                margin: `var(--${string})`;
+            };
+        };
+        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>>;
+    }>;
+};

package/dist/components/layout/image/styles/Image.css.js

@@ -0,0 +1,8 @@
+/* empty css                                            */
+/* empty css                         */
+import { createRuntimeFn as o } from "@vanilla-extract/recipes/createRuntimeFn";
+var e = { recipe: o({ defaultClassName: "kunpco0", variantClassNames: { objectFit: { contain: "kunpco1", cover: "kunpco2", fill: "kunpco3", none: "kunpco4", "scale-down": "kunpco5" }, objectPosition: { center: "kunpco6", top: "kunpco7", bottom: "kunpco8", left: "kunpco9", right: "kunpcoa", "top-left": "kunpcob", "top-right": "kunpcoc", "bottom-left": "kunpcod", "bottom-right": "kunpcoe" }, borderRadius: { none: "kunpcof", xs: "kunpcog", sm: "kunpcoh", md: "kunpcoi", lg: "kunpcoj", xl: "kunpcok", "2xl": "kunpcol", full: "kunpcom" }, padding: { none: "kunpcon", px: "kunpcoo", xxs: "kunpcop", xs: "kunpcoq", xs2: "kunpcor", sm: "kunpcos", md: "kunpcot", lg: "kunpcou", xl: "kunpcov", "2xl": "kunpcow", "3xl": "kunpcox", "4xl": "kunpcoy", "5xl": "kunpcoz" }, margin: { auto: "kunpco10", none: "kunpco11", px: "kunpco12", xxs: "kunpco13", xs: "kunpco14", xs2: "kunpco15", sm: "kunpco16", md: "kunpco17", lg: "kunpco18", xl: "kunpco19", "2xl": "kunpco1a", "3xl": "kunpco1b", "4xl": "kunpco1c", "5xl": "kunpco1d" }, backgroundColor: { background: "kunpco1e", foreground: "kunpco1f", text: "kunpco1g", textSecondary: "kunpco1h", textTertiary: "kunpco1i", card: "kunpco1j", cardForeground: "kunpco1k", popover: "kunpco1l", popoverForeground: "kunpco1m", muted: "kunpco1n", mutedForeground: "kunpco1o", overlay: "kunpco1p", primary: "kunpco1q", primaryHover: "kunpco1r", primaryActive: "kunpco1s", primaryForeground: "kunpco1t", primarySubtle: "kunpco1u", primarySubtleHover: "kunpco1v", primarySubtleActive: "kunpco1w", primarySubtleForeground: "kunpco1x", primarySubtleBorder: "kunpco1y", link: "kunpco1z", linkHover: "kunpco20", linkActive: "kunpco21", secondary: "kunpco22", secondaryHover: "kunpco23", secondaryActive: "kunpco24", secondaryForeground: "kunpco25", secondarySubtle: "kunpco26", secondarySubtleHover: "kunpco27", secondarySubtleActive: "kunpco28", secondarySubtleForeground: "kunpco29", secondarySubtleBorder: "kunpco2a", tertiary: "kunpco2b", tertiaryHover: "kunpco2c", tertiaryActive: "kunpco2d", tertiaryForeground: "kunpco2e", tertiarySubtle: "kunpco2f", tertiarySubtleHover: "kunpco2g", tertiarySubtleActive: "kunpco2h", tertiarySubtleForeground: "kunpco2i", tertiarySubtleBorder: "kunpco2j", success: "kunpco2k", successHover: "kunpco2l", successActive: "kunpco2m", successForeground: "kunpco2n", successSubtle: "kunpco2o", successSubtleHover: "kunpco2p", successSubtleActive: "kunpco2q", successSubtleForeground: "kunpco2r", successSubtleBorder: "kunpco2s", warning: "kunpco2t", warningHover: "kunpco2u", warningActive: "kunpco2v", warningForeground: "kunpco2w", warningSubtle: "kunpco2x", warningSubtleHover: "kunpco2y", warningSubtleActive: "kunpco2z", warningSubtleForeground: "kunpco30", warningSubtleBorder: "kunpco31", info: "kunpco32", infoHover: "kunpco33", infoActive: "kunpco34", infoForeground: "kunpco35", infoSubtle: "kunpco36", infoSubtleHover: "kunpco37", infoSubtleActive: "kunpco38", infoSubtleForeground: "kunpco39", infoSubtleBorder: "kunpco3a", destructive: "kunpco3b", destructiveHover: "kunpco3c", destructiveActive: "kunpco3d", destructiveForeground: "kunpco3e", destructiveSubtle: "kunpco3f", destructiveSubtleHover: "kunpco3g", destructiveSubtleActive: "kunpco3h", destructiveSubtleForeground: "kunpco3i", destructiveSubtleBorder: "kunpco3j", purple: "kunpco3k", purpleHover: "kunpco3l", purpleActive: "kunpco3m", purpleForeground: "kunpco3n", purpleSubtle: "kunpco3o", purpleSubtleHover: "kunpco3p", purpleSubtleActive: "kunpco3q", purpleSubtleForeground: "kunpco3r", purpleSubtleBorder: "kunpco3s", pink: "kunpco3t", pinkHover: "kunpco3u", pinkActive: "kunpco3v", pinkForeground: "kunpco3w", pinkSubtle: "kunpco3x", pinkSubtleHover: "kunpco3y", pinkSubtleActive: "kunpco3z", pinkSubtleForeground: "kunpco40", pinkSubtleBorder: "kunpco41", orange: "kunpco42", orangeHover: "kunpco43", orangeActive: "kunpco44", orangeForeground: "kunpco45", orangeSubtle: "kunpco46", orangeSubtleHover: "kunpco47", orangeSubtleActive: "kunpco48", orangeSubtleForeground: "kunpco49", orangeSubtleBorder: "kunpco4a", teal: "kunpco4b", tealHover: "kunpco4c", tealActive: "kunpco4d", tealForeground: "kunpco4e", tealSubtle: "kunpco4f", tealSubtleHover: "kunpco4g", tealSubtleActive: "kunpco4h", tealSubtleForeground: "kunpco4i", tealSubtleBorder: "kunpco4j", cyan: "kunpco4k", cyanHover: "kunpco4l", cyanActive: "kunpco4m", cyanForeground: "kunpco4n", cyanSubtle: "kunpco4o", cyanSubtleHover: "kunpco4p", cyanSubtleActive: "kunpco4q", cyanSubtleForeground: "kunpco4r", cyanSubtleBorder: "kunpco4s", indigo: "kunpco4t", indigoHover: "kunpco4u", indigoActive: "kunpco4v", indigoForeground: "kunpco4w", indigoSubtle: "kunpco4x", indigoSubtleHover: "kunpco4y", indigoSubtleActive: "kunpco4z", indigoSubtleForeground: "kunpco50", indigoSubtleBorder: "kunpco51", border: "kunpco52", borderStrong: "kunpco53", input: "kunpco54", ring: "kunpco55", highlight: "kunpco56", highlightForeground: "kunpco57", skeleton: "kunpco58", skeletonForeground: "kunpco59", transparent: "kunpco5a" } }, defaultVariants: {}, compoundVariants: [] }) };
+export {
+  e as IMAGE_STYLES
+};
+//# sourceMappingURL=Image.css.js.map

package/dist/components/layout/image/styles/Image.css.js.map

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

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

@@ -0,0 +1,31 @@
+import { CSSProperties, ImgHTMLAttributes, RefAttributes } from 'react';
+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'];
+    /** The CSS `min-width` of the image. */
+    minWidth?: CSSProperties['minWidth'];
+    /** The CSS `max-width` of the image. */
+    maxWidth?: CSSProperties['maxWidth'];
+    /** The CSS `height` of the image. */
+    height?: CSSProperties['height'];
+    /** The CSS `min-height` of the image. */
+    minHeight?: CSSProperties['minHeight'];
+    /** The CSS `max-height` of the image. */
+    maxHeight?: CSSProperties['maxHeight'];
+    /** The CSS `aspect-ratio` of the image. */
+    aspectRatio?: CSSProperties['aspectRatio'];
+    /** The CSS `object-fit` value of the image. */
+    objectFit?: ImageObjectFit;
+    /** The CSS `object-position` value of the image. */
+    objectPosition?: ImageObjectPosition;
+    /** The border radius token applied to the image. */
+    borderRadius?: BoxBorderRadius;
+    /** The padding token applied to the image. */
+    padding?: ImageSpace;
+    /** The margin token applied to the image. Supports `auto`. */
+    margin?: ImageMargin;
+    /** The theme color token applied to the image's background color. */
+    backgroundColor?: BoxColor;
+};

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

@@ -0,0 +1,8 @@
+/** Object-fit values supported by the Image component. */
+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

@@ -0,0 +1,8 @@
+export * from './box';
+export * from './flex';
+export * from './grid';
+export * from './image';
+export * from './separator';
+export * from './form';
+export * from './fieldset';
+export * from './legend';

package/dist/components/layout/legend/Legend.cjs

@@ -0,0 +1,2 @@
+"use strict";const o=require("react/jsx-runtime"),a=require("../../foundation/typography/Typography.cjs");require("../../foundation/typography/styles/Typography.css.cjs");const i=require("./styles/Legend.css.cjs"),u=require("../../../utils/cn.cjs"),e=require("react"),r=e.memo(e.forwardRef(({className:s,children:n,...t},c)=>o.jsx(a,{ref:c,as:"legend",variant:"label",className:u.cn(i.LEGEND_STYLES.root,s),...t,children:n})));r.displayName="Legend";module.exports=r;
+//# sourceMappingURL=Legend.cjs.map

package/dist/components/layout/legend/Legend.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Legend.cjs","sources":["../../../../src/components/layout/legend/Legend.tsx"],"sourcesContent":["import { Typography } from '@components/foundation/typography'\r\nimport { LEGEND_STYLES } from '@components/layout/legend/styles/Legend.css.ts'\r\nimport type { LegendProps } from '@components/layout/legend/types/Legend.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { forwardRef, memo } from 'react'\r\n\r\n/**\r\n * A thin wrapper around the native `<legend>` element.\r\n *\r\n * `Legend` provides the accessible name for a `Fieldset`. Screen readers\r\n * announce the legend text when the user enters or focuses controls inside\r\n * the fieldset, so the group purpose is always clear.\r\n *\r\n * @example\r\n * ```tsx\r\n * <Fieldset>\r\n *   <Legend>Notification preferences</Legend>\r\n *   <Checkbox label=\"Email\" />\r\n *   <Checkbox label=\"Push\" />\r\n * </Fieldset>\r\n * ```\r\n */\r\nconst Legend = memo(forwardRef<HTMLLegendElement, LegendProps>(\r\n    ({ className, children, ...props }, ref) => (\r\n        <Typography\r\n            ref={ref}\r\n            as={'legend'}\r\n            variant={'label'}\r\n            className={cn(LEGEND_STYLES.root, className)}\r\n            {...props}\r\n        >\r\n            {children}\r\n        </Typography>\r\n    ),\r\n))\r\n\r\nLegend.displayName = 'Legend'\r\n\r\nexport default Legend\r\n"],"names":["Legend","memo","forwardRef","className","children","props","ref","jsx","Typography","cn","LEGEND_STYLES"],"mappings":"4QAsBMA,EAASC,EAAAA,KAAKC,EAAAA,WAChB,CAAC,CAAE,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAA,EAASC,IAChCC,EAAAA,IAACC,EAAA,CACG,IAAAF,EACA,GAAI,SACJ,QAAS,QACT,UAAWG,EAAAA,GAAGC,gBAAc,KAAMP,CAAS,EAC1C,GAAGE,EAEH,SAAAD,CAAA,CAAA,CAGb,CAAC,EAEDJ,EAAO,YAAc"}

package/dist/components/layout/legend/Legend.d.ts

@@ -0,0 +1,20 @@
+import { LegendProps } from './types/Legend.props.ts';
+import { NamedExoticComponent, RefAttributes } from 'react';
+/**
+ * A thin wrapper around the native `<legend>` element.
+ *
+ * `Legend` provides the accessible name for a `Fieldset`. Screen readers
+ * announce the legend text when the user enters or focuses controls inside
+ * the fieldset, so the group purpose is always clear.
+ *
+ * @example
+ * ```tsx
+ * <Fieldset>
+ *   <Legend>Notification preferences</Legend>
+ *   <Checkbox label="Email" />
+ *   <Checkbox label="Push" />
+ * </Fieldset>
+ * ```
+ */
+declare const Legend: NamedExoticComponent<Omit<LegendProps, "ref"> & RefAttributes<HTMLLegendElement>>;
+export default Legend;