@wonjin-dev/reacts 1.6.0 → 1.7.0

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 (15) hide show
  1. package/dist/components/components/Flex/index.stories.d.ts +6 -0
  2. package/dist/components/components/Typography/index.d.ts +1 -1
  3. package/dist/components/components/Typography/index.stories.d.ts +6 -0
  4. package/dist/components/index.d.ts +1 -1
  5. package/dist/components/index.esm.js +2 -2
  6. package/dist/components/index.esm.js.map +1 -1
  7. package/dist/components/index.js +2 -2
  8. package/dist/components/index.js.map +1 -1
  9. package/dist/hooks/components/Flex/index.stories.d.ts +6 -0
  10. package/dist/hooks/components/Typography/index.d.ts +1 -1
  11. package/dist/hooks/components/Typography/index.stories.d.ts +6 -0
  12. package/dist/utils/components/Flex/index.stories.d.ts +6 -0
  13. package/dist/utils/components/Typography/index.d.ts +1 -1
  14. package/dist/utils/components/Typography/index.stories.d.ts +6 -0
  15. package/package.json +26 -9
package/dist/components/components/Flex/index.stories.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import Flex from './index';
3
+ declare const meta: Meta<typeof Flex>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof Flex>;
6
+ export declare const Default: Story;
package/dist/components/components/Typography/index.d.ts CHANGED
@@ -7,7 +7,7 @@ interface StyledProps {
7
7
  weight?: 400 | 500 | 600 | 700;
8
8
  color?: keyof typeof palette;
9
9
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
10
- highlight?: 'underline' | 'left';
10
+ highlight?: 'underline' | 'left' | 'callout';
11
11
  }
12
12
  declare const Typography: <T extends React.ElementType = "p">({ as, children, size, weight, color, deco, highlight, className, ...props }: PolymorphicComponent<T, StyledProps>) => import("react/jsx-runtime").JSX.Element;
13
13
  export default Typography;
package/dist/components/components/Typography/index.stories.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import Typography from './index';
3
+ declare const meta: Meta<typeof Typography>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof Typography>;
6
+ export declare const Default: Story;
package/dist/components/index.d.ts CHANGED
@@ -25,7 +25,7 @@ interface StyledProps$1 {
25
25
  weight?: 400 | 500 | 600 | 700;
26
26
  color?: keyof typeof palette;
27
27
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
28
- highlight?: 'underline' | 'left';
28
+ highlight?: 'underline' | 'left' | 'callout';
29
29
  }
30
30
  declare const Typography: <T extends React.ElementType = "p">({ as, children, size, weight, color, deco, highlight, className, ...props }: PolymorphicComponent<T, StyledProps$1>) => react_jsx_runtime.JSX.Element;
31
31
 
package/dist/components/index.esm.js CHANGED
@@ -27,8 +27,8 @@ function styleInject(css, ref) {
27
27
  }
28
28
  }
29
29
 
