@drivenets/design-system 0.0.5 → 0.2.0

package/dist/components/ds-chip-group/ds-chip-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"ds-chip-group.js","names":["React","useRef","useState","RadixDialog","Root","VisuallyHidden","classNames","styles","DsChipGroupProps","useChipRowCalculation","DsTypography","DsChip","DsCheckbox","DsButton","DsIcon","DsChipGroup","FC","items","label","onClearAll","onItemDelete","onItemSelect","className","style","dialogOpen","setDialogOpen","showAllChipsRef","HTMLDivElement","chipsWrapperRef","visibleCount","totalFilters","length","hiddenCount","showExpandButton","handleOpenDialog","dialogStyle","CSSProperties","current","rect","getBoundingClientRect","position","top","bottom","left","container","chipsWrapper","map","item","index","id","selected","hidden","String","expandChip","dialog","dialogContent","filter","itemCheckbox"],"sources":["../../../src/components/ds-chip-group/ds-chip-group.tsx"],"sourcesContent":["import type React from 'react';\nimport { useRef, useState } from 'react';\nimport * as RadixDialog from '@radix-ui/react-dialog';\nimport { Root as VisuallyHidden } from '@radix-ui/react-visually-hidden';\nimport classNames from 'classnames';\nimport styles from './ds-chip-group.module.scss';\nimport type { DsChipGroupProps } from './ds-chip-group.types';\nimport { useChipRowCalculation } from './hooks/use-chip-row-calculation';\nimport { DsTypography } from '../ds-typography';\nimport DsChip from '../ds-chip/ds-chip';\nimport { DsCheckbox } from '../ds-checkbox';\nimport { DsButton } from '../ds-button';\nimport { DsIcon } from '../ds-icon';\n\n/**\n * Design system chip group component displays a collection of chips with overflow handling\n * Used for displaying filters, selected items, tags, etc.\n */\nconst DsChipGroup: React.FC<DsChipGroupProps> = ({\n\titems,\n\tlabel = 'Filtered by:',\n\tonClearAll,\n\tonItemDelete,\n\tonItemSelect,\n\tclassName,\n\tstyle,\n}) => {\n\tconst [dialogOpen, setDialogOpen] = useState(false);\n\tconst showAllChipsRef = useRef<HTMLDivElement>(null);\n\tconst chipsWrapperRef = useRef<HTMLDivElement>(null);\n\tconst visibleCount = useChipRowCalculation({\n\t\tchipsWrapperRef,\n\t\ttotalFilters: items.length,\n\t});\n\n\tif (items.length === 0) {\n\t\treturn null;\n\t}\n\n\tconst hiddenCount = items.length - visibleCount;\n\tconst showExpandButton = hiddenCount > 0;\n\n\tconst handleOpenDialog = () => {\n\t\tsetDialogOpen(true);\n\t};\n\n\tlet dialogStyle: React.CSSProperties = {};\n\tif (showExpandButton && showAllChipsRef.current) {\n\t\tconst rect = showAllChipsRef.current.getBoundingClientRect();\n\t\tdialogStyle = {\n\t\t\tposition: 'fixed',\n\t\t\ttop: rect.bottom + 4,\n\t\t\tleft: rect.left,\n\t\t};\n\t}\n\n\treturn (\n\t\t<div className={classNames(styles.container, className)} style={style}>\n\t\t\t{label && (\n\t\t\t\t<DsTypography variant=\"body-sm-reg\" className={styles.label}>\n\t\t\t\t\t{label}\n\t\t\t\t</DsTypography>\n\t\t\t)}\n\n\t\t\t<div ref={chipsWrapperRef} className={styles.chipsWrapper}>\n\t\t\t\t{items.map((item, index) => (\n\t\t\t\t\t<DsChip\n\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\tlabel={item.label}\n\t\t\t\t\t\tselected={item.selected}\n\t\t\t\t\t\tonClick={() => onItemSelect?.(item)}\n\t\t\t\t\t\tonDelete={() => onItemDelete?.(item)}\n\t\t\t\t\t\tclassName={classNames({\n\t\t\t\t\t\t\t[styles.hidden]: index >= visibleCount,\n\t\t\t\t\t\t})}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t\t{showExpandButton && (\n\t\t\t\t\t<DsChip\n\t\t\t\t\t\tref={showAllChipsRef}\n\t\t\t\t\t\tlabel={`+${String(hiddenCount)} ${hiddenCount === 1 ? 'item' : 'items'} show all`}\n\t\t\t\t\t\tonClick={handleOpenDialog}\n\t\t\t\t\t\tclassName={styles.expandChip}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{onClearAll && (\n\t\t\t\t<DsButton design=\"v1.2\" buttonType=\"tertiary\" variant=\"ghost\" size=\"small\" onClick={onClearAll}>\n\t\t\t\t\t<DsIcon icon=\"close\" />\n\t\t\t\t\tClear all\n\t\t\t\t</DsButton>\n\t\t\t)}\n\n\t\t\t<RadixDialog.Root open={dialogOpen} onOpenChange={setDialogOpen}>\n\t\t\t\t<VisuallyHidden>\n\t\t\t\t\t<RadixDialog.Title />\n\t\t\t\t</VisuallyHidden>\n\t\t\t\t<RadixDialog.Portal>\n\t\t\t\t\t<RadixDialog.Content style={dialogStyle} className={styles.dialog}>\n\t\t\t\t\t\t<div className={styles.dialogContent}>\n\t\t\t\t\t\t\t{items\n\t\t\t\t\t\t\t\t.filter((item, index) => index >= visibleCount)\n\t\t\t\t\t\t\t\t.map((item) => (\n\t\t\t\t\t\t\t\t\t<div key={item.id} className={styles.itemCheckbox}>\n\t\t\t\t\t\t\t\t\t\t<DsCheckbox\n\t\t\t\t\t\t\t\t\t\t\tid={`chip-${item.id}`}\n\t\t\t\t\t\t\t\t\t\t\tchecked={item.selected}\n\t\t\t\t\t\t\t\t\t\t\tonCheckedChange={() => onItemSelect?.(item)}\n\t\t\t\t\t\t\t\t\t\t\tlabel={item.label}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</RadixDialog.Content>\n\t\t\t\t</RadixDialog.Portal>\n\t\t\t</RadixDialog.Root>\n\t\t</div>\n\t);\n};\n\nexport default DsChipGroup;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMe,eAA2C,EAChDE,OACAC,QAAQ,gBACRC,YACAC,cACAC,cACAC,WACAC,YACK;CACL,MAAM,CAACC,YAAYC,iBAAiBvB,SAAS,MAAM;CACnD,MAAMwB,kBAAkBzB,OAAuB,KAAK;CACpD,MAAM2B,kBAAkB3B,OAAuB,KAAK;CACpD,MAAM4B,eAAepB,sBAAsB;EAC1CmB;EACAE,cAAcb,MAAMc;EACpB,CAAC;AAEF,KAAId,MAAMc,WAAW,EACpB,QAAO;CAGR,MAAMC,cAAcf,MAAMc,SAASF;CACnC,MAAMI,mBAAmBD,cAAc;CAEvC,MAAME,yBAAyB;AAC9BT,gBAAc,KAAK;;CAGpB,IAAIU,cAAmC,EAAE;AACzC,KAAIF,oBAAoBP,gBAAgBW,SAAS;EAChD,MAAMC,OAAOZ,gBAAgBW,QAAQE,uBAAuB;AAC5DJ,gBAAc;GACbK,UAAU;GACVC,KAAKH,KAAKI,SAAS;GACnBC,MAAML,KAAKK;GACX;;AAGF,QACC,qBAAC;EAAI,WAAWrC,WAAWC,6BAAOqC,WAAWtB,UAAU;EAASC;;GAC9DL,SACA,oBAAC;IAAa,SAAQ;IAAc,WAAWX,6BAAOW;cACpDA;KAEF;GAED,qBAAC;IAAI,KAAKU;IAAiB,WAAWrB,6BAAOsC;eAC3C5B,MAAM6B,KAAKC,MAAMC,UACjB,oBAAC;KAEA,OAAOD,KAAK7B;KACZ,UAAU6B,KAAKG;KACf,eAAe7B,eAAe0B,KAAK;KACnC,gBAAgB3B,eAAe2B,KAAK;KACpC,WAAWzC,WAAW,GACpBC,6BAAO4C,SAASH,SAASnB,cAC1B,CAAC;OAPGkB,KAAKE,GASX,CAAC,EACDhB,oBACA,oBAAC;KACA,KAAKP;KACL,OAAO,IAAI0B,OAAOpB,YAAY,CAAA,GAAIA,gBAAgB,IAAI,SAAS,QAAO;KACtE,SAASE;KACT,WAAW3B,6BAAO8C;MAEnB;KACG;GAEJlC,cACA,qBAAC;IAAS,QAAO;IAAO,YAAW;IAAW,SAAQ;IAAQ,MAAK;IAAQ,SAASA;eACnF,oBAAC,mBAAO,MAAK,UAAO;KAGrB;GAED,qBAAC,YAAY;IAAK,MAAMK;IAAY,cAAcC;eACjD,oBAAC,kBACA,oBAAC,YAAY,UAAK,GACH,EAChB,oBAAC,YAAY,oBACZ,oBAAC,YAAY;KAAQ,OAAOU;KAAa,WAAW5B,6BAAO+C;eAC1D,oBAAC;MAAI,WAAW/C,6BAAOgD;gBACrBtC,MACCuC,QAAQT,QAAMC,YAAUA,WAASnB,aAAa,CAC9CiB,KAAKC,WACL,oBAAC;OAAkB,WAAWxC,6BAAOkD;iBACpC,oBAAC;QACA,IAAI,QAAQV,OAAKE;QACjB,SAASF,OAAKG;QACd,uBAAuB7B,eAAe0B,OAAK;QAC3C,OAAOA,OAAK7B;SAAM;SALV6B,OAAKE,GAQf,CAAC;OACC;MACe,GACF;KACH;;GACb;;AAIR,4BAAelC"}
+{"version":3,"file":"ds-chip-group.js","names":["React","useRef","useState","RadixDialog","Root","VisuallyHidden","classNames","styles","DsChipGroupProps","useChipRowCalculation","DsTypography","DsChip","DsCheckbox","DsButton","DsIcon","DsChipGroup","FC","items","label","onClearAll","onItemDelete","onItemSelect","className","style","dialogOpen","setDialogOpen","showAllChipsRef","HTMLDivElement","chipsWrapperRef","visibleCount","totalFilters","length","hiddenCount","showExpandButton","handleOpenDialog","dialogStyle","CSSProperties","current","rect","getBoundingClientRect","position","top","bottom","left","container","chipsWrapper","map","item","index","id","selected","hidden","String","expandChip","dialog","dialogContent","filter","itemCheckbox"],"sources":["../../../src/components/ds-chip-group/ds-chip-group.tsx"],"sourcesContent":["import type React from 'react';\nimport { useRef, useState } from 'react';\nimport * as RadixDialog from '@radix-ui/react-dialog';\nimport { Root as VisuallyHidden } from '@radix-ui/react-visually-hidden';\nimport classNames from 'classnames';\nimport styles from './ds-chip-group.module.scss';\nimport type { DsChipGroupProps } from './ds-chip-group.types';\nimport { useChipRowCalculation } from './hooks/use-chip-row-calculation';\nimport { DsTypography } from '../ds-typography';\nimport DsChip from '../ds-chip/ds-chip';\nimport { DsCheckbox } from '../ds-checkbox';\nimport { DsButton } from '../ds-button';\nimport { DsIcon } from '../ds-icon';\n\n/**\n * @deprecated This component is deprecated. Use `DsTagFilter` instead.\n * @see {@link ../ds-tag-filter} for the replacement component.\n */\nconst DsChipGroup: React.FC<DsChipGroupProps> = ({\n\titems,\n\tlabel = 'Filtered by:',\n\tonClearAll,\n\tonItemDelete,\n\tonItemSelect,\n\tclassName,\n\tstyle,\n}) => {\n\tconst [dialogOpen, setDialogOpen] = useState(false);\n\tconst showAllChipsRef = useRef<HTMLDivElement>(null);\n\tconst chipsWrapperRef = useRef<HTMLDivElement>(null);\n\tconst visibleCount = useChipRowCalculation({\n\t\tchipsWrapperRef,\n\t\ttotalFilters: items.length,\n\t});\n\n\tif (items.length === 0) {\n\t\treturn null;\n\t}\n\n\tconst hiddenCount = items.length - visibleCount;\n\tconst showExpandButton = hiddenCount > 0;\n\n\tconst handleOpenDialog = () => {\n\t\tsetDialogOpen(true);\n\t};\n\n\tlet dialogStyle: React.CSSProperties = {};\n\tif (showExpandButton && showAllChipsRef.current) {\n\t\tconst rect = showAllChipsRef.current.getBoundingClientRect();\n\t\tdialogStyle = {\n\t\t\tposition: 'fixed',\n\t\t\ttop: rect.bottom + 4,\n\t\t\tleft: rect.left,\n\t\t};\n\t}\n\n\treturn (\n\t\t<div className={classNames(styles.container, className)} style={style}>\n\t\t\t{label && (\n\t\t\t\t<DsTypography variant=\"body-sm-reg\" className={styles.label}>\n\t\t\t\t\t{label}\n\t\t\t\t</DsTypography>\n\t\t\t)}\n\n\t\t\t<div ref={chipsWrapperRef} className={styles.chipsWrapper}>\n\t\t\t\t{items.map((item, index) => (\n\t\t\t\t\t<DsChip\n\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\tlabel={item.label}\n\t\t\t\t\t\tselected={item.selected}\n\t\t\t\t\t\tonClick={() => onItemSelect?.(item)}\n\t\t\t\t\t\tonDelete={() => onItemDelete?.(item)}\n\t\t\t\t\t\tclassName={classNames({\n\t\t\t\t\t\t\t[styles.hidden]: index >= visibleCount,\n\t\t\t\t\t\t})}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t\t{showExpandButton && (\n\t\t\t\t\t<DsChip\n\t\t\t\t\t\tref={showAllChipsRef}\n\t\t\t\t\t\tlabel={`+${String(hiddenCount)} ${hiddenCount === 1 ? 'item' : 'items'} show all`}\n\t\t\t\t\t\tonClick={handleOpenDialog}\n\t\t\t\t\t\tclassName={styles.expandChip}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{onClearAll && (\n\t\t\t\t<DsButton design=\"v1.2\" buttonType=\"tertiary\" variant=\"ghost\" size=\"small\" onClick={onClearAll}>\n\t\t\t\t\t<DsIcon icon=\"close\" />\n\t\t\t\t\tClear all\n\t\t\t\t</DsButton>\n\t\t\t)}\n\n\t\t\t<RadixDialog.Root open={dialogOpen} onOpenChange={setDialogOpen}>\n\t\t\t\t<VisuallyHidden>\n\t\t\t\t\t<RadixDialog.Title />\n\t\t\t\t</VisuallyHidden>\n\t\t\t\t<RadixDialog.Portal>\n\t\t\t\t\t<RadixDialog.Content style={dialogStyle} className={styles.dialog}>\n\t\t\t\t\t\t<div className={styles.dialogContent}>\n\t\t\t\t\t\t\t{items\n\t\t\t\t\t\t\t\t.filter((item, index) => index >= visibleCount)\n\t\t\t\t\t\t\t\t.map((item) => (\n\t\t\t\t\t\t\t\t\t<div key={item.id} className={styles.itemCheckbox}>\n\t\t\t\t\t\t\t\t\t\t<DsCheckbox\n\t\t\t\t\t\t\t\t\t\t\tid={`chip-${item.id}`}\n\t\t\t\t\t\t\t\t\t\t\tchecked={item.selected}\n\t\t\t\t\t\t\t\t\t\t\tonCheckedChange={() => onItemSelect?.(item)}\n\t\t\t\t\t\t\t\t\t\t\tlabel={item.label}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</RadixDialog.Content>\n\t\t\t\t</RadixDialog.Portal>\n\t\t\t</RadixDialog.Root>\n\t\t</div>\n\t);\n};\n\nexport default DsChipGroup;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMe,eAA2C,EAChDE,OACAC,QAAQ,gBACRC,YACAC,cACAC,cACAC,WACAC,YACK;CACL,MAAM,CAACC,YAAYC,iBAAiBvB,SAAS,MAAM;CACnD,MAAMwB,kBAAkBzB,OAAuB,KAAK;CACpD,MAAM2B,kBAAkB3B,OAAuB,KAAK;CACpD,MAAM4B,eAAepB,sBAAsB;EAC1CmB;EACAE,cAAcb,MAAMc;EACpB,CAAC;AAEF,KAAId,MAAMc,WAAW,EACpB,QAAO;CAGR,MAAMC,cAAcf,MAAMc,SAASF;CACnC,MAAMI,mBAAmBD,cAAc;CAEvC,MAAME,yBAAyB;AAC9BT,gBAAc,KAAK;;CAGpB,IAAIU,cAAmC,EAAE;AACzC,KAAIF,oBAAoBP,gBAAgBW,SAAS;EAChD,MAAMC,OAAOZ,gBAAgBW,QAAQE,uBAAuB;AAC5DJ,gBAAc;GACbK,UAAU;GACVC,KAAKH,KAAKI,SAAS;GACnBC,MAAML,KAAKK;GACX;;AAGF,QACC,qBAAC;EAAI,WAAWrC,WAAWC,6BAAOqC,WAAWtB,UAAU;EAASC;;GAC9DL,SACA,oBAAC;IAAa,SAAQ;IAAc,WAAWX,6BAAOW;cACpDA;KAEF;GAED,qBAAC;IAAI,KAAKU;IAAiB,WAAWrB,6BAAOsC;eAC3C5B,MAAM6B,KAAKC,MAAMC,UACjB,oBAAC;KAEA,OAAOD,KAAK7B;KACZ,UAAU6B,KAAKG;KACf,eAAe7B,eAAe0B,KAAK;KACnC,gBAAgB3B,eAAe2B,KAAK;KACpC,WAAWzC,WAAW,GACpBC,6BAAO4C,SAASH,SAASnB,cAC1B,CAAC;OAPGkB,KAAKE,GASX,CAAC,EACDhB,oBACA,oBAAC;KACA,KAAKP;KACL,OAAO,IAAI0B,OAAOpB,YAAY,CAAA,GAAIA,gBAAgB,IAAI,SAAS,QAAO;KACtE,SAASE;KACT,WAAW3B,6BAAO8C;MAEnB;KACG;GAEJlC,cACA,qBAAC;IAAS,QAAO;IAAO,YAAW;IAAW,SAAQ;IAAQ,MAAK;IAAQ,SAASA;eACnF,oBAAC,mBAAO,MAAK,UAAO;KAGrB;GAED,qBAAC,YAAY;IAAK,MAAMK;IAAY,cAAcC;eACjD,oBAAC,kBACA,oBAAC,YAAY,UAAK,GACH,EAChB,oBAAC,YAAY,oBACZ,oBAAC,YAAY;KAAQ,OAAOU;KAAa,WAAW5B,6BAAO+C;eAC1D,oBAAC;MAAI,WAAW/C,6BAAOgD;gBACrBtC,MACCuC,QAAQT,QAAMC,YAAUA,WAASnB,aAAa,CAC9CiB,KAAKC,WACL,oBAAC;OAAkB,WAAWxC,6BAAOkD;iBACpC,oBAAC;QACA,IAAI,QAAQV,OAAKE;QACjB,SAASF,OAAKG;QACd,uBAAuB7B,eAAe0B,OAAK;QAC3C,OAAOA,OAAK7B;SAAM;SALV6B,OAAKE,GAQf,CAAC;OACC;MACe,GACF;KACH;;GACb;;AAIR,4BAAelC"}

package/dist/components/ds-chip-group/ds-chip-group.types.d.cts

@@ -1,6 +1,11 @@
 import { CSSProperties } from "react";
 
 //#region src/components/ds-chip-group/ds-chip-group.types.d.ts
+
+/**
+ * @deprecated This interface is deprecated. Use `DsTagFilter` types instead.
+ * @see {@link ../ds-tag-filter} for the replacement types.
+ */
 interface ChipItem {
   /**
    * Unique identifier for the chip
@@ -19,6 +24,10 @@ interface ChipItem {
    */
   selected?: boolean;
 }
+/**
+ * @deprecated This interface is deprecated. Use `DsTagFilterProps` from `ds-tag-filter` instead.
+ * @see {@link ../ds-tag-filter/ds-tag-filter.types} for the replacement interface.
+ */
 interface DsChipGroupProps {
   /**
    * Array of chip items to display

package/dist/components/ds-chip-group/ds-chip-group.types.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-chip-group.types.d.cts","names":[],"sources":["../../../src/components/ds-chip-group/ds-chip-group.types.ts"],"sourcesContent":[],"mappings":";;;UAEiB,QAAA;;AAAjB;AAmBA;EAIQ,EAAA,EAAA,MAAA;EAae;;;EAYD,KAAA,EAAA,MAAA;;;;aApCV;;;;;;UAOK,gBAAA;;;;SAIT;;;;;;;;;;;;;wBAae;;;;wBAIA;;;;;;;;UAQd"}
+{"version":3,"file":"ds-chip-group.types.d.cts","names":[],"sources":["../../../src/components/ds-chip-group/ds-chip-group.types.ts"],"sourcesContent":[],"mappings":";;;;;;AAMA;AAuBA;AAIQ,UA3BS,QAAA,CA2BT;EAae;;;EAYD,EAAA,EAAA,MAAA;;;;;;;;aAxCV;;;;;;;;;;UAWK,gBAAA;;;;SAIT;;;;;;;;;;;;;wBAae;;;;wBAIA;;;;;;;;UAQd"}

package/dist/components/ds-chip-group/ds-chip-group.types.d.ts

@@ -1,6 +1,11 @@
 import { CSSProperties } from "react";
 
 //#region src/components/ds-chip-group/ds-chip-group.types.d.ts
+
+/**
+ * @deprecated This interface is deprecated. Use `DsTagFilter` types instead.
+ * @see {@link ../ds-tag-filter} for the replacement types.
+ */
 interface ChipItem {
   /**
    * Unique identifier for the chip
@@ -19,6 +24,10 @@ interface ChipItem {
    */
   selected?: boolean;
 }
+/**
+ * @deprecated This interface is deprecated. Use `DsTagFilterProps` from `ds-tag-filter` instead.
+ * @see {@link ../ds-tag-filter/ds-tag-filter.types} for the replacement interface.
+ */
 interface DsChipGroupProps {
   /**
    * Array of chip items to display

package/dist/components/ds-chip-group/ds-chip-group.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-chip-group.types.d.ts","names":[],"sources":["../../../src/components/ds-chip-group/ds-chip-group.types.ts"],"sourcesContent":[],"mappings":";;;UAEiB,QAAA;;AAAjB;AAmBA;EAIQ,EAAA,EAAA,MAAA;EAae;;;EAYD,KAAA,EAAA,MAAA;;;;aApCV;;;;;;UAOK,gBAAA;;;;SAIT;;;;;;;;;;;;;wBAae;;;;wBAIA;;;;;;;;UAQd"}
+{"version":3,"file":"ds-chip-group.types.d.ts","names":[],"sources":["../../../src/components/ds-chip-group/ds-chip-group.types.ts"],"sourcesContent":[],"mappings":";;;;;;AAMA;AAuBA;AAIQ,UA3BS,QAAA,CA2BT;EAae;;;EAYD,EAAA,EAAA,MAAA;;;;;;;;aAxCV;;;;;;;;;;UAWK,gBAAA;;;;SAIT;;;;;;;;;;;;;wBAae;;;;wBAIA;;;;;;;;UAQd"}

package/dist/components/ds-confirmation/ds-confirmation.d.cts

@@ -1,5 +1,5 @@
 import { DsConfirmationProps } from "./ds-confirmation.types.cjs";
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 import { CSSProperties, ReactNode } from "react";
 
 //#region src/components/ds-confirmation/ds-confirmation.d.ts
@@ -13,7 +13,7 @@ declare const DsConfirmation: {
     style,
     className,
     children
-  }: DsConfirmationProps): react_jsx_runtime11.JSX.Element;
+  }: DsConfirmationProps): react_jsx_runtime5.JSX.Element;
   Header: ({
     style,
     className,
@@ -22,7 +22,7 @@ declare const DsConfirmation: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime11.JSX.Element;
+  }) => react_jsx_runtime5.JSX.Element;
   Title: ({
     style,
     className,
@@ -31,14 +31,14 @@ declare const DsConfirmation: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime11.JSX.Element;
+  }) => react_jsx_runtime5.JSX.Element;
   CloseTrigger: ({
     style,
     className
   }: {
     style?: CSSProperties;
     className?: string;
-  }) => react_jsx_runtime11.JSX.Element;
+  }) => react_jsx_runtime5.JSX.Element;
   Body: ({
     style,
     className,
@@ -47,7 +47,7 @@ declare const DsConfirmation: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime11.JSX.Element;
+  }) => react_jsx_runtime5.JSX.Element;
   Footer: ({
     style,
     className,
@@ -56,7 +56,7 @@ declare const DsConfirmation: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime11.JSX.Element;
+  }) => react_jsx_runtime5.JSX.Element;
   Actions: ({
     style,
     className,
@@ -65,7 +65,7 @@ declare const DsConfirmation: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime11.JSX.Element;
+  }) => react_jsx_runtime5.JSX.Element;
 };
 //#endregion
 export { DsConfirmation };

package/dist/components/ds-confirmation/ds-confirmation.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-confirmation.d.cts","names":[],"sources":["../../../src/components/ds-confirmation/ds-confirmation.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAYa,cAAA,cAyBZ,EAAA;;;;;;;KAzBkF,sBAAmB,mBAAA,CAAA,GAAA,CAAA;;;;;EAAnB;YAgC1E;;cAEE;EAlCwE,CAAA,EAAA,GAmClF,mBAAA,CAAA,GAAA,CAAA,OAnCkF;EAAmB,KAAA,EAAA,CAAA;IAAA,KAAA;IAAA,SAAA;IAAA;EAgC7F,CAhC6F,EAAA;YA8C7F;;cAEE;EAhBF,CAAA,EAAA,GAiBR,mBAAA,CAAA,GAAA,CAAA,OAjBQ;EAEE,YAAA,EAAA,CAAA;IAAA,KAAA;IAAA;GAAA,EAAA;IACV,KAAA,CAAA,EAoBqD,aApBrD;;QAoBwF,mBAAA,CAAA,GAAA,CAAA;;;;;;IAThF,KAAA,CAAA,EAoBA,aApBA;IAEE,SAAA,CAAA,EAAA,MAAA;IACV,QAAA,EAmBU,SAnBV;QAoBA,mBAAA,CAAA,GAAA,CAAA;;;;;;IAdqD,KAAA,CAAA,EAyB7C,aAzB6C;IAAmC,SAAA,CAAA,EAAA,MAAA;cA2B9E;QACV,mBAAA,CAAA,GAAA,CAAA;;;;;;IAjBQ,KAAA,CAAA,EA4BA,aA5BA;IAEE,SAAA,CAAA,EAAA,MAAA;IACV,QAAA,EA2BU,SA3BV;QA4BA,mBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"ds-confirmation.d.cts","names":[],"sources":["../../../src/components/ds-confirmation/ds-confirmation.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAYa,cAAA,cAyBZ,EAAA;;;;;;;KAzBkF,sBAAmB,kBAAA,CAAA,GAAA,CAAA;;;;;EAAnB;YAgC1E;;cAEE;EAlCwE,CAAA,EAAA,GAmClF,kBAAA,CAAA,GAAA,CAAA,OAnCkF;EAAmB,KAAA,EAAA,CAAA;IAAA,KAAA;IAAA,SAAA;IAAA;EAgC7F,CAhC6F,EAAA;YA8C7F;;cAEE;EAhBF,CAAA,EAAA,GAiBR,kBAAA,CAAA,GAAA,CAAA,OAjBQ;EAEE,YAAA,EAAA,CAAA;IAAA,KAAA;IAAA;GAAA,EAAA;IACV,KAAA,CAAA,EAoBqD,aApBrD;;QAoBwF,kBAAA,CAAA,GAAA,CAAA;;;;;;IAThF,KAAA,CAAA,EAoBA,aApBA;IAEE,SAAA,CAAA,EAAA,MAAA;IACV,QAAA,EAmBU,SAnBV;QAoBA,kBAAA,CAAA,GAAA,CAAA;;;;;;IAdqD,KAAA,CAAA,EAyB7C,aAzB6C;IAAmC,SAAA,CAAA,EAAA,MAAA;cA2B9E;QACV,kBAAA,CAAA,GAAA,CAAA;;;;;;IAjBQ,KAAA,CAAA,EA4BA,aA5BA;IAEE,SAAA,CAAA,EAAA,MAAA;IACV,QAAA,EA2BU,SA3BV;QA4BA,kBAAA,CAAA,GAAA,CAAA"}

package/dist/components/ds-confirmation/ds-confirmation.d.ts

@@ -1,5 +1,5 @@
 import { DsConfirmationProps } from "./ds-confirmation.types.js";
-import * as react_jsx_runtime29 from "react/jsx-runtime";
+import * as react_jsx_runtime41 from "react/jsx-runtime";
 import { CSSProperties, ReactNode } from "react";
 
 //#region src/components/ds-confirmation/ds-confirmation.d.ts
@@ -13,7 +13,7 @@ declare const DsConfirmation: {
     style,
     className,
     children
-  }: DsConfirmationProps): react_jsx_runtime29.JSX.Element;
+  }: DsConfirmationProps): react_jsx_runtime41.JSX.Element;
   Header: ({
     style,
     className,
@@ -22,7 +22,7 @@ declare const DsConfirmation: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime29.JSX.Element;
+  }) => react_jsx_runtime41.JSX.Element;
   Title: ({
     style,
     className,
@@ -31,14 +31,14 @@ declare const DsConfirmation: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime29.JSX.Element;
+  }) => react_jsx_runtime41.JSX.Element;
   CloseTrigger: ({
     style,
     className
   }: {
     style?: CSSProperties;
     className?: string;
-  }) => react_jsx_runtime29.JSX.Element;
+  }) => react_jsx_runtime41.JSX.Element;
   Body: ({
     style,
     className,
@@ -47,7 +47,7 @@ declare const DsConfirmation: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime29.JSX.Element;
+  }) => react_jsx_runtime41.JSX.Element;
   Footer: ({
     style,
     className,
@@ -56,7 +56,7 @@ declare const DsConfirmation: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime29.JSX.Element;
+  }) => react_jsx_runtime41.JSX.Element;
   Actions: ({
     style,
     className,
@@ -65,7 +65,7 @@ declare const DsConfirmation: {
     style?: CSSProperties;
     className?: string;
     children: ReactNode;
-  }) => react_jsx_runtime29.JSX.Element;
+  }) => react_jsx_runtime41.JSX.Element;
 };
 //#endregion
 export { DsConfirmation };

package/dist/components/ds-date-input/ds-date-input.cjs

@@ -0,0 +1,352 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ds_icon = require('../ds-icon/ds-icon.cjs');
+require('../ds-icon/index.cjs');
+const require_ds_typography = require('../ds-typography/ds-typography.cjs');
+require('../ds-typography/index.cjs');
+const require_ds_date_input_utils = require('./ds-date-input.utils.cjs');
+const require_ds_date_input_module = require('./ds-date-input.module.cjs');
+let react_compiler_runtime = require("react/compiler-runtime");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let __ark_ui_react_portal = require("@ark-ui/react/portal");
+let __ark_ui_react_date_picker = require("@ark-ui/react/date-picker");
+
+//#region src/components/ds-date-input/ds-date-input.tsx
+/**
+* Design system date input component with integrated calendar picker.
+*
+* Supports both single date and date range selection with a single text input field.
+* Features built-in validation, manual text entry, and calendar selection.
+*/
+const DsDateInput = ({ range = false, placeholder, style, className, disablePortal = false, onValueChange, onOpenChange, value: _value, defaultValue: _defaultValue, min: _min, max: _max, disabled, readOnly, id, ...datePickerProps }) => {
+	const min = _min ? require_ds_date_input_utils.isoStringToDateValue(_min) : void 0;
+	const max = _max ? require_ds_date_input_utils.isoStringToDateValue(_max) : void 0;
+	const value = _value ? require_ds_date_input_utils.stringToDateValue(_value) : [];
+	const defaultValue = _defaultValue ? require_ds_date_input_utils.stringToDateValue(_defaultValue) : [];
+	const [isFocused, setIsFocused] = (0, react.useState)(false);
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const prevValue = (0, react.useRef)(null);
+	const inputRef = (0, react.useRef)(null);
+	if (!isFocused && prevValue.current !== JSON.stringify(value)) {
+		prevValue.current = JSON.stringify(value);
+		if (inputRef.current) inputRef.current.value = require_ds_date_input_utils.formatDateInputValue(value, range);
+	}
+	const clear = () => {
+		if (inputRef.current) inputRef.current.value = "";
+		onValueChange?.(void 0);
+	};
+	const handleInputChange = (e) => {
+		const text = e.target.value;
+		if (require_ds_date_input_utils.validateDateString({
+			text,
+			range,
+			min,
+			max
+		}).isValid) {
+			const parsedValue = require_ds_date_input_utils.parseInputText(text, range);
+			onValueChange?.(require_ds_date_input_utils.dateValuesToStrings(parsedValue, range));
+		}
+	};
+	const handleBlur = () => {
+		setIsFocused(false);
+		const text_0 = inputRef.current?.value || "";
+		if (!require_ds_date_input_utils.validateDateString({
+			text: text_0,
+			range,
+			min,
+			max
+		}).isValid) {
+			clear();
+			return;
+		}
+		const parsedValue_0 = require_ds_date_input_utils.parseInputText(text_0, range);
+		onValueChange?.(require_ds_date_input_utils.dateValuesToStrings(parsedValue_0, range));
+	};
+	const showClearButton = !disabled && !readOnly && !!(value.length > 0 ? value : defaultValue).length;
+	const Wrapper = disablePortal ? react.Fragment : __ark_ui_react_portal.Portal;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_date_picker.DatePicker.Root, {
+		value,
+		defaultValue,
+		onValueChange: (details) => {
+			onValueChange?.(require_ds_date_input_utils.dateValuesToStrings(details.value, range));
+		},
+		selectionMode: range ? "range" : "single",
+		positioning: {
+			placement: "bottom-start",
+			gutter: 4
+		},
+		closeOnSelect: !range,
+		min,
+		max,
+		disabled,
+		readOnly,
+		open: isOpen,
+		onOpenChange: (details_0) => {
+			if (!isFocused) {
+				setIsOpen(details_0.open);
+				onOpenChange?.(details_0.open);
+			}
+		},
+		...datePickerProps,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_date_picker.DatePicker.Control, {
+			style,
+			className: (0, classnames.default)(require_ds_date_input_module.default.dateInputControl, disabled && require_ds_date_input_module.default.disabled, readOnly && require_ds_date_input_module.default.readOnly, className),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.Trigger, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: require_ds_date_input_module.default.dateInputButton,
+						disabled,
+						"aria-label": "Open calendar",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+							icon: "calendar_month",
+							size: "small"
+						})
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					ref: inputRef,
+					id,
+					type: "text",
+					className: require_ds_date_input_module.default.input,
+					placeholder: placeholder ?? (range ? "MM/DD/YYYY - MM/DD/YYYY" : "MM/DD/YYYY"),
+					defaultValue: require_ds_date_input_utils.formatDateInputValue(value.length > 0 ? value : defaultValue, range),
+					onChange: handleInputChange,
+					onBlur: handleBlur,
+					onFocus: () => setIsFocused(true),
+					disabled,
+					readOnly
+				}),
+				showClearButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: require_ds_date_input_module.default.dateInputButton,
+					onClick: clear,
+					"aria-label": range ? "Clear date range" : "Clear date",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+						icon: "close",
+						size: "small"
+					})
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Wrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.Positioner, {
+			className: require_ds_date_input_module.default.positioner,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_date_picker.DatePicker.Content, {
+				className: require_ds_date_input_module.default.content,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalendarViewControl, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: require_ds_date_input_module.default.calendarView,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DayView, {}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MonthView, {}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(YearView, {})
+					]
+				})]
+			})
+		}) })]
+	});
+};
+/**
+* Calendar view control with navigation buttons
+*/
+const CalendarViewControl = () => {
+	const $ = (0, react_compiler_runtime.c)(3);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.PrevTrigger, {
+			className: require_ds_date_input_module.default.prevTrigger,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+				icon: "chevron_left",
+				size: "small"
+			})
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.ViewTrigger, {
+			className: require_ds_date_input_module.default.viewTrigger,
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+					variant: "body-md-md",
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.RangeText, {})
+				})
+			})
+		});
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_date_picker.DatePicker.ViewControl, {
+			className: require_ds_date_input_module.default.viewControl,
+			children: [
+				t0,
+				t1,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.NextTrigger, {
+					className: require_ds_date_input_module.default.nextTrigger,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
+						icon: "chevron_right",
+						size: "small"
+					})
+				})
+			]
+		});
+		$[2] = t2;
+	} else t2 = $[2];
+	return t2;
+};
+/**
+* Day view - displays calendar grid with days of the month
+*/
+const DayView = () => {
+	const $ = (0, react_compiler_runtime.c)(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.View, {
+			view: "day",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.Context, { children: _temp4 })
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+};
+/**
+* Month view - displays grid with months of the year
+*/
+const MonthView = () => {
+	const $ = (0, react_compiler_runtime.c)(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.View, {
+			view: "month",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.Context, { children: _temp7 })
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+};
+/**
+* Year view - displays grid with years in a decade
+*/
+const YearView = () => {
+	const $ = (0, react_compiler_runtime.c)(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.View, {
+			view: "year",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.Context, { children: _temp0 })
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+};
+var ds_date_input_default = DsDateInput;
+function _temp(weekDay, id) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableHeader, {
+		className: require_ds_date_input_module.default.tableHeader,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+			variant: "body-md-md",
+			children: weekDay.short
+		})
+	}, id);
+}
+function _temp2(day, dayId) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableCell, {
+		value: day,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableCellTrigger, {
+			className: require_ds_date_input_module.default.tableCellTrigger,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+				className: require_ds_date_input_module.default.tableCellTriggerValue,
+				variant: "body-md-md",
+				children: day.day
+			})
+		})
+	}, dayId);
+}
+function _temp3(week, weekId) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableRow, {
+		className: require_ds_date_input_module.default.tableRow,
+		children: week.map(_temp2)
+	}, weekId);
+}
+function _temp4(datePicker) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ark_ui_react_date_picker.DatePicker.Table, {
+		className: require_ds_date_input_module.default.table,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableHead, {
+			className: require_ds_date_input_module.default.tableHead,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableRow, {
+				className: require_ds_date_input_module.default.tableRow,
+				children: datePicker.weekDays.map(_temp)
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableBody, {
+			className: require_ds_date_input_module.default.tableBody,
+			children: datePicker.weeks.map(_temp3)
+		})]
+	});
+}
+function _temp5(month, monthId) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableCell, {
+		value: month.value,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableCellTrigger, {
+			className: require_ds_date_input_module.default.tableCellTrigger,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+				className: require_ds_date_input_module.default.tableCellTriggerValue,
+				variant: "body-md-md",
+				children: month.label
+			})
+		})
+	}, monthId);
+}
+function _temp6(months, rowId) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableRow, {
+		className: require_ds_date_input_module.default.tableRow,
+		children: months.map(_temp5)
+	}, rowId);
+}
+function _temp7(datePicker) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.Table, {
+		className: require_ds_date_input_module.default.table,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableBody, {
+			className: require_ds_date_input_module.default.tableBody,
+			children: datePicker.getMonthsGrid({
+				columns: 4,
+				format: "short"
+			}).map(_temp6)
+		})
+	});
+}
+function _temp8(year, yearId) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableCell, {
+		value: year.value,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableCellTrigger, {
+			className: require_ds_date_input_module.default.tableCellTrigger,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+				className: require_ds_date_input_module.default.tableCellTriggerValue,
+				variant: "body-md-md",
+				children: year.label
+			})
+		})
+	}, yearId);
+}
+function _temp9(years, rowId) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableRow, {
+		className: require_ds_date_input_module.default.tableRow,
+		children: years.map(_temp8)
+	}, rowId);
+}
+function _temp0(datePicker) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.Table, {
+		className: require_ds_date_input_module.default.table,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react_date_picker.DatePicker.TableBody, {
+			className: require_ds_date_input_module.default.tableBody,
+			children: datePicker.getYearsGrid({ columns: 4 }).map(_temp9)
+		})
+	});
+}
+
+//#endregion
+exports.default = ds_date_input_default;

