@itilite/lumina-ui 1.0.1-beta.1 → 1.0.1-beta.3

package/README.md

@@ -22,6 +22,43 @@ npm install react antd
 
 ## Usage
 
+### Prerequisites
+
+This component library requires Tailwind CSS to be set up in your consuming application. The components use Tailwind utility classes and will not be styled without it.
+
+#### Setting up Tailwind CSS in your app
+
+1. Install Tailwind CSS:
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init
+```
+
+2. Configure Tailwind to scan your app (you don't need to scan the component library):
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    // No need to scan node_modules - component utilities are pre-compiled
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
+3. Add Tailwind directives to your main CSS file:
+```css
+/* app.css or index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+**Important:** The component library includes only the Tailwind utilities it uses. Your app must provide the base/reset styles via `@tailwind base`.
+
 ### Importing Components
 
 You can import components individually (recommended for tree-shaking):
@@ -29,21 +66,20 @@ You can import components individually (recommended for tree-shaking):
 ```tsx
 import { Button } from '@itilite/lumina-ui/button';
 import { Checkbox } from '@itilite/lumina-ui/checkbox';
-import '@itilite/lumina-ui/styles.css';
+import '@itilite/lumina-ui/styles.css'; // Import component styles
 ```
 
 Or import all components from the main entry point:
 
 ```tsx
 import { Button, Checkbox } from '@itilite/lumina-ui';
-import '@itilite/lumina-ui/styles.css';
+import '@itilite/lumina-ui/styles.css'; // Import component styles
 ```
 
 ### Button Component
 
 ```tsx
 import { Button } from '@itilite/lumina-ui/button';
-import '@itilite/lumina-ui/styles.css';
 
 function App() {
   return (
@@ -58,7 +94,6 @@ function App() {
 
 ```tsx
 import { Checkbox } from '@itilite/lumina-ui/checkbox';
-import '@itilite/lumina-ui/styles.css';
 
 function App() {
   return (
@@ -69,13 +104,11 @@ function App() {
 }
 ```
 
-## Styling
+## Requirements
 
-The package exports a `styles.css` file that includes all component styles. Import it in your application:
-
-```tsx
-import '@itilite/lumina-ui/styles.css';
-```
+- **Tailwind CSS**: This library requires Tailwind CSS to be configured in your consuming application
+- **React**: 18+
+- **Ant Design**: 5.13.1
 
 ## Available Components
 

package/dist/styles.css

@@ -1,7 +1,4 @@
-/* src/styles.css */
-*,
-::before,
-::after {
+*, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -11,19 +8,19 @@
   --tw-skew-y: 0;
   --tw-scale-x: 1;
   --tw-scale-y: 1;
-  --tw-pan-x: ;
-  --tw-pan-y: ;
-  --tw-pinch-zoom: ;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
   --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position: ;
-  --tw-gradient-via-position: ;
-  --tw-gradient-to-position: ;
-  --tw-ordinal: ;
-  --tw-slashed-zero: ;
-  --tw-numeric-figure: ;
-  --tw-numeric-spacing: ;
-  --tw-numeric-fraction: ;
-  --tw-ring-inset: ;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
   --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -31,29 +28,30 @@
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
-  --tw-blur: ;
-  --tw-brightness: ;
-  --tw-contrast: ;
-  --tw-grayscale: ;
-  --tw-hue-rotate: ;
-  --tw-invert: ;
-  --tw-saturate: ;
-  --tw-sepia: ;
-  --tw-drop-shadow: ;
-  --tw-backdrop-blur: ;
-  --tw-backdrop-brightness: ;
-  --tw-backdrop-contrast: ;
-  --tw-backdrop-grayscale: ;
-  --tw-backdrop-hue-rotate: ;
-  --tw-backdrop-invert: ;
-  --tw-backdrop-opacity: ;
-  --tw-backdrop-saturate: ;
-  --tw-backdrop-sepia: ;
-  --tw-contain-size: ;
-  --tw-contain-layout: ;
-  --tw-contain-paint: ;
-  --tw-contain-style: ;
-}
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
 ::backdrop {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -64,19 +62,19 @@
   --tw-skew-y: 0;
   --tw-scale-x: 1;
   --tw-scale-y: 1;
-  --tw-pan-x: ;
-  --tw-pan-y: ;
-  --tw-pinch-zoom: ;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
   --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position: ;
-  --tw-gradient-via-position: ;
-  --tw-gradient-to-position: ;
-  --tw-ordinal: ;
-  --tw-slashed-zero: ;
-  --tw-numeric-figure: ;
-  --tw-numeric-spacing: ;
-  --tw-numeric-fraction: ;
-  --tw-ring-inset: ;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
   --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -84,73 +82,107 @@
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
-  --tw-blur: ;
-  --tw-brightness: ;
-  --tw-contrast: ;
-  --tw-grayscale: ;
-  --tw-hue-rotate: ;
-  --tw-invert: ;
-  --tw-saturate: ;
-  --tw-sepia: ;
-  --tw-drop-shadow: ;
-  --tw-backdrop-blur: ;
-  --tw-backdrop-brightness: ;
-  --tw-backdrop-contrast: ;
-  --tw-backdrop-grayscale: ;
-  --tw-backdrop-hue-rotate: ;
-  --tw-backdrop-invert: ;
-  --tw-backdrop-opacity: ;
-  --tw-backdrop-saturate: ;
-  --tw-backdrop-sepia: ;
-  --tw-contain-size: ;
-  --tw-contain-layout: ;
-  --tw-contain-paint: ;
-  --tw-contain-style: ;
-}
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}/*
+! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com
+*//*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
 *,
 ::before,
 ::after {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
-  border-color: #e5e7eb;
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: #e5e7eb; /* 2 */
 }
