@jbpark/ui-kit 2.10.0 → 2.11.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/dist/Button.mjs +0 -1
  2. package/dist/Button.mjs.map +1 -1
  3. package/dist/Tag.mjs +0 -1
  4. package/dist/Tag.mjs.map +1 -1
  5. package/dist/components/atoms/checkbox/checkbox.mjs +0 -1
  6. package/dist/components/atoms/checkbox/checkbox.mjs.map +1 -1
  7. package/dist/components/atoms/float-button/back-top.mjs +1 -0
  8. package/dist/components/atoms/float-button/back-top.mjs.map +1 -1
  9. package/dist/components/atoms/float-button/float-button.mjs +1 -1
  10. package/dist/components/atoms/float-button/float-button.mjs.map +1 -1
  11. package/dist/components/atoms/input/input.mjs +0 -1
  12. package/dist/components/atoms/input/input.mjs.map +1 -1
  13. package/dist/components/atoms/input/search.mjs +9 -4
  14. package/dist/components/atoms/input/search.mjs.map +1 -1
  15. package/dist/components/atoms/input/text-area.mjs +0 -1
  16. package/dist/components/atoms/input/text-area.mjs.map +1 -1
  17. package/dist/components/atoms/popover.mjs +0 -1
  18. package/dist/components/atoms/popover.mjs.map +1 -1
  19. package/dist/components/atoms/progress.mjs +0 -1
  20. package/dist/components/atoms/progress.mjs.map +1 -1
  21. package/dist/components/atoms/radio/radio.mjs +0 -1
  22. package/dist/components/atoms/radio/radio.mjs.map +1 -1
  23. package/dist/components/atoms/select.mjs +0 -1
  24. package/dist/components/atoms/select.mjs.map +1 -1
  25. package/dist/components/atoms/skeleton/skeleton.mjs +4 -3
  26. package/dist/components/atoms/skeleton/skeleton.mjs.map +1 -1
  27. package/dist/components/atoms/switch.mjs +0 -1
  28. package/dist/components/atoms/switch.mjs.map +1 -1
  29. package/dist/components/atoms/typography/link.d.mts +2 -0
  30. package/dist/components/atoms/typography/link.d.mts.map +1 -1
  31. package/dist/components/atoms/typography/link.mjs +3 -1
  32. package/dist/components/atoms/typography/link.mjs.map +1 -1
  33. package/dist/components/atoms/typography/text.mjs +1 -1
  34. package/dist/components/atoms/typography/text.mjs.map +1 -1
  35. package/dist/components/atoms/typography/title.d.mts.map +1 -1
  36. package/dist/components/atoms/typography/title.mjs +6 -6
  37. package/dist/components/atoms/typography/title.mjs.map +1 -1
  38. package/dist/components/molecules/collapse.mjs +0 -1
  39. package/dist/components/molecules/collapse.mjs.map +1 -1
  40. package/dist/components/molecules/dropdown.mjs +0 -1
  41. package/dist/components/molecules/dropdown.mjs.map +1 -1
  42. package/dist/components/molecules/menu/menu.mjs +0 -1
  43. package/dist/components/molecules/menu/menu.mjs.map +1 -1
  44. package/dist/components/molecules/splitter/panel.mjs +0 -1
  45. package/dist/components/molecules/splitter/panel.mjs.map +1 -1
  46. package/dist/components/molecules/splitter/splitter.mjs +0 -1
  47. package/dist/components/molecules/splitter/splitter.mjs.map +1 -1
  48. package/dist/components/organisms/drawer.mjs +0 -1
  49. package/dist/components/organisms/drawer.mjs.map +1 -1
  50. package/dist/components/organisms/list/list.mjs +0 -1
  51. package/dist/components/organisms/list/list.mjs.map +1 -1
  52. package/dist/components/organisms/modal.mjs +0 -1
  53. package/dist/components/organisms/modal.mjs.map +1 -1
  54. package/dist/components/organisms/swiper/swiper.mjs +0 -1
  55. package/dist/components/organisms/swiper/swiper.mjs.map +1 -1
  56. package/dist/components/templates/layout/layout.d.mts.map +1 -1
  57. package/dist/components/templates/layout/layout.mjs +11 -5
  58. package/dist/components/templates/layout/layout.mjs.map +1 -1
  59. package/dist/index.mjs +0 -5
  60. package/dist/style.css +75 -18
  61. package/package.json +4 -1
  62. package/dist/components/atoms/index.mjs +0 -16
  63. package/dist/components/molecules/index.mjs +0 -11
  64. package/dist/components/molecules/menu/item/index.mjs +0 -3
  65. package/dist/components/organisms/index.mjs +0 -6
  66. package/dist/components/templates/index.mjs +0 -3
  67. package/dist/providers/index.mjs +0 -4
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.mjs","names":[],"sources":["../../../src/components/molecules/dropdown.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Menu, { MenuProps } from './menu';\n\ntype ChangeEventHandler = (open: boolean) => void;\n\ninterface Props extends React.ComponentPropsWithoutRef<'div'> {\n open?: boolean;\n trigger?: string;\n menu?: MenuProps;\n placement?: string;\n onOpenChange?: ChangeEventHandler;\n}\n\nconst Dropdown = ({\n children,\n menu,\n trigger = 'hover',\n open: _open,\n onOpenChange: _onOpenChange = () => {},\n ...props\n}: Props) => {\n const [uncontrolledOpen, setUncontrolledOpen] = useState<boolean>(false);\n\n const controlled = _open !== undefined;\n const open = controlled ? _open : uncontrolledOpen;\n\n const isClickTrigger = trigger === 'click';\n\n const onOpenChange = (nextOpen: boolean) => {\n if (!controlled) {\n setUncontrolledOpen(nextOpen);\n }\n _onOpenChange(nextOpen);\n };\n\n return (\n <div\n {...props}\n className={cn('relative z-0', 'inline-block cursor-pointer')}\n onMouseEnter={() => {\n if (isClickTrigger) {\n return;\n }\n onOpenChange(true);\n }}\n onMouseLeave={() => {\n if (isClickTrigger) {\n return;\n }\n onOpenChange(false);\n }}\n >\n <div\n onClick={() => {\n if (!isClickTrigger) {\n return;\n }\n onOpenChange(!open);\n }}\n onBlur={() => {\n onOpenChange(false);\n }}\n >\n {children}\n </div>\n <AnimatePresence>\n {open && (\n <motion.div\n className={cn(\n 'absolute top-full pt-2',\n //\n )}\n initial={{ opacity: 0, y: -10 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -10 }}\n transition={{ duration: 0.1 }}\n >\n <Menu\n {...menu}\n onMouseDown={e => {\n e.preventDefault();\n }}\n />\n </motion.div>\n )}\n </AnimatePresence>\n </div>\n );\n};\n\nexport default Dropdown;\n"],"mappings":";;;;;;;;;;AAoBA,MAAM,YAAY,EAChB,UACA,MACA,UAAU,SACV,MAAM,OACN,cAAc,sBAAsB,IACpC,GAAG,YACQ;CACX,MAAM,CAAC,kBAAkB,uBAAuB,SAAkB,MAAM;CAExE,MAAM,aAAa,UAAU;CAC7B,MAAM,OAAO,aAAa,QAAQ;CAElC,MAAM,iBAAiB,YAAY;CAEnC,MAAM,gBAAgB,aAAsB;AAC1C,MAAI,CAAC,WACH,qBAAoB,SAAS;AAE/B,gBAAc,SAAS;;AAGzB,QACE,qBAAC;EACC,GAAI;EACJ,WAAW,GAAG,gBAAgB,8BAA8B;EAC5D,oBAAoB;AAClB,OAAI,eACF;AAEF,gBAAa,KAAK;;EAEpB,oBAAoB;AAClB,OAAI,eACF;AAEF,gBAAa,MAAM;;aAGrB,oBAAC;GACC,eAAe;AACb,QAAI,CAAC,eACH;AAEF,iBAAa,CAAC,KAAK;;GAErB,cAAc;AACZ,iBAAa,MAAM;;GAGpB;IACG,EACN,oBAAC,6BACE,QACC,oBAAC,OAAO;GACN,WAAW,GACT,yBAED;GACD,SAAS;IAAE,SAAS;IAAG,GAAG;IAAK;GAC/B,SAAS;IAAE,SAAS;IAAG,GAAG;IAAG;GAC7B,MAAM;IAAE,SAAS;IAAG,GAAG;IAAK;GAC5B,YAAY,EAAE,UAAU,IAAK;aAE7B,oBAAC;IACC,GAAI;IACJ,cAAa,MAAK;AAChB,OAAE,gBAAgB;;KAEpB;IACS,GAEC;GACd"}
1
+ {"version":3,"file":"dropdown.mjs","names":[],"sources":["../../../src/components/molecules/dropdown.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Menu, { MenuProps } from './menu';\n\ntype ChangeEventHandler = (open: boolean) => void;\n\ninterface Props extends React.ComponentPropsWithoutRef<'div'> {\n open?: boolean;\n trigger?: string;\n menu?: MenuProps;\n placement?: string;\n onOpenChange?: ChangeEventHandler;\n}\n\nconst Dropdown = ({\n children,\n menu,\n trigger = 'hover',\n open: _open,\n onOpenChange: _onOpenChange = () => {},\n ...props\n}: Props) => {\n const [uncontrolledOpen, setUncontrolledOpen] = useState<boolean>(false);\n\n const controlled = _open !== undefined;\n const open = controlled ? _open : uncontrolledOpen;\n\n const isClickTrigger = trigger === 'click';\n\n const onOpenChange = (nextOpen: boolean) => {\n if (!controlled) {\n setUncontrolledOpen(nextOpen);\n }\n _onOpenChange(nextOpen);\n };\n\n return (\n <div\n {...props}\n className={cn('relative z-0', 'inline-block cursor-pointer')}\n onMouseEnter={() => {\n if (isClickTrigger) {\n return;\n }\n onOpenChange(true);\n }}\n onMouseLeave={() => {\n if (isClickTrigger) {\n return;\n }\n onOpenChange(false);\n }}\n >\n <div\n onClick={() => {\n if (!isClickTrigger) {\n return;\n }\n onOpenChange(!open);\n }}\n onBlur={() => {\n onOpenChange(false);\n }}\n >\n {children}\n </div>\n <AnimatePresence>\n {open && (\n <motion.div\n className={cn(\n 'absolute top-full pt-2',\n //\n )}\n initial={{ opacity: 0, y: -10 }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: -10 }}\n transition={{ duration: 0.1 }}\n >\n <Menu\n {...menu}\n onMouseDown={e => {\n e.preventDefault();\n }}\n />\n </motion.div>\n )}\n </AnimatePresence>\n </div>\n );\n};\n\nexport default Dropdown;\n"],"mappings":";;;;;;;;;AAoBA,MAAM,YAAY,EAChB,UACA,MACA,UAAU,SACV,MAAM,OACN,cAAc,sBAAsB,IACpC,GAAG,YACQ;CACX,MAAM,CAAC,kBAAkB,uBAAuB,SAAkB,MAAM;CAExE,MAAM,aAAa,UAAU;CAC7B,MAAM,OAAO,aAAa,QAAQ;CAElC,MAAM,iBAAiB,YAAY;CAEnC,MAAM,gBAAgB,aAAsB;AAC1C,MAAI,CAAC,WACH,qBAAoB,SAAS;AAE/B,gBAAc,SAAS;;AAGzB,QACE,qBAAC;EACC,GAAI;EACJ,WAAW,GAAG,gBAAgB,8BAA8B;EAC5D,oBAAoB;AAClB,OAAI,eACF;AAEF,gBAAa,KAAK;;EAEpB,oBAAoB;AAClB,OAAI,eACF;AAEF,gBAAa,MAAM;;aAGrB,oBAAC;GACC,eAAe;AACb,QAAI,CAAC,eACH;AAEF,iBAAa,CAAC,KAAK;;GAErB,cAAc;AACZ,iBAAa,MAAM;;GAGpB;IACG,EACN,oBAAC,6BACE,QACC,oBAAC,OAAO;GACN,WAAW,GACT,yBAED;GACD,SAAS;IAAE,SAAS;IAAG,GAAG;IAAK;GAC/B,SAAS;IAAE,SAAS;IAAG,GAAG;IAAG;GAC7B,MAAM;IAAE,SAAS;IAAG,GAAG;IAAK;GAC5B,YAAY,EAAE,UAAU,IAAK;aAE7B,oBAAC;IACC,GAAI;IACJ,cAAa,MAAK;AAChB,OAAE,gBAAgB;;KAEpB;IACS,GAEC;GACd"}
@@ -2,7 +2,6 @@
2
2
 
3
3
  import { cn } from "../../../utils.mjs";
4
4
  import Item from "./item/item.mjs";
5
- import "./item/index.mjs";
6
5
  import { createElement, useMemo, useState } from "react";
7
6
  import { jsx } from "react/jsx-runtime";
8
7
 
@@ -1 +1 @@
1
- {"version":3,"file":"menu.mjs","names":[],"sources":["../../../../src/components/molecules/menu/menu.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, useState } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Item from './item';\n\nexport interface MenuItem {\n label: React.ReactNode;\n key: React.Key;\n type?: string;\n path?: string;\n children?: MenuItem[];\n}\n\nexport interface Props {\n mode?: 'horizontal' | 'vertical' | 'inline';\n selectedKeys?: React.Key[];\n defaultSelectedKeys?: React.Key[];\n selectionMap?: SelectionMap;\n offset?: [number, number];\n inlineOffset?: number;\n classNames?: {\n rootItem?: string;\n subMenu?: string;\n item?: string;\n label?: string;\n // open?: string;\n };\n styles?: {\n rootItem?: React.CSSProperties;\n subMenu?: React.CSSProperties;\n item?: React.CSSProperties;\n label?: React.CSSProperties;\n // open?: React.CSSProperties;\n };\n onClick?: ClickEventHandler;\n onSelect?: ClickEventHandler;\n}\n\nexport interface MenuProps\n extends\n Props,\n Omit<React.ComponentPropsWithoutRef<'ul'>, 'onClick' | 'onSelect'> {\n items?: MenuItem[];\n}\n\nexport type ClickEventHandler = (params: {\n domEvent: React.MouseEvent;\n key: React.Key;\n keyPath: React.Key[];\n item: MenuItem;\n}) => void;\n\nexport const MENU_CLASSNAMES = [\n 'p-0',\n 'bg-white',\n 'shadow-md',\n 'rounded-md',\n //\n];\n\nexport type SelectionMap = ReadonlyMap<React.Key, boolean>;\n\nexport const buildSelectionMap = (\n items: MenuItem[],\n selectedKeysSet: ReadonlySet<React.Key>,\n): SelectionMap => {\n const map = new Map<React.Key, boolean>();\n\n const dfs = (node: MenuItem): boolean => {\n const self = selectedKeysSet.has(node.key);\n const hasSelectedChild = node.children?.some(child => dfs(child)) ?? false;\n const isSelected = self || hasSelectedChild;\n map.set(node.key, isSelected);\n return isSelected;\n };\n\n items.forEach(dfs);\n return map;\n};\n\nexport const findKey = (\n menu: MenuItem,\n targetKeys: ReadonlySet<React.Key>,\n): boolean => {\n if (targetKeys.has(menu.key)) {\n return true;\n }\n\n if (menu.children && Array.isArray(menu.children)) {\n for (const child of menu.children) {\n if (findKey(child, targetKeys)) {\n return true;\n }\n }\n }\n\n return false;\n};\n\nconst Menu = ({\n items,\n mode = 'vertical',\n defaultSelectedKeys = [],\n selectedKeys: _selectedKeys,\n className,\n classNames,\n styles,\n offset,\n inlineOffset,\n onClick,\n onSelect: _onSelect,\n ...props\n}: MenuProps) => {\n const controlled = _selectedKeys !== undefined;\n const [uncontrolledSelectedKeys, setUncontrolledSelectedKeys] = useState<\n React.Key[]\n >(defaultSelectedKeys ?? []);\n\n const selectedKeys = controlled\n ? (_selectedKeys as React.Key[])\n : uncontrolledSelectedKeys;\n\n const selectedKeysSet = useMemo(\n () => new Set<React.Key>(selectedKeys ?? []),\n [selectedKeys],\n );\n\n const selectionMap = useMemo(\n () => buildSelectionMap(items ?? [], selectedKeysSet),\n [items, selectedKeysSet],\n );\n\n const onSelect = (params: {\n domEvent: React.MouseEvent;\n key: React.Key;\n keyPath: React.Key[];\n item: MenuItem;\n }) => {\n if (!controlled) {\n setUncontrolledSelectedKeys([params.key]);\n }\n _onSelect?.(params);\n };\n\n return (\n <ul\n role=\"menu\"\n className={cn(\n MENU_CLASSNAMES,\n mode === 'horizontal' ? 'flex' : 'inline-block',\n className,\n )}\n {...props}\n >\n {items?.map(item => (\n <Item\n root\n {...item}\n key={item.key}\n itemKey={item.key}\n keyPath={[item.key]}\n selectedKeys={selectedKeys}\n selectionMap={selectionMap}\n mode={mode}\n classNames={classNames}\n styles={styles}\n offset={offset}\n inlineOffset={inlineOffset}\n onClick={onClick}\n onSelect={onSelect}\n />\n ))}\n </ul>\n );\n};\n\nexport default Menu;\n"],"mappings":";;;;;;;;;AAuDA,MAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CAED;AAID,MAAa,qBACX,OACA,oBACiB;CACjB,MAAM,sBAAM,IAAI,KAAyB;CAEzC,MAAM,OAAO,SAA4B;EACvC,MAAM,OAAO,gBAAgB,IAAI,KAAK,IAAI;EAC1C,MAAM,mBAAmB,KAAK,UAAU,MAAK,UAAS,IAAI,MAAM,CAAC,IAAI;EACrE,MAAM,aAAa,QAAQ;AAC3B,MAAI,IAAI,KAAK,KAAK,WAAW;AAC7B,SAAO;;AAGT,OAAM,QAAQ,IAAI;AAClB,QAAO;;AAGT,MAAa,WACX,MACA,eACY;AACZ,KAAI,WAAW,IAAI,KAAK,IAAI,CAC1B,QAAO;AAGT,KAAI,KAAK,YAAY,MAAM,QAAQ,KAAK,SAAS,EAC/C;OAAK,MAAM,SAAS,KAAK,SACvB,KAAI,QAAQ,OAAO,WAAW,CAC5B,QAAO;;AAKb,QAAO;;AAGT,MAAM,QAAQ,EACZ,OACA,OAAO,YACP,sBAAsB,EAAE,EACxB,cAAc,eACd,WACA,YACA,QACA,QACA,cACA,SACA,UAAU,WACV,GAAG,YACY;CACf,MAAM,aAAa,kBAAkB;CACrC,MAAM,CAAC,0BAA0B,+BAA+B,SAE9D,uBAAuB,EAAE,CAAC;CAE5B,MAAM,eAAe,aAChB,gBACD;CAEJ,MAAM,kBAAkB,cAChB,IAAI,IAAe,gBAAgB,EAAE,CAAC,EAC5C,CAAC,aAAa,CACf;CAED,MAAM,eAAe,cACb,kBAAkB,SAAS,EAAE,EAAE,gBAAgB,EACrD,CAAC,OAAO,gBAAgB,CACzB;CAED,MAAM,YAAY,WAKZ;AACJ,MAAI,CAAC,WACH,6BAA4B,CAAC,OAAO,IAAI,CAAC;AAE3C,cAAY,OAAO;;AAGrB,QACE,oBAAC;EACC,MAAK;EACL,WAAW,GACT,iBACA,SAAS,eAAe,SAAS,gBACjC,UACD;EACD,GAAI;YAEH,OAAO,KAAI,SACV,8BAAC;GACC;GACA,GAAI;GACJ,KAAK,KAAK;GACV,SAAS,KAAK;GACd,SAAS,CAAC,KAAK,IAAI;GACL;GACA;GACR;GACM;GACJ;GACA;GACM;GACL;GACC;IACV,CACF;GACC"}
1
+ {"version":3,"file":"menu.mjs","names":[],"sources":["../../../../src/components/molecules/menu/menu.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, useState } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Item from './item';\n\nexport interface MenuItem {\n label: React.ReactNode;\n key: React.Key;\n type?: string;\n path?: string;\n children?: MenuItem[];\n}\n\nexport interface Props {\n mode?: 'horizontal' | 'vertical' | 'inline';\n selectedKeys?: React.Key[];\n defaultSelectedKeys?: React.Key[];\n selectionMap?: SelectionMap;\n offset?: [number, number];\n inlineOffset?: number;\n classNames?: {\n rootItem?: string;\n subMenu?: string;\n item?: string;\n label?: string;\n // open?: string;\n };\n styles?: {\n rootItem?: React.CSSProperties;\n subMenu?: React.CSSProperties;\n item?: React.CSSProperties;\n label?: React.CSSProperties;\n // open?: React.CSSProperties;\n };\n onClick?: ClickEventHandler;\n onSelect?: ClickEventHandler;\n}\n\nexport interface MenuProps\n extends\n Props,\n Omit<React.ComponentPropsWithoutRef<'ul'>, 'onClick' | 'onSelect'> {\n items?: MenuItem[];\n}\n\nexport type ClickEventHandler = (params: {\n domEvent: React.MouseEvent;\n key: React.Key;\n keyPath: React.Key[];\n item: MenuItem;\n}) => void;\n\nexport const MENU_CLASSNAMES = [\n 'p-0',\n 'bg-white',\n 'shadow-md',\n 'rounded-md',\n //\n];\n\nexport type SelectionMap = ReadonlyMap<React.Key, boolean>;\n\nexport const buildSelectionMap = (\n items: MenuItem[],\n selectedKeysSet: ReadonlySet<React.Key>,\n): SelectionMap => {\n const map = new Map<React.Key, boolean>();\n\n const dfs = (node: MenuItem): boolean => {\n const self = selectedKeysSet.has(node.key);\n const hasSelectedChild = node.children?.some(child => dfs(child)) ?? false;\n const isSelected = self || hasSelectedChild;\n map.set(node.key, isSelected);\n return isSelected;\n };\n\n items.forEach(dfs);\n return map;\n};\n\nexport const findKey = (\n menu: MenuItem,\n targetKeys: ReadonlySet<React.Key>,\n): boolean => {\n if (targetKeys.has(menu.key)) {\n return true;\n }\n\n if (menu.children && Array.isArray(menu.children)) {\n for (const child of menu.children) {\n if (findKey(child, targetKeys)) {\n return true;\n }\n }\n }\n\n return false;\n};\n\nconst Menu = ({\n items,\n mode = 'vertical',\n defaultSelectedKeys = [],\n selectedKeys: _selectedKeys,\n className,\n classNames,\n styles,\n offset,\n inlineOffset,\n onClick,\n onSelect: _onSelect,\n ...props\n}: MenuProps) => {\n const controlled = _selectedKeys !== undefined;\n const [uncontrolledSelectedKeys, setUncontrolledSelectedKeys] = useState<\n React.Key[]\n >(defaultSelectedKeys ?? []);\n\n const selectedKeys = controlled\n ? (_selectedKeys as React.Key[])\n : uncontrolledSelectedKeys;\n\n const selectedKeysSet = useMemo(\n () => new Set<React.Key>(selectedKeys ?? []),\n [selectedKeys],\n );\n\n const selectionMap = useMemo(\n () => buildSelectionMap(items ?? [], selectedKeysSet),\n [items, selectedKeysSet],\n );\n\n const onSelect = (params: {\n domEvent: React.MouseEvent;\n key: React.Key;\n keyPath: React.Key[];\n item: MenuItem;\n }) => {\n if (!controlled) {\n setUncontrolledSelectedKeys([params.key]);\n }\n _onSelect?.(params);\n };\n\n return (\n <ul\n role=\"menu\"\n className={cn(\n MENU_CLASSNAMES,\n mode === 'horizontal' ? 'flex' : 'inline-block',\n className,\n )}\n {...props}\n >\n {items?.map(item => (\n <Item\n root\n {...item}\n key={item.key}\n itemKey={item.key}\n keyPath={[item.key]}\n selectedKeys={selectedKeys}\n selectionMap={selectionMap}\n mode={mode}\n classNames={classNames}\n styles={styles}\n offset={offset}\n inlineOffset={inlineOffset}\n onClick={onClick}\n onSelect={onSelect}\n />\n ))}\n </ul>\n );\n};\n\nexport default Menu;\n"],"mappings":";;;;;;;;AAuDA,MAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CAED;AAID,MAAa,qBACX,OACA,oBACiB;CACjB,MAAM,sBAAM,IAAI,KAAyB;CAEzC,MAAM,OAAO,SAA4B;EACvC,MAAM,OAAO,gBAAgB,IAAI,KAAK,IAAI;EAC1C,MAAM,mBAAmB,KAAK,UAAU,MAAK,UAAS,IAAI,MAAM,CAAC,IAAI;EACrE,MAAM,aAAa,QAAQ;AAC3B,MAAI,IAAI,KAAK,KAAK,WAAW;AAC7B,SAAO;;AAGT,OAAM,QAAQ,IAAI;AAClB,QAAO;;AAGT,MAAa,WACX,MACA,eACY;AACZ,KAAI,WAAW,IAAI,KAAK,IAAI,CAC1B,QAAO;AAGT,KAAI,KAAK,YAAY,MAAM,QAAQ,KAAK,SAAS,EAC/C;OAAK,MAAM,SAAS,KAAK,SACvB,KAAI,QAAQ,OAAO,WAAW,CAC5B,QAAO;;AAKb,QAAO;;AAGT,MAAM,QAAQ,EACZ,OACA,OAAO,YACP,sBAAsB,EAAE,EACxB,cAAc,eACd,WACA,YACA,QACA,QACA,cACA,SACA,UAAU,WACV,GAAG,YACY;CACf,MAAM,aAAa,kBAAkB;CACrC,MAAM,CAAC,0BAA0B,+BAA+B,SAE9D,uBAAuB,EAAE,CAAC;CAE5B,MAAM,eAAe,aAChB,gBACD;CAEJ,MAAM,kBAAkB,cAChB,IAAI,IAAe,gBAAgB,EAAE,CAAC,EAC5C,CAAC,aAAa,CACf;CAED,MAAM,eAAe,cACb,kBAAkB,SAAS,EAAE,EAAE,gBAAgB,EACrD,CAAC,OAAO,gBAAgB,CACzB;CAED,MAAM,YAAY,WAKZ;AACJ,MAAI,CAAC,WACH,6BAA4B,CAAC,OAAO,IAAI,CAAC;AAE3C,cAAY,OAAO;;AAGrB,QACE,oBAAC;EACC,MAAK;EACL,WAAW,GACT,iBACA,SAAS,eAAe,SAAS,gBACjC,UACD;EACD,GAAI;YAEH,OAAO,KAAI,SACV,8BAAC;GACC;GACA,GAAI;GACJ,KAAK,KAAK;GACV,SAAS,KAAK;GACd,SAAS,CAAC,KAAK,IAAI;GACL;GACA;GACR;GACM;GACJ;GACA;GACM;GACL;GACC;IACV,CACF;GACC"}
@@ -1,6 +1,5 @@
1
1
  import { cn } from "../../../utils.mjs";
2
2
  import { resizable_exports } from "../../../core/resizable.mjs";
3
- import "../../../core.mjs";
4
3
  import { jsx } from "react/jsx-runtime";
5
4
 
6
5
  //#region src/components/molecules/splitter/panel.tsx
@@ -1 +1 @@
1
- {"version":3,"file":"panel.mjs","names":["resizable"],"sources":["../../../../src/components/molecules/splitter/panel.tsx"],"sourcesContent":["import { resizable } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst { ResizablePanel } = resizable;\n\nexport interface Props extends React.ComponentProps<typeof ResizablePanel> {\n children: React.ReactNode;\n}\n\nconst Panel = ({ children, className, ...props }: Props) => {\n return (\n <ResizablePanel\n className={cn('min-h-0 min-w-0 overflow-auto', className)}\n {...props}\n >\n {children}\n </ResizablePanel>\n );\n};\n\nexport default Panel;\n"],"mappings":";;;;;;AAGA,MAAM,EAAE,mBAAmBA;AAM3B,MAAM,SAAS,EAAE,UAAU,WAAW,GAAG,YAAmB;AAC1D,QACE,oBAAC;EACC,WAAW,GAAG,iCAAiC,UAAU;EACzD,GAAI;EAEH;GACc"}
1
+ {"version":3,"file":"panel.mjs","names":["resizable"],"sources":["../../../../src/components/molecules/splitter/panel.tsx"],"sourcesContent":["import { resizable } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst { ResizablePanel } = resizable;\n\nexport interface Props extends React.ComponentProps<typeof ResizablePanel> {\n children: React.ReactNode;\n}\n\nconst Panel = ({ children, className, ...props }: Props) => {\n return (\n <ResizablePanel\n className={cn('min-h-0 min-w-0 overflow-auto', className)}\n {...props}\n >\n {children}\n </ResizablePanel>\n );\n};\n\nexport default Panel;\n"],"mappings":";;;;;AAGA,MAAM,EAAE,mBAAmBA;AAM3B,MAAM,SAAS,EAAE,UAAU,WAAW,GAAG,YAAmB;AAC1D,QACE,oBAAC;EACC,WAAW,GAAG,iCAAiC,UAAU;EACzD,GAAI;EAEH;GACc"}
@@ -2,7 +2,6 @@
2
2
 
3
3
  import { cn } from "../../../utils.mjs";
4
4
  import { resizable_exports } from "../../../core/resizable.mjs";
5
- import "../../../core.mjs";
6
5
  import { Children, Fragment } from "react";
7
6
  import { jsx, jsxs } from "react/jsx-runtime";
8
7
 
@@ -1 +1 @@
1
- {"version":3,"file":"splitter.mjs","names":["resizable"],"sources":["../../../../src/components/molecules/splitter/splitter.tsx"],"sourcesContent":["'use client';\n\nimport { Children, Fragment } from 'react';\n\nimport { resizable } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst { ResizableHandle, ResizablePanelGroup } = resizable;\n\ntype SplitterLayout = Parameters<\n NonNullable<\n React.ComponentProps<typeof ResizablePanelGroup>['onLayoutChanged']\n >\n>[0];\n\nexport interface Props extends Omit<\n React.ComponentProps<typeof ResizablePanelGroup>,\n 'children' | 'orientation' | 'onLayoutChange' | 'onLayoutChanged' | 'onResize'\n> {\n children: React.ReactNode;\n orientation?: 'horizontal' | 'vertical';\n withHandle?: boolean;\n handle?: React.ReactNode;\n handleClassName?: string;\n onResize?: (layout: SplitterLayout) => void;\n onResizeEnd?: (layout: SplitterLayout) => void;\n}\n\nconst Splitter = ({\n children,\n className,\n orientation = 'horizontal',\n withHandle = true,\n handle,\n handleClassName,\n onResize,\n onResizeEnd,\n ...props\n}: Props) => {\n const panels = Children.toArray(children);\n\n return (\n <ResizablePanelGroup\n className={cn(\n 'border-border/60 h-full w-full rounded-lg border',\n className,\n )}\n orientation={orientation}\n onLayoutChange={onResize}\n onLayoutChanged={onResizeEnd}\n {...props}\n >\n {panels.map((panel, index) => (\n <Fragment key={index}>\n {panel}\n {index < panels.length - 1 && (\n <ResizableHandle\n className={cn(\n `hover:bg-border/80 data-separator-active:bg-border\n transition-colors`,\n handleClassName,\n )}\n withHandle={withHandle && handle === undefined}\n >\n {handle}\n </ResizableHandle>\n )}\n </Fragment>\n ))}\n </ResizablePanelGroup>\n );\n};\n\nexport default Splitter;\n"],"mappings":";;;;;;;;;AAOA,MAAM,EAAE,iBAAiB,wBAAwBA;AAqBjD,MAAM,YAAY,EAChB,UACA,WACA,cAAc,cACd,aAAa,MACb,QACA,iBACA,UACA,aACA,GAAG,YACQ;CACX,MAAM,SAAS,SAAS,QAAQ,SAAS;AAEzC,QACE,oBAAC;EACC,WAAW,GACT,oDACA,UACD;EACY;EACb,gBAAgB;EAChB,iBAAiB;EACjB,GAAI;YAEH,OAAO,KAAK,OAAO,UAClB,qBAAC,uBACE,OACA,QAAQ,OAAO,SAAS,KACvB,oBAAC;GACC,WAAW,GACT;oCAEA,gBACD;GACD,YAAY,cAAc,WAAW;aAEpC;IACe,KAZP,MAcJ,CACX;GACkB"}
1
+ {"version":3,"file":"splitter.mjs","names":["resizable"],"sources":["../../../../src/components/molecules/splitter/splitter.tsx"],"sourcesContent":["'use client';\n\nimport { Children, Fragment } from 'react';\n\nimport { resizable } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nconst { ResizableHandle, ResizablePanelGroup } = resizable;\n\ntype SplitterLayout = Parameters<\n NonNullable<\n React.ComponentProps<typeof ResizablePanelGroup>['onLayoutChanged']\n >\n>[0];\n\nexport interface Props extends Omit<\n React.ComponentProps<typeof ResizablePanelGroup>,\n 'children' | 'orientation' | 'onLayoutChange' | 'onLayoutChanged' | 'onResize'\n> {\n children: React.ReactNode;\n orientation?: 'horizontal' | 'vertical';\n withHandle?: boolean;\n handle?: React.ReactNode;\n handleClassName?: string;\n onResize?: (layout: SplitterLayout) => void;\n onResizeEnd?: (layout: SplitterLayout) => void;\n}\n\nconst Splitter = ({\n children,\n className,\n orientation = 'horizontal',\n withHandle = true,\n handle,\n handleClassName,\n onResize,\n onResizeEnd,\n ...props\n}: Props) => {\n const panels = Children.toArray(children);\n\n return (\n <ResizablePanelGroup\n className={cn(\n 'border-border/60 h-full w-full rounded-lg border',\n className,\n )}\n orientation={orientation}\n onLayoutChange={onResize}\n onLayoutChanged={onResizeEnd}\n {...props}\n >\n {panels.map((panel, index) => (\n <Fragment key={index}>\n {panel}\n {index < panels.length - 1 && (\n <ResizableHandle\n className={cn(\n `hover:bg-border/80 data-separator-active:bg-border\n transition-colors`,\n handleClassName,\n )}\n withHandle={withHandle && handle === undefined}\n >\n {handle}\n </ResizableHandle>\n )}\n </Fragment>\n ))}\n </ResizablePanelGroup>\n );\n};\n\nexport default Splitter;\n"],"mappings":";;;;;;;;AAOA,MAAM,EAAE,iBAAiB,wBAAwBA;AAqBjD,MAAM,YAAY,EAChB,UACA,WACA,cAAc,cACd,aAAa,MACb,QACA,iBACA,UACA,aACA,GAAG,YACQ;CACX,MAAM,SAAS,SAAS,QAAQ,SAAS;AAEzC,QACE,oBAAC;EACC,WAAW,GACT,oDACA,UACD;EACY;EACb,gBAAgB;EAChB,iBAAiB;EACjB,GAAI;YAEH,OAAO,KAAK,OAAO,UAClB,qBAAC,uBACE,OACA,QAAQ,OAAO,SAAS,KACvB,oBAAC;GACC,WAAW,GACT;oCAEA,gBACD;GACD,YAAY,cAAc,WAAW;aAEpC;IACe,KAZP,MAcJ,CACX;GACkB"}
@@ -2,7 +2,6 @@
2
2
 
3
3
  import { cn, renderConditional } from "../../utils.mjs";
4
4
  import { drawer_exports } from "../../core/drawer.mjs";
5
- import "../../core.mjs";
6
5
  import Button from "../../Button.mjs";
7
6
  import { X } from "lucide-react";
8
7
  import { useEffect } from "react";
@@ -1 +1 @@
1
- {"version":3,"file":"drawer.mjs","names":["drawer"],"sources":["../../../src/components/organisms/drawer.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\n\nimport { X } from 'lucide-react';\n\nimport { drawer } from '@repo/ui/core';\nimport { cn, renderConditional } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\nconst {\n DrawerContent,\n Drawer: DrawerCore,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n} = drawer;\n\nexport interface Props {\n open: boolean;\n children?: React.ReactNode;\n title?: React.ReactNode;\n extra?: React.ReactNode;\n footer?: React.ReactNode;\n closable?: boolean;\n closeIcon?: React.ReactNode;\n direction?: 'top' | 'bottom' | 'left' | 'right';\n size?: 'small' | 'medium' | 'large' | 'full' | string;\n maskClosable?: boolean;\n handlebar?: boolean;\n draggable?: boolean;\n rounded?: boolean;\n mask?: boolean;\n className?: string;\n style?: React.CSSProperties;\n classNames?: {\n mask?: string;\n content?: string;\n handlebar?: string;\n header?: string;\n title?: string;\n close?: string;\n extra?: string;\n body?: string;\n footer?: string;\n };\n container?: HTMLElement;\n onClose: () => void;\n}\n\nconst SIZES: Record<string, string> = {\n small: '30%',\n medium: '50%',\n large: '75%',\n full: '90%',\n};\n\nconst getSizeStyles = (\n direction: 'top' | 'bottom' | 'left' | 'right',\n size: string,\n): React.CSSProperties => {\n const value = SIZES[size] || size;\n\n return direction === 'top' || direction === 'bottom'\n ? { height: value }\n : { width: value };\n};\n\nconst Drawer = ({\n open,\n title,\n extra,\n footer,\n closable = true,\n closeIcon,\n direction = 'bottom',\n size = 'medium',\n maskClosable = true,\n handlebar = true,\n draggable = false,\n rounded = false,\n mask = true,\n className,\n classNames,\n style,\n children,\n container,\n onClose,\n ...props\n}: Props) => {\n useEffect(() => {\n if (!open || mask) {\n return;\n }\n\n const originalPointerEvents = document.body.style.pointerEvents;\n\n const raf = window.requestAnimationFrame(() => {\n document.body.style.pointerEvents = 'auto';\n });\n\n return () => {\n window.cancelAnimationFrame(raf);\n document.body.style.pointerEvents = originalPointerEvents;\n };\n }, [open, mask]);\n\n return (\n <DrawerCore\n open={open}\n direction={direction}\n handleOnly={!draggable}\n container={container}\n onOpenChange={open => {\n if (!open && maskClosable) {\n onClose();\n }\n }}\n {...props}\n >\n <DrawerContent\n className={cn(\n 'border-none outline-none',\n rounded ? 'rounded-t-[30px]!' : 'rounded-none!',\n classNames?.content,\n className,\n //\n )}\n handlebar={handlebar}\n mask={mask}\n classNames={{\n mask: classNames?.mask || '',\n handlebar: classNames?.handlebar || '',\n }}\n style={{\n ...getSizeStyles(direction, size),\n ...style,\n }}\n >\n <DrawerHeader\n className={cn(\n classNames?.header,\n !title && 'p-0',\n //\n )}\n >\n <div className=\"flex items-start gap-2\">\n {renderConditional(closable ? closeIcon || <X /> : null, v => (\n <Button\n type=\"text\"\n shape=\"circle\"\n size=\"small\"\n aria-label=\"닫기\"\n icon={v}\n onClick={onClose}\n className={cn(classNames?.close)}\n />\n ))}\n <div className=\"flex flex-1 items-start justify-between gap-2\">\n <DrawerTitle className={cn(classNames?.title)}>\n {title}\n </DrawerTitle>\n {renderConditional(extra, v => (\n <div className={cn('shrink-0', classNames?.extra)}>{v}</div>\n ))}\n </div>\n </div>\n <DrawerDescription className=\"hidden\" />\n </DrawerHeader>\n <div\n className={cn(\n 'overflow-auto p-5',\n classNames?.body,\n //\n )}\n >\n {children}\n </div>\n {renderConditional(footer, v => (\n <DrawerFooter className={cn(classNames?.footer)}>{v}</DrawerFooter>\n ))}\n </DrawerContent>\n </DrawerCore>\n );\n};\n\nexport default Drawer;\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,EACJ,eACA,QAAQ,YACR,mBACA,cACA,cACA,gBACEA;AAkCJ,MAAM,QAAgC;CACpC,OAAO;CACP,QAAQ;CACR,OAAO;CACP,MAAM;CACP;AAED,MAAM,iBACJ,WACA,SACwB;CACxB,MAAM,QAAQ,MAAM,SAAS;AAE7B,QAAO,cAAc,SAAS,cAAc,WACxC,EAAE,QAAQ,OAAO,GACjB,EAAE,OAAO,OAAO;;AAGtB,MAAM,UAAU,EACd,MACA,OACA,OACA,QACA,WAAW,MACX,WACA,YAAY,UACZ,OAAO,UACP,eAAe,MACf,YAAY,MACZ,YAAY,OACZ,UAAU,OACV,OAAO,MACP,WACA,YACA,OACA,UACA,WACA,SACA,GAAG,YACQ;AACX,iBAAgB;AACd,MAAI,CAAC,QAAQ,KACX;EAGF,MAAM,wBAAwB,SAAS,KAAK,MAAM;EAElD,MAAM,MAAM,OAAO,4BAA4B;AAC7C,YAAS,KAAK,MAAM,gBAAgB;IACpC;AAEF,eAAa;AACX,UAAO,qBAAqB,IAAI;AAChC,YAAS,KAAK,MAAM,gBAAgB;;IAErC,CAAC,MAAM,KAAK,CAAC;AAEhB,QACE,oBAAC;EACO;EACK;EACX,YAAY,CAAC;EACF;EACX,eAAc,SAAQ;AACpB,OAAI,CAAC,QAAQ,aACX,UAAS;;EAGb,GAAI;YAEJ,qBAAC;GACC,WAAW,GACT,4BACA,UAAU,sBAAsB,iBAChC,YAAY,SACZ,UAED;GACU;GACL;GACN,YAAY;IACV,MAAM,YAAY,QAAQ;IAC1B,WAAW,YAAY,aAAa;IACrC;GACD,OAAO;IACL,GAAG,cAAc,WAAW,KAAK;IACjC,GAAG;IACJ;;IAED,qBAAC;KACC,WAAW,GACT,YAAY,QACZ,CAAC,SAAS,MAEX;gBAED,qBAAC;MAAI,WAAU;iBACZ,kBAAkB,WAAW,aAAa,oBAAC,MAAI,GAAG,OAAM,MACvD,oBAAC;OACC,MAAK;OACL,OAAM;OACN,MAAK;OACL,cAAW;OACX,MAAM;OACN,SAAS;OACT,WAAW,GAAG,YAAY,MAAM;QAChC,CACF,EACF,qBAAC;OAAI,WAAU;kBACb,oBAAC;QAAY,WAAW,GAAG,YAAY,MAAM;kBAC1C;SACW,EACb,kBAAkB,QAAO,MACxB,oBAAC;QAAI,WAAW,GAAG,YAAY,YAAY,MAAM;kBAAG;SAAQ,CAC5D;QACE;OACF,EACN,oBAAC,qBAAkB,WAAU,WAAW;MAC3B;IACf,oBAAC;KACC,WAAW,GACT,qBACA,YAAY,KAEb;KAEA;MACG;IACL,kBAAkB,SAAQ,MACzB,oBAAC;KAAa,WAAW,GAAG,YAAY,OAAO;eAAG;MAAiB,CACnE;;IACY;GACL"}
1
+ {"version":3,"file":"drawer.mjs","names":["drawer"],"sources":["../../../src/components/organisms/drawer.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\n\nimport { X } from 'lucide-react';\n\nimport { drawer } from '@repo/ui/core';\nimport { cn, renderConditional } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\nconst {\n DrawerContent,\n Drawer: DrawerCore,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n} = drawer;\n\nexport interface Props {\n open: boolean;\n children?: React.ReactNode;\n title?: React.ReactNode;\n extra?: React.ReactNode;\n footer?: React.ReactNode;\n closable?: boolean;\n closeIcon?: React.ReactNode;\n direction?: 'top' | 'bottom' | 'left' | 'right';\n size?: 'small' | 'medium' | 'large' | 'full' | string;\n maskClosable?: boolean;\n handlebar?: boolean;\n draggable?: boolean;\n rounded?: boolean;\n mask?: boolean;\n className?: string;\n style?: React.CSSProperties;\n classNames?: {\n mask?: string;\n content?: string;\n handlebar?: string;\n header?: string;\n title?: string;\n close?: string;\n extra?: string;\n body?: string;\n footer?: string;\n };\n container?: HTMLElement;\n onClose: () => void;\n}\n\nconst SIZES: Record<string, string> = {\n small: '30%',\n medium: '50%',\n large: '75%',\n full: '90%',\n};\n\nconst getSizeStyles = (\n direction: 'top' | 'bottom' | 'left' | 'right',\n size: string,\n): React.CSSProperties => {\n const value = SIZES[size] || size;\n\n return direction === 'top' || direction === 'bottom'\n ? { height: value }\n : { width: value };\n};\n\nconst Drawer = ({\n open,\n title,\n extra,\n footer,\n closable = true,\n closeIcon,\n direction = 'bottom',\n size = 'medium',\n maskClosable = true,\n handlebar = true,\n draggable = false,\n rounded = false,\n mask = true,\n className,\n classNames,\n style,\n children,\n container,\n onClose,\n ...props\n}: Props) => {\n useEffect(() => {\n if (!open || mask) {\n return;\n }\n\n const originalPointerEvents = document.body.style.pointerEvents;\n\n const raf = window.requestAnimationFrame(() => {\n document.body.style.pointerEvents = 'auto';\n });\n\n return () => {\n window.cancelAnimationFrame(raf);\n document.body.style.pointerEvents = originalPointerEvents;\n };\n }, [open, mask]);\n\n return (\n <DrawerCore\n open={open}\n direction={direction}\n handleOnly={!draggable}\n container={container}\n onOpenChange={open => {\n if (!open && maskClosable) {\n onClose();\n }\n }}\n {...props}\n >\n <DrawerContent\n className={cn(\n 'border-none outline-none',\n rounded ? 'rounded-t-[30px]!' : 'rounded-none!',\n classNames?.content,\n className,\n //\n )}\n handlebar={handlebar}\n mask={mask}\n classNames={{\n mask: classNames?.mask || '',\n handlebar: classNames?.handlebar || '',\n }}\n style={{\n ...getSizeStyles(direction, size),\n ...style,\n }}\n >\n <DrawerHeader\n className={cn(\n classNames?.header,\n !title && 'p-0',\n //\n )}\n >\n <div className=\"flex items-start gap-2\">\n {renderConditional(closable ? closeIcon || <X /> : null, v => (\n <Button\n type=\"text\"\n shape=\"circle\"\n size=\"small\"\n aria-label=\"닫기\"\n icon={v}\n onClick={onClose}\n className={cn(classNames?.close)}\n />\n ))}\n <div className=\"flex flex-1 items-start justify-between gap-2\">\n <DrawerTitle className={cn(classNames?.title)}>\n {title}\n </DrawerTitle>\n {renderConditional(extra, v => (\n <div className={cn('shrink-0', classNames?.extra)}>{v}</div>\n ))}\n </div>\n </div>\n <DrawerDescription className=\"hidden\" />\n </DrawerHeader>\n <div\n className={cn(\n 'overflow-auto p-5',\n classNames?.body,\n //\n )}\n >\n {children}\n </div>\n {renderConditional(footer, v => (\n <DrawerFooter className={cn(classNames?.footer)}>{v}</DrawerFooter>\n ))}\n </DrawerContent>\n </DrawerCore>\n );\n};\n\nexport default Drawer;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,EACJ,eACA,QAAQ,YACR,mBACA,cACA,cACA,gBACEA;AAkCJ,MAAM,QAAgC;CACpC,OAAO;CACP,QAAQ;CACR,OAAO;CACP,MAAM;CACP;AAED,MAAM,iBACJ,WACA,SACwB;CACxB,MAAM,QAAQ,MAAM,SAAS;AAE7B,QAAO,cAAc,SAAS,cAAc,WACxC,EAAE,QAAQ,OAAO,GACjB,EAAE,OAAO,OAAO;;AAGtB,MAAM,UAAU,EACd,MACA,OACA,OACA,QACA,WAAW,MACX,WACA,YAAY,UACZ,OAAO,UACP,eAAe,MACf,YAAY,MACZ,YAAY,OACZ,UAAU,OACV,OAAO,MACP,WACA,YACA,OACA,UACA,WACA,SACA,GAAG,YACQ;AACX,iBAAgB;AACd,MAAI,CAAC,QAAQ,KACX;EAGF,MAAM,wBAAwB,SAAS,KAAK,MAAM;EAElD,MAAM,MAAM,OAAO,4BAA4B;AAC7C,YAAS,KAAK,MAAM,gBAAgB;IACpC;AAEF,eAAa;AACX,UAAO,qBAAqB,IAAI;AAChC,YAAS,KAAK,MAAM,gBAAgB;;IAErC,CAAC,MAAM,KAAK,CAAC;AAEhB,QACE,oBAAC;EACO;EACK;EACX,YAAY,CAAC;EACF;EACX,eAAc,SAAQ;AACpB,OAAI,CAAC,QAAQ,aACX,UAAS;;EAGb,GAAI;YAEJ,qBAAC;GACC,WAAW,GACT,4BACA,UAAU,sBAAsB,iBAChC,YAAY,SACZ,UAED;GACU;GACL;GACN,YAAY;IACV,MAAM,YAAY,QAAQ;IAC1B,WAAW,YAAY,aAAa;IACrC;GACD,OAAO;IACL,GAAG,cAAc,WAAW,KAAK;IACjC,GAAG;IACJ;;IAED,qBAAC;KACC,WAAW,GACT,YAAY,QACZ,CAAC,SAAS,MAEX;gBAED,qBAAC;MAAI,WAAU;iBACZ,kBAAkB,WAAW,aAAa,oBAAC,MAAI,GAAG,OAAM,MACvD,oBAAC;OACC,MAAK;OACL,OAAM;OACN,MAAK;OACL,cAAW;OACX,MAAM;OACN,SAAS;OACT,WAAW,GAAG,YAAY,MAAM;QAChC,CACF,EACF,qBAAC;OAAI,WAAU;kBACb,oBAAC;QAAY,WAAW,GAAG,YAAY,MAAM;kBAC1C;SACW,EACb,kBAAkB,QAAO,MACxB,oBAAC;QAAI,WAAW,GAAG,YAAY,YAAY,MAAM;kBAAG;SAAQ,CAC5D;QACE;OACF,EACN,oBAAC,qBAAkB,WAAU,WAAW;MAC3B;IACf,oBAAC;KACC,WAAW,GACT,qBACA,YAAY,KAEb;KAEA;MACG;IACL,kBAAkB,SAAQ,MACzB,oBAAC;KAAa,WAAW,GAAG,YAAY,OAAO;eAAG;MAAiB,CACnE;;IACY;GACL"}
@@ -2,7 +2,6 @@
2
2
 
3
3
  import { cn, renderConditional } from "../../../utils.mjs";
4
4
  import Title from "../../atoms/typography/title.mjs";
5
- import "../../../Typography.mjs";
6
5
  import Skeleton from "../../atoms/skeleton/index.mjs";
7
6
  import React, { useEffect, useRef } from "react";
8
7
  import { jsx, jsxs } from "react/jsx-runtime";
@@ -1 +1 @@
1
- {"version":3,"file":"list.mjs","names":[],"sources":["../../../../src/components/organisms/list/list.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useRef } from 'react';\n\nimport { useIntersectionObserver } from '@uidotdev/usehooks';\n\nimport { cn, renderConditional } from '@repo/ui/utils';\n\nimport Skeleton from '../../atoms/skeleton';\nimport { Title } from '../../atoms/typography';\n\ninterface Props<T> extends Omit<\n React.ComponentPropsWithoutRef<'div'>,\n 'title'\n> {\n loading?: boolean;\n loaderProps?: React.ComponentProps<typeof Skeleton>;\n loader?: React.ReactNode;\n title?: React.ReactNode;\n titleLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n header?: React.ReactNode;\n empty?: React.ReactNode;\n classNames?: {\n title?: string;\n header?: string;\n body?: string;\n };\n scroll?: {\n hasMore: boolean;\n loading: boolean;\n loader?: React.ReactNode;\n options?: IntersectionObserverInit;\n next: () => void;\n };\n data?: T[];\n renderItem?: (item: T, index: number) => React.ReactNode;\n itemKey?: (item: T, index: number) => React.Key;\n}\n\nconst List = <T,>({\n loading,\n loaderProps,\n loader,\n header,\n title,\n titleLevel = 2,\n empty,\n scroll,\n data,\n className,\n classNames,\n renderItem = () => null,\n itemKey,\n ...props\n}: Props<T>) => {\n const [loaderRef, entry] = useIntersectionObserver({\n threshold: 0,\n root: null,\n rootMargin: '0px',\n ...scroll?.options,\n });\n\n // `scroll` is typically a new object identity every render, so this\n // effect re-runs often. Guard with a ref (updated synchronously, unlike\n // the `loading` prop which only reflects the caller's next state update)\n // to avoid firing `next()` again for the same in-flight request before\n // the caller's `loading` has had a chance to become true.\n const fetchingRef = useRef(false);\n\n useEffect(() => {\n if (!scroll) {\n return;\n }\n\n if (scroll.loading) {\n fetchingRef.current = false;\n return;\n }\n\n if (entry?.isIntersecting && scroll.hasMore && !fetchingRef.current) {\n fetchingRef.current = true;\n scroll.next();\n }\n }, [entry, scroll]);\n\n if (loading) {\n return (\n loader || (\n <div className={cn(className)} {...props}>\n <div className={cn(classNames?.title)}>{title && <Skeleton />}</div>\n <div className={cn(classNames?.header)}>\n {header && <Skeleton size=\"small\" />}\n </div>\n <div className={cn('space-y-2', classNames?.body)}>\n <Skeleton.Node count={10} gap={10} {...loaderProps} />\n </div>\n </div>\n )\n );\n }\n\n if (!data?.length && empty) {\n return (\n <div className={cn(className)} {...props}>\n {empty}\n </div>\n );\n }\n\n return (\n <div\n className={cn(\n className,\n //\n )}\n {...props}\n >\n {renderConditional(title, v => (\n <Title\n level={titleLevel}\n className={cn(\n 'px-1.5 py-4',\n 'text-black-90 text-lg leading-5.75 font-bold',\n //\n )}\n >\n {v}\n </Title>\n ))}\n <div className={cn(classNames?.header)}>{header}</div>\n <div role=\"list\" className={cn('space-y-2', classNames?.body)}>\n {data?.map((item, i) =>\n itemKey ? (\n <React.Fragment key={itemKey(item, i)}>\n {renderItem(item, i)}\n </React.Fragment>\n ) : (\n renderItem(item, i)\n ),\n )}\n {scroll?.loading &&\n (scroll?.loader ?? (\n <Skeleton.Node count={10} gap={10} {...loaderProps} />\n ))}\n {scroll && <div ref={loaderRef} />}\n </div>\n </div>\n );\n};\n\nexport default List;\n"],"mappings":";;;;;;;;;;;AAuCA,MAAM,QAAY,EAChB,SACA,aACA,QACA,QACA,OACA,aAAa,GACb,OACA,QACA,MACA,WACA,YACA,mBAAmB,MACnB,SACA,GAAG,YACW;CACd,MAAM,CAAC,WAAW,SAAS,wBAAwB;EACjD,WAAW;EACX,MAAM;EACN,YAAY;EACZ,GAAG,QAAQ;EACZ,CAAC;CAOF,MAAM,cAAc,OAAO,MAAM;AAEjC,iBAAgB;AACd,MAAI,CAAC,OACH;AAGF,MAAI,OAAO,SAAS;AAClB,eAAY,UAAU;AACtB;;AAGF,MAAI,OAAO,kBAAkB,OAAO,WAAW,CAAC,YAAY,SAAS;AACnE,eAAY,UAAU;AACtB,UAAO,MAAM;;IAEd,CAAC,OAAO,OAAO,CAAC;AAEnB,KAAI,QACF,QACE,UACE,qBAAC;EAAI,WAAW,GAAG,UAAU;EAAE,GAAI;;GACjC,oBAAC;IAAI,WAAW,GAAG,YAAY,MAAM;cAAG,SAAS,oBAAC,aAAW;KAAO;GACpE,oBAAC;IAAI,WAAW,GAAG,YAAY,OAAO;cACnC,UAAU,oBAAC,YAAS,MAAK,UAAU;KAChC;GACN,oBAAC;IAAI,WAAW,GAAG,aAAa,YAAY,KAAK;cAC/C,oBAAC,SAAS;KAAK,OAAO;KAAI,KAAK;KAAI,GAAI;MAAe;KAClD;;GACF;AAKZ,KAAI,CAAC,MAAM,UAAU,MACnB,QACE,oBAAC;EAAI,WAAW,GAAG,UAAU;EAAE,GAAI;YAChC;GACG;AAIV,QACE,qBAAC;EACC,WAAW,GACT,UAED;EACD,GAAI;;GAEH,kBAAkB,QAAO,MACxB,oBAAC;IACC,OAAO;IACP,WAAW,GACT,eACA,+CAED;cAEA;KACK,CACR;GACF,oBAAC;IAAI,WAAW,GAAG,YAAY,OAAO;cAAG;KAAa;GACtD,qBAAC;IAAI,MAAK;IAAO,WAAW,GAAG,aAAa,YAAY,KAAK;;KAC1D,MAAM,KAAK,MAAM,MAChB,UACE,oBAAC,MAAM,sBACJ,WAAW,MAAM,EAAE,IADD,QAAQ,MAAM,EAAE,CAEpB,GAEjB,WAAW,MAAM,EAAE,CAEtB;KACA,QAAQ,YACN,QAAQ,UACP,oBAAC,SAAS;MAAK,OAAO;MAAI,KAAK;MAAI,GAAI;OAAe;KAEzD,UAAU,oBAAC,SAAI,KAAK,YAAa;;KAC9B;;GACF"}
1
+ {"version":3,"file":"list.mjs","names":[],"sources":["../../../../src/components/organisms/list/list.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useRef } from 'react';\n\nimport { useIntersectionObserver } from '@uidotdev/usehooks';\n\nimport { cn, renderConditional } from '@repo/ui/utils';\n\nimport Skeleton from '../../atoms/skeleton';\nimport { Title } from '../../atoms/typography';\n\ninterface Props<T> extends Omit<\n React.ComponentPropsWithoutRef<'div'>,\n 'title'\n> {\n loading?: boolean;\n loaderProps?: React.ComponentProps<typeof Skeleton>;\n loader?: React.ReactNode;\n title?: React.ReactNode;\n titleLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n header?: React.ReactNode;\n empty?: React.ReactNode;\n classNames?: {\n title?: string;\n header?: string;\n body?: string;\n };\n scroll?: {\n hasMore: boolean;\n loading: boolean;\n loader?: React.ReactNode;\n options?: IntersectionObserverInit;\n next: () => void;\n };\n data?: T[];\n renderItem?: (item: T, index: number) => React.ReactNode;\n itemKey?: (item: T, index: number) => React.Key;\n}\n\nconst List = <T,>({\n loading,\n loaderProps,\n loader,\n header,\n title,\n titleLevel = 2,\n empty,\n scroll,\n data,\n className,\n classNames,\n renderItem = () => null,\n itemKey,\n ...props\n}: Props<T>) => {\n const [loaderRef, entry] = useIntersectionObserver({\n threshold: 0,\n root: null,\n rootMargin: '0px',\n ...scroll?.options,\n });\n\n // `scroll` is typically a new object identity every render, so this\n // effect re-runs often. Guard with a ref (updated synchronously, unlike\n // the `loading` prop which only reflects the caller's next state update)\n // to avoid firing `next()` again for the same in-flight request before\n // the caller's `loading` has had a chance to become true.\n const fetchingRef = useRef(false);\n\n useEffect(() => {\n if (!scroll) {\n return;\n }\n\n if (scroll.loading) {\n fetchingRef.current = false;\n return;\n }\n\n if (entry?.isIntersecting && scroll.hasMore && !fetchingRef.current) {\n fetchingRef.current = true;\n scroll.next();\n }\n }, [entry, scroll]);\n\n if (loading) {\n return (\n loader || (\n <div className={cn(className)} {...props}>\n <div className={cn(classNames?.title)}>{title && <Skeleton />}</div>\n <div className={cn(classNames?.header)}>\n {header && <Skeleton size=\"small\" />}\n </div>\n <div className={cn('space-y-2', classNames?.body)}>\n <Skeleton.Node count={10} gap={10} {...loaderProps} />\n </div>\n </div>\n )\n );\n }\n\n if (!data?.length && empty) {\n return (\n <div className={cn(className)} {...props}>\n {empty}\n </div>\n );\n }\n\n return (\n <div\n className={cn(\n className,\n //\n )}\n {...props}\n >\n {renderConditional(title, v => (\n <Title\n level={titleLevel}\n className={cn(\n 'px-1.5 py-4',\n 'text-black-90 text-lg leading-5.75 font-bold',\n //\n )}\n >\n {v}\n </Title>\n ))}\n <div className={cn(classNames?.header)}>{header}</div>\n <div role=\"list\" className={cn('space-y-2', classNames?.body)}>\n {data?.map((item, i) =>\n itemKey ? (\n <React.Fragment key={itemKey(item, i)}>\n {renderItem(item, i)}\n </React.Fragment>\n ) : (\n renderItem(item, i)\n ),\n )}\n {scroll?.loading &&\n (scroll?.loader ?? (\n <Skeleton.Node count={10} gap={10} {...loaderProps} />\n ))}\n {scroll && <div ref={loaderRef} />}\n </div>\n </div>\n );\n};\n\nexport default List;\n"],"mappings":";;;;;;;;;;AAuCA,MAAM,QAAY,EAChB,SACA,aACA,QACA,QACA,OACA,aAAa,GACb,OACA,QACA,MACA,WACA,YACA,mBAAmB,MACnB,SACA,GAAG,YACW;CACd,MAAM,CAAC,WAAW,SAAS,wBAAwB;EACjD,WAAW;EACX,MAAM;EACN,YAAY;EACZ,GAAG,QAAQ;EACZ,CAAC;CAOF,MAAM,cAAc,OAAO,MAAM;AAEjC,iBAAgB;AACd,MAAI,CAAC,OACH;AAGF,MAAI,OAAO,SAAS;AAClB,eAAY,UAAU;AACtB;;AAGF,MAAI,OAAO,kBAAkB,OAAO,WAAW,CAAC,YAAY,SAAS;AACnE,eAAY,UAAU;AACtB,UAAO,MAAM;;IAEd,CAAC,OAAO,OAAO,CAAC;AAEnB,KAAI,QACF,QACE,UACE,qBAAC;EAAI,WAAW,GAAG,UAAU;EAAE,GAAI;;GACjC,oBAAC;IAAI,WAAW,GAAG,YAAY,MAAM;cAAG,SAAS,oBAAC,aAAW;KAAO;GACpE,oBAAC;IAAI,WAAW,GAAG,YAAY,OAAO;cACnC,UAAU,oBAAC,YAAS,MAAK,UAAU;KAChC;GACN,oBAAC;IAAI,WAAW,GAAG,aAAa,YAAY,KAAK;cAC/C,oBAAC,SAAS;KAAK,OAAO;KAAI,KAAK;KAAI,GAAI;MAAe;KAClD;;GACF;AAKZ,KAAI,CAAC,MAAM,UAAU,MACnB,QACE,oBAAC;EAAI,WAAW,GAAG,UAAU;EAAE,GAAI;YAChC;GACG;AAIV,QACE,qBAAC;EACC,WAAW,GACT,UAED;EACD,GAAI;;GAEH,kBAAkB,QAAO,MACxB,oBAAC;IACC,OAAO;IACP,WAAW,GACT,eACA,+CAED;cAEA;KACK,CACR;GACF,oBAAC;IAAI,WAAW,GAAG,YAAY,OAAO;cAAG;KAAa;GACtD,qBAAC;IAAI,MAAK;IAAO,WAAW,GAAG,aAAa,YAAY,KAAK;;KAC1D,MAAM,KAAK,MAAM,MAChB,UACE,oBAAC,MAAM,sBACJ,WAAW,MAAM,EAAE,IADD,QAAQ,MAAM,EAAE,CAEpB,GAEjB,WAAW,MAAM,EAAE,CAEtB;KACA,QAAQ,YACN,QAAQ,UACP,oBAAC,SAAS;MAAK,OAAO;MAAI,KAAK;MAAI,GAAI;OAAe;KAEzD,UAAU,oBAAC,SAAI,KAAK,YAAa;;KAC9B;;GACF"}
@@ -2,7 +2,6 @@
2
2
 
3
3
  import { cn } from "../../utils.mjs";
4
4
  import { dialog_exports } from "../../core/dialog.mjs";
5
- import "../../core.mjs";
6
5
  import Button from "../../Button.mjs";
7
6
  import { Check, CircleQuestionMark, Info, OctagonAlert, OctagonX } from "lucide-react";
8
7
  import React, { useEffect, useState } from "react";
@@ -1 +1 @@
1
- {"version":3,"file":"modal.mjs","names":["dialog","uuid"],"sources":["../../../src/components/organisms/modal.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Root, createRoot } from 'react-dom/client';\n\nimport {\n Check,\n CircleQuestionMark,\n Info,\n OctagonAlert,\n OctagonX,\n} from 'lucide-react';\nimport { v4 as uuid } from 'uuid';\n\nimport { dialog } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\nconst {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} = dialog;\n\ninterface Props {\n open?: boolean;\n maskClosable?: boolean;\n closable?:\n | boolean\n | {\n closeIcon?: React.ReactNode;\n disabled?: boolean;\n };\n closeIcon?: React.ReactNode;\n title?: React.ReactNode;\n content?: React.ReactNode;\n footer?: React.ReactNode;\n className?: string;\n classNames?: {\n mask?: string;\n header?: string;\n body?: string;\n footer?: string;\n };\n style?: React.CSSProperties;\n okText?: string;\n cancelText?: string;\n container?: HTMLElement;\n children?: React.ReactNode;\n onOk?: () => void;\n onCancel?: () => void;\n}\n\ninterface StaticProps extends Props {\n type?: 'info' | 'success' | 'error' | 'warning' | 'confirm';\n id?: string;\n icon?: React.ReactNode;\n container?: HTMLElement;\n}\n\nconst isBrowser =\n typeof window !== 'undefined' && typeof document !== 'undefined';\n\nlet modalRoot: Root | null = null;\nlet modalStack: StaticProps[] = [];\nlet updateStack: (() => void) | null = null;\n\nconst createModalRoot = (container?: HTMLElement) => {\n if (!isBrowser) {\n return null;\n }\n\n const targetContainer = container || document.body;\n let rootEl = targetContainer.querySelector(\n '#modal-root',\n ) as HTMLElement | null;\n\n if (!rootEl) {\n rootEl = document.createElement('div');\n rootEl.setAttribute('id', 'modal-root');\n rootEl.setAttribute('role', 'dialog');\n rootEl.setAttribute('aria-modal', 'true');\n rootEl.style.zIndex = '10000';\n rootEl.style.position = 'absolute';\n targetContainer.appendChild(rootEl);\n }\n\n return rootEl;\n};\n\nconst Modal = ({\n open = false,\n maskClosable = false,\n closable = false,\n closeIcon,\n className,\n classNames,\n style,\n title,\n footer,\n container,\n children,\n okText = 'OK',\n cancelText = 'Cancel',\n onOk,\n onCancel,\n ...props\n}: Props) => {\n if (typeof window === 'undefined') {\n return null;\n }\n\n return (\n <Dialog\n open={open}\n onOpenChange={(open: boolean) => {\n if (!open && maskClosable) {\n onCancel?.();\n }\n }}\n {...props}\n >\n <DialogContent\n className={cn(\n 'rounded-lg p-4 max-sm:max-w-[80%]',\n 'border-none outline-none',\n className,\n )}\n classNames={{\n ...classNames,\n mask: cn('bg-black/60', classNames?.mask),\n }}\n style={style}\n showCloseButton={!!closable}\n closeIcon={closeIcon}\n container={container}\n onCancel={onCancel}\n >\n {/**\n * @todo [Dialog & AlertDialog] fix: can't get id correctly in shadow dom\n * @see https://github.com/radix-ui/primitives/pull/3384\n **/}\n <DialogHeader\n className={cn(\n classNames?.header,\n !title && 'hidden',\n //\n )}\n >\n <DialogTitle>{title}</DialogTitle>\n <DialogDescription className=\"hidden\" />\n </DialogHeader>\n <div className={cn('break-all', classNames?.body)}>{children}</div>\n {footer !== null && (\n <DialogFooter\n className={cn('flex-row justify-end gap-x-2', classNames?.footer)}\n >\n {footer || (\n <>\n <Button onClick={onOk}>{okText}</Button>\n <Button variant=\"outlined\" onClick={onCancel}>\n {cancelText}\n </Button>\n </>\n )}\n </DialogFooter>\n )}\n </DialogContent>\n </Dialog>\n );\n};\n\nconst STATIC_ICONS = {\n info: <Info className=\"text-blue-400\" />,\n success: <Check className=\"text-green-400\" />,\n error: <OctagonX className=\"text-red-400\" />,\n warning: <OctagonAlert className=\"text-yellow-400\" />,\n confirm: <CircleQuestionMark />,\n};\n\nconst StaticModal = ({\n type,\n title,\n content,\n okText = 'OK',\n cancelText = 'Cancel',\n id,\n container,\n icon,\n onOk,\n onCancel,\n ...props\n}: StaticProps) => {\n const [open, setOpen] = useState(true);\n\n const closeModal = (callback?: () => void) => {\n callback?.();\n setOpen(false);\n setTimeout(() => {\n Modal.destroy(id);\n }, 200);\n };\n\n const footer =\n type === 'confirm' ? (\n <div className=\"grid w-full grid-cols-5 gap-x-2\">\n <Button\n variant=\"outlined\"\n className=\"col-span-2\"\n onClick={() => closeModal(onCancel)}\n >\n {cancelText}\n </Button>\n <Button className=\"col-span-3\" onClick={() => closeModal(onOk)}>\n {okText}\n </Button>\n </div>\n ) : (\n <Button\n className={cn(\n 'grow',\n //\n )}\n onClick={() => closeModal(onOk)}\n >\n {okText}\n </Button>\n );\n\n if (!isBrowser) {\n return null;\n }\n\n return createPortal(\n <Modal\n open={open}\n footer={footer}\n className={cn(\n 'z-10000',\n 'box-content w-100',\n 'rounded-3xl p-4',\n 'gap-y-0',\n )}\n classNames={{\n mask: 'z-10000 bg-black/[.6]',\n body: cn(\n 'text-black-70 whitespace-pre-wrap text-center',\n content && 'mt-3',\n ),\n footer: 'mt-9',\n }}\n title={\n <p\n className={cn(\n 'text-center text-lg leading-normal whitespace-pre-wrap',\n 'flex items-center justify-center gap-x-2',\n //\n )}\n >\n {icon || (type && STATIC_ICONS[type])}\n {title}\n </p>\n }\n container={container}\n onCancel={() => closeModal(onOk)}\n {...props}\n >\n {content}\n </Modal>,\n createModalRoot(container)!,\n );\n};\n\nconst ModalStackRenderer = () => {\n const [, forceUpdate] = useState({});\n\n useEffect(() => {\n updateStack = () => forceUpdate({});\n return () => {\n updateStack = null;\n };\n }, []);\n\n return (\n <>\n {modalStack.map(({ id, ...props }) => (\n <StaticModal key={id} id={id} {...props} />\n ))}\n </>\n );\n};\n\nconst modalRoots = new Map<HTMLElement, Root>();\n\nconst renderModal = (props: StaticProps) => {\n if (!isBrowser) {\n return;\n }\n\n const targetContainer = props.container || document.body;\n const rootElement = createModalRoot(targetContainer)!;\n\n if (!modalRoots.has(targetContainer)) {\n const root = createRoot(rootElement);\n modalRoots.set(targetContainer, root);\n root.render(<ModalStackRenderer />);\n }\n\n const id = props.id || uuid();\n modalStack.push({ ...props, id });\n updateStack?.();\n\n return id;\n};\n\nModal.destroy = (id?: string) => {\n modalStack = id ? modalStack.filter(modal => modal.id !== id) : [];\n\n updateStack?.();\n\n if (!modalStack.length && modalRoot) {\n modalRoot.unmount();\n modalRoot = null;\n }\n};\n\nModal.destroyAll = () => {\n Modal.destroy();\n};\n\nModal.info = (props: StaticProps) => renderModal({ type: 'info', ...props });\nModal.success = (props: StaticProps) =>\n renderModal({ type: 'success', ...props });\nModal.error = (props: StaticProps) => renderModal({ type: 'error', ...props });\nModal.warning = (props: StaticProps) =>\n renderModal({ type: 'warning', ...props });\nModal.confirm = (props: StaticProps) =>\n renderModal({ type: 'confirm', ...props });\n\nexport default Modal;\n"],"mappings":"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"}
1
+ {"version":3,"file":"modal.mjs","names":["dialog","uuid"],"sources":["../../../src/components/organisms/modal.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Root, createRoot } from 'react-dom/client';\n\nimport {\n Check,\n CircleQuestionMark,\n Info,\n OctagonAlert,\n OctagonX,\n} from 'lucide-react';\nimport { v4 as uuid } from 'uuid';\n\nimport { dialog } from '@repo/ui/core';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\nconst {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} = dialog;\n\ninterface Props {\n open?: boolean;\n maskClosable?: boolean;\n closable?:\n | boolean\n | {\n closeIcon?: React.ReactNode;\n disabled?: boolean;\n };\n closeIcon?: React.ReactNode;\n title?: React.ReactNode;\n content?: React.ReactNode;\n footer?: React.ReactNode;\n className?: string;\n classNames?: {\n mask?: string;\n header?: string;\n body?: string;\n footer?: string;\n };\n style?: React.CSSProperties;\n okText?: string;\n cancelText?: string;\n container?: HTMLElement;\n children?: React.ReactNode;\n onOk?: () => void;\n onCancel?: () => void;\n}\n\ninterface StaticProps extends Props {\n type?: 'info' | 'success' | 'error' | 'warning' | 'confirm';\n id?: string;\n icon?: React.ReactNode;\n container?: HTMLElement;\n}\n\nconst isBrowser =\n typeof window !== 'undefined' && typeof document !== 'undefined';\n\nlet modalRoot: Root | null = null;\nlet modalStack: StaticProps[] = [];\nlet updateStack: (() => void) | null = null;\n\nconst createModalRoot = (container?: HTMLElement) => {\n if (!isBrowser) {\n return null;\n }\n\n const targetContainer = container || document.body;\n let rootEl = targetContainer.querySelector(\n '#modal-root',\n ) as HTMLElement | null;\n\n if (!rootEl) {\n rootEl = document.createElement('div');\n rootEl.setAttribute('id', 'modal-root');\n rootEl.setAttribute('role', 'dialog');\n rootEl.setAttribute('aria-modal', 'true');\n rootEl.style.zIndex = '10000';\n rootEl.style.position = 'absolute';\n targetContainer.appendChild(rootEl);\n }\n\n return rootEl;\n};\n\nconst Modal = ({\n open = false,\n maskClosable = false,\n closable = false,\n closeIcon,\n className,\n classNames,\n style,\n title,\n footer,\n container,\n children,\n okText = 'OK',\n cancelText = 'Cancel',\n onOk,\n onCancel,\n ...props\n}: Props) => {\n if (typeof window === 'undefined') {\n return null;\n }\n\n return (\n <Dialog\n open={open}\n onOpenChange={(open: boolean) => {\n if (!open && maskClosable) {\n onCancel?.();\n }\n }}\n {...props}\n >\n <DialogContent\n className={cn(\n 'rounded-lg p-4 max-sm:max-w-[80%]',\n 'border-none outline-none',\n className,\n )}\n classNames={{\n ...classNames,\n mask: cn('bg-black/60', classNames?.mask),\n }}\n style={style}\n showCloseButton={!!closable}\n closeIcon={closeIcon}\n container={container}\n onCancel={onCancel}\n >\n {/**\n * @todo [Dialog & AlertDialog] fix: can't get id correctly in shadow dom\n * @see https://github.com/radix-ui/primitives/pull/3384\n **/}\n <DialogHeader\n className={cn(\n classNames?.header,\n !title && 'hidden',\n //\n )}\n >\n <DialogTitle>{title}</DialogTitle>\n <DialogDescription className=\"hidden\" />\n </DialogHeader>\n <div className={cn('break-all', classNames?.body)}>{children}</div>\n {footer !== null && (\n <DialogFooter\n className={cn('flex-row justify-end gap-x-2', classNames?.footer)}\n >\n {footer || (\n <>\n <Button onClick={onOk}>{okText}</Button>\n <Button variant=\"outlined\" onClick={onCancel}>\n {cancelText}\n </Button>\n </>\n )}\n </DialogFooter>\n )}\n </DialogContent>\n </Dialog>\n );\n};\n\nconst STATIC_ICONS = {\n info: <Info className=\"text-blue-400\" />,\n success: <Check className=\"text-green-400\" />,\n error: <OctagonX className=\"text-red-400\" />,\n warning: <OctagonAlert className=\"text-yellow-400\" />,\n confirm: <CircleQuestionMark />,\n};\n\nconst StaticModal = ({\n type,\n title,\n content,\n okText = 'OK',\n cancelText = 'Cancel',\n id,\n container,\n icon,\n onOk,\n onCancel,\n ...props\n}: StaticProps) => {\n const [open, setOpen] = useState(true);\n\n const closeModal = (callback?: () => void) => {\n callback?.();\n setOpen(false);\n setTimeout(() => {\n Modal.destroy(id);\n }, 200);\n };\n\n const footer =\n type === 'confirm' ? (\n <div className=\"grid w-full grid-cols-5 gap-x-2\">\n <Button\n variant=\"outlined\"\n className=\"col-span-2\"\n onClick={() => closeModal(onCancel)}\n >\n {cancelText}\n </Button>\n <Button className=\"col-span-3\" onClick={() => closeModal(onOk)}>\n {okText}\n </Button>\n </div>\n ) : (\n <Button\n className={cn(\n 'grow',\n //\n )}\n onClick={() => closeModal(onOk)}\n >\n {okText}\n </Button>\n );\n\n if (!isBrowser) {\n return null;\n }\n\n return createPortal(\n <Modal\n open={open}\n footer={footer}\n className={cn(\n 'z-10000',\n 'box-content w-100',\n 'rounded-3xl p-4',\n 'gap-y-0',\n )}\n classNames={{\n mask: 'z-10000 bg-black/[.6]',\n body: cn(\n 'text-black-70 whitespace-pre-wrap text-center',\n content && 'mt-3',\n ),\n footer: 'mt-9',\n }}\n title={\n <p\n className={cn(\n 'text-center text-lg leading-normal whitespace-pre-wrap',\n 'flex items-center justify-center gap-x-2',\n //\n )}\n >\n {icon || (type && STATIC_ICONS[type])}\n {title}\n </p>\n }\n container={container}\n onCancel={() => closeModal(onOk)}\n {...props}\n >\n {content}\n </Modal>,\n createModalRoot(container)!,\n );\n};\n\nconst ModalStackRenderer = () => {\n const [, forceUpdate] = useState({});\n\n useEffect(() => {\n updateStack = () => forceUpdate({});\n return () => {\n updateStack = null;\n };\n }, []);\n\n return (\n <>\n {modalStack.map(({ id, ...props }) => (\n <StaticModal key={id} id={id} {...props} />\n ))}\n </>\n );\n};\n\nconst modalRoots = new Map<HTMLElement, Root>();\n\nconst renderModal = (props: StaticProps) => {\n if (!isBrowser) {\n return;\n }\n\n const targetContainer = props.container || document.body;\n const rootElement = createModalRoot(targetContainer)!;\n\n if (!modalRoots.has(targetContainer)) {\n const root = createRoot(rootElement);\n modalRoots.set(targetContainer, root);\n root.render(<ModalStackRenderer />);\n }\n\n const id = props.id || uuid();\n modalStack.push({ ...props, id });\n updateStack?.();\n\n return id;\n};\n\nModal.destroy = (id?: string) => {\n modalStack = id ? modalStack.filter(modal => modal.id !== id) : [];\n\n updateStack?.();\n\n if (!modalStack.length && modalRoot) {\n modalRoot.unmount();\n modalRoot = null;\n }\n};\n\nModal.destroyAll = () => {\n Modal.destroy();\n};\n\nModal.info = (props: StaticProps) => renderModal({ type: 'info', ...props });\nModal.success = (props: StaticProps) =>\n renderModal({ type: 'success', ...props });\nModal.error = (props: StaticProps) => renderModal({ type: 'error', ...props });\nModal.warning = (props: StaticProps) =>\n renderModal({ type: 'warning', ...props });\nModal.confirm = (props: StaticProps) =>\n renderModal({ type: 'confirm', ...props });\n\nexport default Modal;\n"],"mappings":"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"}
@@ -2,7 +2,6 @@
2
2
 
3
3
  import { cn } from "../../../utils.mjs";
4
4
  import Spin from "../../atoms/spin.mjs";
5
- import "../../atoms/index.mjs";
6
5
  import { jsx } from "react/jsx-runtime";
7
6
  import { Swiper } from "swiper/react";
8
7
  import { Autoplay, EffectCards, Navigation, Scrollbar } from "swiper/modules";
@@ -1 +1 @@
1
- {"version":3,"file":"swiper.mjs","names":["Swiper","SwiperCore"],"sources":["../../../../src/components/organisms/swiper/swiper.tsx"],"sourcesContent":["'use client';\n\nimport { Autoplay, EffectCards, Navigation, Scrollbar } from 'swiper/modules';\nimport { Swiper as SwiperCore, SwiperProps } from 'swiper/react';\nimport { SwiperOptions } from 'swiper/types';\n\nimport { cn } from '@repo/ui/utils';\n\nimport 'swiper/css';\nimport 'swiper/css/autoplay';\nimport 'swiper/css/effect-cards';\nimport 'swiper/css/navigation';\nimport 'swiper/css/scrollbar';\n\nimport { Spin } from '../../atoms';\n\nexport const initialOptions: SwiperOptions = {\n loop: false,\n spaceBetween: 8,\n slidesPerView: 'auto',\n navigation: false,\n autoplay: {\n delay: 2500,\n disableOnInteraction: false,\n },\n};\n\nconst initialStyle = { width: '100%', maxWidth: '100vw', overflow: 'hidden' };\n\ninterface Props<T> extends SwiperProps {\n loading?: boolean;\n loader?: React.ReactNode;\n loadingClassName?: string;\n options?: SwiperOptions;\n data: T[];\n renderItem(item: T, key: number): React.ReactNode;\n}\n\nconst Swiper = <T,>({\n loading,\n loader,\n options = {},\n data = [],\n style,\n renderItem,\n loadingClassName,\n ...props\n}: Props<T>) => {\n if (loading) {\n return (\n <div className={cn('h-32', loadingClassName)}>\n {loader || <Spin spinning />}\n </div>\n );\n }\n\n return (\n <SwiperCore\n modules={[Navigation, Scrollbar, Autoplay, EffectCards]}\n {...initialOptions}\n {...options}\n style={{ ...initialStyle, ...style }}\n {...props}\n >\n {data.map((item: T, i) => renderItem(item, i))}\n </SwiperCore>\n );\n};\n\nexport default Swiper;\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAa,iBAAgC;CAC3C,MAAM;CACN,cAAc;CACd,eAAe;CACf,YAAY;CACZ,UAAU;EACR,OAAO;EACP,sBAAsB;EACvB;CACF;AAED,MAAM,eAAe;CAAE,OAAO;CAAQ,UAAU;CAAS,UAAU;CAAU;AAW7E,MAAMA,YAAc,EAClB,SACA,QACA,UAAU,EAAE,EACZ,OAAO,EAAE,EACT,OACA,YACA,kBACA,GAAG,YACW;AACd,KAAI,QACF,QACE,oBAAC;EAAI,WAAW,GAAG,QAAQ,iBAAiB;YACzC,UAAU,oBAAC,QAAK,iBAAW;GACxB;AAIV,QACE,oBAACC;EACC,SAAS;GAAC;GAAY;GAAW;GAAU;GAAY;EACvD,GAAI;EACJ,GAAI;EACJ,OAAO;GAAE,GAAG;GAAc,GAAG;GAAO;EACpC,GAAI;YAEH,KAAK,KAAK,MAAS,MAAM,WAAW,MAAM,EAAE,CAAC;GACnC"}
1
+ {"version":3,"file":"swiper.mjs","names":["Swiper","SwiperCore"],"sources":["../../../../src/components/organisms/swiper/swiper.tsx"],"sourcesContent":["'use client';\n\nimport { Autoplay, EffectCards, Navigation, Scrollbar } from 'swiper/modules';\nimport { Swiper as SwiperCore, SwiperProps } from 'swiper/react';\nimport { SwiperOptions } from 'swiper/types';\n\nimport { cn } from '@repo/ui/utils';\n\nimport 'swiper/css';\nimport 'swiper/css/autoplay';\nimport 'swiper/css/effect-cards';\nimport 'swiper/css/navigation';\nimport 'swiper/css/scrollbar';\n\nimport { Spin } from '../../atoms';\n\nexport const initialOptions: SwiperOptions = {\n loop: false,\n spaceBetween: 8,\n slidesPerView: 'auto',\n navigation: false,\n autoplay: {\n delay: 2500,\n disableOnInteraction: false,\n },\n};\n\nconst initialStyle = { width: '100%', maxWidth: '100vw', overflow: 'hidden' };\n\ninterface Props<T> extends SwiperProps {\n loading?: boolean;\n loader?: React.ReactNode;\n loadingClassName?: string;\n options?: SwiperOptions;\n data: T[];\n renderItem(item: T, key: number): React.ReactNode;\n}\n\nconst Swiper = <T,>({\n loading,\n loader,\n options = {},\n data = [],\n style,\n renderItem,\n loadingClassName,\n ...props\n}: Props<T>) => {\n if (loading) {\n return (\n <div className={cn('h-32', loadingClassName)}>\n {loader || <Spin spinning />}\n </div>\n );\n }\n\n return (\n <SwiperCore\n modules={[Navigation, Scrollbar, Autoplay, EffectCards]}\n {...initialOptions}\n {...options}\n style={{ ...initialStyle, ...style }}\n {...props}\n >\n {data.map((item: T, i) => renderItem(item, i))}\n </SwiperCore>\n );\n};\n\nexport default Swiper;\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAa,iBAAgC;CAC3C,MAAM;CACN,cAAc;CACd,eAAe;CACf,YAAY;CACZ,UAAU;EACR,OAAO;EACP,sBAAsB;EACvB;CACF;AAED,MAAM,eAAe;CAAE,OAAO;CAAQ,UAAU;CAAS,UAAU;CAAU;AAW7E,MAAMA,YAAc,EAClB,SACA,QACA,UAAU,EAAE,EACZ,OAAO,EAAE,EACT,OACA,YACA,kBACA,GAAG,YACW;AACd,KAAI,QACF,QACE,oBAAC;EAAI,WAAW,GAAG,QAAQ,iBAAiB;YACzC,UAAU,oBAAC,QAAK,iBAAW;GACxB;AAIV,QACE,oBAACC;EACC,SAAS;GAAC;GAAY;GAAW;GAAU;GAAY;EACvD,GAAI;EACJ,GAAI;EACJ,OAAO;GAAE,GAAG;GAAc,GAAG;GAAO;EACpC,GAAI;YAEH,KAAK,KAAK,MAAS,MAAM,WAAW,MAAM,EAAE,CAAC;GACnC"}
@@ -1 +1 @@
1
- {"version":3,"file":"layout.d.mts","names":[],"sources":["../../../../src/components/templates/layout/layout.tsx"],"mappings":";;;UAMiB,KAAA,SAAc,KAAA,CAAM,wBAAA;AAAA,cAO/B,MAAA;EAAU,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAAmC,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
1
+ {"version":3,"file":"layout.d.mts","names":[],"sources":["../../../../src/components/templates/layout/layout.tsx"],"mappings":";;;UAMiB,KAAA,SAAc,KAAA,CAAM,wBAAA;AAAA,cAS/B,MAAA;EAAU,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAAmC,KAAA,KAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}
@@ -1,15 +1,21 @@
1
1
  import { cn } from "../../../utils.mjs";
2
2
  import Sider from "./sider.mjs";
3
- import { Children, isValidElement } from "react";
3
+ import { Children, createContext, isValidElement, useContext } from "react";
4
4
  import { jsx } from "react/jsx-runtime";
5
5
 
6
6
  //#region src/components/templates/layout/layout.tsx
7
+ const LayoutNestedContext = createContext(false);
7
8
  const hasSiderChild = (children) => Children.toArray(children).some((child) => isValidElement(child) && child.type === Sider);
8
9
  const Layout = ({ children, className, ...props }) => {
9
- return /* @__PURE__ */ jsx("div", {
10
- className: cn("flex min-h-0 w-full flex-1", hasSiderChild(children) ? "flex-row" : "flex-col", className),
11
- ...props,
12
- children
10
+ const isNested = useContext(LayoutNestedContext);
11
+ const isRow = hasSiderChild(children);
12
+ return /* @__PURE__ */ jsx(LayoutNestedContext.Provider, {
13
+ value: true,
14
+ children: /* @__PURE__ */ jsx("div", {
15
+ className: cn("flex w-full flex-1", isNested ? "min-h-0" : "min-h-screen", isRow ? "flex-row" : "flex-col", className),
16
+ ...props,
17
+ children
18
+ })
13
19
  });
14
20
  };
15
21
 
@@ -1 +1 @@
1
- {"version":3,"file":"layout.mjs","names":[],"sources":["../../../../src/components/templates/layout/layout.tsx"],"sourcesContent":["import { Children, isValidElement } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Sider from './sider';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst hasSiderChild = (children: React.ReactNode) =>\n Children.toArray(children).some(\n child => isValidElement(child) && child.type === Sider,\n );\n\nconst Layout = ({ children, className, ...props }: Props) => {\n const isRow = hasSiderChild(children);\n\n return (\n <div\n className={cn(\n 'flex min-h-0 w-full flex-1',\n isRow ? 'flex-row' : 'flex-col',\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n};\n\nexport default Layout;\n"],"mappings":";;;;;;AAQA,MAAM,iBAAiB,aACrB,SAAS,QAAQ,SAAS,CAAC,MACzB,UAAS,eAAe,MAAM,IAAI,MAAM,SAAS,MAClD;AAEH,MAAM,UAAU,EAAE,UAAU,WAAW,GAAG,YAAmB;AAG3D,QACE,oBAAC;EACC,WAAW,GACT,8BALQ,cAAc,SAAS,GAMvB,aAAa,YACrB,UACD;EACD,GAAI;EAEH;GACG"}
1
+ {"version":3,"file":"layout.mjs","names":[],"sources":["../../../../src/components/templates/layout/layout.tsx"],"sourcesContent":["import { Children, createContext, isValidElement, useContext } from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Sider from './sider';\n\nexport interface Props extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst LayoutNestedContext = createContext(false);\n\nconst hasSiderChild = (children: React.ReactNode) =>\n Children.toArray(children).some(\n child => isValidElement(child) && child.type === Sider,\n );\n\nconst Layout = ({ children, className, ...props }: Props) => {\n const isNested = useContext(LayoutNestedContext);\n const isRow = hasSiderChild(children);\n\n return (\n <LayoutNestedContext.Provider value>\n <div\n className={cn(\n 'flex w-full flex-1',\n // A nested Layout (the Sider row wrapper) must stay free to\n // shrink/grow inside its parent's flex column, so it keeps\n // min-h-0. The outermost Layout has no ancestor to size against,\n // so it needs its own height anchor or flex-1/grow are no-ops\n // and Content collapses under Footer.\n isNested ? 'min-h-0' : 'min-h-screen',\n isRow ? 'flex-row' : 'flex-col',\n className,\n )}\n {...props}\n >\n {children}\n </div>\n </LayoutNestedContext.Provider>\n );\n};\n\nexport default Layout;\n"],"mappings":";;;;;;AAQA,MAAM,sBAAsB,cAAc,MAAM;AAEhD,MAAM,iBAAiB,aACrB,SAAS,QAAQ,SAAS,CAAC,MACzB,UAAS,eAAe,MAAM,IAAI,MAAM,SAAS,MAClD;AAEH,MAAM,UAAU,EAAE,UAAU,WAAW,GAAG,YAAmB;CAC3D,MAAM,WAAW,WAAW,oBAAoB;CAChD,MAAM,QAAQ,cAAc,SAAS;AAErC,QACE,oBAAC,oBAAoB;EAAS;YAC5B,oBAAC;GACC,WAAW,GACT,sBAMA,WAAW,YAAY,gBACvB,QAAQ,aAAa,YACrB,UACD;GACD,GAAI;GAEH;IACG;GACuB"}
package/dist/index.mjs CHANGED
@@ -13,7 +13,6 @@ import Skeleton from "./components/atoms/skeleton/index.mjs";
13
13
  import Spin from "./components/atoms/spin.mjs";
14
14
  import Switch from "./components/atoms/switch.mjs";
15
15
  import Tag from "./Tag.mjs";
16
- import "./components/atoms/index.mjs";
17
16
  import Card from "./Card.mjs";
18
17
  import Collapse from "./components/molecules/collapse.mjs";
19
18
  import Menu from "./components/molecules/menu/menu.mjs";
@@ -22,16 +21,12 @@ import Marquees from "./components/molecules/marquees/index.mjs";
22
21
  import Reveals from "./Reveals.mjs";
23
22
  import Splitter from "./components/molecules/splitter/index.mjs";
24
23
  import Space from "./Space.mjs";
25
- import "./components/molecules/index.mjs";
26
24
  import Drawer from "./components/organisms/drawer.mjs";
27
25
  import List from "./components/organisms/list/index.mjs";
28
26
  import Modal from "./components/organisms/modal.mjs";
29
27
  import Swiper from "./components/organisms/swiper/index.mjs";
30
- import "./components/organisms/index.mjs";
31
28
  import Layout from "./Layout.mjs";
32
- import "./components/templates/index.mjs";
33
29
  import { useConfig } from "./providers/Config/context.mjs";
34
30
  import Config from "./providers/Config/index.mjs";
35
- import "./providers/index.mjs";
36
31
 
37
32
  export { Button, Card, Checkbox, Collapse, ColorPicker, Config, Drawer, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Radio, Reveals, Select, Skeleton, Space, Spin, Splitter, Swiper, Switch, Tag, Typography, useConfig };
package/dist/style.css CHANGED
@@ -522,6 +522,9 @@
522
522
  .min-h-16 {
523
523
  min-height: calc(var(--spacing) * 16);
524
524
  }
525
+ .min-h-screen {
526
+ min-height: 100vh;
527
+ }
525
528
  .w-3 {
526
529
  width: calc(var(--spacing) * 3);
527
530
  }
@@ -1105,14 +1108,6 @@
1105
1108
  font-size: var(--text-4xl);
1106
1109
  line-height: var(--tw-leading, var(--text-4xl--line-height));
1107
1110
  }
1108
- .text-5xl {
1109
- font-size: var(--text-5xl);
1110
- line-height: var(--tw-leading, var(--text-5xl--line-height));
1111
- }
1112
- .text-6xl {
1113
- font-size: var(--text-6xl);
1114
- line-height: var(--tw-leading, var(--text-6xl--line-height));
1115
- }
1116
1111
  .text-base {
1117
1112
  font-size: var(--text-base);
1118
1113
  line-height: var(--tw-leading, var(--text-base--line-height));
@@ -1168,9 +1163,6 @@
1168
1163
  --tw-font-weight: var(--font-weight-semibold);
1169
1164
  font-weight: var(--font-weight-semibold);
1170
1165
  }
1171
- .text-nowrap {
1172
- text-wrap: nowrap;
1173
- }
1174
1166
  .break-all {
1175
1167
  word-break: break-all;
1176
1168
  }
@@ -1938,13 +1930,6 @@
1938
1930
  }
1939
1931
  }
1940
1932
  }
1941
- .hover\:bg-white {
1942
- &:hover {
1943
- @media (hover: hover) {
1944
- background-color: var(--color-white);
1945
- }
1946
- }
1947
- }
1948
1933
  .hover\:text-accent-foreground {
1949
1934
  &:hover {
1950
1935
  @media (hover: hover) {
@@ -2570,6 +2555,42 @@
2570
2555
  text-align: left;
2571
2556
  }
2572
2557
  }
2558
+ .sm\:text-2xl {
2559
+ @media (width >= 40rem) {
2560
+ font-size: var(--text-2xl);
2561
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
2562
+ }
2563
+ }
2564
+ .sm\:text-3xl {
2565
+ @media (width >= 40rem) {
2566
+ font-size: var(--text-3xl);
2567
+ line-height: var(--tw-leading, var(--text-3xl--line-height));
2568
+ }
2569
+ }
2570
+ .sm\:text-4xl {
2571
+ @media (width >= 40rem) {
2572
+ font-size: var(--text-4xl);
2573
+ line-height: var(--tw-leading, var(--text-4xl--line-height));
2574
+ }
2575
+ }
2576
+ .sm\:text-5xl {
2577
+ @media (width >= 40rem) {
2578
+ font-size: var(--text-5xl);
2579
+ line-height: var(--tw-leading, var(--text-5xl--line-height));
2580
+ }
2581
+ }
2582
+ .sm\:text-lg {
2583
+ @media (width >= 40rem) {
2584
+ font-size: var(--text-lg);
2585
+ line-height: var(--tw-leading, var(--text-lg--line-height));
2586
+ }
2587
+ }
2588
+ .sm\:text-xl {
2589
+ @media (width >= 40rem) {
2590
+ font-size: var(--text-xl);
2591
+ line-height: var(--tw-leading, var(--text-xl--line-height));
2592
+ }
2593
+ }
2573
2594
  .data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm {
2574
2595
  &[data-vaul-drawer-direction="left"] {
2575
2596
  @media (width >= 40rem) {
@@ -2600,6 +2621,42 @@
2600
2621
  line-height: var(--tw-leading, var(--text-sm--line-height));
2601
2622
  }
2602
2623
  }
2624
+ .lg\:text-2xl {
2625
+ @media (width >= 64rem) {
2626
+ font-size: var(--text-2xl);
2627
+ line-height: var(--tw-leading, var(--text-2xl--line-height));
2628
+ }
2629
+ }
2630
+ .lg\:text-3xl {
2631
+ @media (width >= 64rem) {
2632
+ font-size: var(--text-3xl);
2633
+ line-height: var(--tw-leading, var(--text-3xl--line-height));
2634
+ }
2635
+ }
2636
+ .lg\:text-4xl {
2637
+ @media (width >= 64rem) {
2638
+ font-size: var(--text-4xl);
2639
+ line-height: var(--tw-leading, var(--text-4xl--line-height));
2640
+ }
2641
+ }
2642
+ .lg\:text-5xl {
2643
+ @media (width >= 64rem) {
2644
+ font-size: var(--text-5xl);
2645
+ line-height: var(--tw-leading, var(--text-5xl--line-height));
2646
+ }
2647
+ }
2648
+ .lg\:text-6xl {
2649
+ @media (width >= 64rem) {
2650
+ font-size: var(--text-6xl);
2651
+ line-height: var(--tw-leading, var(--text-6xl--line-height));
2652
+ }
2653
+ }
2654
+ .lg\:text-xl {
2655
+ @media (width >= 64rem) {
2656
+ font-size: var(--text-xl);
2657
+ line-height: var(--tw-leading, var(--text-xl--line-height));
2658
+ }
2659
+ }
2603
2660
  .\@md\/field-group\:flex-row {
2604
2661
  @container field-group (width >= 28rem) {
2605
2662
  flex-direction: row;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jbpark/ui-kit",
3
- "version": "2.10.0",
3
+ "version": "2.11.2",
4
4
  "description": "Modern React UI component library built with TypeScript, Tailwind CSS, and Radix UI. Featuring atoms, molecules, organisms and layout templates for building beautiful interfaces.",
5
5
  "keywords": [
6
6
  "react",
@@ -28,6 +28,9 @@
28
28
  "url": "https://github.com/pjb0811/ui-kit/issues"
29
29
  },
30
30
  "private": false,
31
+ "sideEffects": [
32
+ "*.css"
33
+ ],
31
34
  "publishConfig": {
32
35
  "access": "public"
33
36
  },
@@ -1,16 +0,0 @@
1
- import Button from "../../Button.mjs";
2
- import Checkbox from "./checkbox/index.mjs";
3
- import Typography from "../../Typography.mjs";
4
- import Popover from "./popover.mjs";
5
- import ColorPicker from "./color-picker.mjs";
6
- import FloatButton from "./float-button/index.mjs";
7
- import Input from "./input/index.mjs";
8
- import Progress from "./progress.mjs";
9
- import Radio from "./radio/index.mjs";
10
- import Select from "./select.mjs";
11
- import Skeleton from "./skeleton/index.mjs";
12
- import Spin from "./spin.mjs";
13
- import Switch from "./switch.mjs";
14
- import Tag from "../../Tag.mjs";
15
-
16
- export { };
@@ -1,11 +0,0 @@
1
- import Card from "../../Card.mjs";
2
- import Collapse from "./collapse.mjs";
3
- import Menu from "./menu/menu.mjs";
4
- import "../../Menu.mjs";
5
- import Dropdown from "./dropdown.mjs";
6
- import Marquees from "./marquees/index.mjs";
7
- import Reveals from "../../Reveals.mjs";
8
- import Splitter from "./splitter/index.mjs";
9
- import Space from "../../Space.mjs";
10
-
11
- export { };
@@ -1,3 +0,0 @@
1
- import Item from "./item.mjs";
2
-
3
- export { };
@@ -1,6 +0,0 @@
1
- import Drawer from "./drawer.mjs";
2
- import List from "./list/index.mjs";
3
- import Modal from "./modal.mjs";
4
- import Swiper from "./swiper/index.mjs";
5
-
6
- export { };
@@ -1,3 +0,0 @@
1
- import Layout from "../../Layout.mjs";
2
-
3
- export { };
@@ -1,4 +0,0 @@
1
- import { useConfig } from "./Config/context.mjs";
2
- import Config from "./Config/index.mjs";
3
-
4
- export { };