30
- var css_248z$1 = ".styles-module__typography___uJJgf{font-family:inherit;font-size:1rem;font-style:normal;font-weight:400;line-height:1.5}.styles-module__typography_color_grey900___tH77b{color:#21252a}.styles-module__typography_color_grey800___f4wMy{color:#3b3f45}.styles-module__typography_color_grey700___GSJui{color:#737373}.styles-module__typography_color_grey600___x6U6a{color:#7f848a}.styles-module__typography_color_grey500___VffNJ{color:#878e98}.styles-module__typography_color_grey400___h8LXZ{color:#a1a6ae}.styles-module__typography_color_grey300___CrH9u{color:#bcc0c6}.styles-module__typography_color_grey200___4e7wo{color:#d8dbe0}.styles-module__typography_color_grey100___s2JGa{color:#f1f3f5}.styles-module__typography_size_xs___zHguj{font-size:.5rem}.styles-module__typography_size_sm___IXCiS{font-size:.75rem}.styles-module__typography_size_md___vBKHL{font-size:1rem}.styles-module__typography_size_lg___UE2ty{font-size:1.125rem}.styles-module__typography_size_xl___e2zNJ{font-size:1.375rem}.styles-module__typography_size_2xl___XPIIz{font-size:1.75rem}.styles-module__typography_size_3xl___6dl0M{font-size:2rem}.styles-module__typography_weight_400___LwHSh{font-weight:400}.styles-module__typography_weight_500___QwNXS{font-weight:500}.styles-module__typography_weight_600___tWEhF{font-weight:600}.styles-module__typography_weight_700___V455e{font-weight:700}.styles-module__typography_deco_normal___LdTNr{font-style:normal}.styles-module__typography_deco_italic___MXbnH{font-style:italic}.styles-module__typography_deco_underline___cVSHd{text-decoration:underline;text-decoration-skip-ink:none}.styles-module__typography_deco_line-through___BISKr{text-decoration:line-through}.styles-module__typography_highlight_underline___a-iY0{display:inline-block;position:relative;z-index:1}.styles-module__typography_highlight_underline___a-iY0:after{background-color:#ffe600;border-radius:.1375em;bottom:.125rem;content:\"\";height:.4em;left:0;opacity:.7;position:absolute;width:100%;z-index:-1}.styles-module__typography_highlight_left___3rZDb{border-left:.25rem solid #ffe600;padding:.1375rem}";
31
- var styles$1 = {"typography":"styles-module__typography___uJJgf","typography_color_grey900":"styles-module__typography_color_grey900___tH77b","typography_color_grey800":"styles-module__typography_color_grey800___f4wMy","typography_color_grey700":"styles-module__typography_color_grey700___GSJui","typography_color_grey600":"styles-module__typography_color_grey600___x6U6a","typography_color_grey500":"styles-module__typography_color_grey500___VffNJ","typography_color_grey400":"styles-module__typography_color_grey400___h8LXZ","typography_color_grey300":"styles-module__typography_color_grey300___CrH9u","typography_color_grey200":"styles-module__typography_color_grey200___4e7wo","typography_color_grey100":"styles-module__typography_color_grey100___s2JGa","typography_size_xs":"styles-module__typography_size_xs___zHguj","typography_size_sm":"styles-module__typography_size_sm___IXCiS","typography_size_md":"styles-module__typography_size_md___vBKHL","typography_size_lg":"styles-module__typography_size_lg___UE2ty","typography_size_xl":"styles-module__typography_size_xl___e2zNJ","typography_size_2xl":"styles-module__typography_size_2xl___XPIIz","typography_size_3xl":"styles-module__typography_size_3xl___6dl0M","typography_weight_400":"styles-module__typography_weight_400___LwHSh","typography_weight_500":"styles-module__typography_weight_500___QwNXS","typography_weight_600":"styles-module__typography_weight_600___tWEhF","typography_weight_700":"styles-module__typography_weight_700___V455e","typography_deco_normal":"styles-module__typography_deco_normal___LdTNr","typography_deco_italic":"styles-module__typography_deco_italic___MXbnH","typography_deco_underline":"styles-module__typography_deco_underline___cVSHd","typography_deco_line-through":"styles-module__typography_deco_line-through___BISKr","typography_highlight_underline":"styles-module__typography_highlight_underline___a-iY0","typography_highlight_left":"styles-module__typography_highlight_left___3rZDb"};
30
+ var css_248z$1 = ".styles-module__typography___uJJgf{font-family:inherit;font-size:1rem;font-style:normal;font-weight:400;line-height:1.5}.styles-module__typography_color_grey900___tH77b{color:#21252a}.styles-module__typography_color_grey800___f4wMy{color:#3b3f45}.styles-module__typography_color_grey700___GSJui{color:#737373}.styles-module__typography_color_grey600___x6U6a{color:#7f848a}.styles-module__typography_color_grey500___VffNJ{color:#878e98}.styles-module__typography_color_grey400___h8LXZ{color:#a1a6ae}.styles-module__typography_color_grey300___CrH9u{color:#bcc0c6}.styles-module__typography_color_grey200___4e7wo{color:#d8dbe0}.styles-module__typography_color_grey100___s2JGa{color:#f1f3f5}.styles-module__typography_size_xs___zHguj{font-size:.5rem}.styles-module__typography_size_sm___IXCiS{font-size:.75rem}.styles-module__typography_size_md___vBKHL{font-size:1rem}.styles-module__typography_size_lg___UE2ty{font-size:1.125rem}.styles-module__typography_size_xl___e2zNJ{font-size:1.375rem}.styles-module__typography_size_2xl___XPIIz{font-size:1.75rem}.styles-module__typography_size_3xl___6dl0M{font-size:2rem}.styles-module__typography_weight_400___LwHSh{font-weight:400}.styles-module__typography_weight_500___QwNXS{font-weight:500}.styles-module__typography_weight_600___tWEhF{font-weight:600}.styles-module__typography_weight_700___V455e{font-weight:700}.styles-module__typography_deco_normal___LdTNr{font-style:normal}.styles-module__typography_deco_italic___MXbnH{font-style:italic}.styles-module__typography_deco_underline___cVSHd{text-decoration:underline;text-decoration-skip-ink:none}.styles-module__typography_deco_line-through___BISKr{text-decoration:line-through}.styles-module__typography_highlight_underline___a-iY0{display:inline-block;position:relative;z-index:1}.styles-module__typography_highlight_underline___a-iY0:after{background-color:#ffe600;border-radius:.1375em;bottom:.125rem;content:\"\";height:.4em;left:0;opacity:.7;position:absolute;width:100%;z-index:-1}.styles-module__typography_highlight_left___3rZDb{border-left:.25rem solid #ffe600;padding:.1375rem}.styles-module__typography_highlight_callout___64KQ8{background-color:#fffde7;border-radius:.5em;padding:1em;width:fit-content}";
31
+ var styles$1 = {"typography":"styles-module__typography___uJJgf","typography_color_grey900":"styles-module__typography_color_grey900___tH77b","typography_color_grey800":"styles-module__typography_color_grey800___f4wMy","typography_color_grey700":"styles-module__typography_color_grey700___GSJui","typography_color_grey600":"styles-module__typography_color_grey600___x6U6a","typography_color_grey500":"styles-module__typography_color_grey500___VffNJ","typography_color_grey400":"styles-module__typography_color_grey400___h8LXZ","typography_color_grey300":"styles-module__typography_color_grey300___CrH9u","typography_color_grey200":"styles-module__typography_color_grey200___4e7wo","typography_color_grey100":"styles-module__typography_color_grey100___s2JGa","typography_size_xs":"styles-module__typography_size_xs___zHguj","typography_size_sm":"styles-module__typography_size_sm___IXCiS","typography_size_md":"styles-module__typography_size_md___vBKHL","typography_size_lg":"styles-module__typography_size_lg___UE2ty","typography_size_xl":"styles-module__typography_size_xl___e2zNJ","typography_size_2xl":"styles-module__typography_size_2xl___XPIIz","typography_size_3xl":"styles-module__typography_size_3xl___6dl0M","typography_weight_400":"styles-module__typography_weight_400___LwHSh","typography_weight_500":"styles-module__typography_weight_500___QwNXS","typography_weight_600":"styles-module__typography_weight_600___tWEhF","typography_weight_700":"styles-module__typography_weight_700___V455e","typography_deco_normal":"styles-module__typography_deco_normal___LdTNr","typography_deco_italic":"styles-module__typography_deco_italic___MXbnH","typography_deco_underline":"styles-module__typography_deco_underline___cVSHd","typography_deco_line-through":"styles-module__typography_deco_line-through___BISKr","typography_highlight_underline":"styles-module__typography_highlight_underline___a-iY0","typography_highlight_left":"styles-module__typography_highlight_left___3rZDb","typography_highlight_callout":"styles-module__typography_highlight_callout___64KQ8"};
32
32
  styleInject(css_248z$1);