+
 ::before,
 ::after {
-  --tw-content: "";
-}
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
+*/
+
 html,
 :host {
-  line-height: 1.5;
-  -webkit-text-size-adjust: 100%;
-  -moz-tab-size: 4;
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
   -o-tab-size: 4;
-  tab-size: 4;
-  font-family:
-    ui-sans-serif,
-    system-ui,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
-  font-feature-settings: normal;
-  font-variation-settings: normal;
-  -webkit-tap-highlight-color: transparent;
-}
+     tab-size: 4; /* 3 */
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
+  font-feature-settings: normal; /* 5 */
+  font-variation-settings: normal; /* 6 */
+  -webkit-tap-highlight-color: transparent; /* 7 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
 body {
-  margin: 0;
-  line-height: inherit;
-}
+  margin: 0; /* 1 */
+  line-height: inherit; /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
 hr {
-  height: 0;
-  color: inherit;
-  border-top-width: 1px;
-}
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
 abbr:where([title]) {
   -webkit-text-decoration: underline dotted;
-  text-decoration: underline dotted;
+          text-decoration: underline dotted;
 }
+
+/*
+Remove the default font size and weight for headings.
+*/
+
 h1,
 h2,
 h3,
@@ -160,34 +192,54 @@ h6 {
   font-size: inherit;
   font-weight: inherit;
 }
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
 a {
   color: inherit;
   text-decoration: inherit;
 }
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
 b,
 strong {
   font-weight: bolder;
 }
+
+/*
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
+*/
+
 code,
 kbd,
 samp,
 pre {
-  font-family:
-    ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    Monaco,
-    Consolas,
-    "Liberation Mono",
-    "Courier New",
-    monospace;
-  font-feature-settings: normal;
-  font-variation-settings: normal;
-  font-size: 1em;
-}
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
+  font-feature-settings: normal; /* 2 */
+  font-variation-settings: normal; /* 3 */
+  font-size: 1em; /* 4 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
 small {
   font-size: 80%;
 }
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
 sub,
 sup {
   font-size: 75%;
@@ -195,72 +247,146 @@ sup {
   position: relative;
   vertical-align: baseline;
 }
+
 sub {
   bottom: -0.25em;
 }
+
 sup {
   top: -0.5em;
 }
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
 table {
-  text-indent: 0;
-  border-color: inherit;
-  border-collapse: collapse;
-}
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
 button,
 input,
 optgroup,
 select,
 textarea {
-  font-family: inherit;
-  font-feature-settings: inherit;
-  font-variation-settings: inherit;
-  font-size: 100%;
-  font-weight: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  color: inherit;
-  margin: 0;
-  padding: 0;
-}
+  font-family: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
+  line-height: inherit; /* 1 */
+  letter-spacing: inherit; /* 1 */
+  color: inherit; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
 button,
 select {
   text-transform: none;
 }
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
 button,
-input:where([type=button]),
-input:where([type=reset]),
-input:where([type=submit]) {
-  -webkit-appearance: button;
-  background-color: transparent;
-  background-image: none;
-}
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
+  -webkit-appearance: button; /* 1 */
+  background-color: transparent; /* 2 */
+  background-image: none; /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
 :-moz-focusring {
   outline: auto;
 }
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
 :-moz-ui-invalid {
   box-shadow: none;
 }
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
 progress {
   vertical-align: baseline;
 }
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
   height: auto;
 }
