@kimdw-rtk/ui 0.0.13 → 0.0.14
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.
- package/dist/chunk-424PT5DM.js +23 -0
- package/dist/chunk-424PT5DM.js.map +1 -0
- package/dist/chunk-PCAHVFSY.js +456 -0
- package/dist/chunk-PCAHVFSY.js.map +1 -0
- package/dist/components/Accordion/Accordion.css.js +7 -4
- package/dist/components/Accordion/Accordion.css.js.map +1 -1
- package/dist/components/Accordion/Accordion.js +8 -5
- package/dist/components/Accordion/Accordion.js.map +1 -1
- package/dist/components/Accordion/Accordion.spec.js +3 -2
- package/dist/components/Accordion/Accordion.spec.js.map +1 -1
- package/dist/components/Accordion/AccordionContent.css.js +7 -4
- package/dist/components/Accordion/AccordionContent.css.js.map +1 -1
- package/dist/components/Accordion/AccordionContent.js +22 -19
- package/dist/components/Accordion/AccordionContent.js.map +1 -1
- package/dist/components/Accordion/AccordionContext.js +5 -2
- package/dist/components/Accordion/AccordionContext.js.map +1 -1
- package/dist/components/Accordion/AccordionTrigger.css.js +7 -4
- package/dist/components/Accordion/AccordionTrigger.css.js.map +1 -1
- package/dist/components/Accordion/AccordionTrigger.js +7 -4
- package/dist/components/Accordion/AccordionTrigger.js.map +1 -1
- package/dist/components/Accordion/index.js +4 -3
- package/dist/components/Accordion/index.js.map +1 -1
- package/dist/components/Alert/index.js +7 -4
- package/dist/components/Alert/index.js.map +1 -1
- package/dist/components/Box/Box.css.js +6 -3
- package/dist/components/Box/Box.css.js.map +1 -1
- package/dist/components/Box/Box.spec.js +3 -2
- package/dist/components/Box/Box.spec.js.map +1 -1
- package/dist/components/Box/index.js +8 -5
- package/dist/components/Box/index.js.map +1 -1
- package/dist/components/Button/Button.css.js +15 -12
- package/dist/components/Button/Button.css.js.map +1 -1
- package/dist/components/Button/Button.spec.js +12 -5
- package/dist/components/Button/Button.spec.js.map +1 -1
- package/dist/components/Button/index.js +11 -8
- package/dist/components/Button/index.js.map +1 -1
- package/dist/components/Card/Card.css.js +11 -8
- package/dist/components/Card/Card.css.js.map +1 -1
- package/dist/components/Card/Card.js +7 -4
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/components/Card/Card.spec.js +11 -4
- package/dist/components/Card/Card.spec.js.map +1 -1
- package/dist/components/Card/CardContent.css.js +6 -3
- package/dist/components/Card/CardContent.css.js.map +1 -1
- package/dist/components/Card/CardContent.js +7 -4
- package/dist/components/Card/CardContent.js.map +1 -1
- package/dist/components/Card/CardInteraction.css.js +5 -2
- package/dist/components/Card/CardInteraction.css.js.map +1 -1
- package/dist/components/Card/CardInteraction.js +8 -5
- package/dist/components/Card/CardInteraction.js.map +1 -1
- package/dist/components/Card/CardThumbnail.css.js +5 -2
- package/dist/components/Card/CardThumbnail.css.js.map +1 -1
- package/dist/components/Card/CardThumbnail.js +7 -4
- package/dist/components/Card/CardThumbnail.js.map +1 -1
- package/dist/components/Card/index.js +5 -4
- package/dist/components/Card/index.js.map +1 -1
- package/dist/components/Chip/Chip.css.js +12 -9
- package/dist/components/Chip/Chip.css.js.map +1 -1
- package/dist/components/Chip/Chip.js +7 -4
- package/dist/components/Chip/Chip.js.map +1 -1
- package/dist/components/Chip/Chip.spec.js +3 -2
- package/dist/components/Chip/Chip.spec.js.map +1 -1
- package/dist/components/Chip/index.js +2 -1
- package/dist/components/Chip/index.js.map +1 -1
- package/dist/components/Confirm/index.js +6 -3
- package/dist/components/Confirm/index.js.map +1 -1
- package/dist/components/Dialog/Dialog.css.js +6 -3
- package/dist/components/Dialog/Dialog.css.js.map +1 -1
- package/dist/components/Dialog/Dialog.js +8 -5
- package/dist/components/Dialog/Dialog.js.map +1 -1
- package/dist/components/Dialog/Dialog.spec.js +11 -4
- package/dist/components/Dialog/Dialog.spec.js.map +1 -1
- package/dist/components/Dialog/DialogContent.css.js +8 -5
- package/dist/components/Dialog/DialogContent.css.js.map +1 -1
- package/dist/components/Dialog/DialogContent.js +8 -5
- package/dist/components/Dialog/DialogContent.js.map +1 -1
- package/dist/components/Dialog/DialogFooter.css.js +6 -3
- package/dist/components/Dialog/DialogFooter.css.js.map +1 -1
- package/dist/components/Dialog/DialogFooter.js +7 -4
- package/dist/components/Dialog/DialogFooter.js.map +1 -1
- package/dist/components/Dialog/DialogHeader.css.js +7 -4
- package/dist/components/Dialog/DialogHeader.css.js.map +1 -1
- package/dist/components/Dialog/DialogHeader.js +8 -5
- package/dist/components/Dialog/DialogHeader.js.map +1 -1
- package/dist/components/Dialog/index.js +5 -4
- package/dist/components/Dialog/index.js.map +1 -1
- package/dist/components/Navigation/Navigation.spec.js +4 -3
- package/dist/components/Navigation/Navigation.spec.js.map +1 -1
- package/dist/components/Navigation/NavigationAside.css.js +5 -2
- package/dist/components/Navigation/NavigationAside.css.js.map +1 -1
- package/dist/components/Navigation/NavigationAside.js +7 -4
- package/dist/components/Navigation/NavigationAside.js.map +1 -1
- package/dist/components/Navigation/NavigationBar.css.js +7 -4
- package/dist/components/Navigation/NavigationBar.css.js.map +1 -1
- package/dist/components/Navigation/NavigationBar.js +7 -4
- package/dist/components/Navigation/NavigationBar.js.map +1 -1
- package/dist/components/Navigation/NavigationContainer.css.js +4 -1
- package/dist/components/Navigation/NavigationContainer.css.js.map +1 -1
- package/dist/components/Navigation/NavigationContainer.js +7 -4
- package/dist/components/Navigation/NavigationContainer.js.map +1 -1
- package/dist/components/Navigation/NavigationDrawer.css.js +9 -6
- package/dist/components/Navigation/NavigationDrawer.css.js.map +1 -1
- package/dist/components/Navigation/NavigationDrawer.js +7 -4
- package/dist/components/Navigation/NavigationDrawer.js.map +1 -1
- package/dist/components/Navigation/NavigationItem.css.js +8 -5
- package/dist/components/Navigation/NavigationItem.css.js.map +1 -1
- package/dist/components/Navigation/NavigationItem.js +7 -4
- package/dist/components/Navigation/NavigationItem.js.map +1 -1
- package/dist/components/Navigation/NavigationLogo.css.js +5 -2
- package/dist/components/Navigation/NavigationLogo.css.js.map +1 -1
- package/dist/components/Navigation/NavigationLogo.js +7 -4
- package/dist/components/Navigation/NavigationLogo.js.map +1 -1
- package/dist/components/Navigation/NavigationMenu.css.js +8 -5
- package/dist/components/Navigation/NavigationMenu.css.js.map +1 -1
- package/dist/components/Navigation/NavigationMenu.js +7 -4
- package/dist/components/Navigation/NavigationMenu.js.map +1 -1
- package/dist/components/Navigation/index.js +8 -7
- package/dist/components/Navigation/index.js.map +1 -1
- package/dist/components/Range/Range.css.js +14 -11
- package/dist/components/Range/Range.css.js.map +1 -1
- package/dist/components/Range/Range.js +8 -5
- package/dist/components/Range/Range.js.map +1 -1
- package/dist/components/Range/Range.spec.js +3 -2
- package/dist/components/Range/Range.spec.js.map +1 -1
- package/dist/components/Range/index.js +2 -1
- package/dist/components/Range/index.js.map +1 -1
- package/dist/components/ScrollArea/ScrollArea.css.js +10 -7
- package/dist/components/ScrollArea/ScrollArea.css.js.map +1 -1
- package/dist/components/ScrollArea/ScrollArea.js +8 -5
- package/dist/components/ScrollArea/ScrollArea.js.map +1 -1
- package/dist/components/ScrollArea/ScrollArea.spec.js +3 -2
- package/dist/components/ScrollArea/ScrollArea.spec.js.map +1 -1
- package/dist/components/ScrollArea/index.js +2 -1
- package/dist/components/ScrollArea/index.js.map +1 -1
- package/dist/components/Select/Select.css.js +6 -3
- package/dist/components/Select/Select.css.js.map +1 -1
- package/dist/components/Select/Select.js +10 -7
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/Select/Select.spec.js +16 -9
- package/dist/components/Select/Select.spec.js.map +1 -1
- package/dist/components/Select/SelectContext.js +5 -2
- package/dist/components/Select/SelectContext.js.map +1 -1
- package/dist/components/Select/SelectOption.css.js +6 -3
- package/dist/components/Select/SelectOption.css.js.map +1 -1
- package/dist/components/Select/SelectOption.js +7 -4
- package/dist/components/Select/SelectOption.js.map +1 -1
- package/dist/components/Select/SelectOptionList.css.js +7 -4
- package/dist/components/Select/SelectOptionList.css.js.map +1 -1
- package/dist/components/Select/SelectOptionList.js +13 -10
- package/dist/components/Select/SelectOptionList.js.map +1 -1
- package/dist/components/Select/SelectTrigger.css.js +7 -4
- package/dist/components/Select/SelectTrigger.css.js.map +1 -1
- package/dist/components/Select/SelectTrigger.js +10 -7
- package/dist/components/Select/SelectTrigger.js.map +1 -1
- package/dist/components/Select/index.js +3 -2
- package/dist/components/Select/index.js.map +1 -1
- package/dist/components/Skeleton/Skeleton.css.js +7 -4
- package/dist/components/Skeleton/Skeleton.css.js.map +1 -1
- package/dist/components/Skeleton/Skeleton.spec.js +3 -2
- package/dist/components/Skeleton/Skeleton.spec.js.map +1 -1
- package/dist/components/Skeleton/index.js +7 -4
- package/dist/components/Skeleton/index.js.map +1 -1
- package/dist/components/Table/Table.css.js +6 -3
- package/dist/components/Table/Table.css.js.map +1 -1
- package/dist/components/Table/Table.js +7 -4
- package/dist/components/Table/Table.js.map +1 -1
- package/dist/components/Table/Table.spec.js +3 -2
- package/dist/components/Table/Table.spec.js.map +1 -1
- package/dist/components/Table/TableBody.js +6 -3
- package/dist/components/Table/TableBody.js.map +1 -1
- package/dist/components/Table/TableCell.css.js +8 -5
- package/dist/components/Table/TableCell.css.js.map +1 -1
- package/dist/components/Table/TableCell.js +8 -5
- package/dist/components/Table/TableCell.js.map +1 -1
- package/dist/components/Table/TableHead.css.js +6 -3
- package/dist/components/Table/TableHead.css.js.map +1 -1
- package/dist/components/Table/TableHead.js +8 -5
- package/dist/components/Table/TableHead.js.map +1 -1
- package/dist/components/Table/TableHeader.js +6 -3
- package/dist/components/Table/TableHeader.js.map +1 -1
- package/dist/components/Table/TableRow.css.js +5 -2
- package/dist/components/Table/TableRow.css.js.map +1 -1
- package/dist/components/Table/TableRow.js +7 -4
- package/dist/components/Table/TableRow.js.map +1 -1
- package/dist/components/Table/index.js +7 -6
- package/dist/components/Table/index.js.map +1 -1
- package/dist/components/Tabs/Tabs.js +7 -4
- package/dist/components/Tabs/Tabs.js.map +1 -1
- package/dist/components/Tabs/Tabs.spec.js +18 -11
- package/dist/components/Tabs/Tabs.spec.js.map +1 -1
- package/dist/components/Tabs/TabsContent.js +7 -4
- package/dist/components/Tabs/TabsContent.js.map +1 -1
- package/dist/components/Tabs/TabsList.css.js +6 -3
- package/dist/components/Tabs/TabsList.css.js.map +1 -1
- package/dist/components/Tabs/TabsList.js +7 -4
- package/dist/components/Tabs/TabsList.js.map +1 -1
- package/dist/components/Tabs/TabsProvider.js +5 -2
- package/dist/components/Tabs/TabsProvider.js.map +1 -1
- package/dist/components/Tabs/TabsTrigger.css.js +6 -3
- package/dist/components/Tabs/TabsTrigger.css.js.map +1 -1
- package/dist/components/Tabs/TabsTrigger.js +8 -5
- package/dist/components/Tabs/TabsTrigger.js.map +1 -1
- package/dist/components/Tabs/index.js +5 -4
- package/dist/components/Tabs/index.js.map +1 -1
- package/dist/components/TextField/TextField.css.js +11 -8
- package/dist/components/TextField/TextField.css.js.map +1 -1
- package/dist/components/TextField/TextField.spec.js +3 -2
- package/dist/components/TextField/TextField.spec.js.map +1 -1
- package/dist/components/TextField/index.js +7 -4
- package/dist/components/TextField/index.js.map +1 -1
- package/dist/components/Toast/Toast.css.js +12 -9
- package/dist/components/Toast/Toast.css.js.map +1 -1
- package/dist/components/Toast/Toast.spec.js +3 -2
- package/dist/components/Toast/Toast.spec.js.map +1 -1
- package/dist/components/Toast/index.js +8 -5
- package/dist/components/Toast/index.js.map +1 -1
- package/dist/components/Typography/Typography.css.js +5 -2
- package/dist/components/Typography/Typography.css.js.map +1 -1
- package/dist/components/Typography/Typography.spec.js +12 -5
- package/dist/components/Typography/Typography.spec.js.map +1 -1
- package/dist/components/Typography/index.js +8 -5
- package/dist/components/Typography/index.js.map +1 -1
- package/dist/components/index.js +19 -18
- package/dist/components/index.js.map +1 -1
- package/dist/contexts/UIProvider.js +7 -4
- package/dist/contexts/UIProvider.js.map +1 -1
- package/dist/contexts/index.js +2 -1
- package/dist/contexts/index.js.map +1 -1
- package/dist/hooks/index.js +6 -5
- package/dist/hooks/index.js.map +1 -1
- package/dist/hooks/useDialog/index.js +6 -3
- package/dist/hooks/useDialog/index.js.map +1 -1
- package/dist/hooks/useDialog/useDialog.spec.js +20 -13
- package/dist/hooks/useDialog/useDialog.spec.js.map +1 -1
- package/dist/hooks/useMouseScroll/index.js +4 -1
- package/dist/hooks/useMouseScroll/index.js.map +1 -1
- package/dist/hooks/usePointerSlider/index.js +4 -1
- package/dist/hooks/usePointerSlider/index.js.map +1 -1
- package/dist/hooks/useRipple/index.js +22 -19
- package/dist/hooks/useRipple/index.js.map +1 -1
- package/dist/hooks/useRipple/ripple.css.js +6 -3
- package/dist/hooks/useRipple/ripple.css.js.map +1 -1
- package/dist/hooks/useToast/ToastContainer.css.js +4 -1
- package/dist/hooks/useToast/ToastContainer.css.js.map +1 -1
- package/dist/hooks/useToast/ToastContainer.js +5 -2
- package/dist/hooks/useToast/ToastContainer.js.map +1 -1
- package/dist/hooks/useToast/ToastProvider.js +9 -6
- package/dist/hooks/useToast/ToastProvider.js.map +1 -1
- package/dist/hooks/useToast/index.js +5 -2
- package/dist/hooks/useToast/index.js.map +1 -1
- package/dist/index.js +9 -8
- package/dist/index.js.map +1 -1
- package/dist/styles/globalStyle.css.js +2 -1
- package/dist/styles/globalStyle.css.js.map +1 -1
- package/dist/styles/index.js +5 -4
- package/dist/styles/index.js.map +1 -1
- package/dist/styles/layers.css.js +5 -2
- package/dist/styles/layers.css.js.map +1 -1
- package/dist/styles/overlay.css.js +6 -3
- package/dist/styles/overlay.css.js.map +1 -1
- package/dist/styles/sprinkles.css.js +13 -10
- package/dist/styles/sprinkles.css.js.map +1 -1
- package/dist/styles/sx.js +5 -2
- package/dist/styles/sx.js.map +1 -1
- package/dist/tests/uiTest.js +15 -9
- package/dist/tests/uiTest.js.map +1 -1
- package/dist/themes/darkTheme.css.js +5 -2
- package/dist/themes/darkTheme.css.js.map +1 -1
- package/dist/themes/index.js +6 -3
- package/dist/themes/index.js.map +1 -1
- package/dist/themes/lightTheme.css.js +5 -2
- package/dist/themes/lightTheme.css.js.map +1 -1
- package/dist/themes/theme.css.js +7 -4
- package/dist/themes/theme.css.js.map +1 -1
- package/dist/tokens/index.js +8 -5
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/scale/color.js +6 -3
- package/dist/tokens/scale/color.js.map +1 -1
- package/dist/tokens/semantic/breakpoint.js +4 -1
- package/dist/tokens/semantic/breakpoint.js.map +1 -1
- package/dist/tokens/semantic/color.js +4 -1
- package/dist/tokens/semantic/color.js.map +1 -1
- package/dist/tokens/semantic/spacing.js +4 -1
- package/dist/tokens/semantic/spacing.js.map +1 -1
- package/dist/tokens/semantic/typography.js +4 -1
- package/dist/tokens/semantic/typography.js.map +1 -1
- package/dist/types/index.js +2 -1
- package/dist/types/index.js.map +1 -1
- package/dist/utils/index.js +2 -1
- package/dist/utils/index.js.map +1 -1
- package/dist/utils/sprinklesUtils.js +6 -3
- package/dist/utils/sprinklesUtils.js.map +1 -1
- package/dist/utils/styleUtils.css.js +6 -3
- package/dist/utils/styleUtils.css.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Range/Range.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useEffect, useRef } from 'react';\n\nimport clsx from 'clsx';\n\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport { usePointerSlider } from '../../hooks/usePointerSlider';\nimport * as s from './Range.css';\n\ninterface RangeProps\n extends Omit<UIComponent<'div', typeof s.range>, 'children' | 'onChange'> {\n min: number;\n max: number;\n defaultMinValue: number;\n defaultMaxValue: number;\n onChange: (min: number, max: number) => void;\n}\n\nexport const Range = forwardRef<HTMLDivElement, RangeProps>(\n (\n {\n min,\n max,\n defaultMinValue,\n defaultMaxValue,\n onChange,\n className,\n color = 'primary',\n size = 'md',\n sx: propSx,\n ...props\n },\n ref,\n ) => {\n const barRef = useRef<HTMLDivElement>(null);\n const leftThumbRef = useRef<HTMLSpanElement>(null);\n const rightThumbRef = useRef<HTMLSpanElement>(null);\n const leftValue = usePointerSlider(leftThumbRef, {\n min,\n max,\n defaultValue: defaultMinValue,\n }),\n rightValue = usePointerSlider(rightThumbRef, {\n min,\n max,\n defaultValue: defaultMaxValue,\n });\n const initRef = useRef<boolean>(false);\n\n const minValue = Math.min(leftValue, rightValue),\n maxValue = Math.max(leftValue, rightValue);\n\n useEffect(() => {\n if (!initRef.current) {\n initRef.current = true;\n return;\n }\n\n onChange(minValue, maxValue);\n // eslint-disable-next-line\n }, [minValue, maxValue]);\n\n return (\n <div\n ref={ref}\n className={clsx(s.range({ color, size }), className, sx(propSx))}\n {...props}\n >\n <div className={s.bar}>\n <div\n ref={barRef}\n className={s.fill}\n style={{\n left: `${((minValue - min) / (max - min)) * 100}%`,\n right: `${(1 - (maxValue - min) / (max - min)) * 100}%`,\n }}\n />\n </div>\n <span ref={leftThumbRef} className={s.thumb} />\n <span ref={rightThumbRef} className={s.thumb} />\n </div>\n );\n },\n);\nRange.displayName = 'Range';\n\nexport { s as rangeCss };\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Range/Range.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useEffect, useRef } from 'react';\n\nimport clsx from 'clsx';\n\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport { usePointerSlider } from '../../hooks/usePointerSlider';\nimport * as s from './Range.css';\n\ninterface RangeProps\n extends Omit<UIComponent<'div', typeof s.range>, 'children' | 'onChange'> {\n min: number;\n max: number;\n defaultMinValue: number;\n defaultMaxValue: number;\n onChange: (min: number, max: number) => void;\n}\n\nexport const Range = forwardRef<HTMLDivElement, RangeProps>(\n (\n {\n min,\n max,\n defaultMinValue,\n defaultMaxValue,\n onChange,\n className,\n color = 'primary',\n size = 'md',\n sx: propSx,\n ...props\n },\n ref,\n ) => {\n const barRef = useRef<HTMLDivElement>(null);\n const leftThumbRef = useRef<HTMLSpanElement>(null);\n const rightThumbRef = useRef<HTMLSpanElement>(null);\n const leftValue = usePointerSlider(leftThumbRef, {\n min,\n max,\n defaultValue: defaultMinValue,\n }),\n rightValue = usePointerSlider(rightThumbRef, {\n min,\n max,\n defaultValue: defaultMaxValue,\n });\n const initRef = useRef<boolean>(false);\n\n const minValue = Math.min(leftValue, rightValue),\n maxValue = Math.max(leftValue, rightValue);\n\n useEffect(() => {\n if (!initRef.current) {\n initRef.current = true;\n return;\n }\n\n onChange(minValue, maxValue);\n // eslint-disable-next-line\n }, [minValue, maxValue]);\n\n return (\n <div\n ref={ref}\n className={clsx(s.range({ color, size }), className, sx(propSx))}\n {...props}\n >\n <div className={s.bar}>\n <div\n ref={barRef}\n className={s.fill}\n style={{\n left: `${((minValue - min) / (max - min)) * 100}%`,\n right: `${(1 - (maxValue - min) / (max - min)) * 100}%`,\n }}\n />\n </div>\n <span ref={leftThumbRef} className={s.thumb} />\n <span ref={rightThumbRef} className={s.thumb} />\n </div>\n );\n },\n);\nRange.displayName = 'Range';\n\nexport { s as rangeCss };\n"],"mappings":";;;;AAEA,SAAS,YAAY,WAAW,cAAc;AAE9C,OAAO,UAAU;AAEjB,SAAS,UAAU;AAGnB,SAAS,wBAAwB;AACjC,YAAY,OAAO;AAwDb,SAMI,KANJ;AA7CC,IAAM,QAAQ;AAAA,EACnB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,SAAS,OAAuB,IAAI;AAC1C,UAAM,eAAe,OAAwB,IAAI;AACjD,UAAM,gBAAgB,OAAwB,IAAI;AAClD,UAAM,YAAY,iBAAiB,cAAc;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,cAAc;AAAA,IAChB,CAAC,GACD,aAAa,iBAAiB,eAAe;AAAA,MAC3C;AAAA,MACA;AAAA,MACA,cAAc;AAAA,IAChB,CAAC;AACH,UAAM,UAAU,OAAgB,KAAK;AAErC,UAAM,WAAW,KAAK,IAAI,WAAW,UAAU,GAC7C,WAAW,KAAK,IAAI,WAAW,UAAU;AAE3C,cAAU,MAAM;AACd,UAAI,CAAC,QAAQ,SAAS;AACpB,gBAAQ,UAAU;AAClB;AAAA,MACF;AAEA,eAAS,UAAU,QAAQ;AAAA,IAE7B,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAO,QAAM,EAAE,OAAO,KAAK,CAAC,GAAG,WAAW,GAAG,MAAM,CAAC;AAAA,QAC9D,GAAG;AAAA,QAEJ;AAAA,8BAAC,SAAI,WAAa,OAChB;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,WAAa;AAAA,cACb,OAAO;AAAA,gBACL,MAAM,IAAK,WAAW,QAAQ,MAAM,OAAQ,GAAG;AAAA,gBAC/C,OAAO,IAAI,KAAK,WAAW,QAAQ,MAAM,QAAQ,GAAG;AAAA,cACtD;AAAA;AAAA,UACF,GACF;AAAA,UACA,oBAAC,UAAK,KAAK,cAAc,WAAa,SAAO;AAAA,UAC7C,oBAAC,UAAK,KAAK,eAAe,WAAa,SAAO;AAAA;AAAA;AAAA,IAChD;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;","names":[]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
1
|
+
// src/components/Range/Range.spec.tsx
|
|
2
|
+
import { uiTest } from "../../tests/uiTest.mjs";
|
|
3
|
+
import { Range } from "./Range.mjs";
|
|
3
4
|
describe("Range \uCEF4\uD3EC\uB10C\uD2B8", () => {
|
|
4
5
|
uiTest(Range, "Range");
|
|
5
6
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Range/Range.spec.tsx"],"sourcesContent":["import { uiTest } from '../../tests/uiTest';\nimport { Range } from './Range';\n\ndescribe('Range 컴포넌트', () => {\n uiTest(Range, 'Range');\n});\n"],"mappings":"AAAA,SAAS,cAAc;AACvB,SAAS,aAAa;AAEtB,SAAS,kCAAc,MAAM;AAC3B,SAAO,OAAO,OAAO;AACvB,CAAC;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Range/Range.spec.tsx"],"sourcesContent":["import { uiTest } from '../../tests/uiTest';\nimport { Range } from './Range';\n\ndescribe('Range 컴포넌트', () => {\n uiTest(Range, 'Range');\n});\n"],"mappings":";AAAA,SAAS,cAAc;AACvB,SAAS,aAAa;AAEtB,SAAS,kCAAc,MAAM;AAC3B,SAAO,OAAO,OAAO;AACvB,CAAC;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Range/index.ts"],"sourcesContent":["export * from './Range';\n"],"mappings":"AAAA,cAAc;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Range/index.ts"],"sourcesContent":["export * from './Range';\n"],"mappings":";AAAA,cAAc;","names":[]}
|
|
@@ -1,33 +1,36 @@
|
|
|
1
|
+
import "../../chunk-424PT5DM.js";
|
|
2
|
+
|
|
3
|
+
// src/components/ScrollArea/ScrollArea.css.ts
|
|
1
4
|
import { style } from "@vanilla-extract/css";
|
|
2
|
-
import { styleWithLayer } from "#styleUtils";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
+
import { styleWithLayer } from "#styleUtils.mjs";
|
|
6
|
+
var MASK_SIZE = "3rem";
|
|
7
|
+
var scrollArea = styleWithLayer({
|
|
5
8
|
width: "100%",
|
|
6
9
|
overflowX: "scroll",
|
|
7
10
|
"::-webkit-scrollbar": {
|
|
8
11
|
display: "none"
|
|
9
12
|
}
|
|
10
13
|
});
|
|
11
|
-
|
|
14
|
+
var maskLeft = style({
|
|
12
15
|
maskImage: `linear-gradient(to left,
|
|
13
16
|
black 0%,
|
|
14
17
|
black calc(100% - ${MASK_SIZE}),
|
|
15
18
|
transparent 100%)`
|
|
16
19
|
});
|
|
17
|
-
|
|
20
|
+
var maskRight = style({
|
|
18
21
|
maskImage: `linear-gradient(to right,
|
|
19
22
|
black 0%,
|
|
20
23
|
black calc(100% - ${MASK_SIZE}),
|
|
21
24
|
transparent 100%)`
|
|
22
25
|
});
|
|
23
|
-
|
|
26
|
+
var maskBoth = style({
|
|
24
27
|
maskImage: `linear-gradient(to right,
|
|
25
28
|
transparent 0%,
|
|
26
29
|
black ${MASK_SIZE},
|
|
27
30
|
black calc(100% - ${MASK_SIZE}),
|
|
28
31
|
transparent 100%)`
|
|
29
32
|
});
|
|
30
|
-
|
|
33
|
+
var wrapper = style({
|
|
31
34
|
width: "max-content"
|
|
32
35
|
});
|
|
33
36
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ScrollArea/ScrollArea.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { styleWithLayer } from '#styleUtils';\n\nconst MASK_SIZE = '3rem';\n\nexport const scrollArea = styleWithLayer({\n width: '100%',\n overflowX: 'scroll',\n\n '::-webkit-scrollbar': {\n display: 'none',\n },\n});\n\nexport const maskLeft = style({\n maskImage: `linear-gradient(to left,\n black 0%,\n black calc(100% - ${MASK_SIZE}),\n transparent 100%)`,\n});\n\nexport const maskRight = style({\n maskImage: `linear-gradient(to right,\n black 0%,\n black calc(100% - ${MASK_SIZE}),\n transparent 100%)`,\n});\n\nexport const maskBoth = style({\n maskImage: `linear-gradient(to right,\n transparent 0%,\n black ${MASK_SIZE},\n black calc(100% - ${MASK_SIZE}),\n transparent 100%)`,\n});\n\nexport const wrapper = style({\n width: 'max-content',\n});\n"],"mappings":"AAAA,SAAS,aAAa;AAEtB,SAAS,sBAAsB;AAE/B,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ScrollArea/ScrollArea.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { styleWithLayer } from '#styleUtils';\n\nconst MASK_SIZE = '3rem';\n\nexport const scrollArea = styleWithLayer({\n width: '100%',\n overflowX: 'scroll',\n\n '::-webkit-scrollbar': {\n display: 'none',\n },\n});\n\nexport const maskLeft = style({\n maskImage: `linear-gradient(to left,\n black 0%,\n black calc(100% - ${MASK_SIZE}),\n transparent 100%)`,\n});\n\nexport const maskRight = style({\n maskImage: `linear-gradient(to right,\n black 0%,\n black calc(100% - ${MASK_SIZE}),\n transparent 100%)`,\n});\n\nexport const maskBoth = style({\n maskImage: `linear-gradient(to right,\n transparent 0%,\n black ${MASK_SIZE},\n black calc(100% - ${MASK_SIZE}),\n transparent 100%)`,\n});\n\nexport const wrapper = style({\n width: 'max-content',\n});\n"],"mappings":";;;AAAA,SAAS,aAAa;AAEtB,SAAS,sBAAsB;AAE/B,IAAM,YAAY;AAEX,IAAM,aAAa,eAAe;AAAA,EACvC,OAAO;AAAA,EACP,WAAW;AAAA,EAEX,uBAAuB;AAAA,IACrB,SAAS;AAAA,EACX;AACF,CAAC;AAEM,IAAM,WAAW,MAAM;AAAA,EAC5B,WAAW;AAAA;AAAA,sBAES,SAAS;AAAA;AAE/B,CAAC;AAEM,IAAM,YAAY,MAAM;AAAA,EAC7B,WAAW;AAAA;AAAA,sBAES,SAAS;AAAA;AAE/B,CAAC;AAEM,IAAM,WAAW,MAAM;AAAA,EAC5B,WAAW;AAAA;AAAA,UAEH,SAAS;AAAA,sBACG,SAAS;AAAA;AAE/B,CAAC;AAEM,IAAM,UAAU,MAAM;AAAA,EAC3B,OAAO;AACT,CAAC;","names":[]}
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import
|
|
2
|
+
import "../../chunk-424PT5DM.js";
|
|
3
|
+
|
|
4
|
+
// src/components/ScrollArea/ScrollArea.tsx
|
|
3
5
|
import { forwardRef, useEffect, useRef, useState } from "react";
|
|
4
6
|
import { useCombinedRefs } from "@kimdw-rtk/utils";
|
|
5
7
|
import clsx from "clsx";
|
|
6
|
-
import { useMouseScroll } from "#hooks/useMouseScroll";
|
|
7
|
-
import { sx } from "#styles";
|
|
8
|
-
import * as s from "./ScrollArea.css";
|
|
9
|
-
|
|
8
|
+
import { useMouseScroll } from "#hooks/useMouseScroll.mjs";
|
|
9
|
+
import { sx } from "#styles.mjs";
|
|
10
|
+
import * as s from "./ScrollArea.css.mjs";
|
|
11
|
+
import { jsx } from "react/jsx-runtime";
|
|
12
|
+
var ScrollArea = forwardRef(
|
|
10
13
|
({ children, className, sx: propSx, ...props }, ref) => {
|
|
11
14
|
const scrollAreaRef = useRef(null);
|
|
12
15
|
const targetRef = useCombinedRefs(ref, scrollAreaRef);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useEffect, useRef, useState } from 'react';\n\nimport { useCombinedRefs } from '@kimdw-rtk/utils';\nimport clsx from 'clsx';\n\nimport { useMouseScroll } from '#hooks/useMouseScroll';\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './ScrollArea.css';\n\ntype ScrollAreaProps = UIComponent<'div'>;\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(\n ({ children, className, sx: propSx, ...props }, ref) => {\n const scrollAreaRef = useRef<HTMLDivElement>(null);\n const targetRef = useCombinedRefs(ref, scrollAreaRef);\n const [hasLeftSpace, setHasLeftSpace] = useState<boolean>(false);\n const [hasRightSpace, setHasRightSpace] = useState<boolean>(true);\n useMouseScroll(scrollAreaRef);\n\n useEffect(() => {\n const element = scrollAreaRef.current;\n\n if (element === null) {\n return;\n }\n\n const handleScroll = () => {\n setHasLeftSpace(element.scrollLeft !== 0);\n setHasRightSpace(\n Math.round(element.scrollLeft + element.clientWidth) <\n element.scrollWidth,\n );\n };\n\n handleScroll();\n\n element.addEventListener('scroll', handleScroll);\n\n return () => {\n element.removeEventListener('scroll', handleScroll);\n };\n }, []);\n\n return (\n <div\n ref={targetRef}\n className={clsx(\n s.scrollArea,\n className,\n sx(propSx),\n hasLeftSpace && hasRightSpace && s.maskBoth,\n hasLeftSpace && s.maskLeft,\n hasRightSpace && s.maskRight,\n )}\n {...props}\n >\n <div className={s.wrapper}>{children}</div>\n </div>\n );\n },\n);\nScrollArea.displayName = 'ScrollArea';\n\nexport { s as scrollAreaCss };\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useEffect, useRef, useState } from 'react';\n\nimport { useCombinedRefs } from '@kimdw-rtk/utils';\nimport clsx from 'clsx';\n\nimport { useMouseScroll } from '#hooks/useMouseScroll';\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './ScrollArea.css';\n\ntype ScrollAreaProps = UIComponent<'div'>;\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(\n ({ children, className, sx: propSx, ...props }, ref) => {\n const scrollAreaRef = useRef<HTMLDivElement>(null);\n const targetRef = useCombinedRefs(ref, scrollAreaRef);\n const [hasLeftSpace, setHasLeftSpace] = useState<boolean>(false);\n const [hasRightSpace, setHasRightSpace] = useState<boolean>(true);\n useMouseScroll(scrollAreaRef);\n\n useEffect(() => {\n const element = scrollAreaRef.current;\n\n if (element === null) {\n return;\n }\n\n const handleScroll = () => {\n setHasLeftSpace(element.scrollLeft !== 0);\n setHasRightSpace(\n Math.round(element.scrollLeft + element.clientWidth) <\n element.scrollWidth,\n );\n };\n\n handleScroll();\n\n element.addEventListener('scroll', handleScroll);\n\n return () => {\n element.removeEventListener('scroll', handleScroll);\n };\n }, []);\n\n return (\n <div\n ref={targetRef}\n className={clsx(\n s.scrollArea,\n className,\n sx(propSx),\n hasLeftSpace && hasRightSpace && s.maskBoth,\n hasLeftSpace && s.maskLeft,\n hasRightSpace && s.maskRight,\n )}\n {...props}\n >\n <div className={s.wrapper}>{children}</div>\n </div>\n );\n },\n);\nScrollArea.displayName = 'ScrollArea';\n\nexport { s as scrollAreaCss };\n"],"mappings":";;;;AAEA,SAAS,YAAY,WAAW,QAAQ,gBAAgB;AAExD,SAAS,uBAAuB;AAChC,OAAO,UAAU;AAEjB,SAAS,sBAAsB;AAC/B,SAAS,UAAU;AAGnB,YAAY,OAAO;AAiDX;AA7CD,IAAM,aAAa;AAAA,EACxB,CAAC,EAAE,UAAU,WAAW,IAAI,QAAQ,GAAG,MAAM,GAAG,QAAQ;AACtD,UAAM,gBAAgB,OAAuB,IAAI;AACjD,UAAM,YAAY,gBAAgB,KAAK,aAAa;AACpD,UAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AAC/D,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAAkB,IAAI;AAChE,mBAAe,aAAa;AAE5B,cAAU,MAAM;AACd,YAAM,UAAU,cAAc;AAE9B,UAAI,YAAY,MAAM;AACpB;AAAA,MACF;AAEA,YAAM,eAAe,MAAM;AACzB,wBAAgB,QAAQ,eAAe,CAAC;AACxC;AAAA,UACE,KAAK,MAAM,QAAQ,aAAa,QAAQ,WAAW,IACjD,QAAQ;AAAA,QACZ;AAAA,MACF;AAEA,mBAAa;AAEb,cAAQ,iBAAiB,UAAU,YAAY;AAE/C,aAAO,MAAM;AACX,gBAAQ,oBAAoB,UAAU,YAAY;AAAA,MACpD;AAAA,IACF,GAAG,CAAC,CAAC;AAEL,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW;AAAA,UACP;AAAA,UACF;AAAA,UACA,GAAG,MAAM;AAAA,UACT,gBAAgB,iBAAmB;AAAA,UACnC,gBAAkB;AAAA,UAClB,iBAAmB;AAAA,QACrB;AAAA,QACC,GAAG;AAAA,QAEJ,8BAAC,SAAI,WAAa,WAAU,UAAS;AAAA;AAAA,IACvC;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;","names":[]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
1
|
+
// src/components/ScrollArea/ScrollArea.spec.tsx
|
|
2
|
+
import { uiTest } from "../../tests/uiTest.mjs";
|
|
3
|
+
import { ScrollArea } from "./ScrollArea.mjs";
|
|
3
4
|
describe("ScrollArea \uCEF4\uD3EC\uB10C\uD2B8", () => {
|
|
4
5
|
uiTest(ScrollArea, "ScrollArea");
|
|
5
6
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ScrollArea/ScrollArea.spec.tsx"],"sourcesContent":["import { uiTest } from '../../tests/uiTest';\nimport { ScrollArea } from './ScrollArea';\n\ndescribe('ScrollArea 컴포넌트', () => {\n uiTest(ScrollArea, 'ScrollArea');\n});\n"],"mappings":"AAAA,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAE3B,SAAS,uCAAmB,MAAM;AAChC,SAAO,YAAY,YAAY;AACjC,CAAC;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ScrollArea/ScrollArea.spec.tsx"],"sourcesContent":["import { uiTest } from '../../tests/uiTest';\nimport { ScrollArea } from './ScrollArea';\n\ndescribe('ScrollArea 컴포넌트', () => {\n uiTest(ScrollArea, 'ScrollArea');\n});\n"],"mappings":";AAAA,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAE3B,SAAS,uCAAmB,MAAM;AAChC,SAAO,YAAY,YAAY;AACjC,CAAC;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ScrollArea/index.ts"],"sourcesContent":["export * from './ScrollArea';\n"],"mappings":"AAAA,cAAc;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ScrollArea/index.ts"],"sourcesContent":["export * from './ScrollArea';\n"],"mappings":";AAAA,cAAc;","names":[]}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import "../../chunk-424PT5DM.js";
|
|
2
|
+
|
|
3
|
+
// src/components/Select/Select.css.ts
|
|
4
|
+
import { recipeWithLayer } from "#styleUtils.mjs";
|
|
5
|
+
import { typography } from "#tokens.mjs";
|
|
6
|
+
var select = recipeWithLayer({
|
|
4
7
|
base: {
|
|
5
8
|
position: "relative"
|
|
6
9
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Select/Select.css.ts"],"sourcesContent":["import { recipeWithLayer } from '#styleUtils';\nimport { typography } from '#tokens';\n\nexport const select = recipeWithLayer({\n base: {\n position: 'relative',\n },\n\n variants: {\n size: {\n sm: {\n fontSize: typography.size.sm,\n },\n md: {\n fontSize: typography.size.md,\n },\n lg: {\n fontSize: typography.size.lg,\n },\n },\n },\n});\n"],"mappings":"AAAA,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAEpB,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Select/Select.css.ts"],"sourcesContent":["import { recipeWithLayer } from '#styleUtils';\nimport { typography } from '#tokens';\n\nexport const select = recipeWithLayer({\n base: {\n position: 'relative',\n },\n\n variants: {\n size: {\n sm: {\n fontSize: typography.size.sm,\n },\n md: {\n fontSize: typography.size.md,\n },\n lg: {\n fontSize: typography.size.lg,\n },\n },\n },\n});\n"],"mappings":";;;AAAA,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAEpB,IAAM,SAAS,gBAAgB;AAAA,EACpC,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EAEA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,QACF,UAAU,WAAW,KAAK;AAAA,MAC5B;AAAA,MACA,IAAI;AAAA,QACF,UAAU,WAAW,KAAK;AAAA,MAC5B;AAAA,MACA,IAAI;AAAA,QACF,UAAU,WAAW,KAAK;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AACF,CAAC;","names":[]}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import
|
|
2
|
+
import "../../chunk-424PT5DM.js";
|
|
3
|
+
|
|
4
|
+
// src/components/Select/Select.tsx
|
|
3
5
|
import {
|
|
4
6
|
forwardRef,
|
|
5
7
|
useEffect,
|
|
@@ -8,12 +10,13 @@ import {
|
|
|
8
10
|
} from "react";
|
|
9
11
|
import { useCombinedRefs } from "@kimdw-rtk/utils";
|
|
10
12
|
import clsx from "clsx";
|
|
11
|
-
import { sx } from "#styles";
|
|
12
|
-
import * as s from "./Select.css";
|
|
13
|
-
import { SelectContext, selectReducer } from "./SelectContext";
|
|
14
|
-
import SelectOptionList from "./SelectOptionList";
|
|
15
|
-
import SelectTrigger from "./SelectTrigger";
|
|
16
|
-
|
|
13
|
+
import { sx } from "#styles.mjs";
|
|
14
|
+
import * as s from "./Select.css.mjs";
|
|
15
|
+
import { SelectContext, selectReducer } from "./SelectContext.mjs";
|
|
16
|
+
import SelectOptionList from "./SelectOptionList.mjs";
|
|
17
|
+
import SelectTrigger from "./SelectTrigger.mjs";
|
|
18
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
19
|
+
var Select = forwardRef(
|
|
17
20
|
({
|
|
18
21
|
children,
|
|
19
22
|
className,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport {\n forwardRef,\n useEffect,\n useReducer,\n useRef,\n type ComponentProps,\n type CSSProperties,\n type RefObject,\n} from 'react';\n\nimport { useCombinedRefs } from '@kimdw-rtk/utils';\nimport clsx from 'clsx';\n\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './Select.css';\nimport { SelectContext, selectReducer } from './SelectContext';\nimport SelectOptionList from './SelectOptionList';\nimport SelectTrigger from './SelectTrigger';\n\ninterface SelectProps\n extends Omit<UIComponent<'div', typeof s.select>, 'ref' | 'onChange'> {\n ref?: RefObject<{ value?: string } | null>;\n name?: string;\n width?: CSSProperties['width'];\n defaultValue?: string;\n variant?: ComponentProps<typeof SelectTrigger>['variant'];\n onChange?: (value: string | undefined) => void;\n}\n\nexport const Select = forwardRef<HTMLDivElement, SelectProps>(\n (\n {\n children,\n className,\n style,\n name,\n defaultValue,\n width = '100%',\n size = 'md',\n sx: propSx,\n variant = 'outlined',\n onChange,\n ...props\n },\n ref,\n ) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const targetRef = useCombinedRefs(ref, containerRef);\n const [state, dispatch] = useReducer(selectReducer, {\n isActive: false,\n containerRef,\n defaultValue,\n items: new Map(),\n });\n\n useEffect(() => {\n const container = containerRef.current;\n\n if (!container) {\n return;\n }\n\n const handleOutsideClick = (e: MouseEvent) => {\n if (container.contains(e.target as Node) || !state.isActive) {\n return;\n }\n\n dispatch({ type: 'TOGGLE' });\n };\n\n window.addEventListener('mousedown', handleOutsideClick);\n\n return () => {\n window.removeEventListener('mousedown', handleOutsideClick);\n };\n }, [state.isActive, dispatch]);\n\n useEffect(() => {\n if (!onChange || !state.items.size) {\n return;\n }\n\n onChange(state.selected);\n //eslint-disable-next-line\n }, [state.selected]);\n\n return (\n <SelectContext.Provider value={{ state, dispatch }}>\n <div\n ref={targetRef}\n style={{ ...style, width }}\n className={clsx(s.select({ size }), className, sx(propSx))}\n {...props}\n >\n <SelectTrigger variant={variant}>\n {state.selected !== null && state.items.get(state.selected || '')}\n </SelectTrigger>\n <SelectOptionList>{children}</SelectOptionList>\n <input type=\"hidden\" name={name} value={state.selected || ''} />\n </div>\n </SelectContext.Provider>\n );\n },\n);\nSelect.displayName = 'Select';\n\nexport { s as selectCss };\n"],"mappings":";
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport {\n forwardRef,\n useEffect,\n useReducer,\n useRef,\n type ComponentProps,\n type CSSProperties,\n type RefObject,\n} from 'react';\n\nimport { useCombinedRefs } from '@kimdw-rtk/utils';\nimport clsx from 'clsx';\n\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './Select.css';\nimport { SelectContext, selectReducer } from './SelectContext';\nimport SelectOptionList from './SelectOptionList';\nimport SelectTrigger from './SelectTrigger';\n\ninterface SelectProps\n extends Omit<UIComponent<'div', typeof s.select>, 'ref' | 'onChange'> {\n ref?: RefObject<{ value?: string } | null>;\n name?: string;\n width?: CSSProperties['width'];\n defaultValue?: string;\n variant?: ComponentProps<typeof SelectTrigger>['variant'];\n onChange?: (value: string | undefined) => void;\n}\n\nexport const Select = forwardRef<HTMLDivElement, SelectProps>(\n (\n {\n children,\n className,\n style,\n name,\n defaultValue,\n width = '100%',\n size = 'md',\n sx: propSx,\n variant = 'outlined',\n onChange,\n ...props\n },\n ref,\n ) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const targetRef = useCombinedRefs(ref, containerRef);\n const [state, dispatch] = useReducer(selectReducer, {\n isActive: false,\n containerRef,\n defaultValue,\n items: new Map(),\n });\n\n useEffect(() => {\n const container = containerRef.current;\n\n if (!container) {\n return;\n }\n\n const handleOutsideClick = (e: MouseEvent) => {\n if (container.contains(e.target as Node) || !state.isActive) {\n return;\n }\n\n dispatch({ type: 'TOGGLE' });\n };\n\n window.addEventListener('mousedown', handleOutsideClick);\n\n return () => {\n window.removeEventListener('mousedown', handleOutsideClick);\n };\n }, [state.isActive, dispatch]);\n\n useEffect(() => {\n if (!onChange || !state.items.size) {\n return;\n }\n\n onChange(state.selected);\n //eslint-disable-next-line\n }, [state.selected]);\n\n return (\n <SelectContext.Provider value={{ state, dispatch }}>\n <div\n ref={targetRef}\n style={{ ...style, width }}\n className={clsx(s.select({ size }), className, sx(propSx))}\n {...props}\n >\n <SelectTrigger variant={variant}>\n {state.selected !== null && state.items.get(state.selected || '')}\n </SelectTrigger>\n <SelectOptionList>{children}</SelectOptionList>\n <input type=\"hidden\" name={name} value={state.selected || ''} />\n </div>\n </SelectContext.Provider>\n );\n },\n);\nSelect.displayName = 'Select';\n\nexport { s as selectCss };\n"],"mappings":";;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAEP,SAAS,uBAAuB;AAChC,OAAO,UAAU;AAEjB,SAAS,UAAU;AAGnB,YAAY,OAAO;AACnB,SAAS,eAAe,qBAAqB;AAC7C,OAAO,sBAAsB;AAC7B,OAAO,mBAAmB;AAuElB,SAME,KANF;AA3DD,IAAM,SAAS;AAAA,EACpB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,eAAe,OAAuB,IAAI;AAChD,UAAM,YAAY,gBAAgB,KAAK,YAAY;AACnD,UAAM,CAAC,OAAO,QAAQ,IAAI,WAAW,eAAe;AAAA,MAClD,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,OAAO,oBAAI,IAAI;AAAA,IACjB,CAAC;AAED,cAAU,MAAM;AACd,YAAM,YAAY,aAAa;AAE/B,UAAI,CAAC,WAAW;AACd;AAAA,MACF;AAEA,YAAM,qBAAqB,CAAC,MAAkB;AAC5C,YAAI,UAAU,SAAS,EAAE,MAAc,KAAK,CAAC,MAAM,UAAU;AAC3D;AAAA,QACF;AAEA,iBAAS,EAAE,MAAM,SAAS,CAAC;AAAA,MAC7B;AAEA,aAAO,iBAAiB,aAAa,kBAAkB;AAEvD,aAAO,MAAM;AACX,eAAO,oBAAoB,aAAa,kBAAkB;AAAA,MAC5D;AAAA,IACF,GAAG,CAAC,MAAM,UAAU,QAAQ,CAAC;AAE7B,cAAU,MAAM;AACd,UAAI,CAAC,YAAY,CAAC,MAAM,MAAM,MAAM;AAClC;AAAA,MACF;AAEA,eAAS,MAAM,QAAQ;AAAA,IAEzB,GAAG,CAAC,MAAM,QAAQ,CAAC;AAEnB,WACE,oBAAC,cAAc,UAAd,EAAuB,OAAO,EAAE,OAAO,SAAS,GAC/C;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,OAAO,EAAE,GAAG,OAAO,MAAM;AAAA,QACzB,WAAW,KAAO,SAAO,EAAE,KAAK,CAAC,GAAG,WAAW,GAAG,MAAM,CAAC;AAAA,QACxD,GAAG;AAAA,QAEJ;AAAA,8BAAC,iBAAc,SACZ,gBAAM,aAAa,QAAQ,MAAM,MAAM,IAAI,MAAM,YAAY,EAAE,GAClE;AAAA,UACA,oBAAC,oBAAkB,UAAS;AAAA,UAC5B,oBAAC,WAAM,MAAK,UAAS,MAAY,OAAO,MAAM,YAAY,IAAI;AAAA;AAAA;AAAA,IAChE,GACF;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;","names":[]}
|
|
@@ -1,7 +1,14 @@
|
|
|
1
|
+
import {
|
|
2
|
+
fireEvent,
|
|
3
|
+
react_esm_exports,
|
|
4
|
+
render
|
|
5
|
+
} from "../../chunk-PCAHVFSY.js";
|
|
6
|
+
import "../../chunk-424PT5DM.js";
|
|
7
|
+
|
|
8
|
+
// src/components/Select/Select.spec.tsx
|
|
9
|
+
import { Select, SelectOption } from "./index.mjs";
|
|
10
|
+
import { uiTest } from "../../tests/uiTest.mjs";
|
|
1
11
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { fireEvent, render, screen } from "@testing-library/react";
|
|
3
|
-
import { Select, SelectOption } from ".";
|
|
4
|
-
import { uiTest } from "../../tests/uiTest";
|
|
5
12
|
describe("Select \uCEF4\uD3EC\uB10C\uD2B8", () => {
|
|
6
13
|
uiTest(Select, "Select");
|
|
7
14
|
it("\uD074\uB9AD\uD55C option\uC758 \uB0B4\uC6A9\uC774 Select\uC5D0 \uBCF4\uC778\uB2E4.", () => {
|
|
@@ -11,8 +18,8 @@ describe("Select \uCEF4\uD3EC\uB10C\uD2B8", () => {
|
|
|
11
18
|
/* @__PURE__ */ jsx(SelectOption, { value: "2", children: "2\uBC88" })
|
|
12
19
|
] })
|
|
13
20
|
);
|
|
14
|
-
const select = screen.getByTestId("select");
|
|
15
|
-
fireEvent.click(screen.getByText("2\uBC88"));
|
|
21
|
+
const select = react_esm_exports.screen.getByTestId("select");
|
|
22
|
+
fireEvent.click(react_esm_exports.screen.getByText("2\uBC88"));
|
|
16
23
|
expect(select).toHaveTextContent("2\uBC88");
|
|
17
24
|
});
|
|
18
25
|
it("\uC0C8\uB85C\uC6B4 option\uC744 \uD074\uB9AD\uD558\uBA74 onChange \uC774\uBCA4\uD2B8\uAC00 \uBC1C\uC0DD\uD558\uACE0, form value, ref.value\uC758 \uAC12\uC774 \uBC14\uB010\uB2E4.", () => {
|
|
@@ -23,8 +30,8 @@ describe("Select \uCEF4\uD3EC\uB10C\uD2B8", () => {
|
|
|
23
30
|
/* @__PURE__ */ jsx(SelectOption, { value: "2", children: "2\uBC88" })
|
|
24
31
|
] }) })
|
|
25
32
|
);
|
|
26
|
-
const option2 = screen.getByText("2\uBC88");
|
|
27
|
-
const form = screen.getByTestId("form");
|
|
33
|
+
const option2 = react_esm_exports.screen.getByText("2\uBC88");
|
|
34
|
+
const form = react_esm_exports.screen.getByTestId("form");
|
|
28
35
|
fireEvent.click(option2);
|
|
29
36
|
expect(handleChange).toHaveBeenCalledTimes(1);
|
|
30
37
|
expect(handleChange.mock.calls[0][0]).toBe("2");
|
|
@@ -32,7 +39,7 @@ describe("Select \uCEF4\uD3EC\uB10C\uD2B8", () => {
|
|
|
32
39
|
fireEvent.click(option2);
|
|
33
40
|
expect(handleChange).toHaveBeenCalledTimes(1);
|
|
34
41
|
expect(new FormData(form).get("select")).toBe("2");
|
|
35
|
-
fireEvent.click(screen.getByText("1\uBC88"));
|
|
42
|
+
fireEvent.click(react_esm_exports.screen.getByText("1\uBC88"));
|
|
36
43
|
expect(handleChange).toHaveBeenCalledTimes(2);
|
|
37
44
|
expect(handleChange.mock.calls[1][0]).toBe("1");
|
|
38
45
|
expect(new FormData(form).get("select")).toBe("1");
|
|
@@ -44,7 +51,7 @@ describe("Select \uCEF4\uD3EC\uB10C\uD2B8", () => {
|
|
|
44
51
|
/* @__PURE__ */ jsx(SelectOption, { value: "2", children: "2\uBC88" })
|
|
45
52
|
] })
|
|
46
53
|
);
|
|
47
|
-
const select = screen.getByTestId("select");
|
|
54
|
+
const select = react_esm_exports.screen.getByTestId("select");
|
|
48
55
|
expect(select).toHaveTextContent("2\uBC88");
|
|
49
56
|
});
|
|
50
57
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Select/Select.spec.tsx"],"sourcesContent":["import { fireEvent, render, screen } from '@testing-library/react';\n\nimport { Select, SelectOption } from '.';\nimport { uiTest } from '../../tests/uiTest';\n\ndescribe('Select 컴포넌트', () => {\n uiTest(Select, 'Select');\n\n it('클릭한 option의 내용이 Select에 보인다.', () => {\n render(\n <Select data-testid=\"select\">\n <SelectOption value=\"1\">1번</SelectOption>\n <SelectOption value=\"2\">2번</SelectOption>\n </Select>,\n );\n\n const select = screen.getByTestId('select');\n\n fireEvent.click(screen.getByText('2번'));\n expect(select).toHaveTextContent('2번');\n });\n\n it('새로운 option을 클릭하면 onChange 이벤트가 발생하고, form value, ref.value의 값이 바뀐다.', () => {\n const handleChange = jest.fn();\n\n render(\n <form data-testid=\"form\">\n <Select data-testid=\"select\" name=\"select\" onChange={handleChange}>\n <SelectOption value=\"1\">1번</SelectOption>\n <SelectOption value=\"2\">2번</SelectOption>\n </Select>\n </form>,\n );\n\n const option2 = screen.getByText('2번');\n const form = screen.getByTestId('form') as HTMLFormElement;\n\n fireEvent.click(option2);\n expect(handleChange).toHaveBeenCalledTimes(1);\n expect(handleChange.mock.calls[0][0]).toBe('2');\n expect(new FormData(form).get('select')).toBe('2');\n\n fireEvent.click(option2);\n expect(handleChange).toHaveBeenCalledTimes(1);\n expect(new FormData(form).get('select')).toBe('2');\n\n fireEvent.click(screen.getByText('1번'));\n expect(handleChange).toHaveBeenCalledTimes(2);\n expect(handleChange.mock.calls[1][0]).toBe('1');\n expect(new FormData(form).get('select')).toBe('1');\n });\n\n it('defaultValue의 값이 기본으로 보인다.', () => {\n render(\n <Select data-testid=\"select\" defaultValue=\"2\">\n <SelectOption value=\"1\">1번</SelectOption>\n <SelectOption value=\"2\">2번</SelectOption>\n </Select>,\n );\n\n const select = screen.getByTestId('select');\n\n expect(select).toHaveTextContent('2번');\n });\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Select/Select.spec.tsx"],"sourcesContent":["import { fireEvent, render, screen } from '@testing-library/react';\n\nimport { Select, SelectOption } from '.';\nimport { uiTest } from '../../tests/uiTest';\n\ndescribe('Select 컴포넌트', () => {\n uiTest(Select, 'Select');\n\n it('클릭한 option의 내용이 Select에 보인다.', () => {\n render(\n <Select data-testid=\"select\">\n <SelectOption value=\"1\">1번</SelectOption>\n <SelectOption value=\"2\">2번</SelectOption>\n </Select>,\n );\n\n const select = screen.getByTestId('select');\n\n fireEvent.click(screen.getByText('2번'));\n expect(select).toHaveTextContent('2번');\n });\n\n it('새로운 option을 클릭하면 onChange 이벤트가 발생하고, form value, ref.value의 값이 바뀐다.', () => {\n const handleChange = jest.fn();\n\n render(\n <form data-testid=\"form\">\n <Select data-testid=\"select\" name=\"select\" onChange={handleChange}>\n <SelectOption value=\"1\">1번</SelectOption>\n <SelectOption value=\"2\">2번</SelectOption>\n </Select>\n </form>,\n );\n\n const option2 = screen.getByText('2번');\n const form = screen.getByTestId('form') as HTMLFormElement;\n\n fireEvent.click(option2);\n expect(handleChange).toHaveBeenCalledTimes(1);\n expect(handleChange.mock.calls[0][0]).toBe('2');\n expect(new FormData(form).get('select')).toBe('2');\n\n fireEvent.click(option2);\n expect(handleChange).toHaveBeenCalledTimes(1);\n expect(new FormData(form).get('select')).toBe('2');\n\n fireEvent.click(screen.getByText('1번'));\n expect(handleChange).toHaveBeenCalledTimes(2);\n expect(handleChange.mock.calls[1][0]).toBe('1');\n expect(new FormData(form).get('select')).toBe('1');\n });\n\n it('defaultValue의 값이 기본으로 보인다.', () => {\n render(\n <Select data-testid=\"select\" defaultValue=\"2\">\n <SelectOption value=\"1\">1번</SelectOption>\n <SelectOption value=\"2\">2번</SelectOption>\n </Select>,\n );\n\n const select = screen.getByTestId('select');\n\n expect(select).toHaveTextContent('2번');\n });\n});\n"],"mappings":";;;;;;;;AAEA,SAAS,QAAQ,oBAAoB;AACrC,SAAS,cAAc;AAOjB,SACE,KADF;AALN,SAAS,mCAAe,MAAM;AAC5B,SAAO,QAAQ,QAAQ;AAEvB,KAAG,uFAAgC,MAAM;AACvC;AAAA,MACE,qBAAC,UAAO,eAAY,UAClB;AAAA,4BAAC,gBAAa,OAAM,KAAI,qBAAE;AAAA,QAC1B,oBAAC,gBAAa,OAAM,KAAI,qBAAE;AAAA,SAC5B;AAAA,IACF;AAEA,UAAM,SAAS,yBAAO,YAAY,QAAQ;AAE1C,cAAU,MAAM,yBAAO,UAAU,SAAI,CAAC;AACtC,WAAO,MAAM,EAAE,kBAAkB,SAAI;AAAA,EACvC,CAAC;AAED,KAAG,qLAAuE,MAAM;AAC9E,UAAM,eAAe,KAAK,GAAG;AAE7B;AAAA,MACE,oBAAC,UAAK,eAAY,QAChB,+BAAC,UAAO,eAAY,UAAS,MAAK,UAAS,UAAU,cACnD;AAAA,4BAAC,gBAAa,OAAM,KAAI,qBAAE;AAAA,QAC1B,oBAAC,gBAAa,OAAM,KAAI,qBAAE;AAAA,SAC5B,GACF;AAAA,IACF;AAEA,UAAM,UAAU,yBAAO,UAAU,SAAI;AACrC,UAAM,OAAO,yBAAO,YAAY,MAAM;AAEtC,cAAU,MAAM,OAAO;AACvB,WAAO,YAAY,EAAE,sBAAsB,CAAC;AAC5C,WAAO,aAAa,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,GAAG;AAC9C,WAAO,IAAI,SAAS,IAAI,EAAE,IAAI,QAAQ,CAAC,EAAE,KAAK,GAAG;AAEjD,cAAU,MAAM,OAAO;AACvB,WAAO,YAAY,EAAE,sBAAsB,CAAC;AAC5C,WAAO,IAAI,SAAS,IAAI,EAAE,IAAI,QAAQ,CAAC,EAAE,KAAK,GAAG;AAEjD,cAAU,MAAM,yBAAO,UAAU,SAAI,CAAC;AACtC,WAAO,YAAY,EAAE,sBAAsB,CAAC;AAC5C,WAAO,aAAa,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,GAAG;AAC9C,WAAO,IAAI,SAAS,IAAI,EAAE,IAAI,QAAQ,CAAC,EAAE,KAAK,GAAG;AAAA,EACnD,CAAC;AAED,KAAG,gFAA8B,MAAM;AACrC;AAAA,MACE,qBAAC,UAAO,eAAY,UAAS,cAAa,KACxC;AAAA,4BAAC,gBAAa,OAAM,KAAI,qBAAE;AAAA,QAC1B,oBAAC,gBAAa,OAAM,KAAI,qBAAE;AAAA,SAC5B;AAAA,IACF;AAEA,UAAM,SAAS,yBAAO,YAAY,QAAQ;AAE1C,WAAO,MAAM,EAAE,kBAAkB,SAAI;AAAA,EACvC,CAAC;AACH,CAAC;","names":[]}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
+
import "../../chunk-424PT5DM.js";
|
|
2
|
+
|
|
3
|
+
// src/components/Select/SelectContext.ts
|
|
1
4
|
import { createContext } from "react";
|
|
2
|
-
|
|
3
|
-
|
|
5
|
+
var SelectContext = createContext(void 0);
|
|
6
|
+
var selectReducer = (state, action) => {
|
|
4
7
|
switch (action.type) {
|
|
5
8
|
case "ADD": {
|
|
6
9
|
if (state.selected === void 0 && state.defaultValue === action.payload.value) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Select/SelectContext.ts"],"sourcesContent":["import { createContext, type Dispatch, type ReactNode } from 'react';\n\ntype SelectState = {\n isActive: boolean;\n selected?: string;\n defaultValue?: string;\n items: Map<string, ReactNode>;\n containerRef: React.RefObject<HTMLDivElement | null>;\n};\n\ntype SelectAction =\n | { type: 'ADD'; payload: { value: string; children: ReactNode } }\n | { type: 'REMOVE'; payload: { value: string } }\n | { type: 'SELECT'; payload: { value: string } }\n | { type: 'TOGGLE' };\n\nexport const SelectContext = createContext<\n { state: SelectState; dispatch: Dispatch<SelectAction> } | undefined\n>(undefined);\n\nexport const selectReducer = (\n state: SelectState,\n action: SelectAction,\n): SelectState => {\n switch (action.type) {\n case 'ADD': {\n // 현재 selected가 없고, defaultValue === payload.value일 경우 select함.\n if (\n state.selected === undefined &&\n state.defaultValue === action.payload.value\n ) {\n return {\n ...state,\n selected: action.payload.value,\n items: new Map(state.items).set(\n action.payload.value,\n action.payload.children,\n ),\n };\n }\n return {\n ...state,\n items: new Map(state.items).set(\n action.payload.value,\n action.payload.children,\n ),\n };\n }\n case 'REMOVE': {\n const newMap = new Map(state.items);\n newMap.delete(action.payload.value);\n return { ...state, items: newMap };\n }\n case 'SELECT':\n return { ...state, isActive: false, selected: action.payload.value };\n case 'TOGGLE':\n return { ...state, isActive: !state.isActive };\n }\n};\n"],"mappings":"AAAA,SAAS,qBAAoD;AAgBtD,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Select/SelectContext.ts"],"sourcesContent":["import { createContext, type Dispatch, type ReactNode } from 'react';\n\ntype SelectState = {\n isActive: boolean;\n selected?: string;\n defaultValue?: string;\n items: Map<string, ReactNode>;\n containerRef: React.RefObject<HTMLDivElement | null>;\n};\n\ntype SelectAction =\n | { type: 'ADD'; payload: { value: string; children: ReactNode } }\n | { type: 'REMOVE'; payload: { value: string } }\n | { type: 'SELECT'; payload: { value: string } }\n | { type: 'TOGGLE' };\n\nexport const SelectContext = createContext<\n { state: SelectState; dispatch: Dispatch<SelectAction> } | undefined\n>(undefined);\n\nexport const selectReducer = (\n state: SelectState,\n action: SelectAction,\n): SelectState => {\n switch (action.type) {\n case 'ADD': {\n // 현재 selected가 없고, defaultValue === payload.value일 경우 select함.\n if (\n state.selected === undefined &&\n state.defaultValue === action.payload.value\n ) {\n return {\n ...state,\n selected: action.payload.value,\n items: new Map(state.items).set(\n action.payload.value,\n action.payload.children,\n ),\n };\n }\n return {\n ...state,\n items: new Map(state.items).set(\n action.payload.value,\n action.payload.children,\n ),\n };\n }\n case 'REMOVE': {\n const newMap = new Map(state.items);\n newMap.delete(action.payload.value);\n return { ...state, items: newMap };\n }\n case 'SELECT':\n return { ...state, isActive: false, selected: action.payload.value };\n case 'TOGGLE':\n return { ...state, isActive: !state.isActive };\n }\n};\n"],"mappings":";;;AAAA,SAAS,qBAAoD;AAgBtD,IAAM,gBAAgB,cAE3B,MAAS;AAEJ,IAAM,gBAAgB,CAC3B,OACA,WACgB;AAChB,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK,OAAO;AAEV,UACE,MAAM,aAAa,UACnB,MAAM,iBAAiB,OAAO,QAAQ,OACtC;AACA,eAAO;AAAA,UACL,GAAG;AAAA,UACH,UAAU,OAAO,QAAQ;AAAA,UACzB,OAAO,IAAI,IAAI,MAAM,KAAK,EAAE;AAAA,YAC1B,OAAO,QAAQ;AAAA,YACf,OAAO,QAAQ;AAAA,UACjB;AAAA,QACF;AAAA,MACF;AACA,aAAO;AAAA,QACL,GAAG;AAAA,QACH,OAAO,IAAI,IAAI,MAAM,KAAK,EAAE;AAAA,UAC1B,OAAO,QAAQ;AAAA,UACf,OAAO,QAAQ;AAAA,QACjB;AAAA,MACF;AAAA,IACF;AAAA,IACA,KAAK,UAAU;AACb,YAAM,SAAS,IAAI,IAAI,MAAM,KAAK;AAClC,aAAO,OAAO,OAAO,QAAQ,KAAK;AAClC,aAAO,EAAE,GAAG,OAAO,OAAO,OAAO;AAAA,IACnC;AAAA,IACA,KAAK;AACH,aAAO,EAAE,GAAG,OAAO,UAAU,OAAO,UAAU,OAAO,QAAQ,MAAM;AAAA,IACrE,KAAK;AACH,aAAO,EAAE,GAAG,OAAO,UAAU,CAAC,MAAM,SAAS;AAAA,EACjD;AACF;","names":[]}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import "../../chunk-424PT5DM.js";
|
|
2
|
+
|
|
3
|
+
// src/components/Select/SelectOption.css.ts
|
|
4
|
+
import { styleWithLayer } from "#styleUtils.mjs";
|
|
5
|
+
import { theme } from "#themes.mjs";
|
|
6
|
+
var selectOption = styleWithLayer({
|
|
4
7
|
padding: "0.75em 0.5em",
|
|
5
8
|
transition: "background-color 0.2s ease",
|
|
6
9
|
cursor: "default",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Select/SelectOption.css.ts"],"sourcesContent":["import { styleWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\n\nexport const selectOption = styleWithLayer({\n padding: '0.75em 0.5em',\n\n transition: 'background-color 0.2s ease',\n\n cursor: 'default',\n\n ':hover': {\n backgroundColor: `rgb(${theme.color.accent})`,\n },\n});\n"],"mappings":"AAAA,SAAS,sBAAsB;AAC/B,SAAS,aAAa;AAEf,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Select/SelectOption.css.ts"],"sourcesContent":["import { styleWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\n\nexport const selectOption = styleWithLayer({\n padding: '0.75em 0.5em',\n\n transition: 'background-color 0.2s ease',\n\n cursor: 'default',\n\n ':hover': {\n backgroundColor: `rgb(${theme.color.accent})`,\n },\n});\n"],"mappings":";;;AAAA,SAAS,sBAAsB;AAC/B,SAAS,aAAa;AAEf,IAAM,eAAe,eAAe;AAAA,EACzC,SAAS;AAAA,EAET,YAAY;AAAA,EAEZ,QAAQ;AAAA,EAER,UAAU;AAAA,IACR,iBAAiB,OAAO,MAAM,MAAM,MAAM;AAAA,EAC5C;AACF,CAAC;","names":[]}
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import
|
|
2
|
+
import "../../chunk-424PT5DM.js";
|
|
3
|
+
|
|
4
|
+
// src/components/Select/SelectOption.tsx
|
|
3
5
|
import { useContext, useEffect } from "react";
|
|
4
|
-
import { SelectContext } from "./SelectContext";
|
|
5
|
-
import * as s from "./SelectOption.css";
|
|
6
|
-
|
|
6
|
+
import { SelectContext } from "./SelectContext.mjs";
|
|
7
|
+
import * as s from "./SelectOption.css.mjs";
|
|
8
|
+
import { jsx } from "react/jsx-runtime";
|
|
9
|
+
var SelectOption = ({ children, value }) => {
|
|
7
10
|
const selectContext = useContext(SelectContext);
|
|
8
11
|
if (!selectContext) {
|
|
9
12
|
throw new Error("SelectOption must be rendered within a Select.");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Select/SelectOption.tsx"],"sourcesContent":["'use client';\n\nimport { useContext, useEffect, type ReactNode } from 'react';\n\nimport { SelectContext } from './SelectContext';\nimport * as s from './SelectOption.css';\n\ninterface SelectOptionProps {\n children: ReactNode;\n value: string;\n}\n\nexport const SelectOption = ({ children, value }: SelectOptionProps) => {\n const selectContext = useContext(SelectContext);\n\n if (!selectContext) {\n throw new Error('SelectOption must be rendered within a Select.');\n }\n\n const { dispatch } = selectContext;\n\n useEffect(() => {\n dispatch({ type: 'ADD', payload: { value, children } });\n\n return () => {\n dispatch({ type: 'REMOVE', payload: { value } });\n };\n // eslint-disable-next-line\n }, [dispatch, value]);\n\n const handleClick = () => {\n dispatch({ type: 'SELECT', payload: { value } });\n };\n\n return (\n <div className={s.selectOption} onClick={handleClick}>\n {children}\n </div>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Select/SelectOption.tsx"],"sourcesContent":["'use client';\n\nimport { useContext, useEffect, type ReactNode } from 'react';\n\nimport { SelectContext } from './SelectContext';\nimport * as s from './SelectOption.css';\n\ninterface SelectOptionProps {\n children: ReactNode;\n value: string;\n}\n\nexport const SelectOption = ({ children, value }: SelectOptionProps) => {\n const selectContext = useContext(SelectContext);\n\n if (!selectContext) {\n throw new Error('SelectOption must be rendered within a Select.');\n }\n\n const { dispatch } = selectContext;\n\n useEffect(() => {\n dispatch({ type: 'ADD', payload: { value, children } });\n\n return () => {\n dispatch({ type: 'REMOVE', payload: { value } });\n };\n // eslint-disable-next-line\n }, [dispatch, value]);\n\n const handleClick = () => {\n dispatch({ type: 'SELECT', payload: { value } });\n };\n\n return (\n <div className={s.selectOption} onClick={handleClick}>\n {children}\n </div>\n );\n};\n"],"mappings":";;;;AAEA,SAAS,YAAY,iBAAiC;AAEtD,SAAS,qBAAqB;AAC9B,YAAY,OAAO;AA8Bf;AAvBG,IAAM,eAAe,CAAC,EAAE,UAAU,MAAM,MAAyB;AACtE,QAAM,gBAAgB,WAAW,aAAa;AAE9C,MAAI,CAAC,eAAe;AAClB,UAAM,IAAI,MAAM,gDAAgD;AAAA,EAClE;AAEA,QAAM,EAAE,SAAS,IAAI;AAErB,YAAU,MAAM;AACd,aAAS,EAAE,MAAM,OAAO,SAAS,EAAE,OAAO,SAAS,EAAE,CAAC;AAEtD,WAAO,MAAM;AACX,eAAS,EAAE,MAAM,UAAU,SAAS,EAAE,MAAM,EAAE,CAAC;AAAA,IACjD;AAAA,EAEF,GAAG,CAAC,UAAU,KAAK,CAAC;AAEpB,QAAM,cAAc,MAAM;AACxB,aAAS,EAAE,MAAM,UAAU,SAAS,EAAE,MAAM,EAAE,CAAC;AAAA,EACjD;AAEA,SACE,oBAAC,SAAI,WAAa,gBAAc,SAAS,aACtC,UACH;AAEJ;","names":[]}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
|
+
import "../../chunk-424PT5DM.js";
|
|
2
|
+
|
|
3
|
+
// src/components/Select/SelectOptionList.css.ts
|
|
1
4
|
import { keyframes } from "@vanilla-extract/css";
|
|
2
|
-
import { recipeWithLayer } from "#styleUtils";
|
|
3
|
-
import { theme } from "#themes";
|
|
4
|
-
|
|
5
|
+
import { recipeWithLayer } from "#styleUtils.mjs";
|
|
6
|
+
import { theme } from "#themes.mjs";
|
|
7
|
+
var fadeIn = keyframes({
|
|
5
8
|
"0%": {
|
|
6
9
|
transform: "scale(0.95)",
|
|
7
10
|
opacity: 0
|
|
@@ -11,7 +14,7 @@ const fadeIn = keyframes({
|
|
|
11
14
|
opacity: 1
|
|
12
15
|
}
|
|
13
16
|
});
|
|
14
|
-
|
|
17
|
+
var container = recipeWithLayer({
|
|
15
18
|
base: {
|
|
16
19
|
overflowY: "auto",
|
|
17
20
|
position: "absolute",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Select/SelectOptionList.css.ts"],"sourcesContent":["import { keyframes } from '@vanilla-extract/css';\n\nimport { recipeWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\n\nconst fadeIn = keyframes({\n '0%': {\n transform: 'scale(0.95)',\n opacity: 0,\n },\n\n '100%': {\n transform: 'scale(1)',\n opacity: 1,\n },\n});\n\nexport const container = recipeWithLayer({\n base: {\n overflowY: 'auto',\n position: 'absolute',\n zIndex: '10',\n\n width: '100%',\n minWidth: 'max-content',\n border: `1px solid rgb(${theme.color.border})`,\n borderRadius: theme.borderRadius,\n margin: '0.5rem 0',\n\n backgroundColor: `rgb(${theme.color.background})`,\n\n animation: `${fadeIn} 0.3s ease 1`,\n transformOrigin: '0 0',\n\n userSelect: 'none',\n\n '::-webkit-scrollbar': {\n width: '0.25rem',\n height: '0.25rem',\n },\n\n '::-webkit-scrollbar-thumb': {\n borderRadius: '0.5rem',\n\n backgroundColor: `rgb(${theme.color['muted-foreground']})`,\n },\n },\n\n variants: {\n isVisible: {\n true: {\n display: 'block',\n },\n false: {\n display: 'none',\n },\n },\n\n isAbove: {\n true: {\n top: '100%',\n },\n false: {\n bottom: '100%',\n },\n },\n },\n});\n"],"mappings":"AAAA,SAAS,iBAAiB;AAE1B,SAAS,uBAAuB;AAChC,SAAS,aAAa;AAEtB,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Select/SelectOptionList.css.ts"],"sourcesContent":["import { keyframes } from '@vanilla-extract/css';\n\nimport { recipeWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\n\nconst fadeIn = keyframes({\n '0%': {\n transform: 'scale(0.95)',\n opacity: 0,\n },\n\n '100%': {\n transform: 'scale(1)',\n opacity: 1,\n },\n});\n\nexport const container = recipeWithLayer({\n base: {\n overflowY: 'auto',\n position: 'absolute',\n zIndex: '10',\n\n width: '100%',\n minWidth: 'max-content',\n border: `1px solid rgb(${theme.color.border})`,\n borderRadius: theme.borderRadius,\n margin: '0.5rem 0',\n\n backgroundColor: `rgb(${theme.color.background})`,\n\n animation: `${fadeIn} 0.3s ease 1`,\n transformOrigin: '0 0',\n\n userSelect: 'none',\n\n '::-webkit-scrollbar': {\n width: '0.25rem',\n height: '0.25rem',\n },\n\n '::-webkit-scrollbar-thumb': {\n borderRadius: '0.5rem',\n\n backgroundColor: `rgb(${theme.color['muted-foreground']})`,\n },\n },\n\n variants: {\n isVisible: {\n true: {\n display: 'block',\n },\n false: {\n display: 'none',\n },\n },\n\n isAbove: {\n true: {\n top: '100%',\n },\n false: {\n bottom: '100%',\n },\n },\n },\n});\n"],"mappings":";;;AAAA,SAAS,iBAAiB;AAE1B,SAAS,uBAAuB;AAChC,SAAS,aAAa;AAEtB,IAAM,SAAS,UAAU;AAAA,EACvB,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,SAAS;AAAA,EACX;AAAA,EAEA,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,SAAS;AAAA,EACX;AACF,CAAC;AAEM,IAAM,YAAY,gBAAgB;AAAA,EACvC,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,UAAU;AAAA,IACV,QAAQ;AAAA,IAER,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ,iBAAiB,MAAM,MAAM,MAAM;AAAA,IAC3C,cAAc,MAAM;AAAA,IACpB,QAAQ;AAAA,IAER,iBAAiB,OAAO,MAAM,MAAM,UAAU;AAAA,IAE9C,WAAW,GAAG,MAAM;AAAA,IACpB,iBAAiB;AAAA,IAEjB,YAAY;AAAA,IAEZ,uBAAuB;AAAA,MACrB,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IAEA,6BAA6B;AAAA,MAC3B,cAAc;AAAA,MAEd,iBAAiB,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAAA,IACzD;AAAA,EACF;AAAA,EAEA,UAAU;AAAA,IACR,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IAEA,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,KAAK;AAAA,MACP;AAAA,MACA,OAAO;AAAA,QACL,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,EACF;AACF,CAAC;","names":[]}
|
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
import
|
|
1
|
+
import "../../chunk-424PT5DM.js";
|
|
2
|
+
|
|
3
|
+
// src/components/Select/SelectOptionList.tsx
|
|
2
4
|
import { useContext, useMemo, useRef } from "react";
|
|
3
5
|
import clsx from "clsx";
|
|
4
|
-
import { sprinkles } from "#styles";
|
|
5
|
-
import { SelectContext } from "./SelectContext";
|
|
6
|
-
import * as s from "./SelectOptionList.css";
|
|
7
|
-
|
|
6
|
+
import { sprinkles } from "#styles.mjs";
|
|
7
|
+
import { SelectContext } from "./SelectContext.mjs";
|
|
8
|
+
import * as s from "./SelectOptionList.css.mjs";
|
|
9
|
+
import { jsx } from "react/jsx-runtime";
|
|
10
|
+
var SelectOptionList = ({ children }) => {
|
|
8
11
|
const selectContext = useContext(SelectContext);
|
|
9
12
|
const containerRef = useRef(null);
|
|
10
13
|
if (!selectContext) {
|
|
@@ -12,15 +15,15 @@ const SelectOptionList = ({ children }) => {
|
|
|
12
15
|
}
|
|
13
16
|
const { state } = selectContext;
|
|
14
17
|
const isAbove = useMemo(() => {
|
|
15
|
-
const
|
|
18
|
+
const container2 = containerRef.current;
|
|
16
19
|
const parent = state.containerRef.current;
|
|
17
|
-
if (!state.isActive || !
|
|
20
|
+
if (!state.isActive || !container2 || !parent) {
|
|
18
21
|
return;
|
|
19
22
|
}
|
|
20
23
|
const parentRect = parent.getBoundingClientRect();
|
|
21
|
-
|
|
22
|
-
const containerRect =
|
|
23
|
-
|
|
24
|
+
container2.style.display = "block";
|
|
25
|
+
const containerRect = container2.getBoundingClientRect();
|
|
26
|
+
container2.style.display = "";
|
|
24
27
|
if (containerRect.top + containerRect.height < window.innerHeight) {
|
|
25
28
|
return true;
|
|
26
29
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Select/SelectOptionList.tsx"],"sourcesContent":["import { useContext, useMemo, useRef, type ReactNode } from 'react';\n\nimport clsx from 'clsx';\n\nimport { sprinkles } from '#styles';\n\nimport { SelectContext } from './SelectContext';\nimport * as s from './SelectOptionList.css';\n\ninterface SelectOptionListProps {\n children: ReactNode;\n}\n\nconst SelectOptionList = ({ children }: SelectOptionListProps) => {\n const selectContext = useContext(SelectContext);\n const containerRef = useRef<HTMLDivElement>(null);\n\n if (!selectContext) {\n throw new Error('SelectOption must be rendered within a Select.');\n }\n\n const { state } = selectContext;\n\n const isAbove = useMemo(() => {\n const container = containerRef.current;\n const parent = state.containerRef.current;\n\n if (!state.isActive || !container || !parent) {\n return;\n }\n\n const parentRect = parent.getBoundingClientRect();\n container.style.display = 'block';\n const containerRect = container.getBoundingClientRect();\n container.style.display = '';\n\n // 하단에 리스트를 모두 보여줄 공간이 충분한 경우\n if (containerRect.top + containerRect.height < window.innerHeight) {\n return true;\n }\n\n // 그렇지 않으면 parent의 상단/하단 중 공간이 더 넓은 쪽으로 리스트를 보여줌\n return parentRect.top + parentRect.height / 2 < window.innerHeight / 2;\n }, [state.isActive, state.containerRef]);\n\n return (\n <div\n ref={containerRef}\n className={clsx(\n s.container({ isVisible: state.isActive, isAbove }),\n sprinkles({ boxShadow: 'accent-sm' }),\n )}\n >\n {children}\n </div>\n );\n};\n\nexport default SelectOptionList;\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Select/SelectOptionList.tsx"],"sourcesContent":["import { useContext, useMemo, useRef, type ReactNode } from 'react';\n\nimport clsx from 'clsx';\n\nimport { sprinkles } from '#styles';\n\nimport { SelectContext } from './SelectContext';\nimport * as s from './SelectOptionList.css';\n\ninterface SelectOptionListProps {\n children: ReactNode;\n}\n\nconst SelectOptionList = ({ children }: SelectOptionListProps) => {\n const selectContext = useContext(SelectContext);\n const containerRef = useRef<HTMLDivElement>(null);\n\n if (!selectContext) {\n throw new Error('SelectOption must be rendered within a Select.');\n }\n\n const { state } = selectContext;\n\n const isAbove = useMemo(() => {\n const container = containerRef.current;\n const parent = state.containerRef.current;\n\n if (!state.isActive || !container || !parent) {\n return;\n }\n\n const parentRect = parent.getBoundingClientRect();\n container.style.display = 'block';\n const containerRect = container.getBoundingClientRect();\n container.style.display = '';\n\n // 하단에 리스트를 모두 보여줄 공간이 충분한 경우\n if (containerRect.top + containerRect.height < window.innerHeight) {\n return true;\n }\n\n // 그렇지 않으면 parent의 상단/하단 중 공간이 더 넓은 쪽으로 리스트를 보여줌\n return parentRect.top + parentRect.height / 2 < window.innerHeight / 2;\n }, [state.isActive, state.containerRef]);\n\n return (\n <div\n ref={containerRef}\n className={clsx(\n s.container({ isVisible: state.isActive, isAbove }),\n sprinkles({ boxShadow: 'accent-sm' }),\n )}\n >\n {children}\n </div>\n );\n};\n\nexport default SelectOptionList;\n"],"mappings":";;;AAAA,SAAS,YAAY,SAAS,cAA8B;AAE5D,OAAO,UAAU;AAEjB,SAAS,iBAAiB;AAE1B,SAAS,qBAAqB;AAC9B,YAAY,OAAO;AAuCf;AAjCJ,IAAM,mBAAmB,CAAC,EAAE,SAAS,MAA6B;AAChE,QAAM,gBAAgB,WAAW,aAAa;AAC9C,QAAM,eAAe,OAAuB,IAAI;AAEhD,MAAI,CAAC,eAAe;AAClB,UAAM,IAAI,MAAM,gDAAgD;AAAA,EAClE;AAEA,QAAM,EAAE,MAAM,IAAI;AAElB,QAAM,UAAU,QAAQ,MAAM;AAC5B,UAAMA,aAAY,aAAa;AAC/B,UAAM,SAAS,MAAM,aAAa;AAElC,QAAI,CAAC,MAAM,YAAY,CAACA,cAAa,CAAC,QAAQ;AAC5C;AAAA,IACF;AAEA,UAAM,aAAa,OAAO,sBAAsB;AAChD,IAAAA,WAAU,MAAM,UAAU;AAC1B,UAAM,gBAAgBA,WAAU,sBAAsB;AACtD,IAAAA,WAAU,MAAM,UAAU;AAG1B,QAAI,cAAc,MAAM,cAAc,SAAS,OAAO,aAAa;AACjE,aAAO;AAAA,IACT;AAGA,WAAO,WAAW,MAAM,WAAW,SAAS,IAAI,OAAO,cAAc;AAAA,EACvE,GAAG,CAAC,MAAM,UAAU,MAAM,YAAY,CAAC;AAEvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,QACP,YAAU,EAAE,WAAW,MAAM,UAAU,QAAQ,CAAC;AAAA,QAClD,UAAU,EAAE,WAAW,YAAY,CAAC;AAAA,MACtC;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,2BAAQ;","names":["container"]}
|
|
@@ -1,12 +1,15 @@
|
|
|
1
|
+
import "../../chunk-424PT5DM.js";
|
|
2
|
+
|
|
3
|
+
// src/components/Select/SelectTrigger.css.ts
|
|
1
4
|
import { style } from "@vanilla-extract/css";
|
|
2
5
|
import { recipe } from "@vanilla-extract/recipes";
|
|
3
|
-
import { theme } from "#themes";
|
|
4
|
-
|
|
6
|
+
import { theme } from "#themes.mjs";
|
|
7
|
+
var children = style({
|
|
5
8
|
overflow: "hidden",
|
|
6
9
|
textOverflow: "ellipsis",
|
|
7
10
|
whiteSpace: "nowrap"
|
|
8
11
|
});
|
|
9
|
-
|
|
12
|
+
var icon = recipe({
|
|
10
13
|
base: {
|
|
11
14
|
flexShrink: "0",
|
|
12
15
|
lineHeight: "0",
|
|
@@ -24,7 +27,7 @@ const icon = recipe({
|
|
|
24
27
|
}
|
|
25
28
|
}
|
|
26
29
|
});
|
|
27
|
-
|
|
30
|
+
var selectTrigger = recipe({
|
|
28
31
|
base: {
|
|
29
32
|
display: "flex",
|
|
30
33
|
alignItems: "center",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Select/SelectTrigger.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { theme } from '#themes';\n\nexport const children = style({\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n});\n\nexport const icon = recipe({\n base: {\n flexShrink: '0',\n\n lineHeight: '0',\n\n transition: 'color 0.2s ease, transform 0.2s ease',\n },\n\n variants: {\n isActive: {\n false: {\n transform: 'rotate(0)',\n },\n true: {\n color: `rgb(${theme.color.primary})`,\n\n transform: 'rotate(-180deg)',\n },\n },\n },\n});\n\nexport const selectTrigger = recipe({\n base: {\n display: 'flex',\n alignItems: 'center',\n gap: '0.5em',\n justifyContent: 'space-between',\n\n width: '100%',\n\n transition: 'border-color 0.2s ease',\n\n cursor: 'pointer',\n userSelect: 'none',\n },\n\n variants: {\n isActive: {\n true: {\n borderColor: `rgb(${theme.color.primary})`,\n },\n },\n variant: {\n contained: {\n padding: '0.75em 0.75em',\n borderRadius: theme.borderRadius,\n\n backgroundColor: `rgb(${theme.color.secondary})`,\n },\n outlined: {\n padding: '0.75em 0.5em',\n border: '1px solid',\n borderColor: `rgb(${theme.color.border})`,\n borderRadius: theme.borderRadius,\n\n backgroundColor: `rgb(${theme.color.background})`,\n },\n },\n },\n});\n"],"mappings":"AAAA,SAAS,aAAa;AACtB,SAAS,cAAc;AAEvB,SAAS,aAAa;AAEf,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Select/SelectTrigger.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { theme } from '#themes';\n\nexport const children = style({\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n});\n\nexport const icon = recipe({\n base: {\n flexShrink: '0',\n\n lineHeight: '0',\n\n transition: 'color 0.2s ease, transform 0.2s ease',\n },\n\n variants: {\n isActive: {\n false: {\n transform: 'rotate(0)',\n },\n true: {\n color: `rgb(${theme.color.primary})`,\n\n transform: 'rotate(-180deg)',\n },\n },\n },\n});\n\nexport const selectTrigger = recipe({\n base: {\n display: 'flex',\n alignItems: 'center',\n gap: '0.5em',\n justifyContent: 'space-between',\n\n width: '100%',\n\n transition: 'border-color 0.2s ease',\n\n cursor: 'pointer',\n userSelect: 'none',\n },\n\n variants: {\n isActive: {\n true: {\n borderColor: `rgb(${theme.color.primary})`,\n },\n },\n variant: {\n contained: {\n padding: '0.75em 0.75em',\n borderRadius: theme.borderRadius,\n\n backgroundColor: `rgb(${theme.color.secondary})`,\n },\n outlined: {\n padding: '0.75em 0.5em',\n border: '1px solid',\n borderColor: `rgb(${theme.color.border})`,\n borderRadius: theme.borderRadius,\n\n backgroundColor: `rgb(${theme.color.background})`,\n },\n },\n },\n});\n"],"mappings":";;;AAAA,SAAS,aAAa;AACtB,SAAS,cAAc;AAEvB,SAAS,aAAa;AAEf,IAAM,WAAW,MAAM;AAAA,EAC5B,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd,CAAC;AAEM,IAAM,OAAO,OAAO;AAAA,EACzB,MAAM;AAAA,IACJ,YAAY;AAAA,IAEZ,YAAY;AAAA,IAEZ,YAAY;AAAA,EACd;AAAA,EAEA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,WAAW;AAAA,MACb;AAAA,MACA,MAAM;AAAA,QACJ,OAAO,OAAO,MAAM,MAAM,OAAO;AAAA,QAEjC,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,IAAM,gBAAgB,OAAO;AAAA,EAClC,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,gBAAgB;AAAA,IAEhB,OAAO;AAAA,IAEP,YAAY;AAAA,IAEZ,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA,EAEA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,aAAa,OAAO,MAAM,MAAM,OAAO;AAAA,MACzC;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,WAAW;AAAA,QACT,SAAS;AAAA,QACT,cAAc,MAAM;AAAA,QAEpB,iBAAiB,OAAO,MAAM,MAAM,SAAS;AAAA,MAC/C;AAAA,MACA,UAAU;AAAA,QACR,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,aAAa,OAAO,MAAM,MAAM,MAAM;AAAA,QACtC,cAAc,MAAM;AAAA,QAEpB,iBAAiB,OAAO,MAAM,MAAM,UAAU;AAAA,MAChD;AAAA,IACF;AAAA,EACF;AACF,CAAC;","names":[]}
|
|
@@ -1,12 +1,15 @@
|
|
|
1
|
-
import
|
|
1
|
+
import "../../chunk-424PT5DM.js";
|
|
2
|
+
|
|
3
|
+
// src/components/Select/SelectTrigger.tsx
|
|
2
4
|
import { useContext } from "react";
|
|
3
5
|
import clsx from "clsx";
|
|
4
6
|
import { ChevronDownIcon } from "lucide-react";
|
|
5
|
-
import { sx } from "#styles";
|
|
6
|
-
import { SelectContext } from "./SelectContext";
|
|
7
|
-
import * as s from "./SelectTrigger.css";
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
import { sx } from "#styles.mjs";
|
|
8
|
+
import { SelectContext } from "./SelectContext.mjs";
|
|
9
|
+
import * as s from "./SelectTrigger.css.mjs";
|
|
10
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
+
var SelectTrigger = ({
|
|
12
|
+
children: children2,
|
|
10
13
|
className,
|
|
11
14
|
variant,
|
|
12
15
|
sx: propSx
|
|
@@ -29,7 +32,7 @@ const SelectTrigger = ({
|
|
|
29
32
|
),
|
|
30
33
|
onClick: handleClick,
|
|
31
34
|
children: [
|
|
32
|
-
/* @__PURE__ */ jsx("span", { className: s.children, children }),
|
|
35
|
+
/* @__PURE__ */ jsx("span", { className: s.children, children: children2 }),
|
|
33
36
|
/* @__PURE__ */ jsx("span", { className: s.icon({ isActive: state.isActive }), children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: "1em", strokeWidth: "2px" }) })
|
|
34
37
|
]
|
|
35
38
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Select/SelectTrigger.tsx"],"sourcesContent":["import { useContext } from 'react';\n\nimport clsx from 'clsx';\nimport { ChevronDownIcon } from 'lucide-react';\n\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport { SelectContext } from './SelectContext';\nimport * as s from './SelectTrigger.css';\n\ntype SelectTriggerProps = UIComponent<'div', typeof s.selectTrigger>;\n\nconst SelectTrigger = ({\n children,\n className,\n variant,\n sx: propSx,\n}: SelectTriggerProps) => {\n const selectContext = useContext(SelectContext);\n\n if (!selectContext) {\n throw new Error('SelectTrigger must be rendered within a Select.');\n }\n\n const { state, dispatch } = selectContext;\n\n const handleClick = () => {\n dispatch({ type: 'TOGGLE' });\n };\n\n return (\n <div\n className={clsx(\n s.selectTrigger({ isActive: state.isActive, variant }),\n className,\n sx(propSx),\n )}\n onClick={handleClick}\n >\n <span className={s.children}>{children}</span>\n <span className={s.icon({ isActive: state.isActive })}>\n <ChevronDownIcon size=\"1em\" strokeWidth=\"2px\" />\n </span>\n </div>\n );\n};\n\nexport default SelectTrigger;\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Select/SelectTrigger.tsx"],"sourcesContent":["import { useContext } from 'react';\n\nimport clsx from 'clsx';\nimport { ChevronDownIcon } from 'lucide-react';\n\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport { SelectContext } from './SelectContext';\nimport * as s from './SelectTrigger.css';\n\ntype SelectTriggerProps = UIComponent<'div', typeof s.selectTrigger>;\n\nconst SelectTrigger = ({\n children,\n className,\n variant,\n sx: propSx,\n}: SelectTriggerProps) => {\n const selectContext = useContext(SelectContext);\n\n if (!selectContext) {\n throw new Error('SelectTrigger must be rendered within a Select.');\n }\n\n const { state, dispatch } = selectContext;\n\n const handleClick = () => {\n dispatch({ type: 'TOGGLE' });\n };\n\n return (\n <div\n className={clsx(\n s.selectTrigger({ isActive: state.isActive, variant }),\n className,\n sx(propSx),\n )}\n onClick={handleClick}\n >\n <span className={s.children}>{children}</span>\n <span className={s.icon({ isActive: state.isActive })}>\n <ChevronDownIcon size=\"1em\" strokeWidth=\"2px\" />\n </span>\n </div>\n );\n};\n\nexport default SelectTrigger;\n"],"mappings":";;;AAAA,SAAS,kBAAkB;AAE3B,OAAO,UAAU;AACjB,SAAS,uBAAuB;AAEhC,SAAS,UAAU;AAGnB,SAAS,qBAAqB;AAC9B,YAAY,OAAO;AAuBf,SAQE,KARF;AAnBJ,IAAM,gBAAgB,CAAC;AAAA,EACrB,UAAAA;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI;AACN,MAA0B;AACxB,QAAM,gBAAgB,WAAW,aAAa;AAE9C,MAAI,CAAC,eAAe;AAClB,UAAM,IAAI,MAAM,iDAAiD;AAAA,EACnE;AAEA,QAAM,EAAE,OAAO,SAAS,IAAI;AAE5B,QAAM,cAAc,MAAM;AACxB,aAAS,EAAE,MAAM,SAAS,CAAC;AAAA,EAC7B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACP,gBAAc,EAAE,UAAU,MAAM,UAAU,QAAQ,CAAC;AAAA,QACrD;AAAA,QACA,GAAG,MAAM;AAAA,MACX;AAAA,MACA,SAAS;AAAA,MAET;AAAA,4BAAC,UAAK,WAAa,YAAW,UAAAA,WAAS;AAAA,QACvC,oBAAC,UAAK,WAAa,OAAK,EAAE,UAAU,MAAM,SAAS,CAAC,GAClD,8BAAC,mBAAgB,MAAK,OAAM,aAAY,OAAM,GAChD;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,wBAAQ;","names":["children"]}
|