package/dist/components/ds-date-input/ds-date-input.d.cts

@@ -0,0 +1,31 @@
+import { DsDateInputProps } from "./ds-date-input.types.cjs";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
+
+//#region src/components/ds-date-input/ds-date-input.d.ts
+
+/**
+ * Design system date input component with integrated calendar picker.
+ *
+ * Supports both single date and date range selection with a single text input field.
+ * Features built-in validation, manual text entry, and calendar selection.
+ */
+declare const DsDateInput: ({
+  range,
+  placeholder,
+  style,
+  className,
+  disablePortal,
+  onValueChange,
+  onOpenChange,
+  value: _value,
+  defaultValue: _defaultValue,
+  min: _min,
+  max: _max,
+  disabled,
+  readOnly,
+  id,
+  ...datePickerProps
+}: DsDateInputProps) => react_jsx_runtime4.JSX.Element;
+//#endregion
+export { DsDateInput };
+//# sourceMappingURL=ds-date-input.d.cts.map

package/dist/components/ds-date-input/ds-date-input.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-date-input.d.cts","names":[],"sources":["../../../src/components/ds-date-input/ds-date-input.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAI8D;;;cAmBxD,WAAe,EAAA,CAAA;EAAA,KAAA;EAAA,WAAA;EAAA,KAAA;EAAA,SAAA;EAAA,aAAA;EAAA,aAAA;EAAA,YAAA;EAAA,KAAA,EAAA,MAAA;EAAA,YAAA,EAAA,aAAA;EAAA,GAAA,EAAA,IAAA;EAAA,GAAA,EAAA,IAAA;EAAA,QAAA;EAAA,QAAA;EAAA,EAAA;EAAA,GAAA;AAAA,CAAA,EAgBlB,gBAhBkB,EAAA,GAgBF,kBAAA,CAAA,GAAA,CAAA,OAhBE"}

