@reitwagen/design-components 0.0.9 → 0.0.11

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 (10) hide show
  1. package/dist/components/Button/Button.d.ts.map +1 -1
  2. package/dist/components/Button/Button.js +10 -9
  3. package/dist/components/Button/Button.stories.d.ts +3 -0
  4. package/dist/components/Button/Button.stories.d.ts.map +1 -1
  5. package/dist/components/Button/Button.stories.js +60 -4
  6. package/dist/index.css +14 -11
  7. package/dist/types/props.d.ts +8 -0
  8. package/dist/types/props.d.ts.map +1 -0
  9. package/dist/types/props.js +2 -0
  10. package/package.json +2 -2
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,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,QAAA,MAAM,cAAc;;;;;;8EAuInB,CAAC;AAEF,UAAU,WACR,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,EACzE,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,IAAY,EACZ,GAAG,KAAK,EACT,EAAE,WAAW,2CAqBb;yBAhCe,MAAM"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,QAAA,MAAM,cAAc;;;;;;8EAwInB,CAAC;AAEF,UAAU,WACR,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,EACzE,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,IAAY,EACZ,GAAG,KAAK,EACT,EAAE,WAAW,2CAqBb;yBAhCe,MAAM"}
package/dist/components/Button/Button.js CHANGED
@@ -8,9 +8,9 @@ const style_1 = require("../../utils/style");
8
8
  const buttonVariants = (0, class_variance_authority_1.cva)("ui:flex ui:items-center ui:justify-center ui:gap-1.5 ui:select-none", {
9
9
  variants: {
10
10
  variant: {
11
- solid: "ui:transition-colors ui:duration-150",
12
- outlined: "ui:transition-colors ui:duration-150",
13
- text: "ui:transition-colors ui:duration-150",
11
+ solid: "ui:transition-colors ui:duration-300",
12
+ outlined: "ui:transition-colors ui:duration-300",
13
+ text: "ui:transition-colors ui:duration-300",
14
14
  },
15
15
  color: {
16
16
  primary: "",
@@ -19,16 +19,16 @@ const buttonVariants = (0, class_variance_authority_1.cva)("ui:flex ui:items-cen
19
19
  sky: "",
20
20
  },
21
21
  size: {
22
- large: "ui:text-button1 ui:rounded-[14px] ui:min-h-[52px] ui:px-[24px] ui:py-[14px]",
23
- medium: "ui:text-button2 ui:rounded-[12px] ui:min-h-[40px] ui:px-[20px] ui:py-[10px]",
24
- small: "ui:text-button3 ui:rounded-[10px] ui:min-h-[34px] ui:px-[14px] ui:py-[8px]",
22
+ large: "ui:text-button1 ui:rounded-[14px] ui:h-[52px] ui:px-[24px] ui:py-[14px]",
23
+ medium: "ui:text-button2 ui:rounded-[12px] ui:h-[40px] ui:px-[20px] ui:py-[10px]",
24
+ small: "ui:text-button3 ui:rounded-[10px] ui:h-[34px] ui:px-[14px] ui:py-[8px]",
25
25
  },
26
26
  disabled: {
27
27
  false: "ui:cursor-pointer",
28
28
  true: "ui:pointer-events-none",
29
29
  },
30
30
  full: {
31
- true: "ui:flex-1",
31
+ true: "ui:flex-1 ui:w-full",
32
32
  false: "",
33
33
  },
34
34
  },
@@ -123,9 +123,10 @@ const buttonVariants = (0, class_variance_authority_1.cva)("ui:flex ui:items-cen
123
123
  },
124
124
  ],
125
125
  defaultVariants: {
126
- disabled: false,
127
126
  color: "primary",
128
- size: "medium",
127
+ size: "large",
128
+ variant: "solid",
129
+ disabled: false,
129
130
  },
130
131
  });