33
33
 
34
34
  const classNames = (...args) => {
package/dist/components/index.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":["../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js","../../src/utils/classNames/index.ts","../../src/components/Typography/index.tsx","../../src/components/Flex/index.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","const classNames = (...args: (string | undefined)[]) => {\n\treturn args.reduce((acc, className) => {\n\t\tif (className) {\n\t\t\treturn acc ? `${acc} ${className}` : className;\n\t\t}\n\t\treturn acc;\n\t}, '');\n};\n\nexport default classNames;\n","import React, { type ElementType } from 'react';\nimport { PolymorphicComponent } from '../_types';\nimport styles from './styles.module.scss';\nimport { classNames } from '@/utils';\nimport { palette } from '../_design/palette';\n\ntype TypographyDecoType = 'normal' | 'italic' | 'underline' | 'line-through';\n\ninterface StyledProps {\n\tdeco?: TypographyDecoType | TypographyDecoType[];\n\tweight?: 400 | 500 | 600 | 700;\n\tcolor?: keyof typeof palette;\n\tsize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';\n\thighlight?: 'underline' | 'left';\n}\n\nconst Typography = <T extends ElementType = 'p'>({\n\tas,\n\tchildren,\n\tsize = 'md',\n\tweight = 400,\n\tcolor = 'grey900',\n\tdeco = 'normal',\n\thighlight,\n\tclassName = '',\n\t...props\n}: PolymorphicComponent<T, StyledProps>) => {\n\tconst Component = as || 'p';\n\n\tconst cx = classNames(\n\t\tstyles.typography,\n\t\tstyles[`typography_size_${size}`],\n\t\tstyles[`typography_weight_${weight}`],\n\t\tArray.isArray(deco)\n\t\t\t? deco.map((deco) => styles[`typography_deco_${deco}`]).join(' ')\n\t\t\t: styles[`typography_deco_${deco}`],\n\t\tstyles[`typography_color_${color}`],\n\t\tstyles[`typography_highlight_${highlight}`],\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<Component className={cx} {...props}>\n\t\t\t{children}\n\t\t</Component>\n\t);\n};\n\nexport default Typography;\n","import React, { type ElementType } from 'react';\nimport type { PolymorphicComponent } from '../_types';\nimport styles from './styles.module.scss';\nimport { classNames } from '@/utils';\n\ninterface StyledProps {\n\tdirection?: 'row' | 'column';\n\tflex?: '1' | 'auto' | 'none' | 'initial';\n\tjustifyContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';\n\talignItems?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';\n\tgap?: number;\n}\n\nconst Flex = <E extends ElementType = 'div'>({\n\tas,\n\tchildren,\n\tdirection = 'row',\n\tflex,\n\tjustifyContent,\n\talignItems,\n\tgap,\n\tclassName = '',\n\t...props\n}: PolymorphicComponent<E, StyledProps>) => {\n\tconst Component = as || 'div';\n\n\tconst classes = classNames(\n\t\tstyles.flex,\n\t\tstyles[`flex_direction_${direction}`],\n\t\tflex ? styles[`flex_${flex}`] : undefined,\n\t\tjustifyContent ? styles[`flex_justify_${justifyContent}`] : undefined,\n\t\talignItems ? styles[`flex_align_${alignItems}`] : undefined,\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={classes}\n\t\t\tstyle={gap ? { gap: `${gap / 16}rem`, ...props.style } : props.style}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Component>\n\t);\n};\n\nexport default Flex;\n"],"names":["styles","_jsx"],"mappings":"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","x_google_ignoreList":[0]}
1
+ {"version":3,"file":"index.esm.js","sources":["../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js","../../src/utils/classNames/index.ts","../../src/components/Typography/index.tsx","../../src/components/Flex/index.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","const classNames = (...args: (string | undefined)[]) => {\n\treturn args.reduce((acc, className) => {\n\t\tif (className) {\n\t\t\treturn acc ? `${acc} ${className}` : className;\n\t\t}\n\t\treturn acc;\n\t}, '');\n};\n\nexport default classNames;\n","import React, { type ElementType } from 'react';\nimport { PolymorphicComponent } from '../_types';\nimport styles from './styles.module.scss';\nimport { classNames } from '@/utils';\nimport { palette } from '../_design/palette';\n\ntype TypographyDecoType = 'normal' | 'italic' | 'underline' | 'line-through';\n\ninterface StyledProps {\n\tdeco?: TypographyDecoType | TypographyDecoType[];\n\tweight?: 400 | 500 | 600 | 700;\n\tcolor?: keyof typeof palette;\n\tsize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';\n\thighlight?: 'underline' | 'left' | 'callout';\n}\n\nconst Typography = <T extends ElementType = 'p'>({\n\tas,\n\tchildren,\n\tsize = 'md',\n\tweight = 400,\n\tcolor = 'grey900',\n\tdeco = 'normal',\n\thighlight,\n\tclassName = '',\n\t...props\n}: PolymorphicComponent<T, StyledProps>) => {\n\tconst Component = as || 'p';\n\n\tconst cx = classNames(\n\t\tstyles.typography,\n\t\tstyles[`typography_size_${size}`],\n\t\tstyles[`typography_weight_${weight}`],\n\t\tArray.isArray(deco)\n\t\t\t? deco.map((deco) => styles[`typography_deco_${deco}`]).join(' ')\n\t\t\t: styles[`typography_deco_${deco}`],\n\t\tstyles[`typography_color_${color}`],\n\t\tstyles[`typography_highlight_${highlight}`],\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<Component className={cx} {...props}>\n\t\t\t{children}\n\t\t</Component>\n\t);\n};\n\nexport default Typography;\n","import React, { type ElementType } from 'react';\nimport type { PolymorphicComponent } from '../_types';\nimport styles from './styles.module.scss';\nimport { classNames } from '@/utils';\n\ninterface StyledProps {\n\tdirection?: 'row' | 'column';\n\tflex?: '1' | 'auto' | 'none' | 'initial';\n\tjustifyContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';\n\talignItems?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';\n\tgap?: number;\n}\n\nconst Flex = <E extends ElementType = 'div'>({\n\tas,\n\tchildren,\n\tdirection = 'row',\n\tflex,\n\tjustifyContent,\n\talignItems,\n\tgap,\n\tclassName = '',\n\t...props\n}: PolymorphicComponent<E, StyledProps>) => {\n\tconst Component = as || 'div';\n\n\tconst classes = classNames(\n\t\tstyles.flex,\n\t\tstyles[`flex_direction_${direction}`],\n\t\tflex ? styles[`flex_${flex}`] : undefined,\n\t\tjustifyContent ? styles[`flex_justify_${justifyContent}`] : undefined,\n\t\talignItems ? styles[`flex_align_${alignItems}`] : undefined,\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={classes}\n\t\t\tstyle={gap ? { gap: `${gap / 16}rem`, ...props.style } : props.style}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Component>\n\t);\n};\n\nexport default Flex;\n"],"names":["styles","_jsx"],"mappings":"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","x_google_ignoreList":[0]}
package/dist/components/index.js CHANGED
@@ -29,8 +29,8 @@ function styleInject(css, ref) {
29
29
  }
30
30
  }
31
31
 
32
- var css_248z$1 = ".styles-module__typography___uJJgf{font-family:inherit;font-size:1rem;font-style:normal;font-weight:400;line-height:1.5}.styles-module__typography_color_grey900___tH77b{color:#21252a}.styles-module__typography_color_grey800___f4wMy{color:#3b3f45}.styles-module__typography_color_grey700___GSJui{color:#737373}.styles-module__typography_color_grey600___x6U6a{color:#7f848a}.styles-module__typography_color_grey500___VffNJ{color:#878e98}.styles-module__typography_color_grey400___h8LXZ{color:#a1a6ae}.styles-module__typography_color_grey300___CrH9u{color:#bcc0c6}.styles-module__typography_color_grey200___4e7wo{color:#d8dbe0}.styles-module__typography_color_grey100___s2JGa{color:#f1f3f5}.styles-module__typography_size_xs___zHguj{font-size:.5rem}.styles-module__typography_size_sm___IXCiS{font-size:.75rem}.styles-module__typography_size_md___vBKHL{font-size:1rem}.styles-module__typography_size_lg___UE2ty{font-size:1.125rem}.styles-module__typography_size_xl___e2zNJ{font-size:1.375rem}.styles-module__typography_size_2xl___XPIIz{font-size:1.75rem}.styles-module__typography_size_3xl___6dl0M{font-size:2rem}.styles-module__typography_weight_400___LwHSh{font-weight:400}.styles-module__typography_weight_500___QwNXS{font-weight:500}.styles-module__typography_weight_600___tWEhF{font-weight:600}.styles-module__typography_weight_700___V455e{font-weight:700}.styles-module__typography_deco_normal___LdTNr{font-style:normal}.styles-module__typography_deco_italic___MXbnH{font-style:italic}.styles-module__typography_deco_underline___cVSHd{text-decoration:underline;text-decoration-skip-ink:none}.styles-module__typography_deco_line-through___BISKr{text-decoration:line-through}.styles-module__typography_highlight_underline___a-iY0{display:inline-block;position:relative;z-index:1}.styles-module__typography_highlight_underline___a-iY0:after{background-color:#ffe600;border-radius:.1375em;bottom:.125rem;content:\"\";height:.4em;left:0;opacity:.7;position:absolute;width:100%;z-index:-1}.styles-module__typography_highlight_left___3rZDb{border-left:.25rem solid #ffe600;padding:.1375rem}";
33
- var styles$1 = {"typography":"styles-module__typography___uJJgf","typography_color_grey900":"styles-module__typography_color_grey900___tH77b","typography_color_grey800":"styles-module__typography_color_grey800___f4wMy","typography_color_grey700":"styles-module__typography_color_grey700___GSJui","typography_color_grey600":"styles-module__typography_color_grey600___x6U6a","typography_color_grey500":"styles-module__typography_color_grey500___VffNJ","typography_color_grey400":"styles-module__typography_color_grey400___h8LXZ","typography_color_grey300":"styles-module__typography_color_grey300___CrH9u","typography_color_grey200":"styles-module__typography_color_grey200___4e7wo","typography_color_grey100":"styles-module__typography_color_grey100___s2JGa","typography_size_xs":"styles-module__typography_size_xs___zHguj","typography_size_sm":"styles-module__typography_size_sm___IXCiS","typography_size_md":"styles-module__typography_size_md___vBKHL","typography_size_lg":"styles-module__typography_size_lg___UE2ty","typography_size_xl":"styles-module__typography_size_xl___e2zNJ","typography_size_2xl":"styles-module__typography_size_2xl___XPIIz","typography_size_3xl":"styles-module__typography_size_3xl___6dl0M","typography_weight_400":"styles-module__typography_weight_400___LwHSh","typography_weight_500":"styles-module__typography_weight_500___QwNXS","typography_weight_600":"styles-module__typography_weight_600___tWEhF","typography_weight_700":"styles-module__typography_weight_700___V455e","typography_deco_normal":"styles-module__typography_deco_normal___LdTNr","typography_deco_italic":"styles-module__typography_deco_italic___MXbnH","typography_deco_underline":"styles-module__typography_deco_underline___cVSHd","typography_deco_line-through":"styles-module__typography_deco_line-through___BISKr","typography_highlight_underline":"styles-module__typography_highlight_underline___a-iY0","typography_highlight_left":"styles-module__typography_highlight_left___3rZDb"};
32
+ var css_248z$1 = ".styles-module__typography___uJJgf{font-family:inherit;font-size:1rem;font-style:normal;font-weight:400;line-height:1.5}.styles-module__typography_color_grey900___tH77b{color:#21252a}.styles-module__typography_color_grey800___f4wMy{color:#3b3f45}.styles-module__typography_color_grey700___GSJui{color:#737373}.styles-module__typography_color_grey600___x6U6a{color:#7f848a}.styles-module__typography_color_grey500___VffNJ{color:#878e98}.styles-module__typography_color_grey400___h8LXZ{color:#a1a6ae}.styles-module__typography_color_grey300___CrH9u{color:#bcc0c6}.styles-module__typography_color_grey200___4e7wo{color:#d8dbe0}.styles-module__typography_color_grey100___s2JGa{color:#f1f3f5}.styles-module__typography_size_xs___zHguj{font-size:.5rem}.styles-module__typography_size_sm___IXCiS{font-size:.75rem}.styles-module__typography_size_md___vBKHL{font-size:1rem}.styles-module__typography_size_lg___UE2ty{font-size:1.125rem}.styles-module__typography_size_xl___e2zNJ{font-size:1.375rem}.styles-module__typography_size_2xl___XPIIz{font-size:1.75rem}.styles-module__typography_size_3xl___6dl0M{font-size:2rem}.styles-module__typography_weight_400___LwHSh{font-weight:400}.styles-module__typography_weight_500___QwNXS{font-weight:500}.styles-module__typography_weight_600___tWEhF{font-weight:600}.styles-module__typography_weight_700___V455e{font-weight:700}.styles-module__typography_deco_normal___LdTNr{font-style:normal}.styles-module__typography_deco_italic___MXbnH{font-style:italic}.styles-module__typography_deco_underline___cVSHd{text-decoration:underline;text-decoration-skip-ink:none}.styles-module__typography_deco_line-through___BISKr{text-decoration:line-through}.styles-module__typography_highlight_underline___a-iY0{display:inline-block;position:relative;z-index:1}.styles-module__typography_highlight_underline___a-iY0:after{background-color:#ffe600;border-radius:.1375em;bottom:.125rem;content:\"\";height:.4em;left:0;opacity:.7;position:absolute;width:100%;z-index:-1}.styles-module__typography_highlight_left___3rZDb{border-left:.25rem solid #ffe600;padding:.1375rem}.styles-module__typography_highlight_callout___64KQ8{background-color:#fffde7;border-radius:.5em;padding:1em;width:fit-content}";
33
+ var styles$1 = {"typography":"styles-module__typography___uJJgf","typography_color_grey900":"styles-module__typography_color_grey900___tH77b","typography_color_grey800":"styles-module__typography_color_grey800___f4wMy","typography_color_grey700":"styles-module__typography_color_grey700___GSJui","typography_color_grey600":"styles-module__typography_color_grey600___x6U6a","typography_color_grey500":"styles-module__typography_color_grey500___VffNJ","typography_color_grey400":"styles-module__typography_color_grey400___h8LXZ","typography_color_grey300":"styles-module__typography_color_grey300___CrH9u","typography_color_grey200":"styles-module__typography_color_grey200___4e7wo","typography_color_grey100":"styles-module__typography_color_grey100___s2JGa","typography_size_xs":"styles-module__typography_size_xs___zHguj","typography_size_sm":"styles-module__typography_size_sm___IXCiS","typography_size_md":"styles-module__typography_size_md___vBKHL","typography_size_lg":"styles-module__typography_size_lg___UE2ty","typography_size_xl":"styles-module__typography_size_xl___e2zNJ","typography_size_2xl":"styles-module__typography_size_2xl___XPIIz","typography_size_3xl":"styles-module__typography_size_3xl___6dl0M","typography_weight_400":"styles-module__typography_weight_400___LwHSh","typography_weight_500":"styles-module__typography_weight_500___QwNXS","typography_weight_600":"styles-module__typography_weight_600___tWEhF","typography_weight_700":"styles-module__typography_weight_700___V455e","typography_deco_normal":"styles-module__typography_deco_normal___LdTNr","typography_deco_italic":"styles-module__typography_deco_italic___MXbnH","typography_deco_underline":"styles-module__typography_deco_underline___cVSHd","typography_deco_line-through":"styles-module__typography_deco_line-through___BISKr","typography_highlight_underline":"styles-module__typography_highlight_underline___a-iY0","typography_highlight_left":"styles-module__typography_highlight_left___3rZDb","typography_highlight_callout":"styles-module__typography_highlight_callout___64KQ8"};
34
34
  styleInject(css_248z$1);
35
35
 
36
36
  const classNames = (...args) => {
package/dist/components/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js","../../src/utils/classNames/index.ts","../../src/components/Typography/index.tsx","../../src/components/Flex/index.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","const classNames = (...args: (string | undefined)[]) => {\n\treturn args.reduce((acc, className) => {\n\t\tif (className) {\n\t\t\treturn acc ? `${acc} ${className}` : className;\n\t\t}\n\t\treturn acc;\n\t}, '');\n};\n\nexport default classNames;\n","import React, { type ElementType } from 'react';\nimport { PolymorphicComponent } from '../_types';\nimport styles from './styles.module.scss';\nimport { classNames } from '@/utils';\nimport { palette } from '../_design/palette';\n\ntype TypographyDecoType = 'normal' | 'italic' | 'underline' | 'line-through';\n\ninterface StyledProps {\n\tdeco?: TypographyDecoType | TypographyDecoType[];\n\tweight?: 400 | 500 | 600 | 700;\n\tcolor?: keyof typeof palette;\n\tsize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';\n\thighlight?: 'underline' | 'left';\n}\n\nconst Typography = <T extends ElementType = 'p'>({\n\tas,\n\tchildren,\n\tsize = 'md',\n\tweight = 400,\n\tcolor = 'grey900',\n\tdeco = 'normal',\n\thighlight,\n\tclassName = '',\n\t...props\n}: PolymorphicComponent<T, StyledProps>) => {\n\tconst Component = as || 'p';\n\n\tconst cx = classNames(\n\t\tstyles.typography,\n\t\tstyles[`typography_size_${size}`],\n\t\tstyles[`typography_weight_${weight}`],\n\t\tArray.isArray(deco)\n\t\t\t? deco.map((deco) => styles[`typography_deco_${deco}`]).join(' ')\n\t\t\t: styles[`typography_deco_${deco}`],\n\t\tstyles[`typography_color_${color}`],\n\t\tstyles[`typography_highlight_${highlight}`],\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<Component className={cx} {...props}>\n\t\t\t{children}\n\t\t</Component>\n\t);\n};\n\nexport default Typography;\n","import React, { type ElementType } from 'react';\nimport type { PolymorphicComponent } from '../_types';\nimport styles from './styles.module.scss';\nimport { classNames } from '@/utils';\n\ninterface StyledProps {\n\tdirection?: 'row' | 'column';\n\tflex?: '1' | 'auto' | 'none' | 'initial';\n\tjustifyContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';\n\talignItems?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';\n\tgap?: number;\n}\n\nconst Flex = <E extends ElementType = 'div'>({\n\tas,\n\tchildren,\n\tdirection = 'row',\n\tflex,\n\tjustifyContent,\n\talignItems,\n\tgap,\n\tclassName = '',\n\t...props\n}: PolymorphicComponent<E, StyledProps>) => {\n\tconst Component = as || 'div';\n\n\tconst classes = classNames(\n\t\tstyles.flex,\n\t\tstyles[`flex_direction_${direction}`],\n\t\tflex ? styles[`flex_${flex}`] : undefined,\n\t\tjustifyContent ? styles[`flex_justify_${justifyContent}`] : undefined,\n\t\talignItems ? styles[`flex_align_${alignItems}`] : undefined,\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={classes}\n\t\t\tstyle={gap ? { gap: `${gap / 16}rem`, ...props.style } : props.style}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Component>\n\t);\n};\n\nexport default Flex;\n"],"names":["styles","_jsx"],"mappings":"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","x_google_ignoreList":[0]}
1
+ {"version":3,"file":"index.js","sources":["../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js","../../src/utils/classNames/index.ts","../../src/components/Typography/index.tsx","../../src/components/Flex/index.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","const classNames = (...args: (string | undefined)[]) => {\n\treturn args.reduce((acc, className) => {\n\t\tif (className) {\n\t\t\treturn acc ? `${acc} ${className}` : className;\n\t\t}\n\t\treturn acc;\n\t}, '');\n};\n\nexport default classNames;\n","import React, { type ElementType } from 'react';\nimport { PolymorphicComponent } from '../_types';\nimport styles from './styles.module.scss';\nimport { classNames } from '@/utils';\nimport { palette } from '../_design/palette';\n\ntype TypographyDecoType = 'normal' | 'italic' | 'underline' | 'line-through';\n\ninterface StyledProps {\n\tdeco?: TypographyDecoType | TypographyDecoType[];\n\tweight?: 400 | 500 | 600 | 700;\n\tcolor?: keyof typeof palette;\n\tsize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';\n\thighlight?: 'underline' | 'left' | 'callout';\n}\n\nconst Typography = <T extends ElementType = 'p'>({\n\tas,\n\tchildren,\n\tsize = 'md',\n\tweight = 400,\n\tcolor = 'grey900',\n\tdeco = 'normal',\n\thighlight,\n\tclassName = '',\n\t...props\n}: PolymorphicComponent<T, StyledProps>) => {\n\tconst Component = as || 'p';\n\n\tconst cx = classNames(\n\t\tstyles.typography,\n\t\tstyles[`typography_size_${size}`],\n\t\tstyles[`typography_weight_${weight}`],\n\t\tArray.isArray(deco)\n\t\t\t? deco.map((deco) => styles[`typography_deco_${deco}`]).join(' ')\n\t\t\t: styles[`typography_deco_${deco}`],\n\t\tstyles[`typography_color_${color}`],\n\t\tstyles[`typography_highlight_${highlight}`],\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<Component className={cx} {...props}>\n\t\t\t{children}\n\t\t</Component>\n\t);\n};\n\nexport default Typography;\n","import React, { type ElementType } from 'react';\nimport type { PolymorphicComponent } from '../_types';\nimport styles from './styles.module.scss';\nimport { classNames } from '@/utils';\n\ninterface StyledProps {\n\tdirection?: 'row' | 'column';\n\tflex?: '1' | 'auto' | 'none' | 'initial';\n\tjustifyContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';\n\talignItems?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';\n\tgap?: number;\n}\n\nconst Flex = <E extends ElementType = 'div'>({\n\tas,\n\tchildren,\n\tdirection = 'row',\n\tflex,\n\tjustifyContent,\n\talignItems,\n\tgap,\n\tclassName = '',\n\t...props\n}: PolymorphicComponent<E, StyledProps>) => {\n\tconst Component = as || 'div';\n\n\tconst classes = classNames(\n\t\tstyles.flex,\n\t\tstyles[`flex_direction_${direction}`],\n\t\tflex ? styles[`flex_${flex}`] : undefined,\n\t\tjustifyContent ? styles[`flex_justify_${justifyContent}`] : undefined,\n\t\talignItems ? styles[`flex_align_${alignItems}`] : undefined,\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={classes}\n\t\t\tstyle={gap ? { gap: `${gap / 16}rem`, ...props.style } : props.style}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Component>\n\t);\n};\n\nexport default Flex;\n"],"names":["styles","_jsx"],"mappings":"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","x_google_ignoreList":[0]}
package/dist/hooks/components/Flex/index.stories.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import Flex from './index';
3
+ declare const meta: Meta<typeof Flex>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof Flex>;
6
+ export declare const Default: Story;
package/dist/hooks/components/Typography/index.d.ts CHANGED
@@ -7,7 +7,7 @@ interface StyledProps {
7
7
  weight?: 400 | 500 | 600 | 700;
8
8
  color?: keyof typeof palette;
9
9
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
10
- highlight?: 'underline' | 'left';
10
+ highlight?: 'underline' | 'left' | 'callout';
11
11
  }
12
12
  declare const Typography: <T extends React.ElementType = "p">({ as, children, size, weight, color, deco, highlight, className, ...props }: PolymorphicComponent<T, StyledProps>) => import("react/jsx-runtime").JSX.Element;
13
13
  export default Typography;
package/dist/hooks/components/Typography/index.stories.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import Typography from './index';
3
+ declare const meta: Meta<typeof Typography>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof Typography>;
6
+ export declare const Default: Story;
package/dist/utils/components/Flex/index.stories.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import Flex from './index';
3
+ declare const meta: Meta<typeof Flex>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof Flex>;
6
+ export declare const Default: Story;
package/dist/utils/components/Typography/index.d.ts CHANGED
@@ -7,7 +7,7 @@ interface StyledProps {
7
7
  weight?: 400 | 500 | 600 | 700;
8
8
  color?: keyof typeof palette;
9
9
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
10
- highlight?: 'underline' | 'left';
10
+ highlight?: 'underline' | 'left' | 'callout';
11
11
  }
12
12
  declare const Typography: <T extends React.ElementType = "p">({ as, children, size, weight, color, deco, highlight, className, ...props }: PolymorphicComponent<T, StyledProps>) => import("react/jsx-runtime").JSX.Element;
13
13
  export default Typography;
package/dist/utils/components/Typography/index.stories.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import Typography from './index';
3
+ declare const meta: Meta<typeof Typography>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof Typography>;
6
+ export declare const Default: Story;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wonjin-dev/reacts",
3
- "version": "1.6.0",
3
+ "version": "1.7.0",
4
4
  "author": "wonjin-dev",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -13,6 +13,20 @@
13
13
  "@rollup/plugin-commonjs": "25.0.7",
14
14
  "@rollup/plugin-node-resolve": "15.2.3",
15
15
  "@rollup/plugin-typescript": "11.1.6",
16
+ "@storybook/addon-essentials": "^8.6.14",
17
+ "@storybook/addon-interactions": "^8.6.14",
18
+ "@storybook/addon-links": "^10.2.8",
19
+ "@storybook/addon-mdx-gfm": "^8.6.14",
20
+ "@storybook/addon-styling": "^1.3.7",
21
+ "@storybook/blocks": "^8.6.14",
22
+ "@storybook/jest": "^0.2.3",
23
+ "@storybook/manager-api": "^8.6.14",
24
+ "@storybook/preset-scss": "^1.0.3",
25
+ "@storybook/react": "^10.2.8",
26
+ "@storybook/react-vite": "^10.2.8",
27
+ "@storybook/test": "^8.6.15",
28
+ "@storybook/testing-library": "^0.2.2",
29
+ "@storybook/theming": "^8.6.14",
16
30
  "@types/jest": "30.0.0",
17
31
  "@types/react": "^19.0.0",
18
32
  "@types/react-dom": "^19.0.0",
@@ -24,15 +38,17 @@
24
38
  "rollup-plugin-postcss": "4.0.2",
25
39
  "rollup-plugin-scss": "4.0.0",
26
40
  "sass": "1.70.0",
41
+ "storybook": "^10.2.8",
27
42
  "ts-jest": "29.4.1",
28
43
  "tslib": "2.6.2",
29
- "typescript": "5.3.3"
44
+ "typescript": "5.3.3",
45
+ "vite": "^7.3.1",
46
+ "vite-tsconfig-paths": "^6.1.1"
30
47
  },
31
48
  "exports": {
32
49
  "./components": {
33
50
  "import": "./dist/components/index.esm.js",
34
- "require": "./dist/components/index.js",
35
- "types": "./dist/components/index.d.ts"
51
+ "require": "./dist/components/index.js"
36
52
  },
37
53
  "./components/styles": {
38
54
  "import": "./dist/components/index.css",
@@ -40,15 +56,14 @@
40
56
  },
41
57
  "./hooks": {
42
58
  "import": "./dist/hooks/index.esm.js",
43
- "require": "./dist/hooks/index.js",
44
- "types": "./dist/hooks/index.d.ts"
59
+ "require": "./dist/hooks/index.js"
45
60
  },
46
61
  "./utils": {
47
62
  "import": "./dist/utils/index.esm.js",
48
- "require": "./dist/utils/index.js",
49
- "types": "./dist/utils/index.d.ts"
63
+ "require": "./dist/utils/index.js"
50
64
  }
51
65
  },
66
+ "types": "./dist/components/index.d.ts",
52
67
  "files": [
53
68
  "dist"
54
69
  ],
@@ -57,6 +72,8 @@
57
72
  "dev": "rollup -c -w",
58
73
  "clean": "rm -rf dist",
59
74
  "test": "jest",
60
- "deploy": "pnpm run prepublishOnly && pnpm publish --access public"
75
+ "deploy": "pnpm run prepublishOnly && pnpm publish --access public",
76
+ "storybook": "storybook dev -p 6006",
77
+ "build-storybook": "storybook build"
61
78
  }
62
79
  }