-[type=search] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
 ::-webkit-search-decoration {
   -webkit-appearance: none;
 }
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
 ::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
 summary {
   display: list-item;
 }
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
 blockquote,
 dl,
 dd,
@@ -276,13 +402,16 @@ p,
 pre {
   margin: 0;
 }
+
 fieldset {
   margin: 0;
   padding: 0;
 }
+
 legend {
   padding: 0;
 }
+
 ol,
 ul,
 menu {
@@ -290,29 +419,60 @@ menu {
   margin: 0;
   padding: 0;
 }
+
+/*
+Reset default styling for dialogs.
+*/
 dialog {
   padding: 0;
 }
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
 textarea {
   resize: vertical;
 }
-input::-moz-placeholder,
-textarea::-moz-placeholder {
-  opacity: 1;
-  color: #9ca3af;
-}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
+}
+
 input::placeholder,
 textarea::placeholder {
-  opacity: 1;
-  color: #9ca3af;
-}
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
 button,
-[role=button] {
+[role="button"] {
   cursor: pointer;
 }
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
 :disabled {
   cursor: default;
 }
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
 img,
 svg,
 video,
@@ -321,15 +481,22 @@ audio,
 iframe,
 embed,
 object {
-  display: block;
-  vertical-align: middle;
-}
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
 img,
 video {
   max-width: 100%;
   height: auto;
 }
-[hidden]:where(:not([hidden=until-found])) {
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+[hidden]:where(:not([hidden="until-found"])) {
   display: none;
 }
 .tw-right-6 {
@@ -382,7 +549,7 @@ video {
 }
 .tw-object-cover {
   -o-object-fit: cover;
-  object-fit: cover;
+     object-fit: cover;
 }
 .tw-p-2 {
   padding: 0.5rem;
@@ -422,7 +589,470 @@ video {
   opacity: 0.4;
 }
 @media (min-width: 576px) {
+
   .sm\:tw-p-6 {
     padding: 1.5rem;
   }
 }
+
+
+/* CSS Modules */
+/* src/atom/Tooltip/Tooltip.module.scss */
+.Tooltip-module__light___H5oCc .ant-tooltip-content .ant-tooltip-inner {
+  background-color: white !important;
+  color: #111827;
+  border-radius: 0.5rem;
+  padding: 0.625rem;
+  --tw-text-opacity: 1;
+  color: rgb(33 40 55 / var(--tw-text-opacity, 1));
+}
+.Tooltip-module__light___H5oCc .ant-tooltip-arrow:before {
+  background-color: white !important;
+}
+
+/* src/atom/Radio/Radio.module.scss */
+.Radio-module__radio___1CPAk {
+  display: flex;
+  align-items: center;
+}
+.Radio-module__radio___1CPAk.Radio-module__size_small___nRXgM .ant-radio .ant-radio-inner {
+  height: 16px;
+  width: 16px;
+}
+.Radio-module__radio___1CPAk.Radio-module__size_medium___uSzPl .ant-radio .ant-radio-inner {
+  height: 20px;
+  width: 20px;
+}
+.Radio-module__radio___1CPAk.Radio-module__size_large___ubpHs .ant-radio .ant-radio-inner {
+  height: 24px;
+  width: 24px;
+}
+.Radio-module__radio___1CPAk.Radio-module__type_checked___BvPpu .ant-radio-checked .ant-radio-inner {
+  border-color: #EC5D25;
+  background-color: #EC5D25;
+}
+.Radio-module__radio___1CPAk.Radio-module__type_checked___BvPpu .ant-radio-checked:hover .ant-radio-inner {
+  border-color: #B94710;
+  background-color: #B94710;
+}
+.Radio-module__radio___1CPAk.Radio-module__type_checked___BvPpu .ant-radio-checked:focus-visible {
+  outline: 2px solid #0A65E7;
+}
+.Radio-module__radio___1CPAk.Radio-module__type_checked___BvPpu.Radio-module__disabled___AF98Z {
+  cursor: not-allowed;
+}
+.Radio-module__radio___1CPAk.Radio-module__type_checked___BvPpu.Radio-module__disabled___AF98Z .ant-radio-checked .ant-radio-inner {
+  border-color: #B6BAC3;
+  background-color: #B6BAC3;
+}
+.Radio-module__radio___1CPAk.Radio-module__type_checked___BvPpu.Radio-module__disabled___AF98Z .ant-radio-checked .ant-radio-inner::after {
+  transform: scale(0.375);
+  background-color: #FFFFFF;
+}
+.Radio-module__radio___1CPAk.Radio-module__type_unchecked___Xrb-7 .ant-radio .ant-radio-inner {
+  border-color: #B6BAC3;
+}
+.Radio-module__radio___1CPAk.Radio-module__type_unchecked___Xrb-7 .ant-radio:hover .ant-radio-inner {
+  border-color: #6B7280;
+}
+.Radio-module__radio___1CPAk.Radio-module__type_unchecked___Xrb-7 .ant-radio:focus-visible {
+  outline: 2px solid #0A65E7;
+}
+.Radio-module__radio___1CPAk.Radio-module__type_unchecked___Xrb-7.Radio-module__disabled___AF98Z {
+  cursor: not-allowed;
+}
+.Radio-module__radio___1CPAk.Radio-module__type_unchecked___Xrb-7.Radio-module__disabled___AF98Z .ant-radio .ant-radio-inner {
+  border-color: #B6BAC3;
+  background-color: #F9FAFB;
+}
+.Radio-module__radio___1CPAk.Radio-module__variant_normal___FQkTC {
+  color: #363E4F;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 20px;
+}
+.Radio-module__radio___1CPAk.Radio-module__variant_emphasized___Fgpv6 {
+  color: #363E4F;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 20px;
+}
+
+/* src/atom/Switch/Switch.module.scss */
+.Switch-module__switch___fUHZL.ant-switch.ant-switch-small {
+    height: 0.75rem;
+    min-width: 1.5rem
+}
+.Switch-module__switch___fUHZL.ant-switch.ant-switch-small .ant-switch-handle {
+    height: 0.5rem;
+    width: 0.5rem
+}
+.Switch-module__switch___fUHZL.ant-switch.ant-switch-checked {
+    --tw-bg-opacity: 1;
+    background-color: rgb(236 93 37 / var(--tw-bg-opacity, 1))
+}
+.Switch-module__switch___fUHZL.ant-switch.ant-switch-checked:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(236 93 37 / var(--tw-bg-opacity, 1))
+}
+
+/* src/atom/Checkbox/Checkbox.module.scss */
+.Checkbox-module__checkbox___xxg5L {
+  display: flex;
+  align-items: center;
+}
+.Checkbox-module__checkbox___xxg5L.Checkbox-module__size_small___Kknlo .ant-checkbox .ant-checkbox-inner {
+  height: 16px;
+  width: 16px;
+}
+.Checkbox-module__checkbox___xxg5L.Checkbox-module__size_medium___V6Ah8 .ant-checkbox .ant-checkbox-inner {
+  height: 20px;
+  width: 20px;
+}
+.Checkbox-module__checkbox___xxg5L.Checkbox-module__size_medium___V6Ah8 .ant-checkbox .ant-checkbox-inner::after {
+  inset-inline-start: 27%;
+}
+.Checkbox-module__checkbox___xxg5L.Checkbox-module__size_large___eWjFY .ant-checkbox .ant-checkbox-inner {
+  height: 24px;
+  width: 24px;
+}
+.Checkbox-module__checkbox___xxg5L.Checkbox-module__size_large___eWjFY .ant-checkbox .ant-checkbox-inner::after {
+  inset-inline-start: 33%;
+}
+.Checkbox-module__checkbox___xxg5L.Checkbox-module__type_checked___5742T .ant-checkbox-checked .ant-checkbox-inner {
+  border-color: #ec5d25;
+  background-color: #ec5d25;
+}
+.Checkbox-module__checkbox___xxg5L.Checkbox-module__type_checked___5742T.ant-checkbox-wrapper:hover
+     .ant-checkbox-checked:not(.ant-checkbox-disabled)
+     .ant-checkbox-inner {
+  --tw-bg-opacity: 1;
+  background-color: rgb(185 71 16 / var(--tw-bg-opacity, 1));
+}
+.Checkbox-module__checkbox___xxg5L.Checkbox-module__type_checked___5742T .ant-checkbox-checked:focus-visible {
+  outline: 2px solid #0a65e7;
+}
+.Checkbox-module__checkbox___xxg5L.Checkbox-module__type_checked___5742T.Checkbox-module__disabled___v-RG1 {
+  cursor: not-allowed;
+}
+.Checkbox-module__checkbox___xxg5L.Checkbox-module__type_checked___5742T.Checkbox-module__disabled___v-RG1 .ant-checkbox-checked .ant-checkbox-inner {
+  opacity: 0.5;
+  border-color: #ec5d25;
+  background-color: #ec5d25;
+}
+.Checkbox-module__checkbox___xxg5L.Checkbox-module__type_checked___5742T.Checkbox-module__disabled___v-RG1 .ant-checkbox-checked .ant-checkbox-inner::after {
+  border-color: #ffffff;
+}
+.Checkbox-module__checkbox___xxg5L.Checkbox-module__type_unchecked___QFMpP .ant-checkbox .ant-checkbox-inner {
+  border-color: #b6bac3;
+}
+.Checkbox-module__checkbox___xxg5L.Checkbox-module__type_unchecked___QFMpP .ant-checkbox:hover .ant-checkbox-inner {
+  border-color: #6b7280;
+}
+.Checkbox-module__checkbox___xxg5L.Checkbox-module__type_unchecked___QFMpP .ant-checkbox:focus-visible {
+  outline: 2px solid #0a65e7;
+}
+.Checkbox-module__checkbox___xxg5L.Checkbox-module__type_unchecked___QFMpP.Checkbox-module__disabled___v-RG1 {
+  cursor: not-allowed;
+}
+.Checkbox-module__checkbox___xxg5L.Checkbox-module__type_unchecked___QFMpP.Checkbox-module__disabled___v-RG1 .ant-checkbox .ant-checkbox-inner {
+  border-color: #b6bac3;
+  background-color: #f9fafb;
+}
+.Checkbox-module__checkbox___xxg5L .ant-checkbox-disabled + span {
+  color: #363e4f;
+}
+.Checkbox-module__checkbox___xxg5L.Checkbox-module__variant_normal___faYKo {
+  color: #363e4f;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 20px;
+}
+.Checkbox-module__checkbox___xxg5L.Checkbox-module__variant_emphasized___-koYj {
+  color: #363e4f;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 20px;
+}
+.Checkbox-module__checkbox___xxg5L.Checkbox-module__variant_indeterminate___J5Xcc.Checkbox-module__disabled___v-RG1 .ant-checkbox-indeterminate .ant-checkbox-inner {
+  opacity: 0.5;
+  border-color: #ec5d25;
+  background-color: #ec5d25;
+}
+.Checkbox-module__checkbox___xxg5L.Checkbox-module__variant_indeterminate___J5Xcc.Checkbox-module__disabled___v-RG1 .ant-checkbox-indeterminate .ant-checkbox-inner::after {
+  border-color: #ffffff;
+}
+.Checkbox-module__checkbox___xxg5L.Checkbox-module__variant_indeterminate___J5Xcc .ant-checkbox-indeterminate .ant-checkbox-inner {
+  border-color: #ec5d25 !important;
+  background-color: #ec5d25 !important;
+}
+.Checkbox-module__checkbox___xxg5L.Checkbox-module__variant_indeterminate___J5Xcc .ant-checkbox-indeterminate .ant-checkbox-inner::after {
+  inset-inline-start: 50%;
+  width: 60%;
+  height: 3px;
+  border-radius: 4px;
+  background: white;
+}
+
+/* src/atom/Button/Button.module.scss */
+.Button-module__button___cLCyl {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  border-radius: 0.5rem;
+}
+.Button-module__button___cLCyl.Button-module__size_large___S-mbU {
+  height: 56px;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.Button-module__button___cLCyl.Button-module__size_large___S-mbU.Button-module__shape_circle___sPUS5 {
+  width: 56px;
+}
+.Button-module__button___cLCyl.Button-module__size_normal___qJUMj {
+  height: 40px;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+.Button-module__button___cLCyl.Button-module__size_normal___qJUMj.Button-module__shape_circle___sPUS5 {
+  width: 40px;
+}
+.Button-module__button___cLCyl.Button-module__size_small___IUeei {
+  height: 32px;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.Button-module__button___cLCyl.Button-module__size_small___IUeei.Button-module__shape_circle___sPUS5 {
+  width: 32px;
+}
+.Button-module__button___cLCyl.Button-module__type_primary___Tauz- {
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 93 37 / var(--tw-bg-opacity, 1));
+  border-width: 1px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(236 93 37 / var(--tw-border-opacity, 1));
+  box-shadow: 0 1px 0 0 rgba(17, 24, 39, 0.1);
+}
+.Button-module__button___cLCyl.Button-module__type_primary___Tauz-.ant-btn-primary:hover, .Button-module__button___cLCyl.Button-module__type_primary___Tauz-.ant-btn-primary:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 93 37 / var(--tw-bg-opacity, 1));
+  box-shadow: 0px 2px 4px 0px rgba(17, 24, 39, 0.1);
+}
+.Button-module__button___cLCyl.Button-module__type_primary___Tauz-:focus-visible {
+  outline: 2px solid rgba(236, 93, 37, 0.3803921569);
+}
+.Button-module__button___cLCyl.Button-module__type_primary___Tauz-.Button-module__variant_subtle___BMbbd {
+  --tw-text-opacity: 1;
+  color: rgb(236 93 37 / var(--tw-text-opacity, 1));
+}
+.Button-module__button___cLCyl.Button-module__type_primary___Tauz-.Button-module__variant_subtle___BMbbd:hover {
+  --tw-text-opacity: 1;
+  color: rgb(236 93 37 / var(--tw-text-opacity, 1));
+}
+.Button-module__button___cLCyl.Button-module__type_primary___Tauz-.Button-module__variant_text___Pc5Ia, .Button-module__button___cLCyl.Button-module__type_primary___Tauz-.Button-module__variant_link___Cj1O9 {
+  --tw-text-opacity: 1;
+  color: rgb(236 93 37 / var(--tw-text-opacity, 1));
+}
+.Button-module__button___cLCyl.Button-module__type_primary___Tauz-.Button-module__variant_text___Pc5Ia:hover, .Button-module__button___cLCyl.Button-module__type_primary___Tauz-.Button-module__variant_link___Cj1O9:hover {
+  --tw-text-opacity: 1;
+  color: rgb(236 93 37 / var(--tw-text-opacity, 1));
+}
+.Button-module__button___cLCyl.Button-module__type_secondary___CLmrA {
+  border-width: 1px;
+  border-style: solid;
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
+  --tw-border-opacity: 1;
+  border-color: rgb(17 24 39 / var(--tw-border-opacity, 1));
+  box-shadow: 0 1px 0 0 rgba(17, 24, 39, 0.1);
+}
+.Button-module__button___cLCyl.Button-module__type_secondary___CLmrA.ant-btn-primary:hover, .Button-module__button___cLCyl.Button-module__type_secondary___CLmrA.ant-btn-primary:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
+  box-shadow: 0px 2px 4px 0px rgba(17, 24, 39, 0.1);
+}
+.Button-module__button___cLCyl.Button-module__type_secondary___CLmrA.ant-btn-primary:focus-visible {
+  outline: 2px solid rgba(236, 93, 37, 0.3803921569);
+}
+.Button-module__button___cLCyl.Button-module__type_secondary___CLmrA.Button-module__variant_subtle___BMbbd {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+}
+.Button-module__button___cLCyl.Button-module__type_secondary___CLmrA.Button-module__variant_subtle___BMbbd:hover {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+}
+.Button-module__button___cLCyl.Button-module__type_secondary___CLmrA.Button-module__variant_text___Pc5Ia, .Button-module__button___cLCyl.Button-module__type_secondary___CLmrA.Button-module__variant_link___Cj1O9 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+}
+.Button-module__button___cLCyl.Button-module__type_secondary___CLmrA.Button-module__variant_text___Pc5Ia:hover, .Button-module__button___cLCyl.Button-module__type_secondary___CLmrA.Button-module__variant_link___Cj1O9:hover {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+}
+.Button-module__button___cLCyl.Button-module__type_critical___6ILOp {
+  border-width: 1px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(207 34 49 / var(--tw-bg-opacity, 1));
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(207 34 49 / var(--tw-border-opacity, 1));
+  box-shadow: 0 1px 0 0 rgba(17, 24, 39, 0.1);
+}
+.Button-module__button___cLCyl.Button-module__type_critical___6ILOp.ant-btn-primary:hover, .Button-module__button___cLCyl.Button-module__type_critical___6ILOp.ant-btn-primary:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(207 34 49 / var(--tw-bg-opacity, 1));
+  box-shadow: 0px 2px 4px 0px rgba(17, 24, 39, 0.1);
+}
+.Button-module__button___cLCyl.Button-module__type_critical___6ILOp.ant-btn-primary:focus-visible {
+  outline: 2px solid rgba(236, 93, 37, 0.3803921569);
+}
+.Button-module__button___cLCyl.Button-module__type_critical___6ILOp.Button-module__variant_subtle___BMbbd {
+  --tw-text-opacity: 1;
+  color: rgb(207 34 49 / var(--tw-text-opacity, 1));
+}
+.Button-module__button___cLCyl.Button-module__type_critical___6ILOp.Button-module__variant_subtle___BMbbd:hover {
+  --tw-text-opacity: 1;
+  color: rgb(207 34 49 / var(--tw-text-opacity, 1));
+}
+.Button-module__button___cLCyl.Button-module__type_critical___6ILOp.Button-module__variant_text___Pc5Ia, .Button-module__button___cLCyl.Button-module__type_critical___6ILOp.Button-module__variant_link___Cj1O9 {
+  --tw-text-opacity: 1;
+  color: rgb(207 34 49 / var(--tw-text-opacity, 1));
+}
+.Button-module__button___cLCyl.Button-module__type_critical___6ILOp.Button-module__variant_text___Pc5Ia:hover, .Button-module__button___cLCyl.Button-module__type_critical___6ILOp.Button-module__variant_link___Cj1O9:hover {
+  --tw-text-opacity: 1;
+  color: rgb(207 34 49 / var(--tw-text-opacity, 1));
+}
+.Button-module__button___cLCyl.Button-module__variant_subtle___BMbbd {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  border-width: 1px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(211 216 223 / var(--tw-border-opacity, 1));
+  box-shadow: 0px 1px 0px 0px rgba(17, 24, 39, 0.1);
+}
+.Button-module__button___cLCyl.Button-module__variant_subtle___BMbbd.ant-btn-default:hover {
+  box-shadow: 0px 2px 4px 0px rgba(17, 24, 39, 0.15);
+  --tw-border-opacity: 1;
+  border-color: rgb(211 216 223 / var(--tw-border-opacity, 1));
+}
+.Button-module__button___cLCyl.Button-module__variant_subtle___BMbbd.ant-btn-default:focus-visible {
+  outline: 2px solid rgba(236, 93, 37, 0.3803921569);
+}
+.Button-module__button___cLCyl.Button-module__variant_text___Pc5Ia {
+  background-color: transparent;
+  border-width: 0px;
+  border-style: none;
+  box-shadow: none;
+}
+.Button-module__button___cLCyl.Button-module__variant_text___Pc5Ia.ant-btn-default:hover {
+  box-shadow: 0px 2px 4px 0px rgba(17, 24, 39, 0.15);
+  border-style: none;
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+}
+.Button-module__button___cLCyl.Button-module__variant_text___Pc5Ia.ant-btn-default:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(241 243 245 / var(--tw-bg-opacity, 1));
+}
+.Button-module__button___cLCyl.Button-module__variant_text___Pc5Ia.ant-btn:focus-visible {
+  outline: 2px solid rgba(236, 93, 37, 0.2);
+}
+.Button-module__button___cLCyl.Button-module__variant_link___Cj1O9 {
+  background-color: transparent;
+  padding: 0px;
+  border-width: 0px;
+  border-style: none;
+  height: auto;
+  box-shadow: none;
+}
+.Button-module__button___cLCyl.Button-module__variant_link___Cj1O9.ant-btn-default:hover.Button-module__onHoverUnderline___LOfXo {
+  text-decoration: underline;
+}
+.Button-module__button___cLCyl.Button-module__variant_link___Cj1O9.ant-btn-default:hover {
+  box-shadow: none;
+  border-style: none;
+  background-color: transparent;
+}
+.Button-module__button___cLCyl.Button-module__variant_link___Cj1O9.ant-btn-default:active {
+  background-color: transparent;
+}
+.Button-module__button___cLCyl.Button-module__variant_link___Cj1O9.ant-btn:focus-visible {
+  outline: none;
+}
+
+/* src/atom/Modal/Modal.module.scss */
+.Modal-module__modal___PKrAi.Modal-module__footerMargintopDisable___4B6u- .Modal-module__ant-modal-footer___HKsDR {
+  margin-top: 0;
+  margin-top: 0px;
+}
+.Modal-module__modal___PKrAi .ant-modal-footer .primaryFooter {
+  padding: 24px;
+  padding: 1.5rem;
+  display: flex;
+  justify-content: flex-end;
+}
+.Modal-module__modal___PKrAi .ant-modal-footer .primaryFooter .Modal-module__okBtn___Ut8e5,
+.Modal-module__modal___PKrAi .ant-modal-footer .primaryFooter .Modal-module__cancelBtn___i0Rm8 {
+  min-width: 92px;
+}
+.Modal-module__modal___PKrAi .ant-modal-footer .secondaryFooter {
+  padding: 24px;
+  padding: 1.5rem;
+  padding-top: 0px;
+  display: flex;
+  justify-content: flex-end;
+}
+.Modal-module__modal___PKrAi .ant-modal-footer .secondaryFooter .Modal-module__okBtn___Ut8e5,
+.Modal-module__modal___PKrAi .ant-modal-footer .secondaryFooter .Modal-module__cancelBtn___i0Rm8 {
+  width: 50%;
+}
+.Modal-module__modal___PKrAi .ant-modal-content {
+  padding: 0;
+  border-radius: 0.75rem;
+  padding: 0px;
+}
+.Modal-module__modal___PKrAi .ant-modal-content .ant-modal-header {
+  margin-bottom: 0px;
+  padding: 1rem;
+}
+@media (min-width: 576px) {
+  .Modal-module__modal___PKrAi .ant-modal-content .ant-modal-header {
+    padding: 1.5rem;
+  }
+}
+.Modal-module__modal___PKrAi .ant-modal-content .ant-modal-header .ant-modal-title {
+  justify-content: flex-start;
+  padding-right: 1.25rem;
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.75rem;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+}
+.Modal-module__modal___PKrAi .ant-modal-content .ant-modal-close {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+.Modal-module__modal___PKrAi .ant-modal-content .ant-modal-close .ant-modal-close-x {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.Modal-module__modal___PKrAi .ant-modal-content .ant-modal-body {
+  padding: 0 1.5rem 1.5rem;
+  max-height: 80vh;
+  overflow: auto;
+}
+.Modal-module__modal___PKrAi .ant-modal-content .ant-modal-close {
+  top: 1.5rem;
+  right: 1.5rem;
+  padding-bottom: 0.25rem;
+}
+.Modal-module__modal___PKrAi .ant-btn-primary {
+  margin-inline-start: 0.5rem;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itilite/lumina-ui",
-  "version": "1.0.1-beta.1",
+  "version": "1.0.1-beta.3",
   "description": "Itilite Lumina Design System UI Components",
   "sideEffects": false,
   "license": "MIT",

package/dist/chunk-2O2IH2FG.mjs

@@ -1,83 +0,0 @@
-// src/atom/Avatar/Avatar.tsx
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-var COLOR_MAP = {
-  A: "#6455BF",
-  B: "#C46273",
-  C: "#52A79E",
-  D: "#DF8654",
-  E: "#B8639F",
-  F: "#6455BF",
-  G: "#C46273",
-  H: "#52A79E",
-  I: "#DF8654",
-  J: "#B8639F",
-  K: "#6455BF",
-  L: "#C46273",
-  M: "#52A79E",
-  N: "#DF8654",
-  O: "#B8639F",
-  P: "#6455BF",
-  Q: "#C46273",
-  R: "#52A79E",
-  S: "#DF8654",
-  T: "#B8639F",
-  U: "#6455BF",
-  V: "#C46273",
-  W: "#52A79E",
-  X: "#DF8654",
-  Y: "#B8639F",
-  Z: "#6455BF",
-  0: "#6455BF",
-  1: "#C46273",
-  6: "#C46273",
-  2: "#52A79E",
-  7: "#52A79E",
-  3: "#DF8654",
-  8: "#DF8654",
-  4: "#B8639F",
-  9: "#B8639F"
-};
-function Avatar({
-  img,
-  className,
-  name,
-  height = 28,
-  width = 28,
-  size = "normal"
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: { height, width },
-      className: "tw-rounded-full tw-flex tw-items-center",
-      children: !img && name ? /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: { backgroundColor: COLOR_MAP[name[0]] },
-          className: clsx(
-            { "tw-text-font-size-10": size === "small" },
-            `tw-text-white tw-font-medium tw-rounded-full tw-flex tw-items-center tw-justify-center `,
-            className
-          ),
-          children: name[0]
-        }
-      ) : img ? /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: img,
-          style: { height, width },
-          alt: name,
-          className: clsx("tw-rounded-full tw-object-cover", className)
-        }
-      ) : null
-    }
-  );
-}
-Avatar.displayName = "Avatar";
-var Avatar_default = Avatar;
-
-export {
-  Avatar,
-  Avatar_default
-};

package/dist/styles.d.mts

@@ -1,2 +0,0 @@
-
-export {  }

package/dist/styles.d.ts

@@ -1,2 +0,0 @@
-
-export {  }