@kimdw-rtk/ui 0.0.17 → 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 +1 -1
- 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,11 +1,8 @@
|
|
|
1
|
-
import "../../chunk-IEP6GGEX.mjs";
|
|
2
|
-
|
|
3
|
-
// src/components/Accordion/Accordion.css.ts
|
|
4
1
|
import { createVar } from "@vanilla-extract/css";
|
|
5
|
-
import { recipeWithLayer } from "#styleUtils
|
|
6
|
-
import { theme } from "#themes
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
import { recipeWithLayer } from "#styleUtils";
|
|
3
|
+
import { theme } from "#themes";
|
|
4
|
+
const paddingVar = createVar();
|
|
5
|
+
const accordion = recipeWithLayer({
|
|
9
6
|
base: {
|
|
10
7
|
width: "100%",
|
|
11
8
|
borderBottom: `1px solid rgb(${theme.color.border})`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Accordion/Accordion.css.ts"],"sourcesContent":["import { createVar } from '@vanilla-extract/css';\n\nimport { recipeWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\n\nexport const paddingVar = createVar();\n\nexport const accordion = recipeWithLayer({\n base: {\n width: '100%',\n borderBottom: `1px solid rgb(${theme.color.border})`,\n },\n\n variants: {\n isPadding: {\n true: {\n vars: {\n [paddingVar]: '0.75em',\n },\n },\n\n false: {\n vars: {\n [paddingVar]: '0.75em 0',\n },\n },\n },\n },\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Accordion/Accordion.css.ts"],"sourcesContent":["import { createVar } from '@vanilla-extract/css';\n\nimport { recipeWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\n\nexport const paddingVar = createVar();\n\nexport const accordion = recipeWithLayer({\n base: {\n width: '100%',\n borderBottom: `1px solid rgb(${theme.color.border})`,\n },\n\n variants: {\n isPadding: {\n true: {\n vars: {\n [paddingVar]: '0.75em',\n },\n },\n\n false: {\n vars: {\n [paddingVar]: '0.75em 0',\n },\n },\n },\n },\n});\n"],"mappings":"AAAA,SAAS,iBAAiB;AAE1B,SAAS,uBAAuB;AAChC,SAAS,aAAa;AAEf,MAAM,aAAa,UAAU;AAE7B,MAAM,YAAY,gBAAgB;AAAA,EACvC,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,cAAc,iBAAiB,MAAM,MAAM,MAAM;AAAA,EACnD;AAAA,EAEA,UAAU;AAAA,IACR,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,MAAM;AAAA,UACJ,CAAC,UAAU,GAAG;AAAA,QAChB;AAAA,MACF;AAAA,MAEA,OAAO;AAAA,QACL,MAAM;AAAA,UACJ,CAAC,UAAU,GAAG;AAAA,QAChB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;","names":[]}
|
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import "
|
|
3
|
-
|
|
4
|
-
// src/components/Accordion/Accordion.tsx
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
3
|
import { forwardRef, useReducer } from "react";
|
|
6
4
|
import clsx from "clsx";
|
|
7
|
-
import { sx } from "#styles
|
|
8
|
-
import * as s from "./Accordion.css
|
|
9
|
-
import { AccordionContext, accordionReducer } from "./AccordionContext
|
|
10
|
-
|
|
11
|
-
var Accordion = forwardRef(
|
|
5
|
+
import { sx } from "#styles";
|
|
6
|
+
import * as s from "./Accordion.css";
|
|
7
|
+
import { AccordionContext, accordionReducer } from "./AccordionContext";
|
|
8
|
+
const Accordion = forwardRef(
|
|
12
9
|
({
|
|
13
10
|
children,
|
|
14
11
|
className,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useReducer } from 'react';\n\nimport clsx from 'clsx';\n\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './Accordion.css';\nimport { AccordionContext, accordionReducer } from './AccordionContext';\n\ninterface AccordionProps extends UIComponent<'div', typeof s.accordion> {\n isExpanded?: boolean;\n}\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n (\n {\n children,\n className,\n isPadding = true,\n isExpanded: initIsExpaned = false,\n sx: propSx,\n ...props\n },\n ref,\n ) => {\n const [isExpanded, dispatch] = useReducer(accordionReducer, initIsExpaned);\n\n return (\n <div\n ref={ref}\n className={clsx(s.accordion({ isPadding }), className, sx(propSx))}\n {...props}\n >\n <AccordionContext.Provider value={{ isExpanded, dispatch }}>\n {children}\n </AccordionContext.Provider>\n </div>\n );\n },\n);\nAccordion.displayName = 'Accordion';\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useReducer } from 'react';\n\nimport clsx from 'clsx';\n\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './Accordion.css';\nimport { AccordionContext, accordionReducer } from './AccordionContext';\n\ninterface AccordionProps extends UIComponent<'div', typeof s.accordion> {\n isExpanded?: boolean;\n}\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n (\n {\n children,\n className,\n isPadding = true,\n isExpanded: initIsExpaned = false,\n sx: propSx,\n ...props\n },\n ref,\n ) => {\n const [isExpanded, dispatch] = useReducer(accordionReducer, initIsExpaned);\n\n return (\n <div\n ref={ref}\n className={clsx(s.accordion({ isPadding }), className, sx(propSx))}\n {...props}\n >\n <AccordionContext.Provider value={{ isExpanded, dispatch }}>\n {children}\n </AccordionContext.Provider>\n </div>\n );\n },\n);\nAccordion.displayName = 'Accordion';\n"],"mappings":";AAoCQ;AAlCR,SAAS,YAAY,kBAAkB;AAEvC,OAAO,UAAU;AAEjB,SAAS,UAAU;AAGnB,YAAY,OAAO;AACnB,SAAS,kBAAkB,wBAAwB;AAM5C,MAAM,YAAY;AAAA,EACvB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,YAAY,gBAAgB;AAAA,IAC5B,IAAI;AAAA,IACJ,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,CAAC,YAAY,QAAQ,IAAI,WAAW,kBAAkB,aAAa;AAEzE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,EAAE,UAAU,EAAE,UAAU,CAAC,GAAG,WAAW,GAAG,MAAM,CAAC;AAAA,QAChE,GAAG;AAAA,QAEJ,8BAAC,iBAAiB,UAAjB,EAA0B,OAAO,EAAE,YAAY,SAAS,GACtD,UACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACA,UAAU,cAAc;","names":[]}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import { uiTest } from "../../tests/uiTest.mjs";
|
|
1
|
+
import { Accordion } from ".";
|
|
2
|
+
import { uiTest } from "../../tests/uiTest";
|
|
4
3
|
describe("Accordion \uCEF4\uD3EC\uB10C\uD2B8", () => {
|
|
5
4
|
uiTest(Accordion, "Accordion");
|
|
6
5
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Accordion/Accordion.spec.tsx"],"sourcesContent":["import { Accordion } from '.';\nimport { uiTest } from '../../tests/uiTest';\n\ndescribe('Accordion 컴포넌트', () => {\n uiTest(Accordion, 'Accordion');\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Accordion/Accordion.spec.tsx"],"sourcesContent":["import { Accordion } from '.';\nimport { uiTest } from '../../tests/uiTest';\n\ndescribe('Accordion 컴포넌트', () => {\n uiTest(Accordion, 'Accordion');\n});\n"],"mappings":"AAAA,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AAEvB,SAAS,sCAAkB,MAAM;AAC/B,SAAO,WAAW,WAAW;AAC/B,CAAC;","names":[]}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
|
-
import "
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import { recipeWithLayer, styleWithLayer } from "#styleUtils.mjs";
|
|
5
|
-
import { paddingVar } from "./Accordion.css.mjs";
|
|
6
|
-
var container = recipeWithLayer({
|
|
1
|
+
import { recipeWithLayer, styleWithLayer } from "#styleUtils";
|
|
2
|
+
import { paddingVar } from "./Accordion.css";
|
|
3
|
+
const container = recipeWithLayer({
|
|
7
4
|
base: {
|
|
8
5
|
overflow: "hidden",
|
|
9
6
|
transition: "height 0.2s ease, opacity 0.2s ease"
|
|
@@ -20,7 +17,7 @@ var container = recipeWithLayer({
|
|
|
20
17
|
}
|
|
21
18
|
}
|
|
22
19
|
});
|
|
23
|
-
|
|
20
|
+
const inner = styleWithLayer({
|
|
24
21
|
padding: paddingVar
|
|
25
22
|
});
|
|
26
23
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Accordion/AccordionContent.css.ts"],"sourcesContent":["import { recipeWithLayer, styleWithLayer } from '#styleUtils';\n\nimport { paddingVar } from './Accordion.css';\n\nexport const container = recipeWithLayer({\n base: {\n overflow: 'hidden',\n\n transition: 'height 0.2s ease, opacity 0.2s ease',\n },\n\n variants: {\n isExpanded: {\n true: {\n opacity: '1',\n },\n\n false: {\n height: '0',\n\n opacity: '0',\n },\n },\n },\n});\n\nexport const inner = styleWithLayer({\n padding: paddingVar,\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Accordion/AccordionContent.css.ts"],"sourcesContent":["import { recipeWithLayer, styleWithLayer } from '#styleUtils';\n\nimport { paddingVar } from './Accordion.css';\n\nexport const container = recipeWithLayer({\n base: {\n overflow: 'hidden',\n\n transition: 'height 0.2s ease, opacity 0.2s ease',\n },\n\n variants: {\n isExpanded: {\n true: {\n opacity: '1',\n },\n\n false: {\n height: '0',\n\n opacity: '0',\n },\n },\n },\n});\n\nexport const inner = styleWithLayer({\n padding: paddingVar,\n});\n"],"mappings":"AAAA,SAAS,iBAAiB,sBAAsB;AAEhD,SAAS,kBAAkB;AAEpB,MAAM,YAAY,gBAAgB;AAAA,EACvC,MAAM;AAAA,IACJ,UAAU;AAAA,IAEV,YAAY;AAAA,EACd;AAAA,EAEA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,MAEA,OAAO;AAAA,QACL,QAAQ;AAAA,QAER,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,MAAM,QAAQ,eAAe;AAAA,EAClC,SAAS;AACX,CAAC;","names":[]}
|
|
@@ -1,17 +1,14 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import "
|
|
3
|
-
|
|
4
|
-
// src/components/Accordion/AccordionContent.tsx
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
3
|
import {
|
|
6
4
|
useContext,
|
|
7
5
|
useEffect,
|
|
8
6
|
useLayoutEffect,
|
|
9
7
|
useRef
|
|
10
8
|
} from "react";
|
|
11
|
-
import * as s from "./AccordionContent.css
|
|
12
|
-
import { AccordionContext } from "./AccordionContext
|
|
13
|
-
|
|
14
|
-
var AccordionContent = ({ children }) => {
|
|
9
|
+
import * as s from "./AccordionContent.css";
|
|
10
|
+
import { AccordionContext } from "./AccordionContext";
|
|
11
|
+
const AccordionContent = ({ children }) => {
|
|
15
12
|
const containerRef = useRef(null);
|
|
16
13
|
const accordionContext = useContext(AccordionContext);
|
|
17
14
|
const initRef = useRef(true);
|
|
@@ -22,40 +19,40 @@ var AccordionContent = ({ children }) => {
|
|
|
22
19
|
}
|
|
23
20
|
const { isExpanded } = accordionContext;
|
|
24
21
|
useLayoutEffect(() => {
|
|
25
|
-
const
|
|
26
|
-
if (!
|
|
22
|
+
const container = containerRef.current;
|
|
23
|
+
if (!container) {
|
|
27
24
|
return;
|
|
28
25
|
}
|
|
29
26
|
if (!isExpanded) {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
27
|
+
container.style.height = `${container.scrollHeight}px`;
|
|
28
|
+
container.className = s.container({ isExpanded });
|
|
29
|
+
container.offsetTop;
|
|
30
|
+
container.style.height = "0";
|
|
34
31
|
initRef.current = false;
|
|
35
32
|
return;
|
|
36
33
|
}
|
|
37
34
|
if (initRef.current) {
|
|
38
|
-
|
|
35
|
+
container.style.height = "auto";
|
|
39
36
|
} else {
|
|
40
|
-
|
|
37
|
+
container.style.height = `${container.scrollHeight}px`;
|
|
41
38
|
}
|
|
42
|
-
|
|
39
|
+
container.className = s.container({ isExpanded });
|
|
43
40
|
initRef.current = false;
|
|
44
41
|
}, [isExpanded]);
|
|
45
42
|
useEffect(() => {
|
|
46
|
-
const
|
|
47
|
-
if (!
|
|
43
|
+
const container = containerRef.current;
|
|
44
|
+
if (!container) {
|
|
48
45
|
return;
|
|
49
46
|
}
|
|
50
47
|
const handleTransitionEnd = (e) => {
|
|
51
|
-
if (e.target !==
|
|
48
|
+
if (e.target !== container || e.propertyName !== "height" || !isExpanded) {
|
|
52
49
|
return;
|
|
53
50
|
}
|
|
54
|
-
|
|
51
|
+
container.style.height = "auto";
|
|
55
52
|
};
|
|
56
|
-
|
|
53
|
+
container.addEventListener("transitionend", handleTransitionEnd);
|
|
57
54
|
return () => {
|
|
58
|
-
|
|
55
|
+
container.removeEventListener("transitionend", handleTransitionEnd);
|
|
59
56
|
};
|
|
60
57
|
}, [containerRef, isExpanded]);
|
|
61
58
|
return /* @__PURE__ */ jsx("div", { ref: containerRef, className: s.container({ isExpanded }), children: /* @__PURE__ */ jsx("div", { className: s.inner, children }) });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Accordion/AccordionContent.tsx"],"sourcesContent":["'use client';\n\nimport {\n type ReactNode,\n useContext,\n useEffect,\n useLayoutEffect,\n useRef,\n} from 'react';\n\nimport * as s from './AccordionContent.css';\nimport { AccordionContext } from './AccordionContext';\n\ninterface AccordionContentProps {\n children: ReactNode;\n}\n\nexport const AccordionContent = ({ children }: AccordionContentProps) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const accordionContext = useContext(AccordionContext);\n const initRef = useRef<boolean>(true);\n\n if (!accordionContext) {\n throw new Error(\n 'AccordionContent must be used within an Accordion component.',\n );\n }\n\n const { isExpanded } = accordionContext;\n\n useLayoutEffect(() => {\n const container = containerRef.current;\n if (!container) {\n return;\n }\n\n if (!isExpanded) {\n container.style.height = `${container.scrollHeight}px`;\n container.className = s.container({ isExpanded });\n //eslint-disable-next-line\n container.offsetTop;\n container.style.height = '0';\n initRef.current = false;\n return;\n }\n\n if (initRef.current) {\n container.style.height = 'auto';\n } else {\n container.style.height = `${container.scrollHeight}px`;\n }\n container.className = s.container({ isExpanded });\n\n initRef.current = false;\n }, [isExpanded]);\n\n useEffect(() => {\n const container = containerRef.current;\n if (!container) {\n return;\n }\n\n const handleTransitionEnd = (e: TransitionEvent) => {\n if (\n e.target !== container ||\n e.propertyName !== 'height' ||\n !isExpanded\n ) {\n return;\n }\n\n container.style.height = 'auto';\n };\n\n container.addEventListener('transitionend', handleTransitionEnd);\n\n return () => {\n container.removeEventListener('transitionend', handleTransitionEnd);\n };\n }, [containerRef, isExpanded]);\n\n return (\n <div ref={containerRef} className={s.container({ isExpanded })}>\n <div className={s.inner}>{children}</div>\n </div>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Accordion/AccordionContent.tsx"],"sourcesContent":["'use client';\n\nimport {\n type ReactNode,\n useContext,\n useEffect,\n useLayoutEffect,\n useRef,\n} from 'react';\n\nimport * as s from './AccordionContent.css';\nimport { AccordionContext } from './AccordionContext';\n\ninterface AccordionContentProps {\n children: ReactNode;\n}\n\nexport const AccordionContent = ({ children }: AccordionContentProps) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const accordionContext = useContext(AccordionContext);\n const initRef = useRef<boolean>(true);\n\n if (!accordionContext) {\n throw new Error(\n 'AccordionContent must be used within an Accordion component.',\n );\n }\n\n const { isExpanded } = accordionContext;\n\n useLayoutEffect(() => {\n const container = containerRef.current;\n if (!container) {\n return;\n }\n\n if (!isExpanded) {\n container.style.height = `${container.scrollHeight}px`;\n container.className = s.container({ isExpanded });\n //eslint-disable-next-line\n container.offsetTop;\n container.style.height = '0';\n initRef.current = false;\n return;\n }\n\n if (initRef.current) {\n container.style.height = 'auto';\n } else {\n container.style.height = `${container.scrollHeight}px`;\n }\n container.className = s.container({ isExpanded });\n\n initRef.current = false;\n }, [isExpanded]);\n\n useEffect(() => {\n const container = containerRef.current;\n if (!container) {\n return;\n }\n\n const handleTransitionEnd = (e: TransitionEvent) => {\n if (\n e.target !== container ||\n e.propertyName !== 'height' ||\n !isExpanded\n ) {\n return;\n }\n\n container.style.height = 'auto';\n };\n\n container.addEventListener('transitionend', handleTransitionEnd);\n\n return () => {\n container.removeEventListener('transitionend', handleTransitionEnd);\n };\n }, [containerRef, isExpanded]);\n\n return (\n <div ref={containerRef} className={s.container({ isExpanded })}>\n <div className={s.inner}>{children}</div>\n </div>\n );\n};\n"],"mappings":";AAmFM;AAjFN;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,YAAY,OAAO;AACnB,SAAS,wBAAwB;AAM1B,MAAM,mBAAmB,CAAC,EAAE,SAAS,MAA6B;AACvE,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,mBAAmB,WAAW,gBAAgB;AACpD,QAAM,UAAU,OAAgB,IAAI;AAEpC,MAAI,CAAC,kBAAkB;AACrB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,QAAM,EAAE,WAAW,IAAI;AAEvB,kBAAgB,MAAM;AACpB,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,WAAW;AACd;AAAA,IACF;AAEA,QAAI,CAAC,YAAY;AACf,gBAAU,MAAM,SAAS,GAAG,UAAU,YAAY;AAClD,gBAAU,YAAY,EAAE,UAAU,EAAE,WAAW,CAAC;AAEhD,gBAAU;AACV,gBAAU,MAAM,SAAS;AACzB,cAAQ,UAAU;AAClB;AAAA,IACF;AAEA,QAAI,QAAQ,SAAS;AACnB,gBAAU,MAAM,SAAS;AAAA,IAC3B,OAAO;AACL,gBAAU,MAAM,SAAS,GAAG,UAAU,YAAY;AAAA,IACpD;AACA,cAAU,YAAY,EAAE,UAAU,EAAE,WAAW,CAAC;AAEhD,YAAQ,UAAU;AAAA,EACpB,GAAG,CAAC,UAAU,CAAC;AAEf,YAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,WAAW;AACd;AAAA,IACF;AAEA,UAAM,sBAAsB,CAAC,MAAuB;AAClD,UACE,EAAE,WAAW,aACb,EAAE,iBAAiB,YACnB,CAAC,YACD;AACA;AAAA,MACF;AAEA,gBAAU,MAAM,SAAS;AAAA,IAC3B;AAEA,cAAU,iBAAiB,iBAAiB,mBAAmB;AAE/D,WAAO,MAAM;AACX,gBAAU,oBAAoB,iBAAiB,mBAAmB;AAAA,IACpE;AAAA,EACF,GAAG,CAAC,cAAc,UAAU,CAAC;AAE7B,SACE,oBAAC,SAAI,KAAK,cAAc,WAAW,EAAE,UAAU,EAAE,WAAW,CAAC,GAC3D,8BAAC,SAAI,WAAW,EAAE,OAAQ,UAAS,GACrC;AAEJ;","names":[]}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
|
-
import "../../chunk-IEP6GGEX.mjs";
|
|
2
|
-
|
|
3
|
-
// src/components/Accordion/AccordionContext.ts
|
|
4
1
|
import { createContext } from "react";
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
const AccordionContext = createContext(void 0);
|
|
3
|
+
const accordionReducer = (_, action) => {
|
|
7
4
|
return action;
|
|
8
5
|
};
|
|
9
6
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Accordion/AccordionContext.ts"],"sourcesContent":["import { createContext, type Dispatch } from 'react';\n\nexport const AccordionContext = createContext<\n { isExpanded: boolean; dispatch: Dispatch<boolean> } | undefined\n>(undefined);\n\nexport const accordionReducer = (_: boolean, action: boolean) => {\n return action;\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Accordion/AccordionContext.ts"],"sourcesContent":["import { createContext, type Dispatch } from 'react';\n\nexport const AccordionContext = createContext<\n { isExpanded: boolean; dispatch: Dispatch<boolean> } | undefined\n>(undefined);\n\nexport const accordionReducer = (_: boolean, action: boolean) => {\n return action;\n};\n"],"mappings":"AAAA,SAAS,qBAAoC;AAEtC,MAAM,mBAAmB,cAE9B,MAAS;AAEJ,MAAM,mBAAmB,CAAC,GAAY,WAAoB;AAC/D,SAAO;AACT;","names":[]}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
|
-
import "
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import { recipeWithLayer } from "#styleUtils.mjs";
|
|
5
|
-
import { paddingVar } from "./Accordion.css.mjs";
|
|
6
|
-
var triggerContainer = recipeWithLayer({
|
|
1
|
+
import { recipeWithLayer } from "#styleUtils";
|
|
2
|
+
import { paddingVar } from "./Accordion.css";
|
|
3
|
+
const triggerContainer = recipeWithLayer({
|
|
7
4
|
base: {
|
|
8
5
|
display: "flex",
|
|
9
6
|
alignItems: "center",
|
|
@@ -24,7 +21,7 @@ var triggerContainer = recipeWithLayer({
|
|
|
24
21
|
}
|
|
25
22
|
}
|
|
26
23
|
});
|
|
27
|
-
|
|
24
|
+
const arrow = recipeWithLayer({
|
|
28
25
|
base: {
|
|
29
26
|
lineHeight: "0",
|
|
30
27
|
transition: "transform 0.2s ease"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Accordion/AccordionTrigger.css.ts"],"sourcesContent":["import { recipeWithLayer } from '#styleUtils';\n\nimport { paddingVar } from './Accordion.css';\n\nexport const triggerContainer = recipeWithLayer({\n base: {\n display: 'flex',\n alignItems: 'center',\n gap: '0.25em',\n\n width: '100%',\n padding: paddingVar,\n\n cursor: 'pointer',\n\n ':hover': {\n textDecoration: 'underline',\n },\n },\n variants: {\n iconPosition: {\n text: {},\n right: {\n justifyContent: 'space-between',\n },\n },\n },\n});\n\nexport const arrow = recipeWithLayer({\n base: {\n lineHeight: '0',\n\n transition: 'transform 0.2s ease',\n },\n variants: {\n expand: {\n true: {\n transform: 'rotate(-180deg)',\n },\n false: {\n transform: 'rotate(0)',\n },\n },\n },\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Accordion/AccordionTrigger.css.ts"],"sourcesContent":["import { recipeWithLayer } from '#styleUtils';\n\nimport { paddingVar } from './Accordion.css';\n\nexport const triggerContainer = recipeWithLayer({\n base: {\n display: 'flex',\n alignItems: 'center',\n gap: '0.25em',\n\n width: '100%',\n padding: paddingVar,\n\n cursor: 'pointer',\n\n ':hover': {\n textDecoration: 'underline',\n },\n },\n variants: {\n iconPosition: {\n text: {},\n right: {\n justifyContent: 'space-between',\n },\n },\n },\n});\n\nexport const arrow = recipeWithLayer({\n base: {\n lineHeight: '0',\n\n transition: 'transform 0.2s ease',\n },\n variants: {\n expand: {\n true: {\n transform: 'rotate(-180deg)',\n },\n false: {\n transform: 'rotate(0)',\n },\n },\n },\n});\n"],"mappings":"AAAA,SAAS,uBAAuB;AAEhC,SAAS,kBAAkB;AAEpB,MAAM,mBAAmB,gBAAgB;AAAA,EAC9C,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK;AAAA,IAEL,OAAO;AAAA,IACP,SAAS;AAAA,IAET,QAAQ;AAAA,IAER,UAAU;AAAA,MACR,gBAAgB;AAAA,IAClB;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,cAAc;AAAA,MACZ,MAAM,CAAC;AAAA,MACP,OAAO;AAAA,QACL,gBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,MAAM,QAAQ,gBAAgB;AAAA,EACnC,MAAM;AAAA,IACJ,YAAY;AAAA,IAEZ,YAAY;AAAA,EACd;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,QACJ,WAAW;AAAA,MACb;AAAA,MACA,OAAO;AAAA,QACL,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AACF,CAAC;","names":[]}
|
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import "
|
|
3
|
-
|
|
4
|
-
// src/components/Accordion/AccordionTrigger.tsx
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
3
|
import { useContext } from "react";
|
|
6
4
|
import { ChevronDownIcon } from "lucide-react";
|
|
7
|
-
import { AccordionContext } from "./AccordionContext
|
|
8
|
-
import * as s from "./AccordionTrigger.css
|
|
9
|
-
|
|
10
|
-
var AccordionTrigger = ({
|
|
5
|
+
import { AccordionContext } from "./AccordionContext";
|
|
6
|
+
import * as s from "./AccordionTrigger.css";
|
|
7
|
+
const AccordionTrigger = ({
|
|
11
8
|
children,
|
|
12
9
|
iconPosition = "right"
|
|
13
10
|
}) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Accordion/AccordionTrigger.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode, useContext } from 'react';\n\nimport { ChevronDownIcon } from 'lucide-react';\n\nimport { AccordionContext } from './AccordionContext';\nimport * as s from './AccordionTrigger.css';\n\ninterface AccordionTriggerProps {\n children: ReactNode;\n iconPosition?: 'text' | 'right';\n}\n\nexport const AccordionTrigger = ({\n children,\n iconPosition = 'right',\n}: AccordionTriggerProps) => {\n const accordionContext = useContext(AccordionContext);\n\n if (!accordionContext) {\n throw new Error(\n 'AccordionTrigger must be used within an Accordion component.',\n );\n }\n\n const { dispatch, isExpanded } = accordionContext;\n\n return (\n <div\n className={s.triggerContainer({ iconPosition })}\n aria-expanded={isExpanded}\n onClick={() => dispatch(!isExpanded)}\n >\n <span>{children}</span>\n <span className={s.arrow({ expand: isExpanded })}>\n <ChevronDownIcon size=\"1em\" />\n </span>\n </div>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Accordion/AccordionTrigger.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode, useContext } from 'react';\n\nimport { ChevronDownIcon } from 'lucide-react';\n\nimport { AccordionContext } from './AccordionContext';\nimport * as s from './AccordionTrigger.css';\n\ninterface AccordionTriggerProps {\n children: ReactNode;\n iconPosition?: 'text' | 'right';\n}\n\nexport const AccordionTrigger = ({\n children,\n iconPosition = 'right',\n}: AccordionTriggerProps) => {\n const accordionContext = useContext(AccordionContext);\n\n if (!accordionContext) {\n throw new Error(\n 'AccordionTrigger must be used within an Accordion component.',\n );\n }\n\n const { dispatch, isExpanded } = accordionContext;\n\n return (\n <div\n className={s.triggerContainer({ iconPosition })}\n aria-expanded={isExpanded}\n onClick={() => dispatch(!isExpanded)}\n >\n <span>{children}</span>\n <span className={s.arrow({ expand: isExpanded })}>\n <ChevronDownIcon size=\"1em\" />\n </span>\n </div>\n );\n};\n"],"mappings":";AA6BI,SAKE,KALF;AA3BJ,SAAyB,kBAAkB;AAE3C,SAAS,uBAAuB;AAEhC,SAAS,wBAAwB;AACjC,YAAY,OAAO;AAOZ,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA,eAAe;AACjB,MAA6B;AAC3B,QAAM,mBAAmB,WAAW,gBAAgB;AAEpD,MAAI,CAAC,kBAAkB;AACrB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,QAAM,EAAE,UAAU,WAAW,IAAI;AAEjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,EAAE,iBAAiB,EAAE,aAAa,CAAC;AAAA,MAC9C,iBAAe;AAAA,MACf,SAAS,MAAM,SAAS,CAAC,UAAU;AAAA,MAEnC;AAAA,4BAAC,UAAM,UAAS;AAAA,QAChB,oBAAC,UAAK,WAAW,EAAE,MAAM,EAAE,QAAQ,WAAW,CAAC,GAC7C,8BAAC,mBAAgB,MAAK,OAAM,GAC9B;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
export * from "./
|
|
3
|
-
export * from "./
|
|
4
|
-
export * from "./AccordionTrigger.mjs";
|
|
1
|
+
export * from "./Accordion";
|
|
2
|
+
export * from "./AccordionContent";
|
|
3
|
+
export * from "./AccordionTrigger";
|
|
5
4
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Accordion/index.ts"],"sourcesContent":["export * from './Accordion';\nexport * from './AccordionContent';\nexport * from './AccordionTrigger';\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Accordion/index.ts"],"sourcesContent":["export * from './Accordion';\nexport * from './AccordionContent';\nexport * from './AccordionTrigger';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
|
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
import "../../chunk-IEP6GGEX.mjs";
|
|
2
|
-
|
|
3
|
-
// src/components/Alert/index.tsx
|
|
4
|
-
import "react";
|
|
5
|
-
import { useOverlay, usePreventKeyboardInput } from "@kimdw-rtk/utils";
|
|
6
|
-
import { Button, Dialog, DialogContent, DialogFooter } from "#components.mjs";
|
|
7
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
-
|
|
2
|
+
import {} from "react";
|
|
3
|
+
import { useOverlay, usePreventKeyboardInput } from "@kimdw-rtk/utils";
|
|
4
|
+
import { Button, Dialog, DialogContent, DialogFooter } from "#components";
|
|
5
|
+
const Alert = ({ children }) => {
|
|
9
6
|
const { close } = useOverlay();
|
|
10
7
|
usePreventKeyboardInput();
|
|
11
8
|
return /* @__PURE__ */ jsxs(Dialog, { children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Alert/index.tsx"],"sourcesContent":["import { type ReactNode } from 'react';\n\nimport { useOverlay, usePreventKeyboardInput } from '@kimdw-rtk/utils';\n\nimport { Button, Dialog, DialogContent, DialogFooter } from '#components';\n\ninterface AlertProps {\n children: ReactNode;\n}\n\nexport const Alert = ({ children }: AlertProps) => {\n const { close } = useOverlay();\n usePreventKeyboardInput();\n\n return (\n <Dialog>\n <DialogContent>{children}</DialogContent>\n <DialogFooter>\n <Button size=\"sm\" onClick={close}>\n 확인\n </Button>\n </DialogFooter>\n </Dialog>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Alert/index.tsx"],"sourcesContent":["import { type ReactNode } from 'react';\n\nimport { useOverlay, usePreventKeyboardInput } from '@kimdw-rtk/utils';\n\nimport { Button, Dialog, DialogContent, DialogFooter } from '#components';\n\ninterface AlertProps {\n children: ReactNode;\n}\n\nexport const Alert = ({ children }: AlertProps) => {\n const { close } = useOverlay();\n usePreventKeyboardInput();\n\n return (\n <Dialog>\n <DialogContent>{children}</DialogContent>\n <DialogFooter>\n <Button size=\"sm\" onClick={close}>\n 확인\n </Button>\n </DialogFooter>\n </Dialog>\n );\n};\n"],"mappings":"AAeI,SACE,KADF;AAfJ,eAA+B;AAE/B,SAAS,YAAY,+BAA+B;AAEpD,SAAS,QAAQ,QAAQ,eAAe,oBAAoB;AAMrD,MAAM,QAAQ,CAAC,EAAE,SAAS,MAAkB;AACjD,QAAM,EAAE,MAAM,IAAI,WAAW;AAC7B,0BAAwB;AAExB,SACE,qBAAC,UACC;AAAA,wBAAC,iBAAe,UAAS;AAAA,IACzB,oBAAC,gBACC,8BAAC,UAAO,MAAK,MAAK,SAAS,OAAO,0BAElC,GACF;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
|
-
import "
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import { recipeWithLayer } from "#styleUtils.mjs";
|
|
5
|
-
import { theme } from "#themes.mjs";
|
|
6
|
-
var box = recipeWithLayer({
|
|
1
|
+
import { recipeWithLayer } from "#styleUtils";
|
|
2
|
+
import { theme } from "#themes";
|
|
3
|
+
const box = recipeWithLayer({
|
|
7
4
|
variants: {
|
|
8
5
|
flex: {
|
|
9
6
|
true: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Box/Box.css.ts"],"sourcesContent":["import { recipeWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\n\nexport const box = recipeWithLayer({\n variants: {\n flex: {\n true: {\n display: 'flex',\n },\n },\n\n rounded: {\n true: {\n borderRadius: theme.borderRadius,\n },\n },\n },\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Box/Box.css.ts"],"sourcesContent":["import { recipeWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\n\nexport const box = recipeWithLayer({\n variants: {\n flex: {\n true: {\n display: 'flex',\n },\n },\n\n rounded: {\n true: {\n borderRadius: theme.borderRadius,\n },\n },\n },\n});\n"],"mappings":"AAAA,SAAS,uBAAuB;AAChC,SAAS,aAAa;AAEf,MAAM,MAAM,gBAAgB;AAAA,EACjC,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IAEA,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,cAAc,MAAM;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AACF,CAAC;","names":[]}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import { uiTest } from "../../tests/uiTest.mjs";
|
|
1
|
+
import { Box } from ".";
|
|
2
|
+
import { uiTest } from "../../tests/uiTest";
|
|
4
3
|
describe("Box \uCEF4\uD3EC\uB10C\uD2B8", () => {
|
|
5
4
|
uiTest(Box, "Box");
|
|
6
5
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Box/Box.spec.tsx"],"sourcesContent":["import { Box } from '.';\nimport { uiTest } from '../../tests/uiTest';\n\ndescribe('Box 컴포넌트', () => {\n uiTest(Box, 'Box');\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Box/Box.spec.tsx"],"sourcesContent":["import { Box } from '.';\nimport { uiTest } from '../../tests/uiTest';\n\ndescribe('Box 컴포넌트', () => {\n uiTest(Box, 'Box');\n});\n"],"mappings":"AAAA,SAAS,WAAW;AACpB,SAAS,cAAc;AAEvB,SAAS,gCAAY,MAAM;AACzB,SAAO,KAAK,KAAK;AACnB,CAAC;","names":[]}
|
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
import "
|
|
2
|
-
|
|
3
|
-
// src/components/Box/index.tsx
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
2
|
import { forwardRef } from "react";
|
|
5
3
|
import { clsx } from "clsx";
|
|
6
|
-
import { sprinkles, sx } from "#styles
|
|
7
|
-
import { filterSprinkles, omitSprinkles } from "#utils
|
|
8
|
-
import * as s from "./Box.css
|
|
9
|
-
|
|
10
|
-
var Box = forwardRef(
|
|
4
|
+
import { sprinkles, sx } from "#styles";
|
|
5
|
+
import { filterSprinkles, omitSprinkles } from "#utils";
|
|
6
|
+
import * as s from "./Box.css";
|
|
7
|
+
const Box = forwardRef(
|
|
11
8
|
({
|
|
12
9
|
children,
|
|
13
10
|
flex = false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Box/index.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { clsx } from 'clsx';\n\nimport { sprinkles, sx, type SprinklesProps } from '#styles';\nimport type { UIComponent } from '#types';\nimport { filterSprinkles, omitSprinkles } from '#utils';\n\nimport * as s from './Box.css';\n\ntype BoxProps = UIComponent<'div', typeof s.box> & SprinklesProps;\n\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n (\n {\n children,\n flex = false,\n rounded = false,\n className,\n sx: propSx,\n ...props\n },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n className={clsx(\n className,\n s.box({ flex, rounded }),\n sx(propSx),\n sprinkles(filterSprinkles(props)),\n )}\n {...omitSprinkles(props)}\n >\n {children}\n </div>\n );\n },\n);\nBox.displayName = 'Box';\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Box/index.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { clsx } from 'clsx';\n\nimport { sprinkles, sx, type SprinklesProps } from '#styles';\nimport type { UIComponent } from '#types';\nimport { filterSprinkles, omitSprinkles } from '#utils';\n\nimport * as s from './Box.css';\n\ntype BoxProps = UIComponent<'div', typeof s.box> & SprinklesProps;\n\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n (\n {\n children,\n flex = false,\n rounded = false,\n className,\n sx: propSx,\n ...props\n },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n className={clsx(\n className,\n s.box({ flex, rounded }),\n sx(propSx),\n sprinkles(filterSprinkles(props)),\n )}\n {...omitSprinkles(props)}\n >\n {children}\n </div>\n );\n },\n);\nBox.displayName = 'Box';\n"],"mappings":"AAyBM;AAzBN,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AAErB,SAAS,WAAW,UAA+B;AAEnD,SAAS,iBAAiB,qBAAqB;AAE/C,YAAY,OAAO;AAIZ,MAAM,MAAM;AAAA,EACjB,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,IAAI;AAAA,IACJ,GAAG;AAAA,EACL,GACA,QACG;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAAA,UACvB,GAAG,MAAM;AAAA,UACT,UAAU,gBAAgB,KAAK,CAAC;AAAA,QAClC;AAAA,QACC,GAAG,cAAc,KAAK;AAAA,QAEtB;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,IAAI,cAAc;","names":[]}
|
|
@@ -1,14 +1,11 @@
|
|
|
1
|
-
import "../../chunk-IEP6GGEX.mjs";
|
|
2
|
-
|
|
3
|
-
// src/components/Button/Button.css.ts
|
|
4
1
|
import { createVar, globalStyle, keyframes, style } 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 pulse = keyframes({
|
|
36
33
|
"0%": {
|
|
37
34
|
backgroundPosition: "-300% 0"
|
|
38
35
|
},
|
|
@@ -40,7 +37,7 @@ var pulse = keyframes({
|
|
|
40
37
|
backgroundPosition: "300% 0"
|
|
41
38
|
}
|
|
42
39
|
});
|
|
43
|
-
|
|
40
|
+
const span = recipeWithLayer({
|
|
44
41
|
base: {
|
|
45
42
|
lineHeight: "0"
|
|
46
43
|
},
|
|
@@ -67,7 +64,7 @@ var span = recipeWithLayer({
|
|
|
67
64
|
}
|
|
68
65
|
}
|
|
69
66
|
});
|
|
70
|
-
|
|
67
|
+
const button = recipeWithLayer({
|
|
71
68
|
base: {
|
|
72
69
|
display: "inline-flex",
|
|
73
70
|
alignItems: "center",
|
|
@@ -176,7 +173,7 @@ var button = recipeWithLayer({
|
|
|
176
173
|
}
|
|
177
174
|
}
|
|
178
175
|
});
|
|
179
|
-
|
|
176
|
+
const icon = style({
|
|
180
177
|
lineHeight: "0"
|
|
181
178
|
});
|
|
182
179
|
globalStyle(`${icon} > *`, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Button/Button.css.ts"],"sourcesContent":["import { createVar, globalStyle, keyframes, style } 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.background,\n },\n }),\n }),\n {} as Record<ScaleColor, string>,\n);\n\nconst pulse = keyframes({\n '0%': {\n backgroundPosition: '-300% 0',\n },\n\n '100%': {\n backgroundPosition: '300% 0',\n },\n});\n\nexport const span = recipeWithLayer({\n base: {\n lineHeight: '0',\n },\n variants: {\n size: {\n sm: {\n fontSize: '0.875em',\n },\n\n md: {\n fontSize: '1em',\n },\n\n lg: {\n fontSize: '1.125em',\n },\n\n 'icon-sm': {\n fontSize: '1em',\n },\n\n 'icon-md': {\n fontSize: '1.25em',\n },\n\n 'icon-lg': {\n fontSize: '1.5em',\n },\n },\n },\n});\n\nexport const button = recipeWithLayer({\n base: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n overflow: 'hidden',\n\n border: '0',\n borderRadius: theme.borderRadius,\n\n fontSize: '1em',\n\n transition: 'background-color 0.2s ease, color 0.2s ease',\n\n cursor: 'pointer',\n userSelect: 'none',\n },\n\n variants: {\n hasIcon: {\n true: {\n gap: '0.5em',\n },\n },\n\n color: {\n ...semanticColors,\n ...scaleColors,\n },\n\n size: {\n sm: {\n height: '2.25em',\n padding: '0 0.75em',\n },\n\n md: {\n height: '2.5em',\n padding: '0 0.875em',\n },\n\n lg: {\n height: '2.75em',\n padding: '0 1em',\n },\n\n 'icon-sm': {\n width: '2em',\n height: '2em',\n },\n\n 'icon-md': {\n width: '2.5em',\n height: '2.5em',\n },\n\n 'icon-lg': {\n width: '2.75em',\n height: '2.75em',\n },\n },\n\n variant: {\n contained: {\n boxShadow: `inset 0 0 0 1px rgba(255, 255, 255, 0.08)`,\n backgroundColor: `rgb(${backgroundVar})`,\n color: `rgb(${foregroundVar})`,\n\n ':disabled': {\n backgroundColor: `rgb(${theme.color.muted})`,\n\n color: `rgb(${theme.color['muted-foreground']})`,\n\n cursor: 'default',\n },\n },\n\n outlined: {\n boxShadow: `inset 0 0 0 1px rgb(${backgroundVar})`,\n backgroundColor: `rgb(${theme.color.background})`,\n color: `rgb(${theme.color.foreground})`,\n\n ':disabled': {\n backgroundColor: `rgb(${theme.color.muted})`,\n\n color: `rgb(${theme.color['muted-foreground']})`,\n\n cursor: 'default',\n },\n },\n\n ghost: {\n background: 'transparent',\n\n color: `rgb(${theme.color.foreground})`,\n\n ':hover': {\n backgroundColor: `rgba(${backgroundVar}, 0.8)`,\n\n color: `rgb(${foregroundVar})`,\n },\n\n ':disabled': {\n color: `rgb(${theme.color['muted-foreground']})`,\n\n cursor: 'default',\n },\n },\n\n glass: {\n boxShadow: `inset 0 0 0 1px rgba(255, 255, 255, 0.08)`,\n backgroundColor: `rgba(${backgroundVar}, 0.75)`,\n backdropFilter: 'blur(1rem)',\n\n color: `rgb(${theme.color.foreground})`,\n\n ':disabled': {\n backgroundColor: `rgb(${theme.color.muted})`,\n\n color: `rgb(${theme.color['muted-foreground']})`,\n\n cursor: 'default',\n },\n },\n },\n\n pulse: {\n true: {\n '::after': {\n content: '',\n position: 'absolute',\n inset: '0',\n\n background:\n 'linear-gradient(90deg, transparent 30%, #ffffff33 65%, transparent 100%)',\n backgroundSize: '300% 100%',\n\n animation: `${pulse} 5s linear 0s infinite`,\n },\n },\n },\n },\n});\n\nexport const icon = style({\n lineHeight: '0',\n});\n\nglobalStyle(`${icon} > *`, {\n width: '1em',\n height: '1em',\n lineHeight: '0',\n\n pointerEvents: 'none',\n});\n\nglobalStyle(`${button.classNames.base} svg`, {\n width: '1em',\n height: '1em',\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Button/Button.css.ts"],"sourcesContent":["import { createVar, globalStyle, keyframes, style } 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.background,\n },\n }),\n }),\n {} as Record<ScaleColor, string>,\n);\n\nconst pulse = keyframes({\n '0%': {\n backgroundPosition: '-300% 0',\n },\n\n '100%': {\n backgroundPosition: '300% 0',\n },\n});\n\nexport const span = recipeWithLayer({\n base: {\n lineHeight: '0',\n },\n variants: {\n size: {\n sm: {\n fontSize: '0.875em',\n },\n\n md: {\n fontSize: '1em',\n },\n\n lg: {\n fontSize: '1.125em',\n },\n\n 'icon-sm': {\n fontSize: '1em',\n },\n\n 'icon-md': {\n fontSize: '1.25em',\n },\n\n 'icon-lg': {\n fontSize: '1.5em',\n },\n },\n },\n});\n\nexport const button = recipeWithLayer({\n base: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n overflow: 'hidden',\n\n border: '0',\n borderRadius: theme.borderRadius,\n\n fontSize: '1em',\n\n transition: 'background-color 0.2s ease, color 0.2s ease',\n\n cursor: 'pointer',\n userSelect: 'none',\n },\n\n variants: {\n hasIcon: {\n true: {\n gap: '0.5em',\n },\n },\n\n color: {\n ...semanticColors,\n ...scaleColors,\n },\n\n size: {\n sm: {\n height: '2.25em',\n padding: '0 0.75em',\n },\n\n md: {\n height: '2.5em',\n padding: '0 0.875em',\n },\n\n lg: {\n height: '2.75em',\n padding: '0 1em',\n },\n\n 'icon-sm': {\n width: '2em',\n height: '2em',\n },\n\n 'icon-md': {\n width: '2.5em',\n height: '2.5em',\n },\n\n 'icon-lg': {\n width: '2.75em',\n height: '2.75em',\n },\n },\n\n variant: {\n contained: {\n boxShadow: `inset 0 0 0 1px rgba(255, 255, 255, 0.08)`,\n backgroundColor: `rgb(${backgroundVar})`,\n color: `rgb(${foregroundVar})`,\n\n ':disabled': {\n backgroundColor: `rgb(${theme.color.muted})`,\n\n color: `rgb(${theme.color['muted-foreground']})`,\n\n cursor: 'default',\n },\n },\n\n outlined: {\n boxShadow: `inset 0 0 0 1px rgb(${backgroundVar})`,\n backgroundColor: `rgb(${theme.color.background})`,\n color: `rgb(${theme.color.foreground})`,\n\n ':disabled': {\n backgroundColor: `rgb(${theme.color.muted})`,\n\n color: `rgb(${theme.color['muted-foreground']})`,\n\n cursor: 'default',\n },\n },\n\n ghost: {\n background: 'transparent',\n\n color: `rgb(${theme.color.foreground})`,\n\n ':hover': {\n backgroundColor: `rgba(${backgroundVar}, 0.8)`,\n\n color: `rgb(${foregroundVar})`,\n },\n\n ':disabled': {\n color: `rgb(${theme.color['muted-foreground']})`,\n\n cursor: 'default',\n },\n },\n\n glass: {\n boxShadow: `inset 0 0 0 1px rgba(255, 255, 255, 0.08)`,\n backgroundColor: `rgba(${backgroundVar}, 0.75)`,\n backdropFilter: 'blur(1rem)',\n\n color: `rgb(${theme.color.foreground})`,\n\n ':disabled': {\n backgroundColor: `rgb(${theme.color.muted})`,\n\n color: `rgb(${theme.color['muted-foreground']})`,\n\n cursor: 'default',\n },\n },\n },\n\n pulse: {\n true: {\n '::after': {\n content: '',\n position: 'absolute',\n inset: '0',\n\n background:\n 'linear-gradient(90deg, transparent 30%, #ffffff33 65%, transparent 100%)',\n backgroundSize: '300% 100%',\n\n animation: `${pulse} 5s linear 0s infinite`,\n },\n },\n },\n },\n});\n\nexport const icon = style({\n lineHeight: '0',\n});\n\nglobalStyle(`${icon} > *`, {\n width: '1em',\n height: '1em',\n lineHeight: '0',\n\n pointerEvents: 'none',\n});\n\nglobalStyle(`${button.classNames.base} svg`, {\n width: '1em',\n height: '1em',\n});\n"],"mappings":"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","names":[]}
|
|
@@ -1,20 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
fireEvent,
|
|
3
|
-
react_esm_exports,
|
|
4
|
-
render
|
|
5
|
-
} from "../../chunk-Y4CBEQ5S.mjs";
|
|
6
|
-
import "../../chunk-IEP6GGEX.mjs";
|
|
7
|
-
|
|
8
|
-
// src/components/Button/Button.spec.tsx
|
|
9
|
-
import { uiTest } from "../../tests/uiTest.mjs";
|
|
10
|
-
import { Button } 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 { Button } from "./";
|
|
12
5
|
describe("Button \uCEF4\uD3EC\uB10C\uD2B8", () => {
|
|
13
6
|
uiTest(Button, "Button");
|
|
14
7
|
it("Button\uC744 \uD074\uB9AD\uD558\uBA74 onClick\uC774 \uD638\uCD9C\uB418\uC5B4\uC57C \uD55C\uB2E4", () => {
|
|
15
8
|
const handleClick = jest.fn();
|
|
16
9
|
render(/* @__PURE__ */ jsx(Button, { onClick: handleClick, children: "Click" }));
|
|
17
|
-
fireEvent.click(
|
|
10
|
+
fireEvent.click(screen.getByRole("button", { name: "Click" }));
|
|
18
11
|
expect(handleClick).toHaveBeenCalledTimes(1);
|
|
19
12
|
});
|
|
20
13
|
it("disabled Button\uC744 \uD074\uB9AD\uD558\uBA74 onClick\uC774 \uD638\uCD9C\uB418\uC9C0 \uC54A\uC544\uC57C \uD55C\uB2E4", () => {
|
|
@@ -22,7 +15,7 @@ describe("Button \uCEF4\uD3EC\uB10C\uD2B8", () => {
|
|
|
22
15
|
render(
|
|
23
16
|
/* @__PURE__ */ jsx(Button, { onClick: handleClick, disabled: true, children: "Click" })
|
|
24
17
|
);
|
|
25
|
-
fireEvent.click(
|
|
18
|
+
fireEvent.click(screen.getByRole("button", { name: "Click" }));
|
|
26
19
|
expect(handleClick).not.toHaveBeenCalledTimes(1);
|
|
27
20
|
});
|
|
28
21
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Button/Button.spec.tsx"],"sourcesContent":["import { render, screen, fireEvent } from '@testing-library/react';\n\nimport { uiTest } from '../../tests/uiTest';\nimport { Button } from './';\n\ndescribe('Button 컴포넌트', () => {\n uiTest(Button, 'Button');\n\n it('Button을 클릭하면 onClick이 호출되어야 한다', () => {\n const handleClick = jest.fn();\n render(<Button onClick={handleClick}>Click</Button>);\n\n fireEvent.click(screen.getByRole('button', { name: 'Click' }));\n\n expect(handleClick).toHaveBeenCalledTimes(1);\n });\n\n it('disabled Button을 클릭하면 onClick이 호출되지 않아야 한다', () => {\n const handleClick = jest.fn();\n render(\n <Button onClick={handleClick} disabled>\n Click\n </Button>,\n );\n\n fireEvent.click(screen.getByRole('button', { name: 'Click' }));\n\n expect(handleClick).not.toHaveBeenCalledTimes(1);\n });\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Button/Button.spec.tsx"],"sourcesContent":["import { render, screen, fireEvent } from '@testing-library/react';\n\nimport { uiTest } from '../../tests/uiTest';\nimport { Button } from './';\n\ndescribe('Button 컴포넌트', () => {\n uiTest(Button, 'Button');\n\n it('Button을 클릭하면 onClick이 호출되어야 한다', () => {\n const handleClick = jest.fn();\n render(<Button onClick={handleClick}>Click</Button>);\n\n fireEvent.click(screen.getByRole('button', { name: 'Click' }));\n\n expect(handleClick).toHaveBeenCalledTimes(1);\n });\n\n it('disabled Button을 클릭하면 onClick이 호출되지 않아야 한다', () => {\n const handleClick = jest.fn();\n render(\n <Button onClick={handleClick} disabled>\n Click\n </Button>,\n );\n\n fireEvent.click(screen.getByRole('button', { name: 'Click' }));\n\n expect(handleClick).not.toHaveBeenCalledTimes(1);\n });\n});\n"],"mappings":"AAUW;AAVX,SAAS,QAAQ,QAAQ,iBAAiB;AAE1C,SAAS,cAAc;AACvB,SAAS,cAAc;AAEvB,SAAS,mCAAe,MAAM;AAC5B,SAAO,QAAQ,QAAQ;AAEvB,KAAG,mGAAkC,MAAM;AACzC,UAAM,cAAc,KAAK,GAAG;AAC5B,WAAO,oBAAC,UAAO,SAAS,aAAa,mBAAK,CAAS;AAEnD,cAAU,MAAM,OAAO,UAAU,UAAU,EAAE,MAAM,QAAQ,CAAC,CAAC;AAE7D,WAAO,WAAW,EAAE,sBAAsB,CAAC;AAAA,EAC7C,CAAC;AAED,KAAG,yHAA8C,MAAM;AACrD,UAAM,cAAc,KAAK,GAAG;AAC5B;AAAA,MACE,oBAAC,UAAO,SAAS,aAAa,UAAQ,MAAC,mBAEvC;AAAA,IACF;AAEA,cAAU,MAAM,OAAO,UAAU,UAAU,EAAE,MAAM,QAAQ,CAAC,CAAC;AAE7D,WAAO,WAAW,EAAE,IAAI,sBAAsB,CAAC;AAAA,EACjD,CAAC;AACH,CAAC;","names":[]}
|
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import "
|
|
3
|
-
|
|
4
|
-
// src/components/Button/index.tsx
|
|
2
|
+
import { jsx, 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 "./Button.css
|
|
10
|
-
|
|
11
|
-
var Button = forwardRef(
|
|
5
|
+
import { useRipple } from "#hooks";
|
|
6
|
+
import { sx } from "#styles";
|
|
7
|
+
import * as s from "./Button.css";
|
|
8
|
+
const Button = forwardRef(
|
|
12
9
|
({
|
|
13
10
|
children,
|
|
14
11
|
color = "primary",
|
|
@@ -17,7 +14,7 @@ var Button = forwardRef(
|
|
|
17
14
|
pulse = false,
|
|
18
15
|
className,
|
|
19
16
|
sx: propSx,
|
|
20
|
-
icon
|
|
17
|
+
icon,
|
|
21
18
|
...props
|
|
22
19
|
}, ref) => {
|
|
23
20
|
const { ripple } = useRipple(ref);
|
|
@@ -32,13 +29,13 @@ var Button = forwardRef(
|
|
|
32
29
|
size,
|
|
33
30
|
variant,
|
|
34
31
|
pulse,
|
|
35
|
-
hasIcon:
|
|
32
|
+
hasIcon: icon !== void 0
|
|
36
33
|
}),
|
|
37
34
|
sx(propSx)
|
|
38
35
|
),
|
|
39
36
|
...props,
|
|
40
37
|
children: [
|
|
41
|
-
|
|
38
|
+
icon !== void 0 && /* @__PURE__ */ jsx("span", { className: s.icon, children: icon }),
|
|
42
39
|
/* @__PURE__ */ jsx("span", { className: s.span({ size }), children }),
|
|
43
40
|
ripple
|
|
44
41
|
]
|