@tipp/ui 1.4.8 → 1.4.9
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/atoms/button.cjs +30 -10
- package/dist/atoms/button.cjs.map +1 -1
- package/dist/atoms/button.d.cts +3 -2
- package/dist/atoms/button.d.ts +3 -2
- package/dist/atoms/button.js +1 -1
- package/dist/atoms/dialog.cjs +30 -10
- package/dist/atoms/dialog.cjs.map +1 -1
- package/dist/atoms/dialog.js +2 -2
- package/dist/atoms/drawer.cjs +30 -10
- package/dist/atoms/drawer.cjs.map +1 -1
- package/dist/atoms/drawer.js +2 -2
- package/dist/atoms/field-error-wrapper.js +2 -2
- package/dist/atoms/index.cjs +30 -10
- package/dist/atoms/index.cjs.map +1 -1
- package/dist/atoms/index.d.cts +1 -0
- package/dist/atoms/index.d.ts +1 -0
- package/dist/atoms/index.js +60 -60
- package/dist/atoms/pagination.js +2 -2
- package/dist/chunk-3YBBMDHJ.js +60 -0
- package/dist/chunk-3YBBMDHJ.js.map +1 -0
- package/dist/chunk-7YPMSAU3.js +164 -0
- package/dist/chunk-7YPMSAU3.js.map +1 -0
- package/dist/chunk-BSG2Q4XC.js +192 -0
- package/dist/chunk-BSG2Q4XC.js.map +1 -0
- package/dist/chunk-EIAK47TI.js +77 -0
- package/dist/chunk-EIAK47TI.js.map +1 -0
- package/dist/chunk-EQC3MBY2.js +164 -0
- package/dist/chunk-EQC3MBY2.js.map +1 -0
- package/dist/chunk-GIUL45NR.js +63 -0
- package/dist/chunk-GIUL45NR.js.map +1 -0
- package/dist/chunk-KK6EZCIU.js +192 -0
- package/dist/chunk-KK6EZCIU.js.map +1 -0
- package/dist/chunk-LGWPZRFJ.js +340 -0
- package/dist/chunk-LGWPZRFJ.js.map +1 -0
- package/dist/chunk-TSVUJJVY.js +340 -0
- package/dist/chunk-TSVUJJVY.js.map +1 -0
- package/dist/chunk-WM3XQMNK.js +88 -0
- package/dist/chunk-WM3XQMNK.js.map +1 -0
- package/dist/chunk-XXODW32Q.js +63 -0
- package/dist/chunk-XXODW32Q.js.map +1 -0
- package/dist/index.cjs +30 -10
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +77 -77
- package/dist/molecules/date-picker/index.js +2 -2
- package/dist/molecules/expand-table/index.js +28 -28
- package/dist/molecules/expand-table/row.js +27 -27
- package/dist/molecules/index.cjs +30 -10
- package/dist/molecules/index.cjs.map +1 -1
- package/dist/molecules/index.js +34 -34
- package/dist/molecules/learning-post.cjs +30 -10
- package/dist/molecules/learning-post.cjs.map +1 -1
- package/dist/molecules/learning-post.js +4 -4
- package/dist/molecules/navigation.cjs +30 -10
- package/dist/molecules/navigation.cjs.map +1 -1
- package/dist/molecules/navigation.js +28 -28
- package/dist/molecules/stepper.js +3 -3
- package/dist/molecules/tag-selector.cjs +30 -10
- package/dist/molecules/tag-selector.cjs.map +1 -1
- package/dist/molecules/tag-selector.js +28 -28
- package/package.json +1 -1
- package/src/atoms/button.tsx +39 -11
package/dist/atoms/button.cjs
CHANGED
|
@@ -55,20 +55,40 @@ module.exports = __toCommonJS(button_exports);
|
|
|
55
55
|
var import_themes = require("@radix-ui/themes");
|
|
56
56
|
var import_react = require("react");
|
|
57
57
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
58
|
+
var convertSizeStr = (size) => {
|
|
59
|
+
switch (size) {
|
|
60
|
+
case "small":
|
|
61
|
+
return "1";
|
|
62
|
+
case "medium":
|
|
63
|
+
return "2";
|
|
64
|
+
case "large":
|
|
65
|
+
return "3";
|
|
66
|
+
default:
|
|
67
|
+
return "2";
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
var convertSizeResponse = (size) => {
|
|
71
|
+
if (typeof size === "string" || typeof size === "undefined") {
|
|
72
|
+
return convertSizeStr(size);
|
|
73
|
+
}
|
|
74
|
+
const radixSize = {};
|
|
75
|
+
let key = "initial";
|
|
76
|
+
for (key in radixSize) {
|
|
77
|
+
radixSize[key] = convertSizeStr(size[key]);
|
|
78
|
+
}
|
|
79
|
+
return radixSize;
|
|
80
|
+
};
|
|
81
|
+
var convertSize = (size) => {
|
|
82
|
+
if (typeof size === "string") {
|
|
83
|
+
return convertSizeStr(size);
|
|
84
|
+
}
|
|
85
|
+
return convertSizeResponse(size);
|
|
86
|
+
};
|
|
58
87
|
var Button = (0, import_react.forwardRef)(
|
|
59
88
|
(props, ref) => {
|
|
60
89
|
const _a = props, { size, style, variant } = _a, restProps = __objRest(_a, ["size", "style", "variant"]);
|
|
61
90
|
const radixSize = (0, import_react.useMemo)(() => {
|
|
62
|
-
|
|
63
|
-
case "small":
|
|
64
|
-
return "1";
|
|
65
|
-
case "medium":
|
|
66
|
-
return "2";
|
|
67
|
-
case "large":
|
|
68
|
-
return "3";
|
|
69
|
-
default:
|
|
70
|
-
return "2";
|
|
71
|
-
}
|
|
91
|
+
return convertSize(size);
|
|
72
92
|
}, [size]);
|
|
73
93
|
const mergedStyle = (0, import_react.useMemo)(() => {
|
|
74
94
|
const baseStyle = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/atoms/button.tsx"],"sourcesContent":["import {\n Button as RadixButton,\n type ButtonProps as RadixButtonProps,\n} from '@radix-ui/themes';\nimport React, { forwardRef, useMemo } from 'react';\n\nexport type ButtonProps = Omit<RadixButtonProps, 'size' | 'variant'> & {\n size?: 'small' | 'medium' | 'large'
|
|
1
|
+
{"version":3,"sources":["../../src/atoms/button.tsx"],"sourcesContent":["import {\n Button as RadixButton,\n type ButtonProps as RadixButtonProps,\n} from '@radix-ui/themes';\nimport type { Breakpoint, Responsive } from '@radix-ui/themes/props';\nimport React, { forwardRef, useMemo } from 'react';\n\nexport type ButtonProps = Omit<RadixButtonProps, 'size' | 'variant'> & {\n size?: Responsive<'small' | 'medium' | 'large'>;\n variant?: RadixButtonProps['variant'] | 'transparent';\n};\n\nconst convertSizeStr = (size: ButtonProps['size']): '1' | '2' | '3' | '4' => {\n switch (size) {\n case 'small':\n return '1';\n case 'medium':\n return '2';\n case 'large':\n return '3';\n default:\n return '2';\n }\n};\n\nconst convertSizeResponse = (\n size: ButtonProps['size']\n): RadixButtonProps['size'] => {\n if (typeof size === 'string' || typeof size === 'undefined') {\n return convertSizeStr(size);\n }\n const radixSize: RadixButtonProps['size'] = {};\n let key: Breakpoint = 'initial';\n for (key in radixSize) {\n radixSize[key] = convertSizeStr(size[key]);\n }\n return radixSize;\n};\n\nconst convertSize = (size: ButtonProps['size']): RadixButtonProps['size'] => {\n if (typeof size === 'string') {\n return convertSizeStr(size);\n }\n return convertSizeResponse(size);\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (props, ref): React.ReactElement => {\n const { size, style, variant, ...restProps } = props;\n // string인 경우\n //object인 경우\n\n const radixSize = useMemo(() => {\n return convertSize(size);\n }, [size]);\n\n const mergedStyle = useMemo<ButtonProps['style']>(() => {\n const baseStyle = {\n background: variant === 'transparent' ? 'transparent' : undefined,\n fontWeight: 400,\n };\n return { ...baseStyle, ...style };\n }, [style, variant]);\n\n const radixVariant = useMemo(() => {\n if (variant === 'transparent') return 'ghost';\n return variant;\n }, [variant]);\n\n return (\n <RadixButton\n style={mergedStyle}\n variant={radixVariant}\n {...restProps}\n ref={ref}\n size={radixSize}\n />\n );\n }\n);\n\nButton.displayName = 'Button';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAGO;AAEP,mBAA2C;AAiErC;AA1DN,IAAM,iBAAiB,CAAC,SAAqD;AAC3E,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,sBAAsB,CAC1B,SAC6B;AAC7B,MAAI,OAAO,SAAS,YAAY,OAAO,SAAS,aAAa;AAC3D,WAAO,eAAe,IAAI;AAAA,EAC5B;AACA,QAAM,YAAsC,CAAC;AAC7C,MAAI,MAAkB;AACtB,OAAK,OAAO,WAAW;AACrB,cAAU,GAAG,IAAI,eAAe,KAAK,GAAG,CAAC;AAAA,EAC3C;AACA,SAAO;AACT;AAEA,IAAM,cAAc,CAAC,SAAwD;AAC3E,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,eAAe,IAAI;AAAA,EAC5B;AACA,SAAO,oBAAoB,IAAI;AACjC;AAEO,IAAM,aAAS;AAAA,EACpB,CAAC,OAAO,QAA4B;AAClC,UAA+C,YAAvC,QAAM,OAAO,QAhDzB,IAgDmD,IAAd,sBAAc,IAAd,CAAzB,QAAM,SAAO;AAIrB,UAAM,gBAAY,sBAAQ,MAAM;AAC9B,aAAO,YAAY,IAAI;AAAA,IACzB,GAAG,CAAC,IAAI,CAAC;AAET,UAAM,kBAAc,sBAA8B,MAAM;AACtD,YAAM,YAAY;AAAA,QAChB,YAAY,YAAY,gBAAgB,gBAAgB;AAAA,QACxD,YAAY;AAAA,MACd;AACA,aAAO,kCAAK,YAAc;AAAA,IAC5B,GAAG,CAAC,OAAO,OAAO,CAAC;AAEnB,UAAM,mBAAe,sBAAQ,MAAM;AACjC,UAAI,YAAY;AAAe,eAAO;AACtC,aAAO;AAAA,IACT,GAAG,CAAC,OAAO,CAAC;AAEZ,WACE;AAAA,MAAC,cAAAA;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,SAAS;AAAA,SACL,YAHL;AAAA,QAIC;AAAA,QACA,MAAM;AAAA;AAAA,IACR;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","names":["RadixButton"]}
|
package/dist/atoms/button.d.cts
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { ButtonProps as ButtonProps$1 } from '@radix-ui/themes';
|
|
2
|
+
import { Responsive } from '@radix-ui/themes/props';
|
|
2
3
|
import react__default from 'react';
|
|
3
4
|
|
|
4
5
|
type ButtonProps = Omit<ButtonProps$1, 'size' | 'variant'> & {
|
|
5
|
-
size?: 'small' | 'medium' | 'large'
|
|
6
|
+
size?: Responsive<'small' | 'medium' | 'large'>;
|
|
6
7
|
variant?: ButtonProps$1['variant'] | 'transparent';
|
|
7
8
|
};
|
|
8
9
|
declare const Button: react__default.ForwardRefExoticComponent<Omit<ButtonProps$1, "size" | "variant"> & {
|
|
9
|
-
size?: "small" | "medium" | "large" | undefined;
|
|
10
|
+
size?: Responsive<"small" | "medium" | "large"> | undefined;
|
|
10
11
|
variant?: ButtonProps$1['variant'] | 'transparent';
|
|
11
12
|
} & react__default.RefAttributes<HTMLButtonElement>>;
|
|
12
13
|
|
package/dist/atoms/button.d.ts
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { ButtonProps as ButtonProps$1 } from '@radix-ui/themes';
|
|
2
|
+
import { Responsive } from '@radix-ui/themes/props';
|
|
2
3
|
import react__default from 'react';
|
|
3
4
|
|
|
4
5
|
type ButtonProps = Omit<ButtonProps$1, 'size' | 'variant'> & {
|
|
5
|
-
size?: 'small' | 'medium' | 'large'
|
|
6
|
+
size?: Responsive<'small' | 'medium' | 'large'>;
|
|
6
7
|
variant?: ButtonProps$1['variant'] | 'transparent';
|
|
7
8
|
};
|
|
8
9
|
declare const Button: react__default.ForwardRefExoticComponent<Omit<ButtonProps$1, "size" | "variant"> & {
|
|
9
|
-
size?: "small" | "medium" | "large" | undefined;
|
|
10
|
+
size?: Responsive<"small" | "medium" | "large"> | undefined;
|
|
10
11
|
variant?: ButtonProps$1['variant'] | 'transparent';
|
|
11
12
|
} & react__default.RefAttributes<HTMLButtonElement>>;
|
|
12
13
|
|
package/dist/atoms/button.js
CHANGED
package/dist/atoms/dialog.cjs
CHANGED
|
@@ -71,20 +71,40 @@ var import_react2 = require("react");
|
|
|
71
71
|
var import_themes = require("@radix-ui/themes");
|
|
72
72
|
var import_react = require("react");
|
|
73
73
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
74
|
+
var convertSizeStr = (size) => {
|
|
75
|
+
switch (size) {
|
|
76
|
+
case "small":
|
|
77
|
+
return "1";
|
|
78
|
+
case "medium":
|
|
79
|
+
return "2";
|
|
80
|
+
case "large":
|
|
81
|
+
return "3";
|
|
82
|
+
default:
|
|
83
|
+
return "2";
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
var convertSizeResponse = (size) => {
|
|
87
|
+
if (typeof size === "string" || typeof size === "undefined") {
|
|
88
|
+
return convertSizeStr(size);
|
|
89
|
+
}
|
|
90
|
+
const radixSize = {};
|
|
91
|
+
let key = "initial";
|
|
92
|
+
for (key in radixSize) {
|
|
93
|
+
radixSize[key] = convertSizeStr(size[key]);
|
|
94
|
+
}
|
|
95
|
+
return radixSize;
|
|
96
|
+
};
|
|
97
|
+
var convertSize = (size) => {
|
|
98
|
+
if (typeof size === "string") {
|
|
99
|
+
return convertSizeStr(size);
|
|
100
|
+
}
|
|
101
|
+
return convertSizeResponse(size);
|
|
102
|
+
};
|
|
74
103
|
var Button = (0, import_react.forwardRef)(
|
|
75
104
|
(props, ref) => {
|
|
76
105
|
const _a = props, { size, style, variant } = _a, restProps = __objRest(_a, ["size", "style", "variant"]);
|
|
77
106
|
const radixSize = (0, import_react.useMemo)(() => {
|
|
78
|
-
|
|
79
|
-
case "small":
|
|
80
|
-
return "1";
|
|
81
|
-
case "medium":
|
|
82
|
-
return "2";
|
|
83
|
-
case "large":
|
|
84
|
-
return "3";
|
|
85
|
-
default:
|
|
86
|
-
return "2";
|
|
87
|
-
}
|
|
107
|
+
return convertSize(size);
|
|
88
108
|
}, [size]);
|
|
89
109
|
const mergedStyle = (0, import_react.useMemo)(() => {
|
|
90
110
|
const baseStyle = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/atoms/dialog.tsx","../../src/atoms/button.tsx"],"sourcesContent":["import * as RadixDialog from '@radix-ui/react-dialog';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { Flex } from '@radix-ui/themes';\nimport { useEffect, useRef } from 'react';\nimport { Button } from './button';\n\ntype ContentProps = RadixDialog.DialogContentProps & {\n width?: string;\n maxWidth?: string;\n minWidth?: string;\n height?: string;\n maxHeight?: string;\n minHeight?: string;\n};\n\nfunction Content(props: ContentProps): React.ReactElement {\n const {\n children,\n style = {},\n width,\n maxWidth,\n minWidth,\n maxHeight,\n height,\n minHeight,\n ...rest\n } = props;\n const containerRef = useRef<Element | null>(null);\n\n useEffect(() => {\n containerRef.current = document.getElementsByClassName('radix-themes')[0];\n }, []);\n\n return (\n <RadixDialog.Portal container={containerRef.current}>\n <RadixDialog.Overlay className=\"DialogOverlay\">\n <RadixDialog.Content\n className=\"DialogContent\"\n style={{\n width,\n maxWidth,\n minWidth,\n maxHeight,\n height,\n minHeight,\n ...style,\n }}\n {...rest}\n >\n <Flex direction=\"column\" style={{ position: 'relative' }}>\n <RadixDialog.Close asChild className=\"DialogClose\">\n <Button color=\"gray\" variant=\"transparent\">\n <Cross1Icon height=\"18px\" width=\"18px\" />\n </Button>\n </RadixDialog.Close>\n {children}\n </Flex>\n </RadixDialog.Content>\n </RadixDialog.Overlay>\n </RadixDialog.Portal>\n );\n}\n\nfunction Close({\n children,\n ...rest\n}: RadixDialog.DialogCloseProps): React.ReactElement {\n return (\n <RadixDialog.Close asChild {...rest}>\n {children}\n </RadixDialog.Close>\n );\n}\n\nfunction Trigger({\n children,\n ...rest\n}: RadixDialog.DialogTriggerProps): React.ReactElement {\n return (\n <RadixDialog.Trigger asChild {...rest}>\n {children}\n </RadixDialog.Trigger>\n );\n}\n\nexport const Dialog = {\n Root: RadixDialog.Root,\n Trigger,\n Content,\n Close,\n Description: RadixDialog.Description,\n Title: RadixDialog.Title,\n};\n","import {\n Button as RadixButton,\n type ButtonProps as RadixButtonProps,\n} from '@radix-ui/themes';\nimport React, { forwardRef, useMemo } from 'react';\n\nexport type ButtonProps = Omit<RadixButtonProps, 'size' | 'variant'> & {\n size?: 'small' | 'medium' | 'large'
|
|
1
|
+
{"version":3,"sources":["../../src/atoms/dialog.tsx","../../src/atoms/button.tsx"],"sourcesContent":["import * as RadixDialog from '@radix-ui/react-dialog';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { Flex } from '@radix-ui/themes';\nimport { useEffect, useRef } from 'react';\nimport { Button } from './button';\n\ntype ContentProps = RadixDialog.DialogContentProps & {\n width?: string;\n maxWidth?: string;\n minWidth?: string;\n height?: string;\n maxHeight?: string;\n minHeight?: string;\n};\n\nfunction Content(props: ContentProps): React.ReactElement {\n const {\n children,\n style = {},\n width,\n maxWidth,\n minWidth,\n maxHeight,\n height,\n minHeight,\n ...rest\n } = props;\n const containerRef = useRef<Element | null>(null);\n\n useEffect(() => {\n containerRef.current = document.getElementsByClassName('radix-themes')[0];\n }, []);\n\n return (\n <RadixDialog.Portal container={containerRef.current}>\n <RadixDialog.Overlay className=\"DialogOverlay\">\n <RadixDialog.Content\n className=\"DialogContent\"\n style={{\n width,\n maxWidth,\n minWidth,\n maxHeight,\n height,\n minHeight,\n ...style,\n }}\n {...rest}\n >\n <Flex direction=\"column\" style={{ position: 'relative' }}>\n <RadixDialog.Close asChild className=\"DialogClose\">\n <Button color=\"gray\" variant=\"transparent\">\n <Cross1Icon height=\"18px\" width=\"18px\" />\n </Button>\n </RadixDialog.Close>\n {children}\n </Flex>\n </RadixDialog.Content>\n </RadixDialog.Overlay>\n </RadixDialog.Portal>\n );\n}\n\nfunction Close({\n children,\n ...rest\n}: RadixDialog.DialogCloseProps): React.ReactElement {\n return (\n <RadixDialog.Close asChild {...rest}>\n {children}\n </RadixDialog.Close>\n );\n}\n\nfunction Trigger({\n children,\n ...rest\n}: RadixDialog.DialogTriggerProps): React.ReactElement {\n return (\n <RadixDialog.Trigger asChild {...rest}>\n {children}\n </RadixDialog.Trigger>\n );\n}\n\nexport const Dialog = {\n Root: RadixDialog.Root,\n Trigger,\n Content,\n Close,\n Description: RadixDialog.Description,\n Title: RadixDialog.Title,\n};\n","import {\n Button as RadixButton,\n type ButtonProps as RadixButtonProps,\n} from '@radix-ui/themes';\nimport type { Breakpoint, Responsive } from '@radix-ui/themes/props';\nimport React, { forwardRef, useMemo } from 'react';\n\nexport type ButtonProps = Omit<RadixButtonProps, 'size' | 'variant'> & {\n size?: Responsive<'small' | 'medium' | 'large'>;\n variant?: RadixButtonProps['variant'] | 'transparent';\n};\n\nconst convertSizeStr = (size: ButtonProps['size']): '1' | '2' | '3' | '4' => {\n switch (size) {\n case 'small':\n return '1';\n case 'medium':\n return '2';\n case 'large':\n return '3';\n default:\n return '2';\n }\n};\n\nconst convertSizeResponse = (\n size: ButtonProps['size']\n): RadixButtonProps['size'] => {\n if (typeof size === 'string' || typeof size === 'undefined') {\n return convertSizeStr(size);\n }\n const radixSize: RadixButtonProps['size'] = {};\n let key: Breakpoint = 'initial';\n for (key in radixSize) {\n radixSize[key] = convertSizeStr(size[key]);\n }\n return radixSize;\n};\n\nconst convertSize = (size: ButtonProps['size']): RadixButtonProps['size'] => {\n if (typeof size === 'string') {\n return convertSizeStr(size);\n }\n return convertSizeResponse(size);\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (props, ref): React.ReactElement => {\n const { size, style, variant, ...restProps } = props;\n // string인 경우\n //object인 경우\n\n const radixSize = useMemo(() => {\n return convertSize(size);\n }, [size]);\n\n const mergedStyle = useMemo<ButtonProps['style']>(() => {\n const baseStyle = {\n background: variant === 'transparent' ? 'transparent' : undefined,\n fontWeight: 400,\n };\n return { ...baseStyle, ...style };\n }, [style, variant]);\n\n const radixVariant = useMemo(() => {\n if (variant === 'transparent') return 'ghost';\n return variant;\n }, [variant]);\n\n return (\n <RadixButton\n style={mergedStyle}\n variant={radixVariant}\n {...restProps}\n ref={ref}\n size={radixSize}\n />\n );\n }\n);\n\nButton.displayName = 'Button';\n"],"mappings":"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","names":["import_themes","import_react","RadixButton","import_jsx_runtime","Content","Close","Trigger"]}
|
package/dist/atoms/dialog.js
CHANGED
package/dist/atoms/drawer.cjs
CHANGED
|
@@ -73,20 +73,40 @@ var import_react_icons = require("@radix-ui/react-icons");
|
|
|
73
73
|
var import_themes = require("@radix-ui/themes");
|
|
74
74
|
var import_react = require("react");
|
|
75
75
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
76
|
+
var convertSizeStr = (size) => {
|
|
77
|
+
switch (size) {
|
|
78
|
+
case "small":
|
|
79
|
+
return "1";
|
|
80
|
+
case "medium":
|
|
81
|
+
return "2";
|
|
82
|
+
case "large":
|
|
83
|
+
return "3";
|
|
84
|
+
default:
|
|
85
|
+
return "2";
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
var convertSizeResponse = (size) => {
|
|
89
|
+
if (typeof size === "string" || typeof size === "undefined") {
|
|
90
|
+
return convertSizeStr(size);
|
|
91
|
+
}
|
|
92
|
+
const radixSize = {};
|
|
93
|
+
let key = "initial";
|
|
94
|
+
for (key in radixSize) {
|
|
95
|
+
radixSize[key] = convertSizeStr(size[key]);
|
|
96
|
+
}
|
|
97
|
+
return radixSize;
|
|
98
|
+
};
|
|
99
|
+
var convertSize = (size) => {
|
|
100
|
+
if (typeof size === "string") {
|
|
101
|
+
return convertSizeStr(size);
|
|
102
|
+
}
|
|
103
|
+
return convertSizeResponse(size);
|
|
104
|
+
};
|
|
76
105
|
var Button = (0, import_react.forwardRef)(
|
|
77
106
|
(props, ref) => {
|
|
78
107
|
const _a = props, { size, style, variant } = _a, restProps = __objRest(_a, ["size", "style", "variant"]);
|
|
79
108
|
const radixSize = (0, import_react.useMemo)(() => {
|
|
80
|
-
|
|
81
|
-
case "small":
|
|
82
|
-
return "1";
|
|
83
|
-
case "medium":
|
|
84
|
-
return "2";
|
|
85
|
-
case "large":
|
|
86
|
-
return "3";
|
|
87
|
-
default:
|
|
88
|
-
return "2";
|
|
89
|
-
}
|
|
109
|
+
return convertSize(size);
|
|
90
110
|
}, [size]);
|
|
91
111
|
const mergedStyle = (0, import_react.useMemo)(() => {
|
|
92
112
|
const baseStyle = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/atoms/drawer.tsx","../../src/atoms/button.tsx","../../src/atoms/box.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { Button } from './button';\nimport { Box } from './box';\n\nexport function Root(props: Dialog.DialogProps): React.ReactNode {\n return <Dialog.Root {...props} />;\n}\n\ntype ContentProps = Dialog.DialogContentProps & {\n /** Drawer가 붙는 위치, 기본값 right */\n position?: 'left' | 'right' | 'bottom' | 'top';\n};\n\nexport function Content(props: ContentProps): React.ReactElement {\n const { position = 'right', className, children, ...rest } = props;\n\n const containerRef = useRef<Element | null>(null);\n useEffect(() => {\n containerRef.current = document.getElementsByClassName('radix-themes')[0];\n }, []);\n\n return (\n <Dialog.Portal container={containerRef.current}>\n <Dialog.Overlay className=\"DrawerOverlay\" />\n <Dialog.Content\n className={`DrawerContent ${position} ${className || ''}`}\n {...rest}\n >\n <Box>\n <Dialog.Close asChild className=\"DialogClose\">\n <Button color=\"gray\" variant=\"transparent\">\n <Cross1Icon height=\"18px\" width=\"18px\" />\n </Button>\n </Dialog.Close>\n </Box>\n\n {children}\n </Dialog.Content>\n </Dialog.Portal>\n );\n}\n\nexport function Trigger(props: Dialog.DialogTriggerProps): React.ReactNode {\n return <Dialog.Trigger asChild {...props} />;\n}\n\nexport const Drawer = {\n Root: Dialog.Root,\n Trigger,\n Content,\n Close: Dialog.Close,\n Title: Dialog.Title,\n Description: Dialog.Description,\n};\n","import {\n Button as RadixButton,\n type ButtonProps as RadixButtonProps,\n} from '@radix-ui/themes';\nimport React, { forwardRef, useMemo } from 'react';\n\nexport type ButtonProps = Omit<RadixButtonProps, 'size' | 'variant'> & {\n size?: 'small' | 'medium' | 'large'
|
|
1
|
+
{"version":3,"sources":["../../src/atoms/drawer.tsx","../../src/atoms/button.tsx","../../src/atoms/box.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { Button } from './button';\nimport { Box } from './box';\n\nexport function Root(props: Dialog.DialogProps): React.ReactNode {\n return <Dialog.Root {...props} />;\n}\n\ntype ContentProps = Dialog.DialogContentProps & {\n /** Drawer가 붙는 위치, 기본값 right */\n position?: 'left' | 'right' | 'bottom' | 'top';\n};\n\nexport function Content(props: ContentProps): React.ReactElement {\n const { position = 'right', className, children, ...rest } = props;\n\n const containerRef = useRef<Element | null>(null);\n useEffect(() => {\n containerRef.current = document.getElementsByClassName('radix-themes')[0];\n }, []);\n\n return (\n <Dialog.Portal container={containerRef.current}>\n <Dialog.Overlay className=\"DrawerOverlay\" />\n <Dialog.Content\n className={`DrawerContent ${position} ${className || ''}`}\n {...rest}\n >\n <Box>\n <Dialog.Close asChild className=\"DialogClose\">\n <Button color=\"gray\" variant=\"transparent\">\n <Cross1Icon height=\"18px\" width=\"18px\" />\n </Button>\n </Dialog.Close>\n </Box>\n\n {children}\n </Dialog.Content>\n </Dialog.Portal>\n );\n}\n\nexport function Trigger(props: Dialog.DialogTriggerProps): React.ReactNode {\n return <Dialog.Trigger asChild {...props} />;\n}\n\nexport const Drawer = {\n Root: Dialog.Root,\n Trigger,\n Content,\n Close: Dialog.Close,\n Title: Dialog.Title,\n Description: Dialog.Description,\n};\n","import {\n Button as RadixButton,\n type ButtonProps as RadixButtonProps,\n} from '@radix-ui/themes';\nimport type { Breakpoint, Responsive } from '@radix-ui/themes/props';\nimport React, { forwardRef, useMemo } from 'react';\n\nexport type ButtonProps = Omit<RadixButtonProps, 'size' | 'variant'> & {\n size?: Responsive<'small' | 'medium' | 'large'>;\n variant?: RadixButtonProps['variant'] | 'transparent';\n};\n\nconst convertSizeStr = (size: ButtonProps['size']): '1' | '2' | '3' | '4' => {\n switch (size) {\n case 'small':\n return '1';\n case 'medium':\n return '2';\n case 'large':\n return '3';\n default:\n return '2';\n }\n};\n\nconst convertSizeResponse = (\n size: ButtonProps['size']\n): RadixButtonProps['size'] => {\n if (typeof size === 'string' || typeof size === 'undefined') {\n return convertSizeStr(size);\n }\n const radixSize: RadixButtonProps['size'] = {};\n let key: Breakpoint = 'initial';\n for (key in radixSize) {\n radixSize[key] = convertSizeStr(size[key]);\n }\n return radixSize;\n};\n\nconst convertSize = (size: ButtonProps['size']): RadixButtonProps['size'] => {\n if (typeof size === 'string') {\n return convertSizeStr(size);\n }\n return convertSizeResponse(size);\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (props, ref): React.ReactElement => {\n const { size, style, variant, ...restProps } = props;\n // string인 경우\n //object인 경우\n\n const radixSize = useMemo(() => {\n return convertSize(size);\n }, [size]);\n\n const mergedStyle = useMemo<ButtonProps['style']>(() => {\n const baseStyle = {\n background: variant === 'transparent' ? 'transparent' : undefined,\n fontWeight: 400,\n };\n return { ...baseStyle, ...style };\n }, [style, variant]);\n\n const radixVariant = useMemo(() => {\n if (variant === 'transparent') return 'ghost';\n return variant;\n }, [variant]);\n\n return (\n <RadixButton\n style={mergedStyle}\n variant={radixVariant}\n {...restProps}\n ref={ref}\n size={radixSize}\n />\n );\n }\n);\n\nButton.displayName = 'Button';\n","export { Box, type BoxProps } from '@radix-ui/themes';\n"],"mappings":"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","names":["Content","Root","Trigger","import_react","RadixButton","import_themes","import_jsx_runtime","Root","Content","Trigger"]}
|
package/dist/atoms/drawer.js
CHANGED
package/dist/atoms/index.cjs
CHANGED
|
@@ -200,20 +200,40 @@ var import_themes6 = require("@radix-ui/themes");
|
|
|
200
200
|
var import_themes7 = require("@radix-ui/themes");
|
|
201
201
|
var import_react3 = require("react");
|
|
202
202
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
203
|
+
var convertSizeStr = (size) => {
|
|
204
|
+
switch (size) {
|
|
205
|
+
case "small":
|
|
206
|
+
return "1";
|
|
207
|
+
case "medium":
|
|
208
|
+
return "2";
|
|
209
|
+
case "large":
|
|
210
|
+
return "3";
|
|
211
|
+
default:
|
|
212
|
+
return "2";
|
|
213
|
+
}
|
|
214
|
+
};
|
|
215
|
+
var convertSizeResponse = (size) => {
|
|
216
|
+
if (typeof size === "string" || typeof size === "undefined") {
|
|
217
|
+
return convertSizeStr(size);
|
|
218
|
+
}
|
|
219
|
+
const radixSize = {};
|
|
220
|
+
let key = "initial";
|
|
221
|
+
for (key in radixSize) {
|
|
222
|
+
radixSize[key] = convertSizeStr(size[key]);
|
|
223
|
+
}
|
|
224
|
+
return radixSize;
|
|
225
|
+
};
|
|
226
|
+
var convertSize = (size) => {
|
|
227
|
+
if (typeof size === "string") {
|
|
228
|
+
return convertSizeStr(size);
|
|
229
|
+
}
|
|
230
|
+
return convertSizeResponse(size);
|
|
231
|
+
};
|
|
203
232
|
var Button = (0, import_react3.forwardRef)(
|
|
204
233
|
(props, ref) => {
|
|
205
234
|
const _a = props, { size, style, variant } = _a, restProps = __objRest(_a, ["size", "style", "variant"]);
|
|
206
235
|
const radixSize = (0, import_react3.useMemo)(() => {
|
|
207
|
-
|
|
208
|
-
case "small":
|
|
209
|
-
return "1";
|
|
210
|
-
case "medium":
|
|
211
|
-
return "2";
|
|
212
|
-
case "large":
|
|
213
|
-
return "3";
|
|
214
|
-
default:
|
|
215
|
-
return "2";
|
|
216
|
-
}
|
|
236
|
+
return convertSize(size);
|
|
217
237
|
}, [size]);
|
|
218
238
|
const mergedStyle = (0, import_react3.useMemo)(() => {
|
|
219
239
|
const baseStyle = {
|