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.
- package/dist/index.css +2 -0
- package/dist/index.d.mts +108 -0
- package/dist/index.d.ts +108 -0
- package/dist/index.js +24 -0
- package/dist/index.mjs +24 -0
- package/package.json +7 -7
- package/src/app/globals.css +0 -154
- package/src/components/Avatar/Avatar.mdx +0 -16
- package/src/components/Avatar/Avatar.stories.ts +0 -30
- package/src/components/Avatar/Avatar.tsx +0 -21
- package/src/components/Avatar/styles/avatar.styles.ts +0 -15
- package/src/components/Avatar/variants/AvatarIcon.tsx +0 -9
- package/src/components/Avatar/variants/AvatarImage.tsx +0 -12
- package/src/components/Box/Box.mdx +0 -16
- package/src/components/Box/Box.stories.ts +0 -36
- package/src/components/Box/Box.tsx +0 -18
- package/src/components/Box/styles/box.styles.ts +0 -19
- package/src/components/Button/Button.mdx +0 -30
- package/src/components/Button/Button.stories.ts +0 -88
- package/src/components/Button/Button.tsx +0 -31
- package/src/components/Divider/Divider.mdx +0 -16
- package/src/components/Divider/Divider.stories.ts +0 -23
- package/src/components/Divider/Divider.tsx +0 -25
- package/src/components/Divider/styles/divider.styles.ts +0 -25
- package/src/components/Dropdown/Dropdown.stories.ts +0 -22
- package/src/components/Dropdown/Dropdrown.tsx +0 -88
- package/src/components/Input/Input.mdx +0 -28
- package/src/components/Input/Input.stories.ts +0 -70
- package/src/components/Input/Input.tsx +0 -29
- package/src/components/Link/Link.mdx +0 -17
- package/src/components/Link/Link.stories.ts +0 -35
- package/src/components/Link/Link.tsx +0 -14
- package/src/components/Modal/Modal.mdx +0 -10
- package/src/components/Modal/Modal.stories.tsx +0 -46
- package/src/components/Modal/Modal.tsx +0 -63
- package/src/components/Molecules.mdx +0 -3
- package/src/components/Notice/ExclamationIcon.tsx +0 -23
- package/src/components/Notice/Notice.mdx +0 -20
- package/src/components/Notice/Notice.stories.ts +0 -40
- package/src/components/Notice/Notice.tsx +0 -41
- package/src/components/Notice/styles/notice.styles.ts +0 -14
- package/src/components/Switch/Switch.tsx +0 -53
- package/src/components/Switch/styles/switch.styles.ts +0 -40
- package/src/components/TextBlock/TextBlock.mdx +0 -18
- package/src/components/TextBlock/TextBlock.stories.ts +0 -48
- package/src/components/TextBlock/TextBlock.tsx +0 -39
- package/src/components/TextBlock/styles/styles.text-block.ts +0 -10
- package/src/components/Typography/Typography.mdx +0 -18
- package/src/components/Typography/Typography.stories.ts +0 -35
- package/src/components/Typography/Typography.tsx +0 -28
- package/src/components/Typography/styles/typography.styles.ts +0 -22
- 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 */
|
package/dist/index.d.mts
ADDED
|
@@ -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.d.ts
ADDED
|
@@ -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
|
+
"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": "
|
|
48
|
-
"types": "
|
|
48
|
+
"main": "dist/index.js",
|
|
49
|
+
"types": "dist/index.js",
|
|
49
50
|
"author": "",
|
|
50
51
|
"license": "ISC",
|
|
51
52
|
"files": [
|
|
52
|
-
"
|
|
53
|
-
"./src/app/globals.css"
|
|
53
|
+
"dist"
|
|
54
54
|
]
|
|
55
55
|
}
|
package/src/app/globals.css
DELETED
|
@@ -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,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 };
|