package/dist/components/ds-date-input/ds-date-input.d.ts

@@ -0,0 +1,31 @@
+import { DsDateInputProps } from "./ds-date-input.types.js";
+import * as react_jsx_runtime48 from "react/jsx-runtime";
+
+//#region src/components/ds-date-input/ds-date-input.d.ts
+
+/**
+ * Design system date input component with integrated calendar picker.
+ *
+ * Supports both single date and date range selection with a single text input field.
+ * Features built-in validation, manual text entry, and calendar selection.
+ */
+declare const DsDateInput: ({
+  range,
+  placeholder,
+  style,
+  className,
+  disablePortal,
+  onValueChange,
+  onOpenChange,
+  value: _value,
+  defaultValue: _defaultValue,
+  min: _min,
+  max: _max,
+  disabled,
+  readOnly,
+  id,
+  ...datePickerProps
+}: DsDateInputProps) => react_jsx_runtime48.JSX.Element;
+//#endregion
+export { DsDateInput };
+//# sourceMappingURL=ds-date-input.d.ts.map

package/dist/components/ds-date-input/ds-date-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-date-input.d.ts","names":[],"sources":["../../../src/components/ds-date-input/ds-date-input.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAI8D;;;cAmBxD,WAAe,EAAA,CAAA;EAAA,KAAA;EAAA,WAAA;EAAA,KAAA;EAAA,SAAA;EAAA,aAAA;EAAA,aAAA;EAAA,YAAA;EAAA,KAAA,EAAA,MAAA;EAAA,YAAA,EAAA,aAAA;EAAA,GAAA,EAAA,IAAA;EAAA,GAAA,EAAA,IAAA;EAAA,QAAA;EAAA,QAAA;EAAA,EAAA;EAAA,GAAA;AAAA,CAAA,EAgBlB,gBAhBkB,EAAA,GAgBF,mBAAA,CAAA,GAAA,CAAA,OAhBE"}