ds-learning 0.1.3 → 0.1.5

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 (52) hide show
  1. package/dist/index.css +2 -0
  2. package/dist/index.d.mts +108 -0
  3. package/dist/index.d.ts +108 -0
  4. package/dist/index.js +24 -0
  5. package/dist/index.mjs +24 -0
  6. package/package.json +7 -7
  7. package/src/app/globals.css +0 -154
  8. package/src/components/Avatar/Avatar.mdx +0 -16
  9. package/src/components/Avatar/Avatar.stories.ts +0 -30
  10. package/src/components/Avatar/Avatar.tsx +0 -21
  11. package/src/components/Avatar/styles/avatar.styles.ts +0 -15
  12. package/src/components/Avatar/variants/AvatarIcon.tsx +0 -9
  13. package/src/components/Avatar/variants/AvatarImage.tsx +0 -12
  14. package/src/components/Box/Box.mdx +0 -16
  15. package/src/components/Box/Box.stories.ts +0 -36
  16. package/src/components/Box/Box.tsx +0 -18
  17. package/src/components/Box/styles/box.styles.ts +0 -19
  18. package/src/components/Button/Button.mdx +0 -30
  19. package/src/components/Button/Button.stories.ts +0 -88
  20. package/src/components/Button/Button.tsx +0 -31
  21. package/src/components/Divider/Divider.mdx +0 -16
  22. package/src/components/Divider/Divider.stories.ts +0 -23
  23. package/src/components/Divider/Divider.tsx +0 -25
  24. package/src/components/Divider/styles/divider.styles.ts +0 -25
  25. package/src/components/Dropdown/Dropdown.stories.ts +0 -22
  26. package/src/components/Dropdown/Dropdrown.tsx +0 -88
  27. package/src/components/Input/Input.mdx +0 -28
  28. package/src/components/Input/Input.stories.ts +0 -70
  29. package/src/components/Input/Input.tsx +0 -29
  30. package/src/components/Link/Link.mdx +0 -17
  31. package/src/components/Link/Link.stories.ts +0 -35
  32. package/src/components/Link/Link.tsx +0 -14
  33. package/src/components/Modal/Modal.mdx +0 -10
  34. package/src/components/Modal/Modal.stories.tsx +0 -46
  35. package/src/components/Modal/Modal.tsx +0 -63
  36. package/src/components/Molecules.mdx +0 -3
  37. package/src/components/Notice/ExclamationIcon.tsx +0 -23
  38. package/src/components/Notice/Notice.mdx +0 -20
  39. package/src/components/Notice/Notice.stories.ts +0 -40
  40. package/src/components/Notice/Notice.tsx +0 -41
  41. package/src/components/Notice/styles/notice.styles.ts +0 -14
  42. package/src/components/Switch/Switch.tsx +0 -53
  43. package/src/components/Switch/styles/switch.styles.ts +0 -40
  44. package/src/components/TextBlock/TextBlock.mdx +0 -18
  45. package/src/components/TextBlock/TextBlock.stories.ts +0 -48
  46. package/src/components/TextBlock/TextBlock.tsx +0 -39
  47. package/src/components/TextBlock/styles/styles.text-block.ts +0 -10
  48. package/src/components/Typography/Typography.mdx +0 -18
  49. package/src/components/Typography/Typography.stories.ts +0 -35
  50. package/src/components/Typography/Typography.tsx +0 -28
  51. package/src/components/Typography/styles/typography.styles.ts +0 -22
  52. package/src/components/index.ts +0 -15