131
132
  function Button({ className, variant, color, size, disabled, children, leftContent, rightContent, full = false, ...props }) {
package/dist/components/Button/Button.stories.d.ts CHANGED
@@ -56,6 +56,9 @@ declare const meta: {
56
56
  };
57
57
  export default meta;
58
58
  type Story = StoryObj<typeof meta>;
59
+ export declare const Variants: Story;
60
+ export declare const Colors: Story;
61
+ export declare const Sizes: Story;
59
62
  export declare const Solid: Story;
60
63
  export declare const Outlined: Story;
61
64
  export declare const Text: Story;
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KA6BtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAgCpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KA+BnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAgBnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAsBtB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAsBlB,CAAC"}
package/dist/components/Button/Button.stories.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Text = exports.Outlined = exports.Solid = void 0;
3
+ exports.Text = exports.Outlined = exports.Solid = exports.Sizes = exports.Colors = exports.Variants = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const Button_1 = require("./Button");
6
6
  const meta = {
@@ -54,8 +54,64 @@ const meta = {
54
54
  },
55
55
  };
56
56
  exports.default = meta;
57
+ exports.Variants = {
58
+ parameters: {
59
+ docs: {
60
+ description: {
61
+ story: `
62
+ - Button의 variant 스타일을 변경하려면 <code>variant</code> 속성을 사용하세요. 사용할 수 있는 값에는 <code>solid</code>, <code>outlined</code>, <code>text</code> 가 있어요. 기본값은 <code>solid</code> 입니다.
63
+ `,
64
+ },
65
+ },
66
+ },
67
+ 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 })] })),
68
+ args: {
69
+ children: "Button text",
70
+ color: "primary",
71
+ disabled: false,
72
+ full: false,
73
+ },
74
+ };
75
+ exports.Colors = {
76
+ parameters: {
77
+ docs: {
78
+ description: {
79
+ story: `
80
+ - Button의 color 스타일을 변경하려면 <code>color</code> 속성을 사용하세요. 사용할 수 있는 값에는 <code>primary</code>, <code>black</code>, <code>gray</code>, <code>sky</code> 가 있어요. 기본값은 <code>primary</code> 입니다.
81
+ `,
82
+ },
83
+ },
84
+ },
85
+ 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 })] })),
86
+ args: {
87
+ children: "Button text",
88
+ variant: "solid",
89
+ disabled: false,
90
+ full: false,
91
+ },
92
+ };
93
+ exports.Sizes = {
94
+ parameters: {
95
+ docs: {
96
+ description: {
97
+ story: `
98
+ - Button의 크기를 변경하려면 <code>size</code> 속성을 사용하세요. 사용할 수 있는 값에는 <code>large</code>, <code>medium</code>, <code>small</code> 이 있어요. 기본값은 <code>large</code> 입니다.
99
+ - Button이 부모 요소의 전체 너비를 차지하게 하려면 <code>full</code> 속성을 지정하세요.
100
+ `,
101
+ },
102
+ },
103
+ },
104
+ 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 })] })),
105
+ args: {
106
+ children: "Button text",
107
+ variant: "solid",
108
+ color: "primary",
109
+ disabled: false,
110
+ full: false,
111
+ },
112
+ };
57
113
  exports.Solid = {
58
- render: (props) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", size: "large", ...props, children: props.children })),
114
+ render: (props) => ((0, jsx_runtime_1.jsx)("div", { className: "ui:flex ui:flex-1", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "solid", color: "primary", size: "large", ...props, children: props.children }) })),
59
115
  args: {
60
116
  children: "Button text",
61
117
  variant: "solid",
@@ -66,7 +122,7 @@ exports.Solid = {
66
122
  },
67
123
  };
68
124
  exports.Outlined = {
69
- render: (props) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "outlined", color: "primary", size: "large", ...props, children: props.children })),
125
+ render: (props) => ((0, jsx_runtime_1.jsx)("div", { className: "ui:flex ui:flex-1", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "outlined", color: "primary", size: "large", ...props, children: props.children }) })),
70
126
  args: {
71
127
  children: "Button text",
72
128
  variant: "outlined",
@@ -83,7 +139,7 @@ exports.Outlined = {
83
139
  },
84
140
  };
