@reitwagen/design-components 0.6.3 → 0.6.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/components/Button/Button.d.ts +15 -2
  2. package/dist/components/Button/Button.d.ts.map +1 -1
  3. package/dist/components/Button/Button.stories.d.ts.map +1 -1
  4. package/dist/components/Button/Button.stories.js +10 -12
  5. package/dist/components/Button/Button.styles.d.ts.map +1 -1
  6. package/dist/components/Button/Button.styles.js +13 -3
  7. package/dist/index.css +25 -21
  8. package/package.json +3 -3
package/dist/components/Button/Button.d.ts CHANGED
@@ -2,11 +2,24 @@ import { ElementType, ReactNode } from "react";
2
2
  import { type VariantProps } from "class-variance-authority";
3
3
  import { ChildrenProps, PolymorphicComponentWithRef } from "../../types/props";
4
4
  import { buttonVariants } from "./Button.styles";
5
- type ButtonOwnProps = VariantProps<typeof buttonVariants> & ChildrenProps & {
5
+ type ButtonVariantsType = VariantProps<typeof buttonVariants>;
6
+ type CommonVariantsType = {
7
+ color?: ButtonVariantsType["color"];
8
+ disabled?: ButtonVariantsType["disabled"];
9
+ full?: ButtonVariantsType["full"];
10
+ };
11
+ type ButtonVariantProps = (CommonVariantsType & {
12
+ variant?: Exclude<ButtonVariantsType["variant"], "text">;
13
+ size?: ButtonVariantsType["size"];
14
+ }) | (CommonVariantsType & {
15
+ variant: "text";
16
+ size?: Exclude<ButtonVariantsType["size"], "large">;
17
+ });
18
+ type ButtonOwnProps = ButtonVariantProps & ChildrenProps & {
6
19
  leftContent?: ReactNode;
7
20
  rightContent?: ReactNode;
8
21
  };
9
- type ButtonProps<C extends ElementType> = PolymorphicComponentWithRef<C, ButtonOwnProps>;
22
+ export type ButtonProps<C extends ElementType> = PolymorphicComponentWithRef<C, ButtonOwnProps>;
10
23
  /**
11
24
  * `Button`: 버튼의 스타일을 변경하려면 variant, color, size 속성을 사용하세요. Button이 부모 요소의 전체 너비를 차지하게 하려면 full 속성을 지정하세요.
12
25
  * @see [RDS Storybook: Button](https://main--691ac7d6da1eb0c0acb5f3e2.chromatic.com/?path=/docs/components-button--docs)
package/dist/components/Button/Button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,GACvD,aAAa,GAAG;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B,CAAC;AAEJ,KAAK,WAAW,CAAC,CAAC,SAAS,WAAW,IAAI,2BAA2B,CACnE,CAAC,EACD,cAAc,CACf,CAAC;AAEF;;;;;;;;GAQG;AAEH,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,EAAE,EACvD,SAAS,EACT,EAAE,EACF,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,WAAW,CAAC,CAAC,CAAC,2CAuBhB;yBAnCe,MAAM"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAE9D,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAC1C,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;CACnC,CAAC;AAEF,KAAK,kBAAkB,GACnB,CAAC,kBAAkB,GAAG;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;IACzD,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;CACnC,CAAC,GACF,CAAC,kBAAkB,GAAG;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC;CACrD,CAAC,CAAC;AAEP,KAAK,cAAc,GAAG,kBAAkB,GACtC,aAAa,GAAG;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B,CAAC;AAEJ,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,IAAI,2BAA2B,CAC1E,CAAC,EACD,cAAc,CACf,CAAC;AAEF;;;;;;;;GAQG;AAEH,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,EAAE,EACvD,SAAS,EACT,EAAE,EACF,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,WAAW,CAAC,CAAC,CAAC,2CAuBhB;yBAnCe,MAAM"}
package/dist/components/Button/Button.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KA8BtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAiCpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAgCnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAcnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAoBtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAoBlB,CAAC"}
1
+ {"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KA+BtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAiCpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAiCnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAUnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAgBtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAalB,CAAC"}
package/dist/components/Button/Button.stories.js CHANGED
@@ -66,7 +66,7 @@ exports.Variants = {
66
66
  },
67
67
  },
68
68
  },
69
- render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", size: "large", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "outlined", color: "primary", size: "large", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", color: "primary", size: "large", ...props, children: props.children })] })),
69
+ render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "outlined", color: "primary", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", s: true, color: "primary", ...props, children: props.children })] })),
70
70
  args: {
71
71
  children: "Button Text",
72
72
  color: "primary",
@@ -85,7 +85,7 @@ exports.Colors = {
85
85
  },
86
86
  },
87
87
  },
88
- render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", size: "large", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "black", size: "large", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "gray", size: "large", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "sky", size: "large", ...props, children: props.children })] })),
88
+ render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "black", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "gray", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "sky", ...props, children: props.children })] })),
89
89
  args: {
90
90
  children: "Button Text",
91
91
  variant: "solid",
@@ -101,11 +101,12 @@ exports.Sizes = {
101
101
  story: `
102
102
  - Button의 크기를 변경하려면 <code>size</code> 속성을 사용하세요. 사용할 수 있는 값에는 <code>large</code>, <code>medium</code>, <code>small</code> 이 있어요. 기본값은 <code>large</code> 입니다.
103
103
  - Button이 부모 요소의 전체 너비를 차지하게 하려면 <code>full</code> 속성을 지정하세요.
104
+ - Button의 variant가 <code>text</code>인 경우, <code>large</code> 크기는 사용하지 않으며 <code>medium</code>, <code>small</code>만 사용 가능합니다.
104
105
  `,
105
106
  },
106
107
  },
107
108
  },
108
- render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", size: "large", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", size: "medium", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", size: "small", ...props, children: props.children })] })),
109
+ render: (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:gap-2", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", size: "medium", ...props, children: props.children }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", size: "small", ...props, children: props.children })] })),
109
110
  args: {
110
111
  children: "Button Text",
111
112
  variant: "solid",
@@ -115,7 +116,7 @@ exports.Sizes = {
115
116
  },
116
117
  };
117
118
  exports.Solid = {
118
- render: (props) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", size: "large", ...props, children: props.children })),
119
+ render: (props) => (0, jsx_runtime_1.jsx)(Button_1.Button, { ...props, children: props.children }),
119
120
  args: {
120
121
  children: "Button Text",
121
122
  variant: "solid",
@@ -126,7 +127,7 @@ exports.Solid = {
126
127
  },
127
128
  };
128
129
  exports.Outlined = {
129
- render: (props) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "outlined", color: "primary", size: "large", ...props, children: props.children })),
130
+ render: (props) => (0, jsx_runtime_1.jsx)(Button_1.Button, { ...props, children: props.children }),
130
131
  args: {
131
132
  children: "Button Text",
132
133
  variant: "outlined",
@@ -143,19 +144,16 @@ exports.Outlined = {
143
144
  },
144
145
  };
145
146
  exports.Text = {
146
- render: (props) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", color: "primary", size: "large", ...props, children: props.children })),
147
+ render: (props) => (0, jsx_runtime_1.jsx)(Button_1.Button, { ...props, children: props.children }),
147
148
  args: {
148
149
  children: "Button Text",
149
150
  variant: "text",
150
- color: "primary",
151
- size: "large",
152
- disabled: false,
153
- full: false,
151
+ size: "medium",
154
152
  },
155
153
  argTypes: {
156
- color: {
154
+ size: {
157
155
  control: { type: "radio" },
158
- options: ["primary", "black"],
156
+ options: ["small", "medium"],
159
157
  },
160
158
  },
161
159
  };
package/dist/components/Button/Button.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;;;;8EAyI1B,CAAC"}
1
+ {"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;;;;8EAkJ1B,CAAC"}
package/dist/components/Button/Button.styles.js CHANGED
@@ -16,9 +16,9 @@ exports.buttonVariants = (0, class_variance_authority_1.cva)("ui:flex ui:items-c
16
16
  sky: "",
17
17
  },
18
18
  size: {
19
- large: "ui:text-button1 ui:rounded-[14px] ui:h-[52px] ui:px-[24px] ui:py-[14px]",
20
- medium: "ui:text-button2 ui:rounded-[12px] ui:h-[40px] ui:px-[20px] ui:py-[10px]",
21
- small: "ui:text-button3 ui:rounded-[10px] ui:h-[34px] ui:px-[14px] ui:py-[8px]",
19
+ large: "ui:text-button1 ui:rounded-[14px] ui:h-[52px] ui:px-6 ui:py-3.5",
20
+ medium: "ui:text-button2 ui:rounded-xl ui:h-10 ui:px-5 ui:py-2.5",
21
+ small: "ui:text-button3 ui:rounded-[10px] ui:h-[34px] ui:px-3.5 ui:py-2",
22
22
  },
23
23
  disabled: {
24
24
  true: "ui:pointer-events-none",
@@ -118,6 +118,16 @@ exports.buttonVariants = (0, class_variance_authority_1.cva)("ui:flex ui:items-c
118
118
  disabled: true,
119
119
  className: "ui:text-gray-300",
120
120
  },
121
+ {
122
+ variant: "text",
123
+ size: "medium",
124
+ className: "ui:text-button1",
125
+ },
126
+ {
127
+ variant: "text",
128
+ size: "small",
129
+ className: "ui:text-button2",
130
+ },
121
131
  ],
122
132
  defaultVariants: {
123
133
  color: "primary",
package/dist/index.css CHANGED
@@ -29,6 +29,7 @@
29
29
  --ui-color-gray-900: #04041b;
30
30
  --ui-color-white: #ffffff;
31
31
  --ui-spacing: 0.25rem;
32
+ --ui-radius-xl: 0.75rem;
32
33
  --ui-radius-2xl: 1rem;
33
34
  --ui-default-transition-duration: 150ms;
34
35
  --ui-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -313,6 +314,9 @@
313
314
  .ui\:h-6 {
314
315
  height: calc(var(--ui-spacing) * 6);
315
316
  }
317
+ .ui\:h-10 {
318
+ height: calc(var(--ui-spacing) * 10);
319
+ }
316
320
  .ui\:h-\[21px\] {
317
321
  height: 21px;
318
322
  }
@@ -337,9 +341,6 @@
337
341
  .ui\:h-\[38px\] {
338
342
  height: 38px;
339
343
  }
340
- .ui\:h-\[40px\] {
341
- height: 40px;
342
- }
343
344
  .ui\:h-\[50px\] {
344
345
  height: 50px;
345
346
  }
@@ -449,15 +450,15 @@
449
450
  .ui\:rounded-\[10px\] {
450
451
  border-radius: 10px;
451
452
  }
452
- .ui\:rounded-\[12px\] {
453
- border-radius: 12px;
454
- }
455
453
  .ui\:rounded-\[14px\] {
456
454
  border-radius: 14px;
457
455
  }
458
456
  .ui\:rounded-full {
459
457
  border-radius: calc(infinity * 1px);
460
458
  }
459
+ .ui\:rounded-xl {
460
+ border-radius: var(--ui-radius-xl);
461
+ }
461
462
  .ui\:border {
462
463
  border-style: var(--tw-border-style);
463
464
  border-width: 1px;
@@ -520,9 +521,18 @@
520
521
  .ui\:bg-white {
521
522
  background-color: var(--ui-color-white);
522
523
  }
524
+ .ui\:px-3\.5 {
525
+ padding-inline: calc(var(--ui-spacing) * 3.5);
526
+ }
523
527
  .ui\:px-4 {
524
528
  padding-inline: calc(var(--ui-spacing) * 4);
525
529
  }
530
+ .ui\:px-5 {
531
+ padding-inline: calc(var(--ui-spacing) * 5);
532
+ }
533
+ .ui\:px-6 {
534
+ padding-inline: calc(var(--ui-spacing) * 6);
535
+ }
526
536
  .ui\:px-\[10px\] {
527
537
  padding-inline: 10px;
528
538
  }
@@ -532,33 +542,27 @@
532
542
  .ui\:px-\[18px\] {
533
543
  padding-inline: 18px;
534
544
  }
535
- .ui\:px-\[20px\] {
536
- padding-inline: 20px;
537
- }
538
- .ui\:px-\[24px\] {
539
- padding-inline: 24px;
540
- }
541
545
  .ui\:py-1 {
542
546
  padding-block: calc(var(--ui-spacing) * 1);
543
547
  }
548
+ .ui\:py-2 {
549
+ padding-block: calc(var(--ui-spacing) * 2);
550
+ }
551
+ .ui\:py-2\.5 {
552
+ padding-block: calc(var(--ui-spacing) * 2.5);
553
+ }
554
+ .ui\:py-3\.5 {
555
+ padding-block: calc(var(--ui-spacing) * 3.5);
556
+ }
544
557
  .ui\:py-\[4\.5px\] {
545
558
  padding-block: 4.5px;
546
559
  }
547
560
  .ui\:py-\[7px\] {
548
561
  padding-block: 7px;
549
562
  }
550
- .ui\:py-\[8px\] {
551
- padding-block: 8px;
552
- }
553
563
  .ui\:py-\[9px\] {
554
564
  padding-block: 9px;
555
565
  }
556
- .ui\:py-\[10px\] {
557
- padding-block: 10px;
558
- }
559
- .ui\:py-\[14px\] {
560
- padding-block: 14px;
561
- }
562
566
  .ui\:text-body1 {
563
567
  font-size: var(--ui-text-body1);
564
568
  line-height: var(--tw-leading, var(--ui-text-body1--line-height));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reitwagen/design-components",
3
- "version": "0.6.3",
3
+ "version": "0.6.4",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ],
@@ -50,8 +50,8 @@
50
50
  "ts-node": "^10.9.2",
51
51
  "typescript": "5.9.2",
52
52
  "@reitwagen/eslint-config": "0.0.0",
53
- "@reitwagen/typescript-config": "0.0.0",
54
- "@reitwagen/tailwind-config": "0.0.0"
53
+ "@reitwagen/tailwind-config": "0.0.0",
54
+ "@reitwagen/typescript-config": "0.0.0"
55
55
  },
56
56
  "dependencies": {
57
57
  "axios": "^1.13.2",