package/dist/index.css ADDED
@@ -0,0 +1,2 @@
1
+ @layer properties;@layer theme,base,components,utilities;@layer theme{:root,:host{--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-500: oklch(63.7% .237 25.331);--color-blue-500: oklch(62.3% .214 259.815);--color-gray-100: oklch(96.7% .003 264.542);--color-gray-200: oklch(92.8% .006 264.531);--color-gray-300: oklch(87.2% .01 258.338);--color-gray-400: oklch(70.7% .022 261.325);--color-gray-700: oklch(37.3% .034 259.733);--color-gray-900: oklch(21% .034 264.665);--color-black: #000;--color-white: #fff;--spacing: .25rem;--container-3xl: 48rem;--text-xs: var(--text-xs);--text-xs--line-height: calc(1 / .75);--text-sm: var(--text-sm);--text-sm--line-height: calc(1.25 / .875);--text-lg: var(--text-lg);--text-lg--line-height: calc(1.75 / 1.125);--text-xl: var(--text-xl);--text-xl--line-height: calc(1.75 / 1.25);--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--radius-md: var(--border-radius-md);--radius-lg: var(--border-radius-lg);--shadow-sm: var(--shadow-sm);--shadow-md: var(--shadow-md);--shadow-lg: var(--shadow-lg);--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--default-transition-duration: .15s;--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);--default-font-family: var(--font-sans);--default-mono-font-family: var(--font-mono);--blur: var(--blur);--color-primary: var(--color-primary);--color-secondary: var(--color-secondary);--color-tertiary: var(--color-tertiary);--color-quaternary: var(--color-quaternary);--color-disabled: var(--color-bg-disabled);--color-text-primary: var(--color-text-primary);--color-text-secondary: var(--color-text-secondary);--color-text-tertiary: var(--color-text-tertiary);--color-text-disabled: var(--color-text-disabled);--color-dark: var(--color-bg-dark);--color-light: var(--color-bg-light);--color-warning: var(--color-warning);--color-error: var(--color-error);--shadow-focus: var(--shadow-focus);--shadow-outline: var(--shadow-outline);--shadow-button-focus: var(--shadow-button-focus);--spacing-none: var(--spacing-none);--spacing-4xs: var(--spacing-4xs);--spacing-2xs: var(--spacing-2xs);--spacing-xs: var(--spacing-xs);--spacing-sm: var(--spacing-sm);--spacing-md: var(--spacing-md);--spacing-lg: var(--spacing-lg);--spacing-xl: var(--spacing-xl);--spacing-2xl: var(--spacing-2xl);--spacing-4xl: var(--spacing-4xl);--text-md: var(--text-md)}}@layer base{*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings, normal);font-variation-settings:var(--default-font-variation-settings, normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings, normal);font-variation-settings:var(--default-mono-font-variation-settings, normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){::placeholder{color:currentcolor;@supports (color: color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.inset-y-0{inset-block:calc(var(--spacing) * 0)}.right-3{right:calc(var(--spacing) * 3)}.z-10{z-index:10}.z-50{z-index:50}.mt-2{margin-top:calc(var(--spacing) * 2)}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.h-0\.5{height:calc(var(--spacing) * .5)}.h-1{height:calc(var(--spacing) * 1)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-screen{height:100vh}.max-h-60{max-height:calc(var(--spacing) * 60)}.min-h-full{min-height:100%}.w-1\/2{width:50%}.w-1\/3{width:calc(1/3 * 100%)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-8{width:calc(var(--spacing) * 8)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-16{width:calc(var(--spacing) * 16)}.w-full{width:100%}.max-w-3xl{max-width:var(--container-3xl)}.scale-95{--tw-scale-x: 95%;--tw-scale-y: 95%;--tw-scale-z: 95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.scale-100{--tw-scale-x: 100%;--tw-scale-y: 100%;--tw-scale-z: 100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-5{gap:calc(var(--spacing) * 5)}.space-y-2{:where(&>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}}.space-y-4{:where(&>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}}.space-x-2{:where(&>:not(:last-child)){--tw-space-x-reverse: 0;margin-inline-start:calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)))}}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.bg-black{background-color:var(--color-black)}.bg-dark{background-color:var(--color-dark)}.bg-disabled{background-color:var(--color-disabled)}.bg-error{background-color:var(--color-error)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-light{background-color:var(--color-light)}.bg-primary{background-color:var(--color-primary)}.bg-quaternary{background-color:var(--color-quaternary)}.bg-red-500{background-color:var(--color-red-500)}.bg-transparent{background-color:transparent}.bg-warning{background-color:var(--color-warning)}.bg-white{background-color:var(--color-white)}.p-1{padding:calc(var(--spacing) * 1)}.p-4{padding:calc(var(--spacing) * 4)}.p-7{padding:calc(var(--spacing) * 7)}.p-xs{padding:var(--spacing-xs)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-lg{padding-inline:var(--spacing-lg)}.px-sm{padding-inline:var(--spacing-sm)}.px-xs{padding-inline:var(--spacing-xs)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-2xs{padding-block:var(--spacing-2xs)}.py-sm{padding-block:var(--spacing-sm)}.py-xs{padding-block:var(--spacing-xs)}.pt-4xs{padding-top:var(--spacing-4xs)}.pt-sm{padding-top:var(--spacing-sm)}.pr-10{padding-right:calc(var(--spacing) * 10)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-xs{padding-left:var(--spacing-xs)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading, var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading, var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading, var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading, var(--text-xs--line-height))}.text-md{font-size:var(--text-md)}.font-normal{--tw-font-weight: var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight: var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-disabled{color:var(--color-disabled)}.text-gray-400{color:var(--color-gray-400)}.text-gray-700{color:var(--color-gray-700)}.text-gray-900{color:var(--color-gray-900)}.text-primary{color:var(--color-primary)}.text-red-500{color:var(--color-red-500)}.text-secondary{color:var(--color-secondary)}.text-text-disabled{color:var(--color-text-disabled)}.text-text-primary{color:var(--color-text-primary)}.text-text-secondary{color:var(--color-text-secondary)}.text-text-tertiary{color:var(--color-text-tertiary)}.text-white{color:var(--color-white)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0%}.opacity-25{opacity:25%}.opacity-100{opacity:100%}.shadow-lg{--tw-shadow: var(--shadow-lg);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow: var(--shadow-sm);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function));transition-duration:var(--tw-duration, var(--default-transition-duration))}.duration-200{--tw-duration: .2s;transition-duration:.2s}.duration-300{--tw-duration: .3s;transition-duration:.3s}.ease-in{--tw-ease: var(--ease-in);transition-timing-function:var(--ease-in)}.ease-out{--tw-ease: var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style: none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.empty\:invisible{&:empty{visibility:hidden}}.focus\:border-blue-500{&:focus{border-color:var(--color-blue-500)}}.focus\:ring-2{&:focus{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:ring-blue-500\/20{&:focus{--tw-ring-color: color-mix(in srgb, oklch(62.3% .214 259.815) 20%, transparent);@supports (color: color-mix(in lab,red,red)){--tw-ring-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent)}}}.disabled\:border-2{&:disabled{border-style:var(--tw-border-style);border-width:2px}}.disabled\:border-disabled{&:disabled{border-color:var(--color-disabled)}}.disabled\:bg-disabled{&:disabled{background-color:var(--color-disabled)}}.aria-disabled\:text-text-disabled{&[aria-disabled=true]{color:var(--color-text-disabled)}}.data-\[focus\]\:bg-blue-500{&[data-focus]{background-color:var(--color-blue-500)}}.data-\[focus\]\:text-white{&[data-focus]{color:var(--color-white)}}.data-\[selected\]\:font-medium{&[data-selected]{--tw-font-weight: var(--font-weight-medium);font-weight:var(--font-weight-medium)}}}@layer base{:root{--color-primary: #2D5BFF;--color-secondary: #6284FD;--color-tertiary: #96ADFF;--color-quaternary: #ECF0FF;--color-warning: #FFEF98;--color-error: #FFC0C0;--color-sucess: #1bcf51;--color-hover: #1B4AF0;--color-click: #002ED0;--color-icon: #7C7B7B;--color-outline: #D7D7D7;--color-divider: #EDEDED;--color-bg-light: #FFFFFF;--color-bg-dark: #201f1f;--color-bg-disabled: #EFEFEF;--color-text-primary: #181818;--color-text-secondary: #FFFFFF;--color-text-tertiary: #747474;--color-text-disabled: #8A8A8A;--shadow-sm: 0px 0px 10px rgba(92, 92, 92, 15%);--shadow-md: 0px 0px 20px rgba(92, 92, 92, 20%);--shadow-lg: 0px 0px 30px rgba(92, 92, 92, 25%);--shadow-focus: 0px 0px 0px 2px #643296;--shadow-outline: 0px 0px 0px 2px #E8E8E8;--shadow-button-focus: 0px 0px 0px 2px #AF4BFE;--blur: 4px;--spacing-none: 0px;--spacing-4xs: 4px;--spacing-2xs: 12px;--spacing-xs: 16px;--spacing-sm: 20px;--spacing-md: 24px;--spacing-lg: 32px;--spacing-xl: 40px;--spacing-2xl: 48px;--spacing-4xl: 56px;--radius-none: 0px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 16px;--text-xs: 12px;--text-sm: 14px;--text-md: 16px;--text-lg: 18px;--text-xl: 20px}.theme-violet{--color-primary: #AF4BFE;--color-secondary: #BE74F9;--color-tertiary: #E2BDFF;--color-quaternary: #F5E8FF}}*{font-family:var(--font-poppins)}@property --tw-scale-x{syntax: "*"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: "*"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: "*"; inherits: false; initial-value: 1;}@property --tw-rotate-x{syntax: "*"; inherits: false;}@property --tw-rotate-y{syntax: "*"; inherits: false;}@property --tw-rotate-z{syntax: "*"; inherits: false;}@property --tw-skew-x{syntax: "*"; inherits: false;}@property --tw-skew-y{syntax: "*"; inherits: false;}@property --tw-space-y-reverse{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-space-x-reverse{syntax: "*"; inherits: false; initial-value: 0;}@property --tw-border-style{syntax: "*"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: "*"; inherits: false;}@property --tw-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: "*"; inherits: false;}@property --tw-shadow-alpha{syntax: "<percentage>"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: "*"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: "<percentage>"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: "*"; inherits: false;}@property --tw-ring-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: "*"; inherits: false;}@property --tw-inset-ring-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: "*"; inherits: false;}@property --tw-ring-offset-width{syntax: "<length>"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: "*"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: "*"; inherits: false; initial-value: 0 0 #0000;}@property --tw-duration{syntax: "*"; inherits: false;}@property --tw-ease{syntax: "*"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1;--tw-rotate-x: initial;--tw-rotate-y: initial;--tw-rotate-z: initial;--tw-skew-x: initial;--tw-skew-y: initial;--tw-space-y-reverse: 0;--tw-space-x-reverse: 0;--tw-border-style: solid;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-duration: initial;--tw-ease: initial}}}
2
+ /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
@@ -0,0 +1,108 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { VariantProps } from 'class-variance-authority';
3
+ import * as class_variance_authority_types from 'class-variance-authority/types';
4
+ import { DialogProps } from '@headlessui/react';
5
+ import React$1, { JSX } from 'react';
6
+
7
+ declare const avatarStyles: (props?: ({
8
+ size?: "xs" | "sm" | "md" | "lg" | null | undefined;
9
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
10
+
11
+ type AvatarProps = VariantProps<typeof avatarStyles> & {
12
+ srcImageIcon?: string;
13
+ altImageIcon?: string;
14
+ } & React.HTMLAttributes<HTMLDivElement>;
15
+ declare const Avatar: ({ size, srcImageIcon, altImageIcon }: AvatarProps) => react_jsx_runtime.JSX.Element;
16
+
17
+ declare const boxStyles: (props?: ({
18
+ rounded?: boolean | null | undefined;
19
+ border?: boolean | null | undefined;
20
+ variant?: "default" | "dark" | "outlined" | null | undefined;
21
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
22
+
23
+ type BoxProps = VariantProps<typeof boxStyles> & {} & React.HTMLAttributes<HTMLDivElement>;
24
+ declare const Box: ({ rounded, variant, children, className, ...rest }: BoxProps) => react_jsx_runtime.JSX.Element;
25
+
26
+ type ButtonProps = {
27
+ children: React.ReactNode;
28
+ variant?: 'primary' | 'secondary' | 'tertiary';
29
+ } & React.ButtonHTMLAttributes<HTMLButtonElement>;
30
+ declare const Button: ({ variant, children, className, disabled, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;
31
+
32
+ declare const dividerStyles: (props?: ({
33
+ hasChildren?: boolean | null | undefined;
34
+ background?: "dark" | "light" | null | undefined;
35
+ size?: "xs" | "sm" | "md" | null | undefined;
36
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
37
+
38
+ type DividerProps = VariantProps<typeof dividerStyles> & {
39
+ width?: string;
40
+ } & React.HTMLAttributes<HTMLDivElement>;
41
+ declare const Divider: ({ width, size, children, background, }: DividerProps) => react_jsx_runtime.JSX.Element;
42
+
43
+ type DropdownProps = {
44
+ list: string[];
45
+ };
46
+ declare const Dropdown: ({ list, ...rest }: DropdownProps) => react_jsx_runtime.JSX.Element;
47
+
48
+ type InputProps = {
49
+ label?: string;
50
+ multiline?: boolean;
51
+ } & (React.InputHTMLAttributes<HTMLInputElement> | React.TextareaHTMLAttributes<HTMLTextAreaElement>);
52
+ declare const Input: ({ className, label, ...rest }: InputProps) => react_jsx_runtime.JSX.Element;
53
+
54
+ type LinkProps = {
55
+ children: React.ReactNode;
56
+ disabled?: boolean;
57
+ } & React.AnchorHTMLAttributes<HTMLAnchorElement>;
58
+ declare const Link: ({ children, href, disabled, className, ...rest }: LinkProps) => react_jsx_runtime.JSX.Element;
59
+
60
+ type ModalProps = {
61
+ children?: React$1.ReactNode;
62
+ isOpen: boolean;
63
+ onClose: () => void;
64
+ title?: string;
65
+ } & DialogProps & React$1.HTMLAttributes<HTMLDivElement>;
66
+ declare const Modal: ({ children, isOpen, onClose, title }: ModalProps) => react_jsx_runtime.JSX.Element;
67
+
68
+ declare const noticeStyles: (props?: ({
69
+ variant?: "default" | "warning" | "error" | null | undefined;
70
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
71
+
72
+ type NoticeProps = VariantProps<typeof noticeStyles> & {
73
+ notice?: string;
74
+ noticeTitle?: string;
75
+ } & React.HTMLAttributes<HTMLDivElement>;
76
+ declare const Notice: ({ variant, notice, noticeTitle, }: NoticeProps) => react_jsx_runtime.JSX.Element;
77
+
78
+ type SwitchProps = {
79
+ defaultEnable?: boolean;
80
+ variant?: "common" | "contract";
81
+ disabled?: boolean;
82
+ onChange?: (enabled: boolean) => void;
83
+ };
84
+ declare const Switch: ({ defaultEnable, variant, disabled, onChange, ...rest }: SwitchProps) => react_jsx_runtime.JSX.Element;
85
+
86
+ declare const textBlockStyles: (props?: ({
87
+ type?: "dark" | "light" | null | undefined;
88
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
89
+
90
+ type VariantContent = "primary" | "secondary" | "tertiary";
91
+ type TextBlockProps = VariantProps<typeof textBlockStyles> & {
92
+ title?: string;
93
+ variantContent: VariantContent;
94
+ } & React.HTMLAttributes<HTMLDivElement> & BoxProps;
95
+ declare const TextBlock: ({ title, children, variant, variantContent, ...rest }: TextBlockProps) => react_jsx_runtime.JSX.Element;
96
+
97
+ declare const typographyStyles: (props?: ({
98
+ variant?: "primary" | "secondary" | "tertiary" | null | undefined;
99
+ size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
100
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
101
+
102
+ type TypographyProps = VariantProps<typeof typographyStyles> & {
103
+ children?: React.ReactNode;
104
+ element?: keyof JSX.IntrinsicElements;
105
+ } & JSX.IntrinsicElements['p'];
106
+ declare const Typography: ({ variant, size, className, children, element, ...rest }: TypographyProps) => react_jsx_runtime.JSX.Element;
107
+
108
+ export { Avatar, type AvatarProps, Box, type BoxProps, Button, type ButtonProps, Divider, type DividerProps, Dropdown, type DropdownProps, Input, type InputProps, Link, type LinkProps, Modal, type ModalProps, Notice, type NoticeProps, Switch, type SwitchProps, TextBlock, type TextBlockProps, Typography, type TypographyProps };
@@ -0,0 +1,108 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { VariantProps } from 'class-variance-authority';
3
+ import * as class_variance_authority_types from 'class-variance-authority/types';
4
+ import { DialogProps } from '@headlessui/react';
5
+ import React$1, { JSX } from 'react';
6
+
7
+ declare const avatarStyles: (props?: ({
8
+ size?: "xs" | "sm" | "md" | "lg" | null | undefined;
9
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
10
+
11
+ type AvatarProps = VariantProps<typeof avatarStyles> & {
12
+ srcImageIcon?: string;
13
+ altImageIcon?: string;
14
+ } & React.HTMLAttributes<HTMLDivElement>;
15
+ declare const Avatar: ({ size, srcImageIcon, altImageIcon }: AvatarProps) => react_jsx_runtime.JSX.Element;
16
+
17
+ declare const boxStyles: (props?: ({
18
+ rounded?: boolean | null | undefined;
19
+ border?: boolean | null | undefined;
20
+ variant?: "default" | "dark" | "outlined" | null | undefined;
21
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
22
+
23
+ type BoxProps = VariantProps<typeof boxStyles> & {} & React.HTMLAttributes<HTMLDivElement>;
24
+ declare const Box: ({ rounded, variant, children, className, ...rest }: BoxProps) => react_jsx_runtime.JSX.Element;
25
+
26
+ type ButtonProps = {
27
+ children: React.ReactNode;
28
+ variant?: 'primary' | 'secondary' | 'tertiary';
29
+ } & React.ButtonHTMLAttributes<HTMLButtonElement>;
30
+ declare const Button: ({ variant, children, className, disabled, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;
31
+
32
+ declare const dividerStyles: (props?: ({
33
+ hasChildren?: boolean | null | undefined;
34
+ background?: "dark" | "light" | null | undefined;
35
+ size?: "xs" | "sm" | "md" | null | undefined;
36
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
37
+
38
+ type DividerProps = VariantProps<typeof dividerStyles> & {
39
+ width?: string;
40
+ } & React.HTMLAttributes<HTMLDivElement>;
41
+ declare const Divider: ({ width, size, children, background, }: DividerProps) => react_jsx_runtime.JSX.Element;
42
+
43
+ type DropdownProps = {
44
+ list: string[];
45
+ };
46
+ declare const Dropdown: ({ list, ...rest }: DropdownProps) => react_jsx_runtime.JSX.Element;
47
+
48
+ type InputProps = {
49
+ label?: string;
50
+ multiline?: boolean;
51
+ } & (React.InputHTMLAttributes<HTMLInputElement> | React.TextareaHTMLAttributes<HTMLTextAreaElement>);
52
+ declare const Input: ({ className, label, ...rest }: InputProps) => react_jsx_runtime.JSX.Element;
53
+
54
+ type LinkProps = {
55
+ children: React.ReactNode;
56
+ disabled?: boolean;
57
+ } & React.AnchorHTMLAttributes<HTMLAnchorElement>;
58
+ declare const Link: ({ children, href, disabled, className, ...rest }: LinkProps) => react_jsx_runtime.JSX.Element;
59
+
60
+ type ModalProps = {
61
+ children?: React$1.ReactNode;
62
+ isOpen: boolean;
63
+ onClose: () => void;
64
+ title?: string;
65
+ } & DialogProps & React$1.HTMLAttributes<HTMLDivElement>;
66
+ declare const Modal: ({ children, isOpen, onClose, title }: ModalProps) => react_jsx_runtime.JSX.Element;
67
+
68
+ declare const noticeStyles: (props?: ({
69
+ variant?: "default" | "warning" | "error" | null | undefined;
70
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
71
+
72
+ type NoticeProps = VariantProps<typeof noticeStyles> & {
73
+ notice?: string;
74
+ noticeTitle?: string;
75
+ } & React.HTMLAttributes<HTMLDivElement>;
76
+ declare const Notice: ({ variant, notice, noticeTitle, }: NoticeProps) => react_jsx_runtime.JSX.Element;
77
+
78
+ type SwitchProps = {
79
+ defaultEnable?: boolean;
80
+ variant?: "common" | "contract";
81
+ disabled?: boolean;
82
+ onChange?: (enabled: boolean) => void;
83
+ };
84
+ declare const Switch: ({ defaultEnable, variant, disabled, onChange, ...rest }: SwitchProps) => react_jsx_runtime.JSX.Element;
85
+
86
+ declare const textBlockStyles: (props?: ({
87
+ type?: "dark" | "light" | null | undefined;
88
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
89
+
90
+ type VariantContent = "primary" | "secondary" | "tertiary";
91
+ type TextBlockProps = VariantProps<typeof textBlockStyles> & {
92
+ title?: string;
93
+ variantContent: VariantContent;
94
+ } & React.HTMLAttributes<HTMLDivElement> & BoxProps;
95
+ declare const TextBlock: ({ title, children, variant, variantContent, ...rest }: TextBlockProps) => react_jsx_runtime.JSX.Element;
96
+
97
+ declare const typographyStyles: (props?: ({
98
+ variant?: "primary" | "secondary" | "tertiary" | null | undefined;
99
+ size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
100
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
101
+
102
+ type TypographyProps = VariantProps<typeof typographyStyles> & {
103
+ children?: React.ReactNode;
104
+ element?: keyof JSX.IntrinsicElements;
105
+ } & JSX.IntrinsicElements['p'];
106
+ declare const Typography: ({ variant, size, className, children, element, ...rest }: TypographyProps) => react_jsx_runtime.JSX.Element;
107
+
108
+ export { Avatar, type AvatarProps, Box, type BoxProps, Button, type ButtonProps, Divider, type DividerProps, Dropdown, type DropdownProps, Input, type InputProps, Link, type LinkProps, Modal, type ModalProps, Notice, type NoticeProps, Switch, type SwitchProps, TextBlock, type TextBlockProps, Typography, type TypographyProps };
package/dist/index.js ADDED
@@ -0,0 +1,24 @@
1
+ 'use strict';var classVarianceAuthority=require('class-variance-authority'),L=require('next/image'),jsxRuntime=require('react/jsx-runtime'),outline=require('@heroicons/react/24/outline'),react$1=require('@headlessui/react'),react=require('react'),solid=require('@heroicons/react/24/solid');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var L__default=/*#__PURE__*/_interopDefault(L);var F=classVarianceAuthority.cva("rounded-full flex items-center justify-center bg-gray-100",{variants:{size:{xs:"w-6 h-6",sm:"w-8 h-8",md:"w-10 h-10",lg:"w-12 h-12"}},defaultVariants:{size:"md"}});var E=({src:t="",alt:e=""})=>jsxRuntime.jsx(L__default.default,{width:100,height:100,src:t,alt:e,className:"rounded-full"});var z=()=>jsxRuntime.jsx(outline.UserIcon,{className:"w-1/2"});var V=({size:t="md",srcImageIcon:e,altImageIcon:r})=>{let a=e?jsxRuntime.jsx(E,{src:e,alt:r}):jsxRuntime.jsx(z,{});return jsxRuntime.jsx("div",{className:`${F({size:t})}`,children:a})},$=V;var N=classVarianceAuthority.cva("px-lg py-sm",{variants:{rounded:{true:"rounded-md",false:"none"},border:{true:"border border-gray-100",false:"none"},variant:{default:"bg-disabled text-text-primary",dark:"bg-dark text-red-500",outlined:"border border-gray-100 bg-transparent text-text-primary"}}});var O=({rounded:t=false,variant:e="default",children:r,className:a,...o})=>jsxRuntime.jsx("div",{...o,className:`${N({variant:e,rounded:t})}`,children:r}),h=O;var U=({variant:t="primary",children:e,className:r,disabled:a,...o})=>{function n(d,i){let l="bg-disabled text-text-disabled";switch(d){case "primary":return i?l:"bg-primary text-white";case "secondary":return i?l:"bg-quaternary text-secondary";case "tertiary":return i?"bg-transarent text-text-disabled":"bg-transparent text-primary";}}return jsxRuntime.jsx("button",{className:`rounded-md px-lg py-2xs ${n(t,a)} ${r}`,...o,children:e})},J=U;var f=classVarianceAuthority.cva("",{variants:{hasChildren:{true:"w-1/3",false:"w-1/2"},background:{dark:"bg-dark",light:"bg-light"},size:{xs:"h-0.5",sm:"h-1",md:"h-1.5"}},defaultVariants:{hasChildren:false,background:"light",size:"md"}});var G=({width:t,size:e,children:r,background:a})=>{let o=!!r;return jsxRuntime.jsxs("div",{className:`flex items-center justify-center ${t}`,children:[jsxRuntime.jsx("div",{className:`${f({hasChildren:o,background:a,size:e})}`}),r&&jsxRuntime.jsx("div",{className:"px-xs",children:r}),jsxRuntime.jsx("div",{className:`${f({hasChildren:o,background:a,size:e})}`})]})},K=G;var et=({list:t,...e})=>{let[r,a]=react.useState(t[0]),[o,n]=react.useState(""),d=o===""?t:t.filter(i=>i.toLowerCase().includes(o.toLowerCase()));return jsxRuntime.jsxs(react$1.Combobox,{value:r,onChange:a,onClose:()=>n(""),children:[jsxRuntime.jsxs("div",{className:"relative",children:[jsxRuntime.jsx(react$1.ComboboxInput,{"aria-label":"Assignee",className:`\r
2
+ w-full rounded-lg border border-gray-300 bg-white\r
3
+ py-2.5 pl-3 pr-10 text-sm text-gray-900\r
4
+ shadow-sm\r
5
+ outline-none\r
6
+ transition\r
7
+ focus:border-blue-500\r
8
+ focus:ring-2 focus:ring-blue-500/20\r
9
+ `,onChange:i=>n(i.target.value),onFocus:i=>n(i.target.value)}),jsxRuntime.jsx("div",{className:"pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-400",children:"\u25BE"})]}),jsxRuntime.jsx(react$1.ComboboxOptions,{anchor:"bottom",className:`\r
10
+ absolute z-50 mt-2 max-h-60 w-full overflow-auto\r
11
+ rounded-lg border border-gray-200 bg-white\r
12
+ p-1 shadow-lg\r
13
+ transition\r
14
+ empty:invisible\r
15
+ `,children:d.map((i,l)=>jsxRuntime.jsx(react$1.ComboboxOption,{value:i,className:`\r
16
+ cursor-pointer select-none rounded-md px-3 py-2 text-sm\r
17
+ text-gray-700\r
18
+ transition\r
19
+ data-[focus]:bg-blue-500\r
20
+ data-[focus]:text-white\r
21
+ data-[selected]:font-medium\r
22
+ `,children:i},l))})]})},rt=et;var at=t=>t.multiline?jsxRuntime.jsx("textarea",{...t}):jsxRuntime.jsx("input",{...t}),ot=({className:t,label:e,...r})=>jsxRuntime.jsxs("div",{className:"relative",children:[e&&jsxRuntime.jsx("label",{className:"absolute pt-4xs pl-xs text-xs",children:e}),jsxRuntime.jsx(at,{className:`bg-dark text-gray disabled:bg-disabled disabled:border-2 disabled:border-disabled rounded-md p-xs
23
+ ${e&&"pt-sm"}
24
+ ${t}`,...r})]}),it=ot;var st=({children:t,href:e,disabled:r,className:a,...o})=>jsxRuntime.jsx("a",{href:r?void 0:e,"aria-disabled":r,className:`text-primary aria-disabled:text-text-disabled ${a}`,...o,children:t}),lt=st;var pt=({children:t,isOpen:e,onClose:r,title:a})=>jsxRuntime.jsx(react$1.Transition,{appear:true,show:e,as:react.Fragment,children:jsxRuntime.jsxs(react$1.Dialog,{as:"div",className:"relative z-10",onClose:r,children:[jsxRuntime.jsx(react$1.Transition.Child,{as:react.Fragment,enter:"ease-out duration-300",enterFrom:"opacity-0",enterTo:"opacity-100",leave:"ease-in duration-200",leaveFrom:"opacity-100",leaveTo:"opacity-0",children:jsxRuntime.jsx("div",{className:"fixed inset-0 bg-black opacity-25"})}),jsxRuntime.jsx("div",{className:"fixed inset-0 overflow-y-auto",children:jsxRuntime.jsx("div",{className:"flex min-h-full items-center justify-center p-4",children:jsxRuntime.jsx(react$1.Transition.Child,{as:react.Fragment,enter:"ease-out duration-300",enterFrom:"opacity-0 scale-95",enterTo:"opacity-100 scale-100",leave:"ease-in duration-200",leaveFrom:"opacity-100 scale-100",leaveTo:"opacity-0",children:jsxRuntime.jsxs(react$1.Dialog.Panel,{className:"flex flex-col gap-5 max-w-3xl bg-white transform overflow-hidden rounded-lg p-7 transition-all",children:[jsxRuntime.jsxs("div",{className:"flex items-center justify-between",children:[jsxRuntime.jsx(react$1.Dialog.Title,{as:"h3",className:"text-lg font-semibold",children:a}),jsxRuntime.jsx("button",{onClick:r,children:jsxRuntime.jsx(outline.XMarkIcon,{className:"w-5 h-5 text-disabled"})})]}),t]})})})})]})}),gt=pt;var C=classVarianceAuthority.cva("flex items-center justify-between rounded-md w-1/2 px-sm py-xs",{variants:{variant:{warning:"bg-warning",error:"bg-error",default:"bg-disabled"}},defaultVariants:{variant:"default"}});var I=classVarianceAuthority.cva("text-text-primary text-sm font-normal",{variants:{variant:{primary:"text-text-primary",secondary:"text-text-secondary",tertiary:"text-text-tertiary"},size:{xs:"text-xs",sm:"text-sm",md:"text-md",lg:"text-lg",xl:"text-xl"}},defaultVariants:{variant:"primary",size:"md"}});var ut=({variant:t,size:e,className:r,children:a,element:o="p",...n})=>jsxRuntime.jsx(o,{className:`${I({variant:t,size:e})} ${r}`,...n,children:a}),c=ut;var A=({variant:t})=>jsxRuntime.jsx(solid.ExclamationCircleIcon,{width:32,height:32,color:{warning:"#F6D523",error:"#FF3030",default:""}[t]});var yt=({variant:t="warning",notice:e,noticeTitle:r})=>jsxRuntime.jsxs("div",{className:`${C({variant:t})}`,children:[jsxRuntime.jsxs("section",{className:"flex items-center space-x-2",children:[t!=="default"&&jsxRuntime.jsx(A,{variant:t!=null?t:"warning"}),jsxRuntime.jsxs("div",{className:"flex flex-col",children:[r&&jsxRuntime.jsx(c,{element:"h1",variant:"primary",size:"xl",children:r}),e&&jsxRuntime.jsx(c,{element:"p",variant:"primary",children:e})]})]}),jsxRuntime.jsx(solid.XMarkIcon,{width:32,height:32})]}),bt=yt;var Et=({defaultEnable:t,variant:e="common",disabled:r,onChange:a,...o})=>{let[n,d]=react.useState(t);return jsxRuntime.jsx(react$1.Switch,{checked:n,onChange:()=>{let l=!n;d(l),a==null||a(l);},disabled:r,...o,children:e==="common"?jsxRuntime.jsx("span",{}):jsxRuntime.jsx("span",{children:n?jsxRuntime.jsx(outline.CheckIcon,{"aria-disabled":r}):jsxRuntime.jsx(outline.XMarkIcon,{"aria-disabled":r})})})},zt=Et;var Nt=({title:t,children:e,variant:r,variantContent:a,...o})=>jsxRuntime.jsx(h,{variant:r,...o,children:jsxRuntime.jsxs("div",{className:"flex flex-col space-y-2",children:[t&&jsxRuntime.jsx(c,{element:"h1",variant:a,size:"xl",children:t}),e&&jsxRuntime.jsx(c,{element:"p",variant:a,children:e})]})}),St=Nt;exports.Avatar=$;exports.Box=h;exports.Button=J;exports.Divider=K;exports.Dropdown=rt;exports.Input=it;exports.Link=lt;exports.Modal=gt;exports.Notice=bt;exports.Switch=zt;exports.TextBlock=St;exports.Typography=c;
package/dist/index.mjs ADDED
@@ -0,0 +1,24 @@
1
+ import {cva}from'class-variance-authority';import L from'next/image';import {jsx,jsxs}from'react/jsx-runtime';import {XMarkIcon,CheckIcon,UserIcon}from'@heroicons/react/24/outline';import {Combobox,ComboboxInput,ComboboxOptions,ComboboxOption,Transition,Dialog,Switch}from'@headlessui/react';import {useState,Fragment}from'react';import {XMarkIcon as XMarkIcon$1,ExclamationCircleIcon}from'@heroicons/react/24/solid';var F=cva("rounded-full flex items-center justify-center bg-gray-100",{variants:{size:{xs:"w-6 h-6",sm:"w-8 h-8",md:"w-10 h-10",lg:"w-12 h-12"}},defaultVariants:{size:"md"}});var E=({src:t="",alt:e=""})=>jsx(L,{width:100,height:100,src:t,alt:e,className:"rounded-full"});var z=()=>jsx(UserIcon,{className:"w-1/2"});var V=({size:t="md",srcImageIcon:e,altImageIcon:r})=>{let a=e?jsx(E,{src:e,alt:r}):jsx(z,{});return jsx("div",{className:`${F({size:t})}`,children:a})},$=V;var N=cva("px-lg py-sm",{variants:{rounded:{true:"rounded-md",false:"none"},border:{true:"border border-gray-100",false:"none"},variant:{default:"bg-disabled text-text-primary",dark:"bg-dark text-red-500",outlined:"border border-gray-100 bg-transparent text-text-primary"}}});var O=({rounded:t=false,variant:e="default",children:r,className:a,...o})=>jsx("div",{...o,className:`${N({variant:e,rounded:t})}`,children:r}),h=O;var U=({variant:t="primary",children:e,className:r,disabled:a,...o})=>{function n(d,i){let l="bg-disabled text-text-disabled";switch(d){case "primary":return i?l:"bg-primary text-white";case "secondary":return i?l:"bg-quaternary text-secondary";case "tertiary":return i?"bg-transarent text-text-disabled":"bg-transparent text-primary";}}return jsx("button",{className:`rounded-md px-lg py-2xs ${n(t,a)} ${r}`,...o,children:e})},J=U;var f=cva("",{variants:{hasChildren:{true:"w-1/3",false:"w-1/2"},background:{dark:"bg-dark",light:"bg-light"},size:{xs:"h-0.5",sm:"h-1",md:"h-1.5"}},defaultVariants:{hasChildren:false,background:"light",size:"md"}});var G=({width:t,size:e,children:r,background:a})=>{let o=!!r;return jsxs("div",{className:`flex items-center justify-center ${t}`,children:[jsx("div",{className:`${f({hasChildren:o,background:a,size:e})}`}),r&&jsx("div",{className:"px-xs",children:r}),jsx("div",{className:`${f({hasChildren:o,background:a,size:e})}`})]})},K=G;var et=({list:t,...e})=>{let[r,a]=useState(t[0]),[o,n]=useState(""),d=o===""?t:t.filter(i=>i.toLowerCase().includes(o.toLowerCase()));return jsxs(Combobox,{value:r,onChange:a,onClose:()=>n(""),children:[jsxs("div",{className:"relative",children:[jsx(ComboboxInput,{"aria-label":"Assignee",className:`\r
2
+ w-full rounded-lg border border-gray-300 bg-white\r
3
+ py-2.5 pl-3 pr-10 text-sm text-gray-900\r
4
+ shadow-sm\r
5
+ outline-none\r
6
+ transition\r
7
+ focus:border-blue-500\r
8
+ focus:ring-2 focus:ring-blue-500/20\r
9
+ `,onChange:i=>n(i.target.value),onFocus:i=>n(i.target.value)}),jsx("div",{className:"pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-400",children:"\u25BE"})]}),jsx(ComboboxOptions,{anchor:"bottom",className:`\r
10
+ absolute z-50 mt-2 max-h-60 w-full overflow-auto\r
11
+ rounded-lg border border-gray-200 bg-white\r
12
+ p-1 shadow-lg\r
13
+ transition\r
14
+ empty:invisible\r
15
+ `,children:d.map((i,l)=>jsx(ComboboxOption,{value:i,className:`\r
16
+ cursor-pointer select-none rounded-md px-3 py-2 text-sm\r
17
+ text-gray-700\r
18
+ transition\r
19
+ data-[focus]:bg-blue-500\r
20
+ data-[focus]:text-white\r
21
+ data-[selected]:font-medium\r
22
+ `,children:i},l))})]})},rt=et;var at=t=>t.multiline?jsx("textarea",{...t}):jsx("input",{...t}),ot=({className:t,label:e,...r})=>jsxs("div",{className:"relative",children:[e&&jsx("label",{className:"absolute pt-4xs pl-xs text-xs",children:e}),jsx(at,{className:`bg-dark text-gray disabled:bg-disabled disabled:border-2 disabled:border-disabled rounded-md p-xs
23
+ ${e&&"pt-sm"}
24
+ ${t}`,...r})]}),it=ot;var st=({children:t,href:e,disabled:r,className:a,...o})=>jsx("a",{href:r?void 0:e,"aria-disabled":r,className:`text-primary aria-disabled:text-text-disabled ${a}`,...o,children:t}),lt=st;var pt=({children:t,isOpen:e,onClose:r,title:a})=>jsx(Transition,{appear:true,show:e,as:Fragment,children:jsxs(Dialog,{as:"div",className:"relative z-10",onClose:r,children:[jsx(Transition.Child,{as:Fragment,enter:"ease-out duration-300",enterFrom:"opacity-0",enterTo:"opacity-100",leave:"ease-in duration-200",leaveFrom:"opacity-100",leaveTo:"opacity-0",children:jsx("div",{className:"fixed inset-0 bg-black opacity-25"})}),jsx("div",{className:"fixed inset-0 overflow-y-auto",children:jsx("div",{className:"flex min-h-full items-center justify-center p-4",children:jsx(Transition.Child,{as:Fragment,enter:"ease-out duration-300",enterFrom:"opacity-0 scale-95",enterTo:"opacity-100 scale-100",leave:"ease-in duration-200",leaveFrom:"opacity-100 scale-100",leaveTo:"opacity-0",children:jsxs(Dialog.Panel,{className:"flex flex-col gap-5 max-w-3xl bg-white transform overflow-hidden rounded-lg p-7 transition-all",children:[jsxs("div",{className:"flex items-center justify-between",children:[jsx(Dialog.Title,{as:"h3",className:"text-lg font-semibold",children:a}),jsx("button",{onClick:r,children:jsx(XMarkIcon,{className:"w-5 h-5 text-disabled"})})]}),t]})})})})]})}),gt=pt;var C=cva("flex items-center justify-between rounded-md w-1/2 px-sm py-xs",{variants:{variant:{warning:"bg-warning",error:"bg-error",default:"bg-disabled"}},defaultVariants:{variant:"default"}});var I=cva("text-text-primary text-sm font-normal",{variants:{variant:{primary:"text-text-primary",secondary:"text-text-secondary",tertiary:"text-text-tertiary"},size:{xs:"text-xs",sm:"text-sm",md:"text-md",lg:"text-lg",xl:"text-xl"}},defaultVariants:{variant:"primary",size:"md"}});var ut=({variant:t,size:e,className:r,children:a,element:o="p",...n})=>jsx(o,{className:`${I({variant:t,size:e})} ${r}`,...n,children:a}),c=ut;var A=({variant:t})=>jsx(ExclamationCircleIcon,{width:32,height:32,color:{warning:"#F6D523",error:"#FF3030",default:""}[t]});var yt=({variant:t="warning",notice:e,noticeTitle:r})=>jsxs("div",{className:`${C({variant:t})}`,children:[jsxs("section",{className:"flex items-center space-x-2",children:[t!=="default"&&jsx(A,{variant:t!=null?t:"warning"}),jsxs("div",{className:"flex flex-col",children:[r&&jsx(c,{element:"h1",variant:"primary",size:"xl",children:r}),e&&jsx(c,{element:"p",variant:"primary",children:e})]})]}),jsx(XMarkIcon$1,{width:32,height:32})]}),bt=yt;var Et=({defaultEnable:t,variant:e="common",disabled:r,onChange:a,...o})=>{let[n,d]=useState(t);return jsx(Switch,{checked:n,onChange:()=>{let l=!n;d(l),a==null||a(l);},disabled:r,...o,children:e==="common"?jsx("span",{}):jsx("span",{children:n?jsx(CheckIcon,{"aria-disabled":r}):jsx(XMarkIcon,{"aria-disabled":r})})})},zt=Et;var Nt=({title:t,children:e,variant:r,variantContent:a,...o})=>jsx(h,{variant:r,...o,children:jsxs("div",{className:"flex flex-col space-y-2",children:[t&&jsx(c,{element:"h1",variant:a,size:"xl",children:t}),e&&jsx(c,{element:"p",variant:a,children:e})]})}),St=Nt;export{$ as Avatar,h as Box,J as Button,K as Divider,rt as Dropdown,it as Input,lt as Link,gt as Modal,bt as Notice,zt as Switch,St as TextBlock,c as Typography};
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "ds-learning",
3
- "version": "0.1.3",
3
+ "version": "0.1.5",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "dev": "next dev",
7
- "build": "tsup src/index.ts --format esm,cjs --dts",
7
+ "build": "tsup src/components/index.ts --format esm,cjs --dts",
8
8
  "start": "next start",
9
9
  "lint": "eslint",
10
10
  "storybook": "storybook dev -p 6006",
@@ -17,7 +17,8 @@
17
17
  "class-variance-authority": "^0.7.1",
18
18
  "next": "16.1.6",
19
19
  "react": "19.2.3",
20
- "react-dom": "19.2.3"
20
+ "react-dom": "19.2.3",
21
+ "tsup": "^8.5.1"
21
22
  },
22
23
  "devDependencies": {
23
24
  "@chromatic-com/storybook": "^5.0.1",
@@ -44,12 +45,11 @@
44
45
  "vitest": "^4.0.18"
45
46
  },
46
47
  "description": "This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).",
47
- "main": "./src/components/index.ts",
48
- "types": "./src/components/index.ts",
48
+ "main": "dist/index.js",
49
+ "types": "dist/index.js",
49
50
  "author": "",
50
51
  "license": "ISC",
51
52
  "files": [
52
- "./src/components/*",
53
- "./src/app/globals.css"
53
+ "dist"
54
54
  ]
55
55
  }
@@ -1,154 +0,0 @@
1
- @import "tailwindcss";
2
-
3
- @layer base {
4
- :root {
5
- /* Colors */
6
- --color-primary: #2D5BFF;
7
- --color-secondary: #6284FD;
8
- --color-tertiary: #96ADFF;
9
- --color-quaternary: #ECF0FF;
10
-
11
- --color-warning: #FFEF98;
12
- --color-error: #FFC0C0;
13
- --color-sucess: #1bcf51;
14
-
15
- --color-hover: #1B4AF0;
16
- --color-click: #002ED0;
17
- --color-icon: #7C7B7B;
18
- --color-outline: #D7D7D7;
19
- --color-divider: #EDEDED;
20
-
21
- --color-bg-light: #FFFFFF;
22
- --color-bg-dark: #201f1f;
23
- --color-bg-disabled: #EFEFEF;
24
-
25
- --color-text-primary: #181818;
26
- --color-text-secondary: #FFFFFF;
27
- --color-text-tertiary: #747474;
28
- --color-text-disabled: #8A8A8A;
29
-
30
- /* Shadows */
31
- --shadow-sm: 0px 0px 10px rgba(92, 92, 92, 15%);
32
- --shadow-md: 0px 0px 20px rgba(92, 92, 92, 20%);
33
- --shadow-lg: 0px 0px 30px rgba(92, 92, 92, 25%);
34
- --shadow-focus: 0px 0px 0px 2px #643296;
35
- --shadow-outline: 0px 0px 0px 2px #E8E8E8;
36
- --shadow-button-focus: 0px 0px 0px 2px #AF4BFE;
37
-
38
- /* Blur */
39
- --blur: 4px;
40
-
41
- /* Spacing */
42
- --spacing-none: 0px; /* 0px */
43
- --spacing-4xs: 4px; /* 4px */
44
- --spacing-2xs: 12px; /* 12px */
45
- --spacing-xs: 16px; /* 16px */
46
- --spacing-sm: 20px; /* 20px */
47
- --spacing-md: 24px; /* 24px */
48
- --spacing-lg: 32px; /* 32px */
49
- --spacing-xl: 40px; /* 40px */
50
- --spacing-2xl: 48px; /* 48px */
51
- --spacing-4xl: 56px; /* 56px */
52
-
53
- /* Border Radius */
54
- --radius-none: 0px;
55
- --radius-sm: 4px;
56
- --radius-md: 8px;
57
- --radius-lg: 16px;
58
-
59
- /* Font Sizes */
60
- --text-xs: 12px;
61
- --text-sm: 14px;
62
- --text-md: 16px;
63
- --text-lg: 18px;
64
- --text-xl: 20px;
65
- }
66
-
67
- .theme-violet {
68
- --color-primary: #AF4BFE;
69
- --color-secondary: #BE74F9;
70
- --color-tertiary: #E2BDFF;
71
- --color-quaternary: #F5E8FF;
72
- }
73
- }
74
-
75
- /* @layer components {
76
- .btn {
77
- @apply bg-primary;
78
- }
79
-
80
- .btn[data-selected="true"] {
81
- @apply bg-tertiary;
82
- }
83
-
84
- .btn[data-selected="true"][data-variant="secondary"] {
85
- @apply bg-red-500;
86
- }
87
- } */
88
-
89
- @theme {
90
- /* Colors */
91
- --color-primary: var(--color-primary);
92
- --color-secondary: var(--color-secondary);
93
- --color-tertiary: var(--color-tertiary);
94
- --color-quaternary: var(--color-quaternary);
95
-
96
- --color-disabled: var(--color-bg-disabled);
97
-
98
- --color-text-primary: var(--color-text-primary);
99
- --color-text-secondary: var(--color-text-secondary);
100
- --color-text-tertiary: var(--color-text-tertiary);
101
- --color-text-disabled: var(--color-text-disabled);
102
-
103
- --color-dark: var(--color-bg-dark);
104
- --color-light: var(--color-bg-light);
105
-
106
- --color-warning: var(--color-warning);
107
- --color-error: var(--color-error);
108
- --color-sucess: var(--color-success);
109
-
110
- /* Shadows */
111
- --shadow-sm: var(--shadow-sm);
112
- --shadow-md: var(--shadow-md);
113
- --shadow-lg: var(--shadow-lg);
114
- --shadow-focus: var(--shadow-focus);
115
- --shadow-outline: var(--shadow-outline);
116
- --shadow-button-focus: var(--shadow-button-focus);
117
-
118
- /* Blur */
119
- --blur: var(--blur);
120
-
121
- /* Breakpoints */
122
- --breakpoint-tablet: 1024px;
123
- --breakpoint-desktop: 1440px;
124
- --breakpoint-tv: 1920px;
125
-
126
- /* Spacing */
127
- --spacing-none: var(--spacing-none); /* 0px */
128
- --spacing-4xs: var(--spacing-4xs); /* 4px */
129
- --spacing-2xs: var(--spacing-2xs); /* 12px */
130
- --spacing-xs: var(--spacing-xs); /* 16px */
131
- --spacing-sm: var(--spacing-sm); /* 20px */
132
- --spacing-md: var(--spacing-md); /* 24px */
133
- --spacing-lg: var(--spacing-lg); /* 32px */
134
- --spacing-xl: var(--spacing-xl); /* 40px */
135
- --spacing-2xl: var(--spacing-2xl); /* 48px */
136
- --spacing-4xl: var(--spacing-4xl); /* 56px */
137
-
138
- /* Border Radius */
139
- --radius-none: var(--border-radius-none);
140
- --radius-sm: var(--border-radius-sm);
141
- --radius-md: var(--border-radius-md);
142
- --radius-lg: var(--border-radius-lg);
143
-
144
- /* Font Sizes */
145
- --text-xs: var(--text-xs);
146
- --text-sm: var(--text-sm);
147
- --text-md: var(--text-md);
148
- --text-lg: var(--text-lg);
149
- --text-xl: var(--text-xl);
150
- }
151
-
152
- * {
153
- font-family: var(--font-poppins);
154
- }
@@ -1,16 +0,0 @@
1
- import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
2
- import * as AvatarStories from './Avatar.stories'
3
-
4
- <Meta of={AvatarStories} />
5
-
6
- # Avatar
7
- Este é um componente de avatar.
8
-
9
- ### Default
10
- <Canvas of={AvatarStories.Default} />
11
- ### Com Imagem
12
- <Canvas of={AvatarStories.WithImage} />
13
-
14
- ### Documentacao iterativa
15
- <Canvas of={AvatarStories.Default} />
16
- <Controls of={AvatarStories.Default} />
@@ -1,30 +0,0 @@
1
- import { Meta, StoryObj } from '@storybook/nextjs';
2
- import { Avatar, AvatarProps } from './Avatar'
3
-
4
- const meta: Meta<AvatarProps> = {
5
- title: 'DesignSystem/Molecules/Avatar',
6
- component: Avatar,
7
- args: {},
8
- argTypes: {
9
- size: {
10
- control: { type: 'select' },
11
- options: ['xs', 'sm', 'md', 'lg']
12
- }
13
- }
14
- }
15
-
16
- export default meta;
17
-
18
- export const Default: StoryObj<AvatarProps> = {
19
- args: {
20
- size: 'lg',
21
- }
22
- }
23
-
24
- export const WithImage: StoryObj<AvatarProps> = {
25
- args: {
26
- size: 'lg',
27
- srcImageIcon: 'https://placehold.co/400x400.png',
28
- altImageIcon: 'Avatar Image',
29
- }
30
- }
@@ -1,21 +0,0 @@
1
- import { VariantProps } from "class-variance-authority";
2
- import { avatarStyles } from "./styles/avatar.styles";
3
- import { AvatarImage } from "./variants/AvatarImage";
4
- import { AvatarIcon } from "./variants/AvatarIcon";
5
-
6
- export type AvatarProps = VariantProps<typeof avatarStyles> & {
7
- srcImageIcon?: string;
8
- altImageIcon?: string;
9
- } & React.HTMLAttributes<HTMLDivElement>;
10
-
11
- const Avatar = ({ size = "md", srcImageIcon, altImageIcon }: AvatarProps) => {
12
- const avatarContent = srcImageIcon ? <AvatarImage src={srcImageIcon} alt={altImageIcon} /> : <AvatarIcon />;
13
-
14
- return (
15
- <div className={`${avatarStyles({ size: size })}`}>
16
- {avatarContent}
17
- </div>
18
- );
19
- };
20
-
21
- export { Avatar };
@@ -1,15 +0,0 @@
1
- import { cva } from "class-variance-authority";
2
-
3
- export const avatarStyles = cva('rounded-full flex items-center justify-center bg-gray-100', {
4
- variants: {
5
- size: {
6
- xs: 'w-6 h-6',
7
- sm: 'w-8 h-8',
8
- md: 'w-10 h-10',
9
- lg: 'w-12 h-12',
10
- },
11
- },
12
- defaultVariants: {
13
- size: 'md'
14
- }
15
- })
@@ -1,9 +0,0 @@
1
- import { UserIcon } from '@heroicons/react/24/outline'
2
-
3
- const AvatarIcon = () => {
4
- return (
5
- <UserIcon className='w-1/2' />
6
- )
7
- }
8
-
9
- export { AvatarIcon }
@@ -1,12 +0,0 @@
1
- import Image from "next/image";
2
-
3
- export type AvatarImageProps = {
4
- src?: string;
5
- alt?: string;
6
- };
7
-
8
- const AvatarImage = ({ src = "", alt = "" }: AvatarImageProps) => {
9
- return <Image width={100} height={100} src={src} alt={alt} className="rounded-full" />;
10
- };
11
-
12
- export { AvatarImage };