85
141
  exports.Text = {
86
- render: (props) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", color: "primary", size: "large", ...props, children: props.children })),
142
+ render: (props) => ((0, jsx_runtime_1.jsx)("div", { className: "ui:flex ui:flex-1", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", color: "primary", size: "large", ...props, children: props.children }) })),
87
143
  args: {
88
144
  children: "Button text",
89
145
  variant: "text",
package/dist/index.css CHANGED
@@ -276,17 +276,17 @@
276
276
  .ui\:grid {
277
277
  display: grid;
278
278
  }
279
- .ui\:h-px {
280
- height: 1px;
279
+ .ui\:h-\[34px\] {
280
+ height: 34px;
281
281
  }
282
- .ui\:min-h-\[34px\] {
283
- min-height: 34px;
282
+ .ui\:h-\[40px\] {
283
+ height: 40px;
284
284
  }
285
- .ui\:min-h-\[40px\] {
286
- min-height: 40px;
285
+ .ui\:h-\[52px\] {
286
+ height: 52px;
287
287
  }
288
- .ui\:min-h-\[52px\] {
289
- min-height: 52px;
288
+ .ui\:h-px {
289
+ height: 1px;
290
290
  }
291
291
  .ui\:w-full {
292
292
  width: 100%;
@@ -318,6 +318,9 @@
318
318
  .ui\:gap-1\.5 {
319
319
  gap: calc(var(--ui-spacing) * 1.5);
320
320
  }
321
+ .ui\:gap-2 {
322
+ gap: calc(var(--ui-spacing) * 2);
323
+ }
321
324
  .ui\:gap-4 {
322
325
  gap: calc(var(--ui-spacing) * 4);
323
326
  }
@@ -543,9 +546,9 @@
543
546
  transition-timing-function: var(--tw-ease, var(--ui-default-transition-timing-function));
544
547
  transition-duration: var(--tw-duration, var(--ui-default-transition-duration));
545
548
  }
546
- .ui\:duration-150 {
547
- --tw-duration: 150ms;
548
- transition-duration: 150ms;
549
+ .ui\:duration-300 {
550
+ --tw-duration: 300ms;
551
+ transition-duration: 300ms;
549
552
  }
550
553
  .ui\:select-none {
551
554
  -webkit-user-select: none;
package/dist/types/props.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { ComponentProps, ElementType } from "react";
2
+ export type AsProps<C extends ElementType> = {
3
+ as?: C;
4
+ };
5
+ export type ElementTypeProps<C extends ElementType> = ComponentProps<C>;
6
+ export type KeyWithAs<C extends ElementType, Props> = keyof (Props & AsProps<C>);
7
+ export type PolymorphicComponentProps<C extends ElementType, Props = "object"> = Props & AsProps<C> & Omit<ElementTypeProps<C>, KeyWithAs<C, Props>>;
8
+ //# sourceMappingURL=props.d.ts.map
package/dist/types/props.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/types/props.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpD,MAAM,MAAM,OAAO,CAAC,CAAC,SAAS,WAAW,IAAI;IAC3C,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,IAAI,cAAc,CAAC,CAAC,CAAC,CAAC;AAExE,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,IAAI,MAAM,CAAC,KAAK,GAChE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;AAEd,MAAM,MAAM,yBAAyB,CACnC,CAAC,SAAS,WAAW,EACrB,KAAK,GAAG,QAAQ,IACd,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC"}
package/dist/types/props.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reitwagen/design-components",
3
- "version": "0.0.9",
3
+ "version": "0.0.11",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ],
@@ -48,8 +48,8 @@
48
48
  "tailwindcss": "^4.1.5",
49
49
  "ts-node": "^10.9.2",
50
50
  "typescript": "5.9.2",
51
- "@reitwagen/eslint-config": "0.0.0",
52
51
  "@reitwagen/tailwind-config": "0.0.0",
52
+ "@reitwagen/eslint-config": "0.0.0",
53
53
  "@reitwagen/typescript-config": "0.0.0"
54
54
  },
55
55
  "dependencies": {