@kimdw-rtk/ui 0.0.16 → 0.0.18
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/components/Accordion/Accordion.css.mjs +4 -7
- package/dist/components/Accordion/Accordion.css.mjs.map +1 -1
- package/dist/components/Accordion/Accordion.mjs +5 -8
- package/dist/components/Accordion/Accordion.mjs.map +1 -1
- package/dist/components/Accordion/Accordion.spec.mjs +2 -3
- package/dist/components/Accordion/Accordion.spec.mjs.map +1 -1
- package/dist/components/Accordion/AccordionContent.css.mjs +4 -7
- package/dist/components/Accordion/AccordionContent.css.mjs.map +1 -1
- package/dist/components/Accordion/AccordionContent.mjs +19 -22
- package/dist/components/Accordion/AccordionContent.mjs.map +1 -1
- package/dist/components/Accordion/AccordionContext.mjs +2 -5
- package/dist/components/Accordion/AccordionContext.mjs.map +1 -1
- package/dist/components/Accordion/AccordionTrigger.css.mjs +4 -7
- package/dist/components/Accordion/AccordionTrigger.css.mjs.map +1 -1
- package/dist/components/Accordion/AccordionTrigger.mjs +4 -7
- package/dist/components/Accordion/AccordionTrigger.mjs.map +1 -1
- package/dist/components/Accordion/index.mjs +3 -4
- package/dist/components/Accordion/index.mjs.map +1 -1
- package/dist/components/Alert/index.mjs +4 -7
- package/dist/components/Alert/index.mjs.map +1 -1
- package/dist/components/Box/Box.css.mjs +3 -6
- package/dist/components/Box/Box.css.mjs.map +1 -1
- package/dist/components/Box/Box.spec.mjs +2 -3
- package/dist/components/Box/Box.spec.mjs.map +1 -1
- package/dist/components/Box/index.mjs +5 -8
- package/dist/components/Box/index.mjs.map +1 -1
- package/dist/components/Button/Button.css.mjs +12 -15
- package/dist/components/Button/Button.css.mjs.map +1 -1
- package/dist/components/Button/Button.spec.mjs +5 -12
- package/dist/components/Button/Button.spec.mjs.map +1 -1
- package/dist/components/Button/index.mjs +8 -11
- package/dist/components/Button/index.mjs.map +1 -1
- package/dist/components/Card/Card.css.mjs +8 -11
- package/dist/components/Card/Card.css.mjs.map +1 -1
- package/dist/components/Card/Card.mjs +4 -7
- package/dist/components/Card/Card.mjs.map +1 -1
- package/dist/components/Card/Card.spec.mjs +4 -11
- package/dist/components/Card/Card.spec.mjs.map +1 -1
- package/dist/components/Card/CardContent.css.mjs +3 -6
- package/dist/components/Card/CardContent.css.mjs.map +1 -1
- package/dist/components/Card/CardContent.mjs +4 -7
- package/dist/components/Card/CardContent.mjs.map +1 -1
- package/dist/components/Card/CardInteraction.css.mjs +2 -5
- package/dist/components/Card/CardInteraction.css.mjs.map +1 -1
- package/dist/components/Card/CardInteraction.mjs +5 -8
- package/dist/components/Card/CardInteraction.mjs.map +1 -1
- package/dist/components/Card/CardThumbnail.css.mjs +2 -5
- package/dist/components/Card/CardThumbnail.css.mjs.map +1 -1
- package/dist/components/Card/CardThumbnail.mjs +4 -7
- package/dist/components/Card/CardThumbnail.mjs.map +1 -1
- package/dist/components/Card/index.mjs +4 -5
- package/dist/components/Card/index.mjs.map +1 -1
- package/dist/components/Chip/Chip.css.mjs +9 -12
- package/dist/components/Chip/Chip.css.mjs.map +1 -1
- package/dist/components/Chip/Chip.mjs +4 -7
- package/dist/components/Chip/Chip.mjs.map +1 -1
- package/dist/components/Chip/Chip.spec.mjs +2 -3
- package/dist/components/Chip/Chip.spec.mjs.map +1 -1
- package/dist/components/Chip/index.mjs +1 -2
- package/dist/components/Chip/index.mjs.map +1 -1
- package/dist/components/Confirm/index.mjs +3 -6
- package/dist/components/Confirm/index.mjs.map +1 -1
- package/dist/components/Dialog/Dialog.css.mjs +3 -6
- package/dist/components/Dialog/Dialog.css.mjs.map +1 -1
- package/dist/components/Dialog/Dialog.mjs +5 -8
- package/dist/components/Dialog/Dialog.mjs.map +1 -1
- package/dist/components/Dialog/Dialog.spec.mjs +4 -11
- package/dist/components/Dialog/Dialog.spec.mjs.map +1 -1
- package/dist/components/Dialog/DialogContent.css.mjs +5 -8
- package/dist/components/Dialog/DialogContent.css.mjs.map +1 -1
- package/dist/components/Dialog/DialogContent.mjs +5 -8
- package/dist/components/Dialog/DialogContent.mjs.map +1 -1
- package/dist/components/Dialog/DialogFooter.css.mjs +3 -6
- package/dist/components/Dialog/DialogFooter.css.mjs.map +1 -1
- package/dist/components/Dialog/DialogFooter.mjs +4 -7
- package/dist/components/Dialog/DialogFooter.mjs.map +1 -1
- package/dist/components/Dialog/DialogHeader.css.mjs +4 -7
- package/dist/components/Dialog/DialogHeader.css.mjs.map +1 -1
- package/dist/components/Dialog/DialogHeader.mjs +5 -8
- package/dist/components/Dialog/DialogHeader.mjs.map +1 -1
- package/dist/components/Dialog/index.mjs +4 -5
- package/dist/components/Dialog/index.mjs.map +1 -1
- package/dist/components/Navigation/Navigation.spec.mjs +3 -4
- package/dist/components/Navigation/Navigation.spec.mjs.map +1 -1
- package/dist/components/Navigation/NavigationAside.css.mjs +2 -5
- package/dist/components/Navigation/NavigationAside.css.mjs.map +1 -1
- package/dist/components/Navigation/NavigationAside.mjs +4 -7
- package/dist/components/Navigation/NavigationAside.mjs.map +1 -1
- package/dist/components/Navigation/NavigationBar.css.mjs +4 -7
- package/dist/components/Navigation/NavigationBar.css.mjs.map +1 -1
- package/dist/components/Navigation/NavigationBar.mjs +4 -7
- package/dist/components/Navigation/NavigationBar.mjs.map +1 -1
- package/dist/components/Navigation/NavigationContainer.css.mjs +1 -4
- package/dist/components/Navigation/NavigationContainer.css.mjs.map +1 -1
- package/dist/components/Navigation/NavigationContainer.mjs +4 -7
- package/dist/components/Navigation/NavigationContainer.mjs.map +1 -1
- package/dist/components/Navigation/NavigationDrawer.css.mjs +6 -9
- package/dist/components/Navigation/NavigationDrawer.css.mjs.map +1 -1
- package/dist/components/Navigation/NavigationDrawer.mjs +4 -7
- package/dist/components/Navigation/NavigationDrawer.mjs.map +1 -1
- package/dist/components/Navigation/NavigationItem.css.mjs +5 -8
- package/dist/components/Navigation/NavigationItem.css.mjs.map +1 -1
- package/dist/components/Navigation/NavigationItem.mjs +4 -7
- package/dist/components/Navigation/NavigationItem.mjs.map +1 -1
- package/dist/components/Navigation/NavigationLogo.css.mjs +2 -5
- package/dist/components/Navigation/NavigationLogo.css.mjs.map +1 -1
- package/dist/components/Navigation/NavigationLogo.mjs +4 -7
- package/dist/components/Navigation/NavigationLogo.mjs.map +1 -1
- package/dist/components/Navigation/NavigationMenu.css.mjs +5 -8
- package/dist/components/Navigation/NavigationMenu.css.mjs.map +1 -1
- package/dist/components/Navigation/NavigationMenu.mjs +4 -7
- package/dist/components/Navigation/NavigationMenu.mjs.map +1 -1
- package/dist/components/Navigation/index.mjs +7 -8
- package/dist/components/Navigation/index.mjs.map +1 -1
- package/dist/components/Range/Range.css.mjs +11 -14
- package/dist/components/Range/Range.css.mjs.map +1 -1
- package/dist/components/Range/Range.mjs +5 -8
- package/dist/components/Range/Range.mjs.map +1 -1
- package/dist/components/Range/Range.spec.mjs +2 -3
- package/dist/components/Range/Range.spec.mjs.map +1 -1
- package/dist/components/Range/index.mjs +1 -2
- package/dist/components/Range/index.mjs.map +1 -1
- package/dist/components/ScrollArea/ScrollArea.css.mjs +7 -10
- package/dist/components/ScrollArea/ScrollArea.css.mjs.map +1 -1
- package/dist/components/ScrollArea/ScrollArea.mjs +5 -8
- package/dist/components/ScrollArea/ScrollArea.mjs.map +1 -1
- package/dist/components/ScrollArea/ScrollArea.spec.mjs +2 -3
- package/dist/components/ScrollArea/ScrollArea.spec.mjs.map +1 -1
- package/dist/components/ScrollArea/index.mjs +1 -2
- package/dist/components/ScrollArea/index.mjs.map +1 -1
- package/dist/components/Select/Select.css.mjs +3 -6
- package/dist/components/Select/Select.css.mjs.map +1 -1
- package/dist/components/Select/Select.mjs +7 -10
- package/dist/components/Select/Select.mjs.map +1 -1
- package/dist/components/Select/Select.spec.mjs +9 -16
- package/dist/components/Select/Select.spec.mjs.map +1 -1
- package/dist/components/Select/SelectContext.mjs +2 -5
- package/dist/components/Select/SelectContext.mjs.map +1 -1
- package/dist/components/Select/SelectOption.css.mjs +3 -6
- package/dist/components/Select/SelectOption.css.mjs.map +1 -1
- package/dist/components/Select/SelectOption.mjs +4 -7
- package/dist/components/Select/SelectOption.mjs.map +1 -1
- package/dist/components/Select/SelectOptionList.css.mjs +4 -7
- package/dist/components/Select/SelectOptionList.css.mjs.map +1 -1
- package/dist/components/Select/SelectOptionList.mjs +10 -13
- package/dist/components/Select/SelectOptionList.mjs.map +1 -1
- package/dist/components/Select/SelectTrigger.css.mjs +4 -7
- package/dist/components/Select/SelectTrigger.css.mjs.map +1 -1
- package/dist/components/Select/SelectTrigger.mjs +7 -10
- package/dist/components/Select/SelectTrigger.mjs.map +1 -1
- package/dist/components/Select/index.mjs +2 -3
- package/dist/components/Select/index.mjs.map +1 -1
- package/dist/components/Skeleton/Skeleton.css.mjs +4 -7
- package/dist/components/Skeleton/Skeleton.css.mjs.map +1 -1
- package/dist/components/Skeleton/Skeleton.spec.mjs +2 -3
- package/dist/components/Skeleton/Skeleton.spec.mjs.map +1 -1
- package/dist/components/Skeleton/index.mjs +4 -7
- package/dist/components/Skeleton/index.mjs.map +1 -1
- package/dist/components/Table/Table.css.mjs +3 -6
- package/dist/components/Table/Table.css.mjs.map +1 -1
- package/dist/components/Table/Table.mjs +4 -7
- package/dist/components/Table/Table.mjs.map +1 -1
- package/dist/components/Table/Table.spec.mjs +2 -3
- package/dist/components/Table/Table.spec.mjs.map +1 -1
- package/dist/components/Table/TableBody.mjs +3 -6
- package/dist/components/Table/TableBody.mjs.map +1 -1
- package/dist/components/Table/TableCell.css.mjs +5 -8
- package/dist/components/Table/TableCell.css.mjs.map +1 -1
- package/dist/components/Table/TableCell.mjs +5 -8
- package/dist/components/Table/TableCell.mjs.map +1 -1
- package/dist/components/Table/TableHead.css.mjs +3 -6
- package/dist/components/Table/TableHead.css.mjs.map +1 -1
- package/dist/components/Table/TableHead.mjs +5 -8
- package/dist/components/Table/TableHead.mjs.map +1 -1
- package/dist/components/Table/TableHeader.mjs +3 -6
- package/dist/components/Table/TableHeader.mjs.map +1 -1
- package/dist/components/Table/TableRow.css.mjs +2 -5
- package/dist/components/Table/TableRow.css.mjs.map +1 -1
- package/dist/components/Table/TableRow.mjs +4 -7
- package/dist/components/Table/TableRow.mjs.map +1 -1
- package/dist/components/Table/index.mjs +6 -7
- package/dist/components/Table/index.mjs.map +1 -1
- package/dist/components/Tabs/Tabs.mjs +4 -7
- package/dist/components/Tabs/Tabs.mjs.map +1 -1
- package/dist/components/Tabs/Tabs.spec.mjs +11 -18
- package/dist/components/Tabs/Tabs.spec.mjs.map +1 -1
- package/dist/components/Tabs/TabsContent.mjs +4 -7
- package/dist/components/Tabs/TabsContent.mjs.map +1 -1
- package/dist/components/Tabs/TabsList.css.mjs +3 -6
- package/dist/components/Tabs/TabsList.css.mjs.map +1 -1
- package/dist/components/Tabs/TabsList.mjs +4 -7
- package/dist/components/Tabs/TabsList.mjs.map +1 -1
- package/dist/components/Tabs/TabsProvider.mjs +2 -5
- package/dist/components/Tabs/TabsProvider.mjs.map +1 -1
- package/dist/components/Tabs/TabsTrigger.css.mjs +3 -6
- package/dist/components/Tabs/TabsTrigger.css.mjs.map +1 -1
- package/dist/components/Tabs/TabsTrigger.mjs +5 -8
- package/dist/components/Tabs/TabsTrigger.mjs.map +1 -1
- package/dist/components/Tabs/index.mjs +4 -5
- package/dist/components/Tabs/index.mjs.map +1 -1
- package/dist/components/TextField/TextField.css.mjs +8 -11
- package/dist/components/TextField/TextField.css.mjs.map +1 -1
- package/dist/components/TextField/TextField.spec.mjs +2 -3
- package/dist/components/TextField/TextField.spec.mjs.map +1 -1
- package/dist/components/TextField/index.mjs +4 -7
- package/dist/components/TextField/index.mjs.map +1 -1
- package/dist/components/Toast/Toast.css.mjs +9 -12
- package/dist/components/Toast/Toast.css.mjs.map +1 -1
- package/dist/components/Toast/Toast.spec.mjs +2 -3
- package/dist/components/Toast/Toast.spec.mjs.map +1 -1
- package/dist/components/Toast/index.mjs +5 -8
- package/dist/components/Toast/index.mjs.map +1 -1
- package/dist/components/Typography/Typography.css.mjs +2 -5
- package/dist/components/Typography/Typography.css.mjs.map +1 -1
- package/dist/components/Typography/Typography.spec.mjs +5 -12
- package/dist/components/Typography/Typography.spec.mjs.map +1 -1
- package/dist/components/Typography/index.mjs +5 -8
- package/dist/components/Typography/index.mjs.map +1 -1
- package/dist/components/index.mjs +18 -19
- package/dist/components/index.mjs.map +1 -1
- package/dist/contexts/UIProvider.mjs +4 -7
- package/dist/contexts/UIProvider.mjs.map +1 -1
- package/dist/contexts/index.mjs +1 -2
- package/dist/contexts/index.mjs.map +1 -1
- package/dist/hooks/index.mjs +5 -6
- package/dist/hooks/index.mjs.map +1 -1
- package/dist/hooks/useDialog/index.mjs +3 -6
- package/dist/hooks/useDialog/index.mjs.map +1 -1
- package/dist/hooks/useDialog/useDialog.spec.mjs +13 -20
- package/dist/hooks/useDialog/useDialog.spec.mjs.map +1 -1
- package/dist/hooks/useMouseScroll/index.mjs +1 -4
- package/dist/hooks/useMouseScroll/index.mjs.map +1 -1
- package/dist/hooks/usePointerSlider/index.mjs +1 -4
- package/dist/hooks/usePointerSlider/index.mjs.map +1 -1
- package/dist/hooks/useRipple/index.mjs +19 -22
- package/dist/hooks/useRipple/index.mjs.map +1 -1
- package/dist/hooks/useRipple/ripple.css.mjs +3 -6
- package/dist/hooks/useRipple/ripple.css.mjs.map +1 -1
- package/dist/hooks/useToast/ToastContainer.css.mjs +1 -4
- package/dist/hooks/useToast/ToastContainer.css.mjs.map +1 -1
- package/dist/hooks/useToast/ToastContainer.mjs +2 -5
- package/dist/hooks/useToast/ToastContainer.mjs.map +1 -1
- package/dist/hooks/useToast/ToastProvider.mjs +6 -9
- package/dist/hooks/useToast/ToastProvider.mjs.map +1 -1
- package/dist/hooks/useToast/index.mjs +2 -5
- package/dist/hooks/useToast/index.mjs.map +1 -1
- package/dist/index.mjs +8 -9
- package/dist/index.mjs.map +1 -1
- package/dist/styles/globalStyle.css.mjs +1 -2
- package/dist/styles/globalStyle.css.mjs.map +1 -1
- package/dist/styles/index.mjs +4 -5
- package/dist/styles/index.mjs.map +1 -1
- package/dist/styles/layers.css.mjs +2 -5
- package/dist/styles/layers.css.mjs.map +1 -1
- package/dist/styles/overlay.css.mjs +3 -6
- package/dist/styles/overlay.css.mjs.map +1 -1
- package/dist/styles/sprinkles.css.mjs +10 -13
- package/dist/styles/sprinkles.css.mjs.map +1 -1
- package/dist/styles/sx.mjs +2 -5
- package/dist/styles/sx.mjs.map +1 -1
- package/dist/tests/uiTest.mjs +9 -15
- package/dist/tests/uiTest.mjs.map +1 -1
- package/dist/themes/darkTheme.css.mjs +2 -5
- package/dist/themes/darkTheme.css.mjs.map +1 -1
- package/dist/themes/index.mjs +3 -6
- package/dist/themes/index.mjs.map +1 -1
- package/dist/themes/lightTheme.css.mjs +2 -5
- package/dist/themes/lightTheme.css.mjs.map +1 -1
- package/dist/themes/theme.css.mjs +4 -7
- package/dist/themes/theme.css.mjs.map +1 -1
- package/dist/tokens/index.mjs +5 -8
- package/dist/tokens/index.mjs.map +1 -1
- package/dist/tokens/scale/color.mjs +3 -6
- package/dist/tokens/scale/color.mjs.map +1 -1
- package/dist/tokens/semantic/breakpoint.mjs +1 -4
- package/dist/tokens/semantic/breakpoint.mjs.map +1 -1
- package/dist/tokens/semantic/color.mjs +1 -4
- package/dist/tokens/semantic/color.mjs.map +1 -1
- package/dist/tokens/semantic/spacing.mjs +1 -4
- package/dist/tokens/semantic/spacing.mjs.map +1 -1
- package/dist/tokens/semantic/typography.mjs +1 -4
- package/dist/tokens/semantic/typography.mjs.map +1 -1
- package/dist/types/index.mjs +1 -2
- package/dist/types/index.mjs.map +1 -1
- package/dist/utils/index.mjs +1 -2
- package/dist/utils/index.mjs.map +1 -1
- package/dist/utils/sprinklesUtils.mjs +3 -6
- package/dist/utils/sprinklesUtils.mjs.map +1 -1
- package/dist/utils/styleUtils.css.mjs +3 -6
- package/dist/utils/styleUtils.css.mjs.map +1 -1
- package/package.json +3 -7
- package/dist/chunk-IEP6GGEX.mjs +0 -23
- package/dist/chunk-IEP6GGEX.mjs.map +0 -1
- package/dist/chunk-Y4CBEQ5S.mjs +0 -456
- package/dist/chunk-Y4CBEQ5S.mjs.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Button/index.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ReactElement } from 'react';\n\nimport { clsx } from 'clsx';\n\nimport { useRipple } from '#hooks';\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './Button.css';\n\ninterface ButtonProps\n extends Omit<UIComponent<'button', typeof s.button>, 'hasIcon'> {\n icon?: ReactElement;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n children,\n color = 'primary',\n size = 'md',\n variant = 'contained',\n pulse = false,\n className,\n sx: propSx,\n icon,\n ...props\n },\n ref,\n ) => {\n const { ripple } = useRipple<HTMLButtonElement>(ref);\n\n return (\n <button\n ref={ref}\n className={clsx(\n className,\n s.button({\n color,\n size,\n variant,\n pulse,\n hasIcon: icon !== undefined,\n }),\n sx(propSx),\n )}\n {...props}\n >\n {icon !== undefined && <span className={s.icon}>{icon}</span>}\n <span className={s.span({ size })}>{children}</span>\n {ripple}\n </button>\n );\n },\n);\nButton.displayName = 'Button';\n\nexport { s as buttonCss };\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Button/index.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ReactElement } from 'react';\n\nimport { clsx } from 'clsx';\n\nimport { useRipple } from '#hooks';\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './Button.css';\n\ninterface ButtonProps\n extends Omit<UIComponent<'button', typeof s.button>, 'hasIcon'> {\n icon?: ReactElement;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n children,\n color = 'primary',\n size = 'md',\n variant = 'contained',\n pulse = false,\n className,\n sx: propSx,\n icon,\n ...props\n },\n ref,\n ) => {\n const { ripple } = useRipple<HTMLButtonElement>(ref);\n\n return (\n <button\n ref={ref}\n className={clsx(\n className,\n s.button({\n color,\n size,\n variant,\n pulse,\n hasIcon: icon !== undefined,\n }),\n sx(propSx),\n )}\n {...props}\n >\n {icon !== undefined && <span className={s.icon}>{icon}</span>}\n <span className={s.span({ size })}>{children}</span>\n {ripple}\n </button>\n );\n },\n);\nButton.displayName = 'Button';\n\nexport { s as buttonCss };\n"],"mappings":";AAmCM,SAeyB,KAfzB;AAjCN,SAAS,kBAAqC;AAE9C,SAAS,YAAY;AAErB,SAAS,iBAAiB;AAC1B,SAAS,UAAU;AAGnB,YAAY,OAAO;AAOZ,MAAM,SAAS;AAAA,EACpB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,OAAO,IAAI,UAA6B,GAAG;AAEnD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,EAAE,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,SAAS;AAAA,UACpB,CAAC;AAAA,UACD,GAAG,MAAM;AAAA,QACX;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,mBAAS,UAAa,oBAAC,UAAK,WAAW,EAAE,MAAO,gBAAK;AAAA,UACtD,oBAAC,UAAK,WAAW,EAAE,KAAK,EAAE,KAAK,CAAC,GAAI,UAAS;AAAA,UAC5C;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;","names":[]}
|
|
@@ -1,12 +1,9 @@
|
|
|
1
|
-
import "
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
import { SCALE_COLOR } from "../../tokens/scale/color.mjs";
|
|
8
|
-
import { cardInteraction } from "./CardInteraction.css.mjs";
|
|
9
|
-
var semanticColors = semanticColor.reduce(
|
|
1
|
+
import { recipeWithLayer, styleWithLayer } from "#styleUtils";
|
|
2
|
+
import { theme } from "#themes";
|
|
3
|
+
import { semanticColor } from "#tokens";
|
|
4
|
+
import { SCALE_COLOR } from "../../tokens/scale/color";
|
|
5
|
+
import { cardInteraction } from "./CardInteraction.css";
|
|
6
|
+
const semanticColors = semanticColor.reduce(
|
|
10
7
|
(prev, color) => ({
|
|
11
8
|
...prev,
|
|
12
9
|
[color]: styleWithLayer({
|
|
@@ -15,7 +12,7 @@ var semanticColors = semanticColor.reduce(
|
|
|
15
12
|
}),
|
|
16
13
|
{}
|
|
17
14
|
);
|
|
18
|
-
|
|
15
|
+
const scaleColors = SCALE_COLOR.reduce(
|
|
19
16
|
(prev, value) => ({
|
|
20
17
|
...prev,
|
|
21
18
|
[value]: styleWithLayer({
|
|
@@ -24,7 +21,7 @@ var scaleColors = SCALE_COLOR.reduce(
|
|
|
24
21
|
}),
|
|
25
22
|
{}
|
|
26
23
|
);
|
|
27
|
-
|
|
24
|
+
const card = recipeWithLayer({
|
|
28
25
|
base: {
|
|
29
26
|
display: "flex",
|
|
30
27
|
flexDirection: "column",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Card/Card.css.ts"],"sourcesContent":["import { recipeWithLayer, styleWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\nimport { semanticColor } from '#tokens';\n\nimport { SCALE_COLOR, type ScaleColor } from '../../tokens/scale/color';\nimport { cardInteraction } from './CardInteraction.css';\n\nconst semanticColors = semanticColor.reduce(\n (prev, color) => ({\n ...prev,\n [color]: styleWithLayer({\n backgroundColor: `rgb(${theme.color[color]})`,\n }),\n }),\n {} as Record<(typeof semanticColor)[number], string>,\n);\n\nconst scaleColors = SCALE_COLOR.reduce(\n (prev, value) => ({\n ...prev,\n [value]: styleWithLayer({\n backgroundColor: `color-mix(in srgb, rgb(${theme.color[value][500]}) 20%, rgb(${theme.color.background}) 80%)`,\n }),\n }),\n {} as Record<ScaleColor, string>,\n);\n\nexport const card = recipeWithLayer({\n base: {\n display: 'flex',\n flexDirection: 'column',\n overflow: 'hidden',\n position: 'relative',\n\n borderRadius: theme.borderRadius,\n\n color: `rgb(${theme.color.foreground})`,\n\n transition: 'border-color 0.2s ease, transform 0.4s ease',\n\n selectors: {\n [`&:has(${cardInteraction}:hover)`]: {\n borderColor: `color-mix(in srgb, rgb(${theme.color.primary}) 10%, rgb(${theme.color.border}) 90%)`,\n },\n\n [`&:has(${cardInteraction}:active)`]: {\n borderColor: `color-mix(in srgb, rgb(${theme.color.primary}) 40%, rgb(${theme.color.border}) 60%)`,\n },\n },\n },\n variants: {\n variant: {\n contained: {},\n\n outlined: {\n border: '1px solid',\n borderColor: `rgb(${theme.color.border})`,\n },\n\n glass: {\n border: `1px solid rgb(${theme.color['border.weak']})`,\n borderRadius: '0.75rem',\n\n background: `linear-gradient(rgba(${theme.color['card.gradient']}, 0.06) 0%, rgba(${theme.color['card.gradient']}, 0.02) 100%)`,\n backdropFilter: 'blur(1rem)',\n\n '::before': {\n position: 'absolute',\n inset: '0',\n\n background:\n 'linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%)',\n\n opacity: '0',\n transition: 'opacity 0.3s ease',\n\n content: '',\n },\n\n selectors: {\n '&:hover::before': {\n opacity: '1',\n },\n },\n },\n },\n\n color: {\n ...semanticColors,\n ...scaleColors,\n },\n },\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Card/Card.css.ts"],"sourcesContent":["import { recipeWithLayer, styleWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\nimport { semanticColor } from '#tokens';\n\nimport { SCALE_COLOR, type ScaleColor } from '../../tokens/scale/color';\nimport { cardInteraction } from './CardInteraction.css';\n\nconst semanticColors = semanticColor.reduce(\n (prev, color) => ({\n ...prev,\n [color]: styleWithLayer({\n backgroundColor: `rgb(${theme.color[color]})`,\n }),\n }),\n {} as Record<(typeof semanticColor)[number], string>,\n);\n\nconst scaleColors = SCALE_COLOR.reduce(\n (prev, value) => ({\n ...prev,\n [value]: styleWithLayer({\n backgroundColor: `color-mix(in srgb, rgb(${theme.color[value][500]}) 20%, rgb(${theme.color.background}) 80%)`,\n }),\n }),\n {} as Record<ScaleColor, string>,\n);\n\nexport const card = recipeWithLayer({\n base: {\n display: 'flex',\n flexDirection: 'column',\n overflow: 'hidden',\n position: 'relative',\n\n borderRadius: theme.borderRadius,\n\n color: `rgb(${theme.color.foreground})`,\n\n transition: 'border-color 0.2s ease, transform 0.4s ease',\n\n selectors: {\n [`&:has(${cardInteraction}:hover)`]: {\n borderColor: `color-mix(in srgb, rgb(${theme.color.primary}) 10%, rgb(${theme.color.border}) 90%)`,\n },\n\n [`&:has(${cardInteraction}:active)`]: {\n borderColor: `color-mix(in srgb, rgb(${theme.color.primary}) 40%, rgb(${theme.color.border}) 60%)`,\n },\n },\n },\n variants: {\n variant: {\n contained: {},\n\n outlined: {\n border: '1px solid',\n borderColor: `rgb(${theme.color.border})`,\n },\n\n glass: {\n border: `1px solid rgb(${theme.color['border.weak']})`,\n borderRadius: '0.75rem',\n\n background: `linear-gradient(rgba(${theme.color['card.gradient']}, 0.06) 0%, rgba(${theme.color['card.gradient']}, 0.02) 100%)`,\n backdropFilter: 'blur(1rem)',\n\n '::before': {\n position: 'absolute',\n inset: '0',\n\n background:\n 'linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%)',\n\n opacity: '0',\n transition: 'opacity 0.3s ease',\n\n content: '',\n },\n\n selectors: {\n '&:hover::before': {\n opacity: '1',\n },\n },\n },\n },\n\n color: {\n ...semanticColors,\n ...scaleColors,\n },\n },\n});\n"],"mappings":"AAAA,SAAS,iBAAiB,sBAAsB;AAChD,SAAS,aAAa;AACtB,SAAS,qBAAqB;AAE9B,SAAS,mBAAoC;AAC7C,SAAS,uBAAuB;AAEhC,MAAM,iBAAiB,cAAc;AAAA,EACnC,CAAC,MAAM,WAAW;AAAA,IAChB,GAAG;AAAA,IACH,CAAC,KAAK,GAAG,eAAe;AAAA,MACtB,iBAAiB,OAAO,MAAM,MAAM,KAAK,CAAC;AAAA,IAC5C,CAAC;AAAA,EACH;AAAA,EACA,CAAC;AACH;AAEA,MAAM,cAAc,YAAY;AAAA,EAC9B,CAAC,MAAM,WAAW;AAAA,IAChB,GAAG;AAAA,IACH,CAAC,KAAK,GAAG,eAAe;AAAA,MACtB,iBAAiB,0BAA0B,MAAM,MAAM,KAAK,EAAE,GAAG,CAAC,cAAc,MAAM,MAAM,UAAU;AAAA,IACxG,CAAC;AAAA,EACH;AAAA,EACA,CAAC;AACH;AAEO,MAAM,OAAO,gBAAgB;AAAA,EAClC,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,UAAU;AAAA,IACV,UAAU;AAAA,IAEV,cAAc,MAAM;AAAA,IAEpB,OAAO,OAAO,MAAM,MAAM,UAAU;AAAA,IAEpC,YAAY;AAAA,IAEZ,WAAW;AAAA,MACT,CAAC,SAAS,eAAe,SAAS,GAAG;AAAA,QACnC,aAAa,0BAA0B,MAAM,MAAM,OAAO,cAAc,MAAM,MAAM,MAAM;AAAA,MAC5F;AAAA,MAEA,CAAC,SAAS,eAAe,UAAU,GAAG;AAAA,QACpC,aAAa,0BAA0B,MAAM,MAAM,OAAO,cAAc,MAAM,MAAM,MAAM;AAAA,MAC5F;AAAA,IACF;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,WAAW,CAAC;AAAA,MAEZ,UAAU;AAAA,QACR,QAAQ;AAAA,QACR,aAAa,OAAO,MAAM,MAAM,MAAM;AAAA,MACxC;AAAA,MAEA,OAAO;AAAA,QACL,QAAQ,iBAAiB,MAAM,MAAM,aAAa,CAAC;AAAA,QACnD,cAAc;AAAA,QAEd,YAAY,wBAAwB,MAAM,MAAM,eAAe,CAAC,oBAAoB,MAAM,MAAM,eAAe,CAAC;AAAA,QAChH,gBAAgB;AAAA,QAEhB,YAAY;AAAA,UACV,UAAU;AAAA,UACV,OAAO;AAAA,UAEP,YACE;AAAA,UAEF,SAAS;AAAA,UACT,YAAY;AAAA,UAEZ,SAAS;AAAA,QACX;AAAA,QAEA,WAAW;AAAA,UACT,mBAAmB;AAAA,YACjB,SAAS;AAAA,UACX;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IAEA,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,EACF;AACF,CAAC;","names":[]}
|
|
@@ -1,12 +1,9 @@
|
|
|
1
|
-
import "
|
|
2
|
-
|
|
3
|
-
// src/components/Card/Card.tsx
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
2
|
import { forwardRef } from "react";
|
|
5
3
|
import clsx from "clsx";
|
|
6
|
-
import { sx } from "#styles
|
|
7
|
-
import * as s from "./Card.css
|
|
8
|
-
|
|
9
|
-
var Card = forwardRef(
|
|
4
|
+
import { sx } from "#styles";
|
|
5
|
+
import * as s from "./Card.css";
|
|
6
|
+
const Card = forwardRef(
|
|
10
7
|
({
|
|
11
8
|
width,
|
|
12
9
|
height,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties } from 'react';\n\nimport clsx from 'clsx';\n\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './Card.css';\n\ninterface CardProps extends UIComponent<'div', typeof s.card> {\n width?: CSSProperties['width'];\n height?: CSSProperties['height'];\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n (\n {\n width,\n height,\n color = 'card',\n variant = 'outlined',\n className,\n style,\n sx: propSx,\n ...props\n },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n className={clsx(s.card({ color, variant }), className, sx(propSx))}\n style={{ width, height, ...style }}\n {...props}\n />\n );\n },\n);\nCard.displayName = 'Card';\n\nexport { s as cardCss };\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties } from 'react';\n\nimport clsx from 'clsx';\n\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './Card.css';\n\ninterface CardProps extends UIComponent<'div', typeof s.card> {\n width?: CSSProperties['width'];\n height?: CSSProperties['height'];\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n (\n {\n width,\n height,\n color = 'card',\n variant = 'outlined',\n className,\n style,\n sx: propSx,\n ...props\n },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n className={clsx(s.card({ color, variant }), className, sx(propSx))}\n style={{ width, height, ...style }}\n {...props}\n />\n );\n },\n);\nCard.displayName = 'Card';\n\nexport { s as cardCss };\n"],"mappings":"AA6BM;AA7BN,SAAS,kBAAsC;AAE/C,OAAO,UAAU;AAEjB,SAAS,UAAU;AAGnB,YAAY,OAAO;AAOZ,MAAM,OAAO;AAAA,EAClB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ,GAAG;AAAA,EACL,GACA,QACG;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,EAAE,KAAK,EAAE,OAAO,QAAQ,CAAC,GAAG,WAAW,GAAG,MAAM,CAAC;AAAA,QACjE,OAAO,EAAE,OAAO,QAAQ,GAAG,MAAM;AAAA,QAChC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;","names":[]}
|
|
@@ -1,14 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
fireEvent,
|
|
3
|
-
react_esm_exports,
|
|
4
|
-
render
|
|
5
|
-
} from "../../chunk-Y4CBEQ5S.mjs";
|
|
6
|
-
import "../../chunk-IEP6GGEX.mjs";
|
|
7
|
-
|
|
8
|
-
// src/components/Card/Card.spec.tsx
|
|
9
|
-
import { uiTest } from "../../tests/uiTest.mjs";
|
|
10
|
-
import { Card, CardContent, CardInteraction, CardThumbnail } from ".//index.mjs";
|
|
11
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { render, screen, fireEvent } from "@testing-library/react";
|
|
3
|
+
import { uiTest } from "../../tests/uiTest";
|
|
4
|
+
import { Card, CardContent, CardInteraction, CardThumbnail } from "./";
|
|
12
5
|
describe("Card \uCEF4\uD3EC\uB10C\uD2B8", () => {
|
|
13
6
|
uiTest(Card, "Card");
|
|
14
7
|
uiTest(CardContent, "CardContent");
|
|
@@ -19,7 +12,7 @@ describe("Card \uCEF4\uD3EC\uB10C\uD2B8", () => {
|
|
|
19
12
|
render(
|
|
20
13
|
/* @__PURE__ */ jsx(Card, { onClick: handleClick, children: /* @__PURE__ */ jsx(CardInteraction, { children: "Click" }) })
|
|
21
14
|
);
|
|
22
|
-
fireEvent.click(
|
|
15
|
+
fireEvent.click(screen.getByText("Click"));
|
|
23
16
|
expect(handleClick).toHaveBeenCalledTimes(1);
|
|
24
17
|
});
|
|
25
18
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Card/Card.spec.tsx"],"sourcesContent":["import { render, screen, fireEvent } from '@testing-library/react';\n\nimport { uiTest } from '../../tests/uiTest';\nimport { Card, CardContent, CardInteraction, CardThumbnail } from './';\n\ndescribe('Card 컴포넌트', () => {\n uiTest(Card, 'Card');\n uiTest(CardContent, 'CardContent');\n uiTest(CardInteraction, 'CardInteraction');\n uiTest(CardThumbnail, 'CardThumbnail');\n\n it('CardInteraction을 클릭하면 onClick이 호출되어야 한다', () => {\n const handleClick = jest.fn();\n render(\n <Card onClick={handleClick}>\n <CardInteraction>Click</CardInteraction>\n </Card>,\n );\n\n fireEvent.click(screen.getByText('Click'));\n\n expect(handleClick).toHaveBeenCalledTimes(1);\n });\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Card/Card.spec.tsx"],"sourcesContent":["import { render, screen, fireEvent } from '@testing-library/react';\n\nimport { uiTest } from '../../tests/uiTest';\nimport { Card, CardContent, CardInteraction, CardThumbnail } from './';\n\ndescribe('Card 컴포넌트', () => {\n uiTest(Card, 'Card');\n uiTest(CardContent, 'CardContent');\n uiTest(CardInteraction, 'CardInteraction');\n uiTest(CardThumbnail, 'CardThumbnail');\n\n it('CardInteraction을 클릭하면 onClick이 호출되어야 한다', () => {\n const handleClick = jest.fn();\n render(\n <Card onClick={handleClick}>\n <CardInteraction>Click</CardInteraction>\n </Card>,\n );\n\n fireEvent.click(screen.getByText('Click'));\n\n expect(handleClick).toHaveBeenCalledTimes(1);\n });\n});\n"],"mappings":"AAeQ;AAfR,SAAS,QAAQ,QAAQ,iBAAiB;AAE1C,SAAS,cAAc;AACvB,SAAS,MAAM,aAAa,iBAAiB,qBAAqB;AAElE,SAAS,iCAAa,MAAM;AAC1B,SAAO,MAAM,MAAM;AACnB,SAAO,aAAa,aAAa;AACjC,SAAO,iBAAiB,iBAAiB;AACzC,SAAO,eAAe,eAAe;AAErC,KAAG,4GAA2C,MAAM;AAClD,UAAM,cAAc,KAAK,GAAG;AAC5B;AAAA,MACE,oBAAC,QAAK,SAAS,aACb,8BAAC,mBAAgB,mBAAK,GACxB;AAAA,IACF;AAEA,cAAU,MAAM,OAAO,UAAU,OAAO,CAAC;AAEzC,WAAO,WAAW,EAAE,sBAAsB,CAAC;AAAA,EAC7C,CAAC;AACH,CAAC;","names":[]}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
|
-
import "
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import { styleWithLayer } from "#styleUtils.mjs";
|
|
5
|
-
import { spacing } from "#tokens.mjs";
|
|
6
|
-
var cardContent = styleWithLayer({
|
|
1
|
+
import { styleWithLayer } from "#styleUtils";
|
|
2
|
+
import { spacing } from "#tokens";
|
|
3
|
+
const cardContent = styleWithLayer({
|
|
7
4
|
flex: "1 1 auto",
|
|
8
5
|
padding: spacing.md
|
|
9
6
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Card/CardContent.css.ts"],"sourcesContent":["import { styleWithLayer } from '#styleUtils';\nimport { spacing } from '#tokens';\n\nexport const cardContent = styleWithLayer({\n flex: '1 1 auto',\n\n padding: spacing.md,\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Card/CardContent.css.ts"],"sourcesContent":["import { styleWithLayer } from '#styleUtils';\nimport { spacing } from '#tokens';\n\nexport const cardContent = styleWithLayer({\n flex: '1 1 auto',\n\n padding: spacing.md,\n});\n"],"mappings":"AAAA,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAEjB,MAAM,cAAc,eAAe;AAAA,EACxC,MAAM;AAAA,EAEN,SAAS,QAAQ;AACnB,CAAC;","names":[]}
|
|
@@ -1,12 +1,9 @@
|
|
|
1
|
-
import "
|
|
2
|
-
|
|
3
|
-
// src/components/Card/CardContent.tsx
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
2
|
import { forwardRef } from "react";
|
|
5
3
|
import { clsx } from "clsx";
|
|
6
|
-
import { sx } from "#styles
|
|
7
|
-
import * as s from "./CardContent.css
|
|
8
|
-
|
|
9
|
-
var CardContent = forwardRef(
|
|
4
|
+
import { sx } from "#styles";
|
|
5
|
+
import * as s from "./CardContent.css";
|
|
6
|
+
const CardContent = forwardRef(
|
|
10
7
|
({ className, sx: propSx, ...props }, ref) => {
|
|
11
8
|
return /* @__PURE__ */ jsx(
|
|
12
9
|
"div",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Card/CardContent.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { clsx } from 'clsx';\n\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './CardContent.css';\n\ntype CardContentProps = UIComponent<'div'>;\n\nexport const CardContent = forwardRef<HTMLDivElement, CardContentProps>(\n ({ className, sx: propSx, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={clsx(s.cardContent, className, sx(propSx))}\n {...props}\n />\n );\n },\n);\nCardContent.displayName = 'CardContent';\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Card/CardContent.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { clsx } from 'clsx';\n\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './CardContent.css';\n\ntype CardContentProps = UIComponent<'div'>;\n\nexport const CardContent = forwardRef<HTMLDivElement, CardContentProps>(\n ({ className, sx: propSx, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={clsx(s.cardContent, className, sx(propSx))}\n {...props}\n />\n );\n },\n);\nCardContent.displayName = 'CardContent';\n"],"mappings":"AAcM;AAdN,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AAErB,SAAS,UAAU;AAGnB,YAAY,OAAO;AAIZ,MAAM,cAAc;AAAA,EACzB,CAAC,EAAE,WAAW,IAAI,QAAQ,GAAG,MAAM,GAAG,QAAQ;AAC5C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,EAAE,aAAa,WAAW,GAAG,MAAM,CAAC;AAAA,QACnD,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;","names":[]}
|
|
@@ -1,8 +1,5 @@
|
|
|
1
|
-
import "
|
|
2
|
-
|
|
3
|
-
// src/components/Card/CardInteraction.css.ts
|
|
4
|
-
import { styleWithLayer } from "#styleUtils.mjs";
|
|
5
|
-
var cardInteraction = styleWithLayer({
|
|
1
|
+
import { styleWithLayer } from "#styleUtils";
|
|
2
|
+
const cardInteraction = styleWithLayer({
|
|
6
3
|
position: "relative",
|
|
7
4
|
overflow: "hidden",
|
|
8
5
|
height: "100%",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Card/CardInteraction.css.ts"],"sourcesContent":["import { styleWithLayer } from '#styleUtils';\n\nexport const cardInteraction = styleWithLayer({\n position: 'relative',\n overflow: 'hidden',\n\n height: '100%',\n\n cursor: 'pointer',\n userSelect: 'none',\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Card/CardInteraction.css.ts"],"sourcesContent":["import { styleWithLayer } from '#styleUtils';\n\nexport const cardInteraction = styleWithLayer({\n position: 'relative',\n overflow: 'hidden',\n\n height: '100%',\n\n cursor: 'pointer',\n userSelect: 'none',\n});\n"],"mappings":"AAAA,SAAS,sBAAsB;AAExB,MAAM,kBAAkB,eAAe;AAAA,EAC5C,UAAU;AAAA,EACV,UAAU;AAAA,EAEV,QAAQ;AAAA,EAER,QAAQ;AAAA,EACR,YAAY;AACd,CAAC;","names":[]}
|
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import "
|
|
3
|
-
|
|
4
|
-
// src/components/Card/CardInteraction.tsx
|
|
2
|
+
import { jsxs } from "react/jsx-runtime";
|
|
5
3
|
import { forwardRef } from "react";
|
|
6
4
|
import clsx from "clsx";
|
|
7
|
-
import { useRipple } from "#hooks
|
|
8
|
-
import { sx } from "#styles
|
|
9
|
-
import * as s from "./CardInteraction.css
|
|
10
|
-
|
|
11
|
-
var CardInteraction = forwardRef(
|
|
5
|
+
import { useRipple } from "#hooks";
|
|
6
|
+
import { sx } from "#styles";
|
|
7
|
+
import * as s from "./CardInteraction.css";
|
|
8
|
+
const CardInteraction = forwardRef(
|
|
12
9
|
({ children, className, sx: propSx, ...props }, ref) => {
|
|
13
10
|
const { ripple } = useRipple(ref);
|
|
14
11
|
return /* @__PURE__ */ jsxs(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Card/CardInteraction.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef } from 'react';\n\nimport clsx from 'clsx';\n\nimport { useRipple } from '#hooks';\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './CardInteraction.css';\n\ntype CardInteractionProps = UIComponent<'div'>;\n\nexport const CardInteraction = forwardRef<HTMLDivElement, CardInteractionProps>(\n ({ children, className, sx: propSx, ...props }, ref) => {\n const { ripple } = useRipple<HTMLDivElement>(ref);\n\n return (\n <div\n ref={ref}\n className={clsx(\n className,\n s.cardInteraction,\n s.cardInteraction,\n sx(propSx),\n )}\n {...props}\n >\n {children}\n {ripple}\n </div>\n );\n },\n);\nCardInteraction.displayName = 'CardInteraction';\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Card/CardInteraction.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef } from 'react';\n\nimport clsx from 'clsx';\n\nimport { useRipple } from '#hooks';\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './CardInteraction.css';\n\ntype CardInteractionProps = UIComponent<'div'>;\n\nexport const CardInteraction = forwardRef<HTMLDivElement, CardInteractionProps>(\n ({ children, className, sx: propSx, ...props }, ref) => {\n const { ripple } = useRipple<HTMLDivElement>(ref);\n\n return (\n <div\n ref={ref}\n className={clsx(\n className,\n s.cardInteraction,\n s.cardInteraction,\n sx(propSx),\n )}\n {...props}\n >\n {children}\n {ripple}\n </div>\n );\n },\n);\nCardInteraction.displayName = 'CardInteraction';\n"],"mappings":";AAmBM;AAjBN,SAAS,kBAAkB;AAE3B,OAAO,UAAU;AAEjB,SAAS,iBAAiB;AAC1B,SAAS,UAAU;AAGnB,YAAY,OAAO;AAIZ,MAAM,kBAAkB;AAAA,EAC7B,CAAC,EAAE,UAAU,WAAW,IAAI,QAAQ,GAAG,MAAM,GAAG,QAAQ;AACtD,UAAM,EAAE,OAAO,IAAI,UAA0B,GAAG;AAEhD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,EAAE;AAAA,UACF,EAAE;AAAA,UACF,GAAG,MAAM;AAAA,QACX;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,UACA;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;","names":[]}
|
|
@@ -1,8 +1,5 @@
|
|
|
1
|
-
import "
|
|
2
|
-
|
|
3
|
-
// src/components/Card/CardThumbnail.css.ts
|
|
4
|
-
import { styleWithLayer } from "#styleUtils.mjs";
|
|
5
|
-
var thumbnail = styleWithLayer({
|
|
1
|
+
import { styleWithLayer } from "#styleUtils";
|
|
2
|
+
const thumbnail = styleWithLayer({
|
|
6
3
|
width: "auto",
|
|
7
4
|
maxWidth: "100%"
|
|
8
5
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Card/CardThumbnail.css.ts"],"sourcesContent":["import { styleWithLayer } from '#styleUtils';\n\nexport const thumbnail = styleWithLayer({\n width: 'auto',\n maxWidth: '100%',\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Card/CardThumbnail.css.ts"],"sourcesContent":["import { styleWithLayer } from '#styleUtils';\n\nexport const thumbnail = styleWithLayer({\n width: 'auto',\n maxWidth: '100%',\n});\n"],"mappings":"AAAA,SAAS,sBAAsB;AAExB,MAAM,YAAY,eAAe;AAAA,EACtC,OAAO;AAAA,EACP,UAAU;AACZ,CAAC;","names":[]}
|
|
@@ -1,12 +1,9 @@
|
|
|
1
|
-
import "
|
|
2
|
-
|
|
3
|
-
// src/components/Card/CardThumbnail.tsx
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
2
|
import { forwardRef } from "react";
|
|
5
3
|
import clsx from "clsx";
|
|
6
|
-
import { sx } from "#styles
|
|
7
|
-
import * as s from "./CardThumbnail.css
|
|
8
|
-
|
|
9
|
-
var CardThumbnail = forwardRef(
|
|
4
|
+
import { sx } from "#styles";
|
|
5
|
+
import * as s from "./CardThumbnail.css";
|
|
6
|
+
const CardThumbnail = forwardRef(
|
|
10
7
|
({ className, sx: propSx, ...props }, ref) => {
|
|
11
8
|
return /* @__PURE__ */ jsx(
|
|
12
9
|
"img",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Card/CardThumbnail.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport clsx from 'clsx';\n\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './CardThumbnail.css';\n\ntype CardThumbnailProps = UIComponent<'img'>;\n\nexport const CardThumbnail = forwardRef<HTMLImageElement, CardThumbnailProps>(\n ({ className, sx: propSx, ...props }, ref) => {\n return (\n <img\n ref={ref}\n className={clsx(s.thumbnail, className, sx(propSx))}\n {...props}\n />\n );\n },\n);\nCardThumbnail.displayName = 'CardThumbnail';\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Card/CardThumbnail.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport clsx from 'clsx';\n\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './CardThumbnail.css';\n\ntype CardThumbnailProps = UIComponent<'img'>;\n\nexport const CardThumbnail = forwardRef<HTMLImageElement, CardThumbnailProps>(\n ({ className, sx: propSx, ...props }, ref) => {\n return (\n <img\n ref={ref}\n className={clsx(s.thumbnail, className, sx(propSx))}\n {...props}\n />\n );\n },\n);\nCardThumbnail.displayName = 'CardThumbnail';\n"],"mappings":"AAcM;AAdN,SAAS,kBAAkB;AAE3B,OAAO,UAAU;AAEjB,SAAS,UAAU;AAGnB,YAAY,OAAO;AAIZ,MAAM,gBAAgB;AAAA,EAC3B,CAAC,EAAE,WAAW,IAAI,QAAQ,GAAG,MAAM,GAAG,QAAQ;AAC5C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,EAAE,WAAW,WAAW,GAAG,MAAM,CAAC;AAAA,QACjD,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;","names":[]}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
export * from "./
|
|
3
|
-
export * from "./
|
|
4
|
-
export * from "./
|
|
5
|
-
export * from "./CardThumbnail.mjs";
|
|
1
|
+
export * from "./Card";
|
|
2
|
+
export * from "./CardContent";
|
|
3
|
+
export * from "./CardInteraction";
|
|
4
|
+
export * from "./CardThumbnail";
|
|
6
5
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Card/index.ts"],"sourcesContent":["export * from './Card';\nexport * from './CardContent';\nexport * from './CardInteraction';\nexport * from './CardThumbnail';\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Card/index.ts"],"sourcesContent":["export * from './Card';\nexport * from './CardContent';\nexport * from './CardInteraction';\nexport * from './CardThumbnail';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
|
|
@@ -1,14 +1,11 @@
|
|
|
1
|
-
import "../../chunk-IEP6GGEX.mjs";
|
|
2
|
-
|
|
3
|
-
// src/components/Chip/Chip.css.ts
|
|
4
1
|
import { createVar } from "@vanilla-extract/css";
|
|
5
|
-
import { recipeWithLayer, styleWithLayer } from "#styleUtils
|
|
6
|
-
import { theme } from "#themes
|
|
7
|
-
import { semanticColor } from "#tokens
|
|
8
|
-
import { SCALE_COLOR } from "../../tokens/scale/color
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
2
|
+
import { recipeWithLayer, styleWithLayer } from "#styleUtils";
|
|
3
|
+
import { theme } from "#themes";
|
|
4
|
+
import { semanticColor } from "#tokens";
|
|
5
|
+
import { SCALE_COLOR } from "../../tokens/scale/color";
|
|
6
|
+
const backgroundVar = createVar();
|
|
7
|
+
const foregroundVar = createVar();
|
|
8
|
+
const semanticColors = semanticColor.reduce(
|
|
12
9
|
(prev, color) => ({
|
|
13
10
|
...prev,
|
|
14
11
|
[color]: styleWithLayer({
|
|
@@ -20,7 +17,7 @@ var semanticColors = semanticColor.reduce(
|
|
|
20
17
|
}),
|
|
21
18
|
{}
|
|
22
19
|
);
|
|
23
|
-
|
|
20
|
+
const scaleColors = SCALE_COLOR.reduce(
|
|
24
21
|
(prev, value) => ({
|
|
25
22
|
...prev,
|
|
26
23
|
[value]: styleWithLayer({
|
|
@@ -32,7 +29,7 @@ var scaleColors = SCALE_COLOR.reduce(
|
|
|
32
29
|
}),
|
|
33
30
|
{}
|
|
34
31
|
);
|
|
35
|
-
|
|
32
|
+
const chip = recipeWithLayer({
|
|
36
33
|
base: {
|
|
37
34
|
display: "inline-flex",
|
|
38
35
|
alignItems: "center",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Chip/Chip.css.ts"],"sourcesContent":["import { createVar } from '@vanilla-extract/css';\n\nimport { recipeWithLayer, styleWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\nimport { semanticColor } from '#tokens';\n\nimport { SCALE_COLOR, type ScaleColor } from '../../tokens/scale/color';\n\nconst backgroundVar = createVar();\nconst foregroundVar = createVar();\n\nconst semanticColors = semanticColor.reduce(\n (prev, color) => ({\n ...prev,\n [color]: styleWithLayer({\n vars: {\n [backgroundVar]: theme.color[color],\n [foregroundVar]: theme.color[`${color}-foreground`],\n },\n }),\n }),\n {} as Record<(typeof semanticColor)[number], string>,\n);\n\nconst scaleColors = SCALE_COLOR.reduce(\n (prev, value) => ({\n ...prev,\n [value]: styleWithLayer({\n vars: {\n [backgroundVar]: theme.color[value][500],\n [foregroundVar]: theme.color[value][50],\n },\n }),\n }),\n {} as Record<ScaleColor, string>,\n);\n\nexport const chip = recipeWithLayer({\n base: {\n display: 'inline-flex',\n alignItems: 'center',\n lineHeight: '0',\n gap: '0.125em',\n\n height: '2em',\n padding: '0 0.75em',\n borderRadius: theme.borderRadius,\n\n backgroundColor: `rgb(${backgroundVar})`,\n color: `rgb(${foregroundVar})`,\n\n userSelect: 'none',\n },\n\n variants: {\n color: {\n ...semanticColors,\n ...scaleColors,\n },\n\n size: {\n sm: {\n fontSize: '0.75em',\n },\n\n md: {\n fontSize: '0.875em',\n },\n\n lg: {\n fontSize: '1em',\n },\n },\n },\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Chip/Chip.css.ts"],"sourcesContent":["import { createVar } from '@vanilla-extract/css';\n\nimport { recipeWithLayer, styleWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\nimport { semanticColor } from '#tokens';\n\nimport { SCALE_COLOR, type ScaleColor } from '../../tokens/scale/color';\n\nconst backgroundVar = createVar();\nconst foregroundVar = createVar();\n\nconst semanticColors = semanticColor.reduce(\n (prev, color) => ({\n ...prev,\n [color]: styleWithLayer({\n vars: {\n [backgroundVar]: theme.color[color],\n [foregroundVar]: theme.color[`${color}-foreground`],\n },\n }),\n }),\n {} as Record<(typeof semanticColor)[number], string>,\n);\n\nconst scaleColors = SCALE_COLOR.reduce(\n (prev, value) => ({\n ...prev,\n [value]: styleWithLayer({\n vars: {\n [backgroundVar]: theme.color[value][500],\n [foregroundVar]: theme.color[value][50],\n },\n }),\n }),\n {} as Record<ScaleColor, string>,\n);\n\nexport const chip = recipeWithLayer({\n base: {\n display: 'inline-flex',\n alignItems: 'center',\n lineHeight: '0',\n gap: '0.125em',\n\n height: '2em',\n padding: '0 0.75em',\n borderRadius: theme.borderRadius,\n\n backgroundColor: `rgb(${backgroundVar})`,\n color: `rgb(${foregroundVar})`,\n\n userSelect: 'none',\n },\n\n variants: {\n color: {\n ...semanticColors,\n ...scaleColors,\n },\n\n size: {\n sm: {\n fontSize: '0.75em',\n },\n\n md: {\n fontSize: '0.875em',\n },\n\n lg: {\n fontSize: '1em',\n },\n },\n },\n});\n"],"mappings":"AAAA,SAAS,iBAAiB;AAE1B,SAAS,iBAAiB,sBAAsB;AAChD,SAAS,aAAa;AACtB,SAAS,qBAAqB;AAE9B,SAAS,mBAAoC;AAE7C,MAAM,gBAAgB,UAAU;AAChC,MAAM,gBAAgB,UAAU;AAEhC,MAAM,iBAAiB,cAAc;AAAA,EACnC,CAAC,MAAM,WAAW;AAAA,IAChB,GAAG;AAAA,IACH,CAAC,KAAK,GAAG,eAAe;AAAA,MACtB,MAAM;AAAA,QACJ,CAAC,aAAa,GAAG,MAAM,MAAM,KAAK;AAAA,QAClC,CAAC,aAAa,GAAG,MAAM,MAAM,GAAG,KAAK,aAAa;AAAA,MACpD;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EACA,CAAC;AACH;AAEA,MAAM,cAAc,YAAY;AAAA,EAC9B,CAAC,MAAM,WAAW;AAAA,IAChB,GAAG;AAAA,IACH,CAAC,KAAK,GAAG,eAAe;AAAA,MACtB,MAAM;AAAA,QACJ,CAAC,aAAa,GAAG,MAAM,MAAM,KAAK,EAAE,GAAG;AAAA,QACvC,CAAC,aAAa,GAAG,MAAM,MAAM,KAAK,EAAE,EAAE;AAAA,MACxC;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EACA,CAAC;AACH;AAEO,MAAM,OAAO,gBAAgB;AAAA,EAClC,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,KAAK;AAAA,IAEL,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,cAAc,MAAM;AAAA,IAEpB,iBAAiB,OAAO,aAAa;AAAA,IACrC,OAAO,OAAO,aAAa;AAAA,IAE3B,YAAY;AAAA,EACd;AAAA,EAEA,UAAU;AAAA,IACR,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IAEA,MAAM;AAAA,MACJ,IAAI;AAAA,QACF,UAAU;AAAA,MACZ;AAAA,MAEA,IAAI;AAAA,QACF,UAAU;AAAA,MACZ;AAAA,MAEA,IAAI;AAAA,QACF,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AACF,CAAC;","names":[]}
|
|
@@ -1,12 +1,9 @@
|
|
|
1
|
-
import "
|
|
2
|
-
|
|
3
|
-
// src/components/Chip/Chip.tsx
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
2
|
import { forwardRef } from "react";
|
|
5
3
|
import clsx from "clsx";
|
|
6
|
-
import { sx } from "#styles
|
|
7
|
-
import * as s from "./Chip.css
|
|
8
|
-
|
|
9
|
-
var Chip = forwardRef(
|
|
4
|
+
import { sx } from "#styles";
|
|
5
|
+
import * as s from "./Chip.css";
|
|
6
|
+
const Chip = forwardRef(
|
|
10
7
|
({
|
|
11
8
|
children,
|
|
12
9
|
className,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport clsx from 'clsx';\n\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './Chip.css';\n\ntype ChipProps = UIComponent<'div', typeof s.chip>;\n\nexport const Chip = forwardRef<HTMLDivElement, ChipProps>(\n (\n {\n children,\n className,\n color = 'primary',\n size = 'md',\n sx: propSx,\n ...props\n },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n className={clsx(s.chip({ color, size }), className, sx(propSx))}\n {...props}\n >\n <span>{children}</span>\n </div>\n );\n },\n);\nChip.displayName = 'Chip';\n\nexport { s as chipCss };\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport clsx from 'clsx';\n\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './Chip.css';\n\ntype ChipProps = UIComponent<'div', typeof s.chip>;\n\nexport const Chip = forwardRef<HTMLDivElement, ChipProps>(\n (\n {\n children,\n className,\n color = 'primary',\n size = 'md',\n sx: propSx,\n ...props\n },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n className={clsx(s.chip({ color, size }), className, sx(propSx))}\n {...props}\n >\n <span>{children}</span>\n </div>\n );\n },\n);\nChip.displayName = 'Chip';\n\nexport { s as chipCss };\n"],"mappings":"AA6BQ;AA7BR,SAAS,kBAAkB;AAE3B,OAAO,UAAU;AAEjB,SAAS,UAAU;AAGnB,YAAY,OAAO;AAIZ,MAAM,OAAO;AAAA,EAClB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,GAAG;AAAA,EACL,GACA,QACG;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,EAAE,KAAK,EAAE,OAAO,KAAK,CAAC,GAAG,WAAW,GAAG,MAAM,CAAC;AAAA,QAC7D,GAAG;AAAA,QAEJ,8BAAC,UAAM,UAAS;AAAA;AAAA,IAClB;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;","names":[]}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import { Chip } from "./Chip.mjs";
|
|
1
|
+
import { uiTest } from "../../tests/uiTest";
|
|
2
|
+
import { Chip } from "./Chip";
|
|
4
3
|
describe("Chip \uCEF4\uD3EC\uB10C\uD2B8", () => {
|
|
5
4
|
uiTest(Chip, "Chip");
|
|
6
5
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Chip/Chip.spec.tsx"],"sourcesContent":["import { uiTest } from '../../tests/uiTest';\nimport { Chip } from './Chip';\n\ndescribe('Chip 컴포넌트', () => {\n uiTest(Chip, 'Chip');\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Chip/Chip.spec.tsx"],"sourcesContent":["import { uiTest } from '../../tests/uiTest';\nimport { Chip } from './Chip';\n\ndescribe('Chip 컴포넌트', () => {\n uiTest(Chip, 'Chip');\n});\n"],"mappings":"AAAA,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,SAAS,iCAAa,MAAM;AAC1B,SAAO,MAAM,MAAM;AACrB,CAAC;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Chip/index.ts"],"sourcesContent":["export * from './Chip';\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Chip/index.ts"],"sourcesContent":["export * from './Chip';\n"],"mappings":"AAAA,cAAc;","names":[]}
|
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import "
|
|
3
|
-
|
|
4
|
-
// src/components/Confirm/index.tsx
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
3
|
import { useImperativeHandle } from "react";
|
|
6
4
|
import { useOverlay, usePreventKeyboardInput } from "@kimdw-rtk/utils";
|
|
7
|
-
import { Box, Button, Dialog, DialogContent, DialogFooter } from "#components
|
|
8
|
-
|
|
9
|
-
var Confirm = ({
|
|
5
|
+
import { Box, Button, Dialog, DialogContent, DialogFooter } from "#components";
|
|
6
|
+
const Confirm = ({
|
|
10
7
|
children,
|
|
11
8
|
ref,
|
|
12
9
|
onConfirm,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Confirm/index.tsx"],"sourcesContent":["'use client';\n\nimport { useImperativeHandle, type ReactNode, type Ref } from 'react';\n\nimport { useOverlay, usePreventKeyboardInput } from '@kimdw-rtk/utils';\n\nimport { Box, Button, Dialog, DialogContent, DialogFooter } from '#components';\n\ninterface ConfirmProps {\n children: ReactNode;\n ref?: Ref<{ close: () => void }>;\n onConfirm: () => void;\n onCancle: () => void;\n}\n\nexport const Confirm = ({\n children,\n ref,\n onConfirm,\n onCancle,\n}: ConfirmProps) => {\n const { close } = useOverlay();\n usePreventKeyboardInput();\n\n useImperativeHandle(ref, () => ({\n close,\n }));\n\n return (\n <Dialog>\n <DialogContent>{children}</DialogContent>\n <DialogFooter>\n <Box flex gap=\"md\">\n <Button size=\"sm\" onClick={onConfirm}>\n 확인\n </Button>\n <Button color=\"secondary\" size=\"sm\" onClick={onCancle}>\n 취소\n </Button>\n </Box>\n </DialogFooter>\n </Dialog>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Confirm/index.tsx"],"sourcesContent":["'use client';\n\nimport { useImperativeHandle, type ReactNode, type Ref } from 'react';\n\nimport { useOverlay, usePreventKeyboardInput } from '@kimdw-rtk/utils';\n\nimport { Box, Button, Dialog, DialogContent, DialogFooter } from '#components';\n\ninterface ConfirmProps {\n children: ReactNode;\n ref?: Ref<{ close: () => void }>;\n onConfirm: () => void;\n onCancle: () => void;\n}\n\nexport const Confirm = ({\n children,\n ref,\n onConfirm,\n onCancle,\n}: ConfirmProps) => {\n const { close } = useOverlay();\n usePreventKeyboardInput();\n\n useImperativeHandle(ref, () => ({\n close,\n }));\n\n return (\n <Dialog>\n <DialogContent>{children}</DialogContent>\n <DialogFooter>\n <Box flex gap=\"md\">\n <Button size=\"sm\" onClick={onConfirm}>\n 확인\n </Button>\n <Button color=\"secondary\" size=\"sm\" onClick={onCancle}>\n 취소\n </Button>\n </Box>\n </DialogFooter>\n </Dialog>\n );\n};\n"],"mappings":";AA8BM,cAEE,YAFF;AA5BN,SAAS,2BAAqD;AAE9D,SAAS,YAAY,+BAA+B;AAEpD,SAAS,KAAK,QAAQ,QAAQ,eAAe,oBAAoB;AAS1D,MAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAoB;AAClB,QAAM,EAAE,MAAM,IAAI,WAAW;AAC7B,0BAAwB;AAExB,sBAAoB,KAAK,OAAO;AAAA,IAC9B;AAAA,EACF,EAAE;AAEF,SACE,qBAAC,UACC;AAAA,wBAAC,iBAAe,UAAS;AAAA,IACzB,oBAAC,gBACC,+BAAC,OAAI,MAAI,MAAC,KAAI,MACZ;AAAA,0BAAC,UAAO,MAAK,MAAK,SAAS,WAAW,0BAEtC;AAAA,MACA,oBAAC,UAAO,OAAM,aAAY,MAAK,MAAK,SAAS,UAAU,0BAEvD;AAAA,OACF,GACF;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
|
-
import "../../chunk-IEP6GGEX.mjs";
|
|
2
|
-
|
|
3
|
-
// src/components/Dialog/Dialog.css.ts
|
|
4
1
|
import { style } from "@vanilla-extract/css";
|
|
5
|
-
import { theme } from "#themes
|
|
6
|
-
|
|
2
|
+
import { theme } from "#themes";
|
|
3
|
+
const container = style({
|
|
7
4
|
display: "flex",
|
|
8
5
|
flexDirection: "column",
|
|
9
6
|
gap: "1rem",
|
|
@@ -15,7 +12,7 @@ var container = style({
|
|
|
15
12
|
boxSizing: "border-box",
|
|
16
13
|
backgroundColor: `rgb(${theme.color.background})`
|
|
17
14
|
});
|
|
18
|
-
|
|
15
|
+
const message = style({
|
|
19
16
|
marginBottom: "1rem",
|
|
20
17
|
lineHeight: "150%",
|
|
21
18
|
wordBreak: "break-all"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Dialog/Dialog.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { theme } from '#themes';\n\nexport const container = style({\n display: 'flex',\n flexDirection: 'column',\n gap: '1rem',\n overflowY: 'auto',\n\n maxWidth: 'calc(100vw - 2rem)',\n minWidth: 'min(20rem, calc(100vw - 2rem))',\n maxHeight: 'calc(100vh - 2rem)',\n borderRadius: theme.borderRadius,\n boxSizing: 'border-box',\n\n backgroundColor: `rgb(${theme.color.background})`,\n});\n\nexport const message = style({\n marginBottom: '1rem',\n\n lineHeight: '150%',\n wordBreak: 'break-all',\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Dialog/Dialog.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { theme } from '#themes';\n\nexport const container = style({\n display: 'flex',\n flexDirection: 'column',\n gap: '1rem',\n overflowY: 'auto',\n\n maxWidth: 'calc(100vw - 2rem)',\n minWidth: 'min(20rem, calc(100vw - 2rem))',\n maxHeight: 'calc(100vh - 2rem)',\n borderRadius: theme.borderRadius,\n boxSizing: 'border-box',\n\n backgroundColor: `rgb(${theme.color.background})`,\n});\n\nexport const message = style({\n marginBottom: '1rem',\n\n lineHeight: '150%',\n wordBreak: 'break-all',\n});\n"],"mappings":"AAAA,SAAS,aAAa;AAEtB,SAAS,aAAa;AAEf,MAAM,YAAY,MAAM;AAAA,EAC7B,SAAS;AAAA,EACT,eAAe;AAAA,EACf,KAAK;AAAA,EACL,WAAW;AAAA,EAEX,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,cAAc,MAAM;AAAA,EACpB,WAAW;AAAA,EAEX,iBAAiB,OAAO,MAAM,MAAM,UAAU;AAChD,CAAC;AAEM,MAAM,UAAU,MAAM;AAAA,EAC3B,cAAc;AAAA,EAEd,YAAY;AAAA,EACZ,WAAW;AACb,CAAC;","names":[]}
|
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
import "
|
|
2
|
-
|
|
3
|
-
// src/components/Dialog/Dialog.tsx
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
2
|
import { forwardRef } from "react";
|
|
5
3
|
import clsx from "clsx";
|
|
6
|
-
import { Box } from "#components
|
|
7
|
-
import { sx } from "#styles
|
|
8
|
-
import * as s from "./Dialog.css
|
|
9
|
-
|
|
10
|
-
var Dialog = forwardRef(
|
|
4
|
+
import { Box } from "#components";
|
|
5
|
+
import { sx } from "#styles";
|
|
6
|
+
import * as s from "./Dialog.css";
|
|
7
|
+
const Dialog = forwardRef(
|
|
11
8
|
({ children, className, sx: propSx, ...props }, ref) => {
|
|
12
9
|
return /* @__PURE__ */ jsx(
|
|
13
10
|
Box,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport clsx from 'clsx';\n\nimport { Box } from '#components';\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './Dialog.css';\n\ntype DialogProps = Omit<UIComponent<'div'>, 'color'>;\n\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(\n ({ children, className, sx: propSx, ...props }, ref) => {\n return (\n <Box\n ref={ref}\n flex\n flexDirection=\"row\"\n gap=\"lg\"\n boxShadow=\"border-sm\"\n className={clsx(s.container, className, sx(propSx))}\n {...props}\n >\n {children}\n </Box>\n );\n },\n);\nDialog.displayName = 'Dialog';\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport clsx from 'clsx';\n\nimport { Box } from '#components';\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './Dialog.css';\n\ntype DialogProps = Omit<UIComponent<'div'>, 'color'>;\n\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(\n ({ children, className, sx: propSx, ...props }, ref) => {\n return (\n <Box\n ref={ref}\n flex\n flexDirection=\"row\"\n gap=\"lg\"\n boxShadow=\"border-sm\"\n className={clsx(s.container, className, sx(propSx))}\n {...props}\n >\n {children}\n </Box>\n );\n },\n);\nDialog.displayName = 'Dialog';\n"],"mappings":"AAeM;AAfN,SAAS,kBAAkB;AAE3B,OAAO,UAAU;AAEjB,SAAS,WAAW;AACpB,SAAS,UAAU;AAGnB,YAAY,OAAO;AAIZ,MAAM,SAAS;AAAA,EACpB,CAAC,EAAE,UAAU,WAAW,IAAI,QAAQ,GAAG,MAAM,GAAG,QAAQ;AACtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAI;AAAA,QACJ,eAAc;AAAA,QACd,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,WAAW,KAAK,EAAE,WAAW,WAAW,GAAG,MAAM,CAAC;AAAA,QACjD,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;","names":[]}
|
|
@@ -1,14 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
fireEvent,
|
|
3
|
-
react_esm_exports,
|
|
4
|
-
render
|
|
5
|
-
} from "../../chunk-Y4CBEQ5S.mjs";
|
|
6
|
-
import "../../chunk-IEP6GGEX.mjs";
|
|
7
|
-
|
|
8
|
-
// src/components/Dialog/Dialog.spec.tsx
|
|
9
|
-
import { Dialog, DialogContent, DialogFooter, DialogHeader } from "#components.mjs";
|
|
10
|
-
import { uiTest } from "../../tests/uiTest.mjs";
|
|
11
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { render, screen, fireEvent } from "@testing-library/react";
|
|
3
|
+
import { Dialog, DialogContent, DialogFooter, DialogHeader } from "#components";
|
|
4
|
+
import { uiTest } from "../../tests/uiTest";
|
|
12
5
|
describe("Dialog \uCEF4\uD3EC\uB10C\uD2B8", () => {
|
|
13
6
|
uiTest(Dialog, "Dialog");
|
|
14
7
|
uiTest(DialogHeader, "DialogHeader");
|
|
@@ -22,7 +15,7 @@ describe("Dialog \uCEF4\uD3EC\uB10C\uD2B8", () => {
|
|
|
22
15
|
/* @__PURE__ */ jsx(DialogContent, { children: "Content" })
|
|
23
16
|
] })
|
|
24
17
|
);
|
|
25
|
-
fireEvent.click(
|
|
18
|
+
fireEvent.click(screen.getByRole("button", { name: "\uB2EB\uAE30" }));
|
|
26
19
|
expect(handleCloseClick).toHaveBeenCalledTimes(1);
|
|
27
20
|
});
|
|
28
21
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Dialog/Dialog.spec.tsx"],"sourcesContent":["import { render, screen, fireEvent } from '@testing-library/react';\n\nimport { Dialog, DialogContent, DialogFooter, DialogHeader } from '#components';\n\nimport { uiTest } from '../../tests/uiTest';\n\ndescribe('Dialog 컴포넌트', () => {\n uiTest(Dialog, 'Dialog');\n uiTest(DialogHeader, 'DialogHeader');\n uiTest(DialogContent, 'DialogContent');\n uiTest(DialogFooter, 'DialogFooter');\n\n it('DialogHeader의 닫기 버튼을 클릭하면 onCloseClick이 호출되어야 한다', () => {\n const handleCloseClick = jest.fn();\n render(\n <Dialog>\n <DialogHeader onCloseClick={handleCloseClick}>Header</DialogHeader>\n <DialogContent>Content</DialogContent>\n </Dialog>,\n );\n\n fireEvent.click(screen.getByRole('button', { name: '닫기' }));\n\n expect(handleCloseClick).toHaveBeenCalledTimes(1);\n });\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Dialog/Dialog.spec.tsx"],"sourcesContent":["import { render, screen, fireEvent } from '@testing-library/react';\n\nimport { Dialog, DialogContent, DialogFooter, DialogHeader } from '#components';\n\nimport { uiTest } from '../../tests/uiTest';\n\ndescribe('Dialog 컴포넌트', () => {\n uiTest(Dialog, 'Dialog');\n uiTest(DialogHeader, 'DialogHeader');\n uiTest(DialogContent, 'DialogContent');\n uiTest(DialogFooter, 'DialogFooter');\n\n it('DialogHeader의 닫기 버튼을 클릭하면 onCloseClick이 호출되어야 한다', () => {\n const handleCloseClick = jest.fn();\n render(\n <Dialog>\n <DialogHeader onCloseClick={handleCloseClick}>Header</DialogHeader>\n <DialogContent>Content</DialogContent>\n </Dialog>,\n );\n\n fireEvent.click(screen.getByRole('button', { name: '닫기' }));\n\n expect(handleCloseClick).toHaveBeenCalledTimes(1);\n });\n});\n"],"mappings":"AAeM,SACE,KADF;AAfN,SAAS,QAAQ,QAAQ,iBAAiB;AAE1C,SAAS,QAAQ,eAAe,cAAc,oBAAoB;AAElE,SAAS,cAAc;AAEvB,SAAS,mCAAe,MAAM;AAC5B,SAAO,QAAQ,QAAQ;AACvB,SAAO,cAAc,cAAc;AACnC,SAAO,eAAe,eAAe;AACrC,SAAO,cAAc,cAAc;AAEnC,KAAG,8IAAoD,MAAM;AAC3D,UAAM,mBAAmB,KAAK,GAAG;AACjC;AAAA,MACE,qBAAC,UACC;AAAA,4BAAC,gBAAa,cAAc,kBAAkB,oBAAM;AAAA,QACpD,oBAAC,iBAAc,qBAAO;AAAA,SACxB;AAAA,IACF;AAEA,cAAU,MAAM,OAAO,UAAU,UAAU,EAAE,MAAM,eAAK,CAAC,CAAC;AAE1D,WAAO,gBAAgB,EAAE,sBAAsB,CAAC;AAAA,EAClD,CAAC;AACH,CAAC;","names":[]}
|
|
@@ -1,10 +1,7 @@
|
|
|
1
|
-
import "
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
import { theme } from "#themes.mjs";
|
|
6
|
-
import * as header from "./DialogHeader.css.mjs";
|
|
7
|
-
var container2 = styleWithLayer({
|
|
1
|
+
import { styleWithLayer } from "#styleUtils";
|
|
2
|
+
import { theme } from "#themes";
|
|
3
|
+
import * as header from "./DialogHeader.css";
|
|
4
|
+
const container = styleWithLayer({
|
|
8
5
|
padding: "0 1.5rem 1.5rem 1.5rem",
|
|
9
6
|
wordBreak: "break-all",
|
|
10
7
|
selectors: {
|
|
@@ -14,6 +11,6 @@ var container2 = styleWithLayer({
|
|
|
14
11
|
}
|
|
15
12
|
});
|
|
16
13
|
export {
|
|
17
|
-
|
|
14
|
+
container
|
|
18
15
|
};
|
|
19
16
|
//# sourceMappingURL=DialogContent.css.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Dialog/DialogContent.css.ts"],"sourcesContent":["import { styleWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\n\nimport * as header from './DialogHeader.css';\n\nexport const container = styleWithLayer({\n padding: '0 1.5rem 1.5rem 1.5rem',\n\n wordBreak: 'break-all',\n\n selectors: {\n [`${header.container} + &`]: {\n color: `rgb(${theme.color['muted-foreground']})`,\n },\n },\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Dialog/DialogContent.css.ts"],"sourcesContent":["import { styleWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\n\nimport * as header from './DialogHeader.css';\n\nexport const container = styleWithLayer({\n padding: '0 1.5rem 1.5rem 1.5rem',\n\n wordBreak: 'break-all',\n\n selectors: {\n [`${header.container} + &`]: {\n color: `rgb(${theme.color['muted-foreground']})`,\n },\n },\n});\n"],"mappings":"AAAA,SAAS,sBAAsB;AAC/B,SAAS,aAAa;AAEtB,YAAY,YAAY;AAEjB,MAAM,YAAY,eAAe;AAAA,EACtC,SAAS;AAAA,EAET,WAAW;AAAA,EAEX,WAAW;AAAA,IACT,CAAC,GAAG,OAAO,SAAS,MAAM,GAAG;AAAA,MAC3B,OAAO,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAAA,IAC/C;AAAA,EACF;AACF,CAAC;","names":[]}
|
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
import "
|
|
2
|
-
|
|
3
|
-
// src/components/Dialog/DialogContent.tsx
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
2
|
import { forwardRef } from "react";
|
|
5
3
|
import clsx from "clsx";
|
|
6
|
-
import { Box } from "#components
|
|
7
|
-
import { sx } from "#styles
|
|
8
|
-
import * as s from "./DialogContent.css
|
|
9
|
-
|
|
10
|
-
var DialogContent = forwardRef(
|
|
4
|
+
import { Box } from "#components";
|
|
5
|
+
import { sx } from "#styles";
|
|
6
|
+
import * as s from "./DialogContent.css";
|
|
7
|
+
const DialogContent = forwardRef(
|
|
11
8
|
({ children, className, sx: propSx, ...props }, ref) => {
|
|
12
9
|
return /* @__PURE__ */ jsx(
|
|
13
10
|
Box,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Dialog/DialogContent.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport clsx from 'clsx';\n\nimport { Box } from '#components';\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './DialogContent.css';\n\ntype DialogContentProps = Omit<UIComponent<'div'>, 'color'>;\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n ({ children, className, sx: propSx, ...props }, ref) => {\n return (\n <Box\n ref={ref}\n className={clsx(s.container, className, sx(propSx))}\n {...props}\n >\n {children}\n </Box>\n );\n },\n);\nDialogContent.displayName = 'DialogContent';\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Dialog/DialogContent.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport clsx from 'clsx';\n\nimport { Box } from '#components';\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './DialogContent.css';\n\ntype DialogContentProps = Omit<UIComponent<'div'>, 'color'>;\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n ({ children, className, sx: propSx, ...props }, ref) => {\n return (\n <Box\n ref={ref}\n className={clsx(s.container, className, sx(propSx))}\n {...props}\n >\n {children}\n </Box>\n );\n },\n);\nDialogContent.displayName = 'DialogContent';\n"],"mappings":"AAeM;AAfN,SAAS,kBAAkB;AAE3B,OAAO,UAAU;AAEjB,SAAS,WAAW;AACpB,SAAS,UAAU;AAGnB,YAAY,OAAO;AAIZ,MAAM,gBAAgB;AAAA,EAC3B,CAAC,EAAE,UAAU,WAAW,IAAI,QAAQ,GAAG,MAAM,GAAG,QAAQ;AACtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,EAAE,WAAW,WAAW,GAAG,MAAM,CAAC;AAAA,QACjD,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;","names":[]}
|