@birbalkr/buildui 1.0.0 → 1.0.2

package/dist/index.cjs

@@ -24,28 +24,60 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/styles.compiled.css
+styleInject('/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n@layer properties {\n  @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {\n    *,\n    :before,\n    :after,\n    ::backdrop {\n      --tw-border-style:solid;\n      --tw-font-weight:initial;\n      --tw-outline-style:solid;\n    }\n  }\n}\n@layer theme {\n  :root,\n  :host {\n    --font-sans:-apple-system,\n      BlinkMacSystemFont,\n      "Segoe UI",\n      Roboto,\n      "Helvetica Neue",\n      "Noto Sans",\n      Arial,\n      sans-serif,\n      "Apple Color Emoji",\n      "Segoe UI Emoji",\n      "Segoe UI Symbol",\n      "Noto Color Emoji";\n    --font-mono:ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      "Liberation Mono",\n      "Courier New",\n      monospace;\n    --color-red-700:oklch(50.5% .213 27.518);\n    --color-blue-100:oklch(93.2% .032 255.585);\n    --color-blue-500:oklch(62.3% .214 259.815);\n    --color-blue-600:oklch(54.6% .245 262.881);\n    --color-indigo-50:oklch(96.2% .018 272.314);\n    --color-indigo-600:oklch(51.1% .262 276.966);\n    --color-indigo-700:oklch(45.7% .24 277.023);\n    --color-gray-200:oklch(92.8% .006 264.531);\n    --color-gray-300:oklch(87.2% .01 258.338);\n    --color-gray-500:oklch(55.1% .027 264.364);\n    --color-gray-600:oklch(44.6% .03 256.802);\n    --color-gray-900:oklch(21% .034 264.665);\n    --color-white:#fff;\n    --spacing:.25rem;\n    --text-xs:.75rem;\n    --text-xs--line-height:calc(1 / .75);\n    --text-sm:.875rem;\n    --text-sm--line-height:calc(1.25 / .875);\n    --text-base:1rem;\n    --text-base--line-height:calc(1.5 / 1);\n    --font-weight-medium:500;\n    --radius-md:.375rem;\n    --default-transition-duration:.15s;\n    --default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);\n    --default-font-family:var(--font-sans);\n    --default-mono-font-family:var(--font-mono);\n  }\n}\n@layer base {\n  *,\n  :after,\n  :before,\n  ::backdrop {\n    box-sizing: border-box;\n    border: 0 solid;\n    margin: 0;\n    padding: 0;\n  }\n  ::file-selector-button {\n    box-sizing: border-box;\n    border: 0 solid;\n    margin: 0;\n    padding: 0;\n  }\n  html,\n  :host {\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    line-height: 1.5;\n    font-family: var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n    font-feature-settings: var(--default-font-feature-settings,normal);\n    font-variation-settings: var(--default-font-variation-settings,normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    -webkit-text-decoration: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b,\n  strong {\n    font-weight: bolder;\n  }\n  code,\n  kbd,\n  samp,\n  pre {\n    font-family: var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings,normal);\n    font-variation-settings: var(--default-mono-font-variation-settings,normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub,\n  sup {\n    vertical-align: baseline;\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n  }\n  sub {\n    bottom: -.25em;\n  }\n  sup {\n    top: -.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring:where(:not(iframe)) {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol,\n  ul,\n  menu {\n    list-style: none;\n  }\n  img,\n  svg,\n  video,\n  canvas,\n  audio,\n  iframe,\n  embed,\n  object {\n    vertical-align: middle;\n    display: block;\n  }\n  img,\n  video {\n    max-width: 100%;\n    height: auto;\n  }\n  button,\n  input,\n  select,\n  optgroup,\n  textarea {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    opacity: 1;\n    background-color: #0000;\n    border-radius: 0;\n  }\n  ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    opacity: 1;\n    background-color: #0000;\n    border-radius: 0;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {\n    ::placeholder {\n      color: currentColor;\n    }\n    @supports (color:color-mix(in lab, red, red)) {\n      ::placeholder {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit {\n    padding-block: 0;\n  }\n  ::-webkit-datetime-edit-year-field {\n    padding-block: 0;\n  }\n  ::-webkit-datetime-edit-month-field {\n    padding-block: 0;\n  }\n  ::-webkit-datetime-edit-day-field {\n    padding-block: 0;\n  }\n  ::-webkit-datetime-edit-hour-field {\n    padding-block: 0;\n  }\n  ::-webkit-datetime-edit-minute-field {\n    padding-block: 0;\n  }\n  ::-webkit-datetime-edit-second-field {\n    padding-block: 0;\n  }\n  ::-webkit-datetime-edit-millisecond-field {\n    padding-block: 0;\n  }\n  ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button,\n  input:where([type=button], [type=reset], [type=submit]) {\n    appearance: button;\n  }\n  ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button {\n    height: auto;\n  }\n  ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=until-found])) {\n    display: none !important;\n  }\n}\n@layer components;\n@layer utilities {\n  .inline-flex {\n    display: inline-flex;\n  }\n  .table {\n    display: table;\n  }\n  .border-collapse {\n    border-collapse: collapse;\n  }\n  .resize {\n    resize: both;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .rounded-md {\n    border-radius: var(--radius-md);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .bg-blue-500 {\n    background-color: var(--color-blue-500);\n  }\n  .bg-gray-200 {\n    background-color: var(--color-gray-200);\n  }\n  .bg-gray-500 {\n    background-color: var(--color-gray-500);\n  }\n  .bg-indigo-600 {\n    background-color: var(--color-indigo-600);\n  }\n  .bg-red-700 {\n    background-color: var(--color-red-700);\n  }\n  .bg-transparent {\n    background-color: #0000;\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6);\n  }\n  .py-1 {\n    padding-block: var(--spacing);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .text-base {\n    font-size: var(--text-base);\n    line-height: var(--tw-leading,var(--text-base--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading,var(--text-sm--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading,var(--text-xs--line-height));\n  }\n  .font-medium {\n    --tw-font-weight:var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .text-blue-500 {\n    color: var(--color-blue-500);\n  }\n  .text-gray-900 {\n    color: var(--color-gray-900);\n  }\n  .text-indigo-600 {\n    color: var(--color-indigo-600);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .underline {\n    text-decoration-line: underline;\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .transition-colors {\n    transition-property:\n      color,\n      background-color,\n      border-color,\n      outline-color,\n      text-decoration-color,\n      fill,\n      stroke,\n      --tw-gradient-from,\n      --tw-gradient-via,\n      --tw-gradient-to;\n    transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration,var(--default-transition-duration));\n  }\n  @media (hover: hover) {\n    .hover\\:bg-blue-100:hover {\n      background-color: var(--color-blue-100);\n    }\n    .hover\\:bg-blue-600:hover {\n      background-color: var(--color-blue-600);\n    }\n    .hover\\:bg-gray-600:hover {\n      background-color: var(--color-gray-600);\n    }\n  }\n}\n@property --tw-border-style { syntax:"*";inherits:false;initial-value:solid }\n@property --tw-font-weight { syntax:"*";inherits:false }\n@property --tw-outline-style { syntax:"*";inherits:false;initial-value:solid }\n');
+
 // src/components/Button/Button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var variantClasses = {
-  primary: "bg-indigo-600 text-white hover:bg-indigo-700",
-  secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300",
-  ghost: "bg-transparent text-indigo-600 hover:bg-indigo-50"
+var sizeClasses = {
+  sm: "px-2 py-1 text-xs",
+  md: "px-4 py-2 text-sm",
+  lg: "px-6 py-3 text-base"
+};
+var themeClasses = {
+  primary: "bg-blue-500 text-white hover:bg-blue-600",
+  secondary: "bg-gray-500 text-white hover:bg-gray-600",
+  tertiary: "bg-transparent text-blue-500 hover:bg-blue-100"
 };
-function Button({
-  variant = "primary",
+var Button = ({
+  text,
+  theme = "primary",
+  size = "md",
   className = "",
   children,
   ...props
-}) {
+}) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     {
-      className: `inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none ${variantClasses[variant]} ${className}`,
+      className: `rounded-md font-medium transition-colors ${sizeClasses[size]} ${themeClasses[theme]} ${className}`,
       ...props,
-      children
+      children: children ?? text
     }
   );
-}
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/components/Button/Button.tsx"],"sourcesContent":["export { Button } from \"./components/Button\";\r\nexport type { ButtonProps } from \"./components/Button\";","import type { ButtonHTMLAttributes, ReactNode } from \"react\";\r\n\r\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\r\n    variant?: \"primary\" | \"secondary\" | \"ghost\";\r\n    children: ReactNode;\r\n}\r\n\r\nconst variantClasses: Record<NonNullable<ButtonProps[\"variant\"]>, string> = {\r\n    primary: \"bg-indigo-600 text-white hover:bg-indigo-700\",\r\n    secondary: \"bg-gray-200 text-gray-900 hover:bg-gray-300\",\r\n    ghost: \"bg-transparent text-indigo-600 hover:bg-indigo-50\",\r\n};\r\n\r\nexport function Button({\r\n    variant = \"primary\",\r\n    className = \"\",\r\n    children,\r\n    ...props\r\n}: ButtonProps) {\r\n    return (\r\n        <button\r\n            className={`inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none ${variantClasses[variant]} ${className}`}\r\n            {...props}\r\n        >\r\n            {children}\r\n        </button>\r\n    );\r\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACoBQ;AAbR,IAAM,iBAAsE;AAAA,EACxE,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AACX;AAEO,SAAS,OAAO;AAAA,EACnB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACP,GAAgB;AACZ,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW,uJAAuJ,eAAe,OAAO,CAAC,IAAI,SAAS;AAAA,MACrM,GAAG;AAAA,MAEH;AAAA;AAAA,EACL;AAER;","names":[]}
+{"version":3,"sources":["../src/index.ts","#style-inject:#style-inject","../src/styles.compiled.css","../src/components/Button/Button.tsx"],"sourcesContent":["import \"./styles.compiled.css\";\r\n\r\nexport { Button } from \"./components/Button\";\r\nexport type { ButtonProps } from \"./components/Button\";","\n          export default function styleInject(css, { insertAt } = {}) {\n            if (!css || typeof document === 'undefined') return\n          \n            const head = document.head || document.getElementsByTagName('head')[0]\n            const style = document.createElement('style')\n            style.type = 'text/css'\n          \n            if (insertAt === 'top') {\n              if (head.firstChild) {\n                head.insertBefore(style, head.firstChild)\n              } else {\n                head.appendChild(style)\n              }\n            } else {\n              head.appendChild(style)\n            }\n          \n            if (style.styleSheet) {\n              style.styleSheet.cssText = css\n            } else {\n              style.appendChild(document.createTextNode(css))\n            }\n          }\n          ","import styleInject from '#style-inject';styleInject(\"/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\\n@layer properties {\\n  @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {\\n    *,\\n    :before,\\n    :after,\\n    ::backdrop {\\n      --tw-border-style:solid;\\n      --tw-font-weight:initial;\\n      --tw-outline-style:solid;\\n    }\\n  }\\n}\\n@layer theme {\\n  :root,\\n  :host {\\n    --font-sans:-apple-system,\\n      BlinkMacSystemFont,\\n      \\\"Segoe UI\\\",\\n      Roboto,\\n      \\\"Helvetica Neue\\\",\\n      \\\"Noto Sans\\\",\\n      Arial,\\n      sans-serif,\\n      \\\"Apple Color Emoji\\\",\\n      \\\"Segoe UI Emoji\\\",\\n      \\\"Segoe UI Symbol\\\",\\n      \\\"Noto Color Emoji\\\";\\n    --font-mono:ui-monospace,\\n      SFMono-Regular,\\n      Menlo,\\n      Monaco,\\n      Consolas,\\n      \\\"Liberation Mono\\\",\\n      \\\"Courier New\\\",\\n      monospace;\\n    --color-red-700:oklch(50.5% .213 27.518);\\n    --color-blue-100:oklch(93.2% .032 255.585);\\n    --color-blue-500:oklch(62.3% .214 259.815);\\n    --color-blue-600:oklch(54.6% .245 262.881);\\n    --color-indigo-50:oklch(96.2% .018 272.314);\\n    --color-indigo-600:oklch(51.1% .262 276.966);\\n    --color-indigo-700:oklch(45.7% .24 277.023);\\n    --color-gray-200:oklch(92.8% .006 264.531);\\n    --color-gray-300:oklch(87.2% .01 258.338);\\n    --color-gray-500:oklch(55.1% .027 264.364);\\n    --color-gray-600:oklch(44.6% .03 256.802);\\n    --color-gray-900:oklch(21% .034 264.665);\\n    --color-white:#fff;\\n    --spacing:.25rem;\\n    --text-xs:.75rem;\\n    --text-xs--line-height:calc(1 / .75);\\n    --text-sm:.875rem;\\n    --text-sm--line-height:calc(1.25 / .875);\\n    --text-base:1rem;\\n    --text-base--line-height:calc(1.5 / 1);\\n    --font-weight-medium:500;\\n    --radius-md:.375rem;\\n    --default-transition-duration:.15s;\\n    --default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);\\n    --default-font-family:var(--font-sans);\\n    --default-mono-font-family:var(--font-mono);\\n  }\\n}\\n@layer base {\\n  *,\\n  :after,\\n  :before,\\n  ::backdrop {\\n    box-sizing: border-box;\\n    border: 0 solid;\\n    margin: 0;\\n    padding: 0;\\n  }\\n  ::file-selector-button {\\n    box-sizing: border-box;\\n    border: 0 solid;\\n    margin: 0;\\n    padding: 0;\\n  }\\n  html,\\n  :host {\\n    -webkit-text-size-adjust: 100%;\\n    tab-size: 4;\\n    line-height: 1.5;\\n    font-family: var(--default-font-family,-apple-system, BlinkMacSystemFont, \\\"Segoe UI\\\", Roboto, \\\"Helvetica Neue\\\", \\\"Noto Sans\\\", Arial, sans-serif, \\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\", \\\"Noto Color Emoji\\\");\\n    font-feature-settings: var(--default-font-feature-settings,normal);\\n    font-variation-settings: var(--default-font-variation-settings,normal);\\n    -webkit-tap-highlight-color: transparent;\\n  }\\n  hr {\\n    height: 0;\\n    color: inherit;\\n    border-top-width: 1px;\\n  }\\n  abbr:where([title]) {\\n    -webkit-text-decoration: underline dotted;\\n    text-decoration: underline dotted;\\n  }\\n  h1,\\n  h2,\\n  h3,\\n  h4,\\n  h5,\\n  h6 {\\n    font-size: inherit;\\n    font-weight: inherit;\\n  }\\n  a {\\n    color: inherit;\\n    -webkit-text-decoration: inherit;\\n    -webkit-text-decoration: inherit;\\n    -webkit-text-decoration: inherit;\\n    text-decoration: inherit;\\n  }\\n  b,\\n  strong {\\n    font-weight: bolder;\\n  }\\n  code,\\n  kbd,\\n  samp,\\n  pre {\\n    font-family: var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace);\\n    font-feature-settings: var(--default-mono-font-feature-settings,normal);\\n    font-variation-settings: var(--default-mono-font-variation-settings,normal);\\n    font-size: 1em;\\n  }\\n  small {\\n    font-size: 80%;\\n  }\\n  sub,\\n  sup {\\n    vertical-align: baseline;\\n    font-size: 75%;\\n    line-height: 0;\\n    position: relative;\\n  }\\n  sub {\\n    bottom: -.25em;\\n  }\\n  sup {\\n    top: -.5em;\\n  }\\n  table {\\n    text-indent: 0;\\n    border-color: inherit;\\n    border-collapse: collapse;\\n  }\\n  :-moz-focusring:where(:not(iframe)) {\\n    outline: auto;\\n  }\\n  progress {\\n    vertical-align: baseline;\\n  }\\n  summary {\\n    display: list-item;\\n  }\\n  ol,\\n  ul,\\n  menu {\\n    list-style: none;\\n  }\\n  img,\\n  svg,\\n  video,\\n  canvas,\\n  audio,\\n  iframe,\\n  embed,\\n  object {\\n    vertical-align: middle;\\n    display: block;\\n  }\\n  img,\\n  video {\\n    max-width: 100%;\\n    height: auto;\\n  }\\n  button,\\n  input,\\n  select,\\n  optgroup,\\n  textarea {\\n    font: inherit;\\n    font-feature-settings: inherit;\\n    font-variation-settings: inherit;\\n    letter-spacing: inherit;\\n    color: inherit;\\n    opacity: 1;\\n    background-color: #0000;\\n    border-radius: 0;\\n  }\\n  ::file-selector-button {\\n    font: inherit;\\n    font-feature-settings: inherit;\\n    font-variation-settings: inherit;\\n    letter-spacing: inherit;\\n    color: inherit;\\n    opacity: 1;\\n    background-color: #0000;\\n    border-radius: 0;\\n  }\\n  :where(select:is([multiple], [size])) optgroup {\\n    font-weight: bolder;\\n  }\\n  :where(select:is([multiple], [size])) optgroup option {\\n    padding-inline-start: 20px;\\n  }\\n  ::file-selector-button {\\n    margin-inline-end: 4px;\\n  }\\n  ::placeholder {\\n    opacity: 1;\\n  }\\n  @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {\\n    ::placeholder {\\n      color: currentColor;\\n    }\\n    @supports (color:color-mix(in lab, red, red)) {\\n      ::placeholder {\\n        color: color-mix(in oklab, currentcolor 50%, transparent);\\n      }\\n    }\\n  }\\n  textarea {\\n    resize: vertical;\\n  }\\n  ::-webkit-search-decoration {\\n    -webkit-appearance: none;\\n  }\\n  ::-webkit-date-and-time-value {\\n    min-height: 1lh;\\n    text-align: inherit;\\n  }\\n  ::-webkit-datetime-edit {\\n    display: inline-flex;\\n  }\\n  ::-webkit-datetime-edit-fields-wrapper {\\n    padding: 0;\\n  }\\n  ::-webkit-datetime-edit {\\n    padding-block: 0;\\n  }\\n  ::-webkit-datetime-edit-year-field {\\n    padding-block: 0;\\n  }\\n  ::-webkit-datetime-edit-month-field {\\n    padding-block: 0;\\n  }\\n  ::-webkit-datetime-edit-day-field {\\n    padding-block: 0;\\n  }\\n  ::-webkit-datetime-edit-hour-field {\\n    padding-block: 0;\\n  }\\n  ::-webkit-datetime-edit-minute-field {\\n    padding-block: 0;\\n  }\\n  ::-webkit-datetime-edit-second-field {\\n    padding-block: 0;\\n  }\\n  ::-webkit-datetime-edit-millisecond-field {\\n    padding-block: 0;\\n  }\\n  ::-webkit-datetime-edit-meridiem-field {\\n    padding-block: 0;\\n  }\\n  ::-webkit-calendar-picker-indicator {\\n    line-height: 1;\\n  }\\n  :-moz-ui-invalid {\\n    box-shadow: none;\\n  }\\n  button,\\n  input:where([type=button], [type=reset], [type=submit]) {\\n    appearance: button;\\n  }\\n  ::file-selector-button {\\n    appearance: button;\\n  }\\n  ::-webkit-inner-spin-button {\\n    height: auto;\\n  }\\n  ::-webkit-outer-spin-button {\\n    height: auto;\\n  }\\n  [hidden]:where(:not([hidden=until-found])) {\\n    display: none !important;\\n  }\\n}\\n@layer components;\\n@layer utilities {\\n  .inline-flex {\\n    display: inline-flex;\\n  }\\n  .table {\\n    display: table;\\n  }\\n  .border-collapse {\\n    border-collapse: collapse;\\n  }\\n  .resize {\\n    resize: both;\\n  }\\n  .items-center {\\n    align-items: center;\\n  }\\n  .justify-center {\\n    justify-content: center;\\n  }\\n  .rounded-md {\\n    border-radius: var(--radius-md);\\n  }\\n  .border {\\n    border-style: var(--tw-border-style);\\n    border-width: 1px;\\n  }\\n  .bg-blue-500 {\\n    background-color: var(--color-blue-500);\\n  }\\n  .bg-gray-200 {\\n    background-color: var(--color-gray-200);\\n  }\\n  .bg-gray-500 {\\n    background-color: var(--color-gray-500);\\n  }\\n  .bg-indigo-600 {\\n    background-color: var(--color-indigo-600);\\n  }\\n  .bg-red-700 {\\n    background-color: var(--color-red-700);\\n  }\\n  .bg-transparent {\\n    background-color: #0000;\\n  }\\n  .px-2 {\\n    padding-inline: calc(var(--spacing) * 2);\\n  }\\n  .px-4 {\\n    padding-inline: calc(var(--spacing) * 4);\\n  }\\n  .px-6 {\\n    padding-inline: calc(var(--spacing) * 6);\\n  }\\n  .py-1 {\\n    padding-block: var(--spacing);\\n  }\\n  .py-2 {\\n    padding-block: calc(var(--spacing) * 2);\\n  }\\n  .py-3 {\\n    padding-block: calc(var(--spacing) * 3);\\n  }\\n  .text-base {\\n    font-size: var(--text-base);\\n    line-height: var(--tw-leading,var(--text-base--line-height));\\n  }\\n  .text-sm {\\n    font-size: var(--text-sm);\\n    line-height: var(--tw-leading,var(--text-sm--line-height));\\n  }\\n  .text-xs {\\n    font-size: var(--text-xs);\\n    line-height: var(--tw-leading,var(--text-xs--line-height));\\n  }\\n  .font-medium {\\n    --tw-font-weight:var(--font-weight-medium);\\n    font-weight: var(--font-weight-medium);\\n  }\\n  .text-blue-500 {\\n    color: var(--color-blue-500);\\n  }\\n  .text-gray-900 {\\n    color: var(--color-gray-900);\\n  }\\n  .text-indigo-600 {\\n    color: var(--color-indigo-600);\\n  }\\n  .text-white {\\n    color: var(--color-white);\\n  }\\n  .underline {\\n    text-decoration-line: underline;\\n  }\\n  .outline {\\n    outline-style: var(--tw-outline-style);\\n    outline-width: 1px;\\n  }\\n  .transition-colors {\\n    transition-property:\\n      color,\\n      background-color,\\n      border-color,\\n      outline-color,\\n      text-decoration-color,\\n      fill,\\n      stroke,\\n      --tw-gradient-from,\\n      --tw-gradient-via,\\n      --tw-gradient-to;\\n    transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));\\n    transition-duration: var(--tw-duration,var(--default-transition-duration));\\n  }\\n  @media (hover: hover) {\\n    .hover\\\\:bg-blue-100:hover {\\n      background-color: var(--color-blue-100);\\n    }\\n    .hover\\\\:bg-blue-600:hover {\\n      background-color: var(--color-blue-600);\\n    }\\n    .hover\\\\:bg-gray-600:hover {\\n      background-color: var(--color-gray-600);\\n    }\\n  }\\n}\\n@property --tw-border-style { syntax:\\\"*\\\";inherits:false;initial-value:solid }\\n@property --tw-font-weight { syntax:\\\"*\\\";inherits:false }\\n@property --tw-outline-style { syntax:\\\"*\\\";inherits:false;initial-value:solid }\\n\")","import type { ButtonHTMLAttributes, ReactNode } from \"react\";\r\n\r\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\r\n    text?: string;\r\n    size?: \"sm\" | \"md\" | \"lg\";\r\n    theme?: \"primary\" | \"secondary\" | \"tertiary\";\r\n    children?: ReactNode;\r\n}\r\n\r\nconst sizeClasses: Record<NonNullable<ButtonProps[\"size\"]>, string> = {\r\n    sm: \"px-2 py-1 text-xs\",\r\n    md: \"px-4 py-2 text-sm\",\r\n    lg: \"px-6 py-3 text-base\",\r\n};\r\n\r\nconst themeClasses: Record<NonNullable<ButtonProps[\"theme\"]>, string> = {\r\n    primary: \"bg-blue-500 text-white hover:bg-blue-600\",\r\n    secondary: \"bg-gray-500 text-white hover:bg-gray-600\",\r\n    tertiary: \"bg-transparent text-blue-500 hover:bg-blue-100\",\r\n};\r\n\r\nexport const Button = ({\r\n    text,\r\n    theme = \"primary\",\r\n    size = \"md\",\r\n    className = \"\",\r\n    children,\r\n    ...props\r\n}: ButtonProps) => {\r\n    return (\r\n        <button\r\n            className={`rounded-md font-medium transition-colors ${sizeClasses[size]} ${themeClasses[theme]} ${className}`}\r\n            {...props}\r\n        >\r\n            {children ?? text}\r\n        </button>\r\n    );\r\n};"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCyB,SAAR,YAA6B,KAAK,EAAE,SAAS,IAAI,CAAC,GAAG;AAC1D,MAAI,CAAC,OAAO,OAAO,aAAa,YAAa;AAE7C,QAAM,OAAO,SAAS,QAAQ,SAAS,qBAAqB,MAAM,EAAE,CAAC;AACrE,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,OAAO;AAEb,MAAI,aAAa,OAAO;AACtB,QAAI,KAAK,YAAY;AACnB,WAAK,aAAa,OAAO,KAAK,UAAU;AAAA,IAC1C,OAAO;AACL,WAAK,YAAY,KAAK;AAAA,IACxB;AAAA,EACF,OAAO;AACL,SAAK,YAAY,KAAK;AAAA,EACxB;AAEA,MAAI,MAAM,YAAY;AACpB,UAAM,WAAW,UAAU;AAAA,EAC7B,OAAO;AACL,UAAM,YAAY,SAAS,eAAe,GAAG,CAAC;AAAA,EAChD;AACF;;;ACvB8B,YAAY,kyTAA40T;;;AC8Bx3T;AArBR,IAAM,cAAgE;AAAA,EAClE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;AAEA,IAAM,eAAkE;AAAA,EACpE,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AACd;AAEO,IAAM,SAAS,CAAC;AAAA,EACnB;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACP,MAAmB;AACf,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW,4CAA4C,YAAY,IAAI,CAAC,IAAI,aAAa,KAAK,CAAC,IAAI,SAAS;AAAA,MAC3G,GAAG;AAAA,MAEH,sBAAY;AAAA;AAAA,EACjB;AAER;","names":[]}

package/dist/index.d.cts

@@ -2,9 +2,11 @@ import * as react from 'react';
 import { ButtonHTMLAttributes, ReactNode } from 'react';
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: "primary" | "secondary" | "ghost";
-    children: ReactNode;
+    text?: string;
+    size?: "sm" | "md" | "lg";
+    theme?: "primary" | "secondary" | "tertiary";
+    children?: ReactNode;
 }
-declare function Button({ variant, className, children, ...props }: ButtonProps): react.JSX.Element;
+declare const Button: ({ text, theme, size, className, children, ...props }: ButtonProps) => react.JSX.Element;
 
 export { Button, type ButtonProps };

package/dist/index.d.ts

@@ -2,9 +2,11 @@ import * as react from 'react';
 import { ButtonHTMLAttributes, ReactNode } from 'react';
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: "primary" | "secondary" | "ghost";
-    children: ReactNode;
+    text?: string;
+    size?: "sm" | "md" | "lg";
+    theme?: "primary" | "secondary" | "tertiary";
+    children?: ReactNode;
 }
-declare function Button({ variant, className, children, ...props }: ButtonProps): react.JSX.Element;
+declare const Button: ({ text, theme, size, className, children, ...props }: ButtonProps) => react.JSX.Element;
 
 export { Button, type ButtonProps };

package/dist/index.js

@@ -1,25 +1,57 @@
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/styles.compiled.css
+styleInject('/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n@layer properties {\n  @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {\n    *,\n    :before,\n    :after,\n    ::backdrop {\n      --tw-border-style:solid;\n      --tw-font-weight:initial;\n      --tw-outline-style:solid;\n    }\n  }\n}\n@layer theme {\n  :root,\n  :host {\n    --font-sans:-apple-system,\n      BlinkMacSystemFont,\n      "Segoe UI",\n      Roboto,\n      "Helvetica Neue",\n      "Noto Sans",\n      Arial,\n      sans-serif,\n      "Apple Color Emoji",\n      "Segoe UI Emoji",\n      "Segoe UI Symbol",\n      "Noto Color Emoji";\n    --font-mono:ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      "Liberation Mono",\n      "Courier New",\n      monospace;\n    --color-red-700:oklch(50.5% .213 27.518);\n    --color-blue-100:oklch(93.2% .032 255.585);\n    --color-blue-500:oklch(62.3% .214 259.815);\n    --color-blue-600:oklch(54.6% .245 262.881);\n    --color-indigo-50:oklch(96.2% .018 272.314);\n    --color-indigo-600:oklch(51.1% .262 276.966);\n    --color-indigo-700:oklch(45.7% .24 277.023);\n    --color-gray-200:oklch(92.8% .006 264.531);\n    --color-gray-300:oklch(87.2% .01 258.338);\n    --color-gray-500:oklch(55.1% .027 264.364);\n    --color-gray-600:oklch(44.6% .03 256.802);\n    --color-gray-900:oklch(21% .034 264.665);\n    --color-white:#fff;\n    --spacing:.25rem;\n    --text-xs:.75rem;\n    --text-xs--line-height:calc(1 / .75);\n    --text-sm:.875rem;\n    --text-sm--line-height:calc(1.25 / .875);\n    --text-base:1rem;\n    --text-base--line-height:calc(1.5 / 1);\n    --font-weight-medium:500;\n    --radius-md:.375rem;\n    --default-transition-duration:.15s;\n    --default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);\n    --default-font-family:var(--font-sans);\n    --default-mono-font-family:var(--font-mono);\n  }\n}\n@layer base {\n  *,\n  :after,\n  :before,\n  ::backdrop {\n    box-sizing: border-box;\n    border: 0 solid;\n    margin: 0;\n    padding: 0;\n  }\n  ::file-selector-button {\n    box-sizing: border-box;\n    border: 0 solid;\n    margin: 0;\n    padding: 0;\n  }\n  html,\n  :host {\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    line-height: 1.5;\n    font-family: var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n    font-feature-settings: var(--default-font-feature-settings,normal);\n    font-variation-settings: var(--default-font-variation-settings,normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    -webkit-text-decoration: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b,\n  strong {\n    font-weight: bolder;\n  }\n  code,\n  kbd,\n  samp,\n  pre {\n    font-family: var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings,normal);\n    font-variation-settings: var(--default-mono-font-variation-settings,normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub,\n  sup {\n    vertical-align: baseline;\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n  }\n  sub {\n    bottom: -.25em;\n  }\n  sup {\n    top: -.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring:where(:not(iframe)) {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol,\n  ul,\n  menu {\n    list-style: none;\n  }\n  img,\n  svg,\n  video,\n  canvas,\n  audio,\n  iframe,\n  embed,\n  object {\n    vertical-align: middle;\n    display: block;\n  }\n  img,\n  video {\n    max-width: 100%;\n    height: auto;\n  }\n  button,\n  input,\n  select,\n  optgroup,\n  textarea {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    opacity: 1;\n    background-color: #0000;\n    border-radius: 0;\n  }\n  ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    opacity: 1;\n    background-color: #0000;\n    border-radius: 0;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {\n    ::placeholder {\n      color: currentColor;\n    }\n    @supports (color:color-mix(in lab, red, red)) {\n      ::placeholder {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit {\n    padding-block: 0;\n  }\n  ::-webkit-datetime-edit-year-field {\n    padding-block: 0;\n  }\n  ::-webkit-datetime-edit-month-field {\n    padding-block: 0;\n  }\n  ::-webkit-datetime-edit-day-field {\n    padding-block: 0;\n  }\n  ::-webkit-datetime-edit-hour-field {\n    padding-block: 0;\n  }\n  ::-webkit-datetime-edit-minute-field {\n    padding-block: 0;\n  }\n  ::-webkit-datetime-edit-second-field {\n    padding-block: 0;\n  }\n  ::-webkit-datetime-edit-millisecond-field {\n    padding-block: 0;\n  }\n  ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button,\n  input:where([type=button], [type=reset], [type=submit]) {\n    appearance: button;\n  }\n  ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button {\n    height: auto;\n  }\n  ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=until-found])) {\n    display: none !important;\n  }\n}\n@layer components;\n@layer utilities {\n  .inline-flex {\n    display: inline-flex;\n  }\n  .table {\n    display: table;\n  }\n  .border-collapse {\n    border-collapse: collapse;\n  }\n  .resize {\n    resize: both;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .rounded-md {\n    border-radius: var(--radius-md);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .bg-blue-500 {\n    background-color: var(--color-blue-500);\n  }\n  .bg-gray-200 {\n    background-color: var(--color-gray-200);\n  }\n  .bg-gray-500 {\n    background-color: var(--color-gray-500);\n  }\n  .bg-indigo-600 {\n    background-color: var(--color-indigo-600);\n  }\n  .bg-red-700 {\n    background-color: var(--color-red-700);\n  }\n  .bg-transparent {\n    background-color: #0000;\n  }\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6);\n  }\n  .py-1 {\n    padding-block: var(--spacing);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .text-base {\n    font-size: var(--text-base);\n    line-height: var(--tw-leading,var(--text-base--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading,var(--text-sm--line-height));\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading,var(--text-xs--line-height));\n  }\n  .font-medium {\n    --tw-font-weight:var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n  .text-blue-500 {\n    color: var(--color-blue-500);\n  }\n  .text-gray-900 {\n    color: var(--color-gray-900);\n  }\n  .text-indigo-600 {\n    color: var(--color-indigo-600);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .underline {\n    text-decoration-line: underline;\n  }\n  .outline {\n    outline-style: var(--tw-outline-style);\n    outline-width: 1px;\n  }\n  .transition-colors {\n    transition-property:\n      color,\n      background-color,\n      border-color,\n      outline-color,\n      text-decoration-color,\n      fill,\n      stroke,\n      --tw-gradient-from,\n      --tw-gradient-via,\n      --tw-gradient-to;\n    transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration,var(--default-transition-duration));\n  }\n  @media (hover: hover) {\n    .hover\\:bg-blue-100:hover {\n      background-color: var(--color-blue-100);\n    }\n    .hover\\:bg-blue-600:hover {\n      background-color: var(--color-blue-600);\n    }\n    .hover\\:bg-gray-600:hover {\n      background-color: var(--color-gray-600);\n    }\n  }\n}\n@property --tw-border-style { syntax:"*";inherits:false;initial-value:solid }\n@property --tw-font-weight { syntax:"*";inherits:false }\n@property --tw-outline-style { syntax:"*";inherits:false;initial-value:solid }\n');
+
 // src/components/Button/Button.tsx
 import { jsx } from "react/jsx-runtime";
-var variantClasses = {
-  primary: "bg-indigo-600 text-white hover:bg-indigo-700",
-  secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300",
-  ghost: "bg-transparent text-indigo-600 hover:bg-indigo-50"
+var sizeClasses = {
+  sm: "px-2 py-1 text-xs",
+  md: "px-4 py-2 text-sm",
+  lg: "px-6 py-3 text-base"
+};
+var themeClasses = {
+  primary: "bg-blue-500 text-white hover:bg-blue-600",
+  secondary: "bg-gray-500 text-white hover:bg-gray-600",
+  tertiary: "bg-transparent text-blue-500 hover:bg-blue-100"
 };
-function Button({
-  variant = "primary",
+var Button = ({
+  text,
+  theme = "primary",
+  size = "md",
   className = "",
   children,
   ...props
-}) {
+}) => {
   return /* @__PURE__ */ jsx(
     "button",
     {
-      className: `inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none ${variantClasses[variant]} ${className}`,
+      className: `rounded-md font-medium transition-colors ${sizeClasses[size]} ${themeClasses[theme]} ${className}`,
       ...props,
-      children
+      children: children ?? text
     }
   );
-}
+};
 export {
   Button
 };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from \"react\";\r\n\r\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\r\n    variant?: \"primary\" | \"secondary\" | \"ghost\";\r\n    children: ReactNode;\r\n}\r\n\r\nconst variantClasses: Record<NonNullable<ButtonProps[\"variant\"]>, string> = {\r\n    primary: \"bg-indigo-600 text-white hover:bg-indigo-700\",\r\n    secondary: \"bg-gray-200 text-gray-900 hover:bg-gray-300\",\r\n    ghost: \"bg-transparent text-indigo-600 hover:bg-indigo-50\",\r\n};\r\n\r\nexport function Button({\r\n    variant = \"primary\",\r\n    className = \"\",\r\n    children,\r\n    ...props\r\n}: ButtonProps) {\r\n    return (\r\n        <button\r\n            className={`inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none ${variantClasses[variant]} ${className}`}\r\n            {...props}\r\n        >\r\n            {children}\r\n        </button>\r\n    );\r\n}"],"mappings":";AAoBQ;AAbR,IAAM,iBAAsE;AAAA,EACxE,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AACX;AAEO,SAAS,OAAO;AAAA,EACnB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACP,GAAgB;AACZ,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW,uJAAuJ,eAAe,OAAO,CAAC,IAAI,SAAS;AAAA,MACrM,GAAG;AAAA,MAEH;AAAA;AAAA,EACL;AAER;","names":[]}
+{"version":3,"sources":["#style-inject:#style-inject","../src/styles.compiled.css","../src/components/Button/Button.tsx"],"sourcesContent":["\n          export default function styleInject(css, { insertAt } = {}) {\n            if (!css || typeof document === 'undefined') return\n          \n            const head = document.head || document.getElementsByTagName('head')[0]\n            const style = document.createElement('style')\n            style.type = 'text/css'\n          \n            if (insertAt === 'top') {\n              if (head.firstChild) {\n                head.insertBefore(style, head.firstChild)\n              } else {\n                head.appendChild(style)\n              }\n            } else {\n              head.appendChild(style)\n            }\n          \n            if (style.styleSheet) {\n              style.styleSheet.cssText = css\n            } else {\n              style.appendChild(document.createTextNode(css))\n            }\n          }\n          ","import styleInject from '#style-inject';styleInject(\"/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\\n@layer properties {\\n  @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {\\n    *,\\n    :before,\\n    :after,\\n    ::backdrop {\\n      --tw-border-style:solid;\\n      --tw-font-weight:initial;\\n      --tw-outline-style:solid;\\n    }\\n  }\\n}\\n@layer theme {\\n  :root,\\n  :host {\\n    --font-sans:-apple-system,\\n      BlinkMacSystemFont,\\n      \\\"Segoe UI\\\",\\n      Roboto,\\n      \\\"Helvetica Neue\\\",\\n      \\\"Noto Sans\\\",\\n      Arial,\\n      sans-serif,\\n      \\\"Apple Color Emoji\\\",\\n      \\\"Segoe UI Emoji\\\",\\n      \\\"Segoe UI Symbol\\\",\\n      \\\"Noto Color Emoji\\\";\\n    --font-mono:ui-monospace,\\n      SFMono-Regular,\\n      Menlo,\\n      Monaco,\\n      Consolas,\\n      \\\"Liberation Mono\\\",\\n      \\\"Courier New\\\",\\n      monospace;\\n    --color-red-700:oklch(50.5% .213 27.518);\\n    --color-blue-100:oklch(93.2% .032 255.585);\\n    --color-blue-500:oklch(62.3% .214 259.815);\\n    --color-blue-600:oklch(54.6% .245 262.881);\\n    --color-indigo-50:oklch(96.2% .018 272.314);\\n    --color-indigo-600:oklch(51.1% .262 276.966);\\n    --color-indigo-700:oklch(45.7% .24 277.023);\\n    --color-gray-200:oklch(92.8% .006 264.531);\\n    --color-gray-300:oklch(87.2% .01 258.338);\\n    --color-gray-500:oklch(55.1% .027 264.364);\\n    --color-gray-600:oklch(44.6% .03 256.802);\\n    --color-gray-900:oklch(21% .034 264.665);\\n    --color-white:#fff;\\n    --spacing:.25rem;\\n    --text-xs:.75rem;\\n    --text-xs--line-height:calc(1 / .75);\\n    --text-sm:.875rem;\\n    --text-sm--line-height:calc(1.25 / .875);\\n    --text-base:1rem;\\n    --text-base--line-height:calc(1.5 / 1);\\n    --font-weight-medium:500;\\n    --radius-md:.375rem;\\n    --default-transition-duration:.15s;\\n    --default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);\\n    --default-font-family:var(--font-sans);\\n    --default-mono-font-family:var(--font-mono);\\n  }\\n}\\n@layer base {\\n  *,\\n  :after,\\n  :before,\\n  ::backdrop {\\n    box-sizing: border-box;\\n    border: 0 solid;\\n    margin: 0;\\n    padding: 0;\\n  }\\n  ::file-selector-button {\\n    box-sizing: border-box;\\n    border: 0 solid;\\n    margin: 0;\\n    padding: 0;\\n  }\\n  html,\\n  :host {\\n    -webkit-text-size-adjust: 100%;\\n    tab-size: 4;\\n    line-height: 1.5;\\n    font-family: var(--default-font-family,-apple-system, BlinkMacSystemFont, \\\"Segoe UI\\\", Roboto, \\\"Helvetica Neue\\\", \\\"Noto Sans\\\", Arial, sans-serif, \\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\", \\\"Noto Color Emoji\\\");\\n    font-feature-settings: var(--default-font-feature-settings,normal);\\n    font-variation-settings: var(--default-font-variation-settings,normal);\\n    -webkit-tap-highlight-color: transparent;\\n  }\\n  hr {\\n    height: 0;\\n    color: inherit;\\n    border-top-width: 1px;\\n  }\\n  abbr:where([title]) {\\n    -webkit-text-decoration: underline dotted;\\n    text-decoration: underline dotted;\\n  }\\n  h1,\\n  h2,\\n  h3,\\n  h4,\\n  h5,\\n  h6 {\\n    font-size: inherit;\\n    font-weight: inherit;\\n  }\\n  a {\\n    color: inherit;\\n    -webkit-text-decoration: inherit;\\n    -webkit-text-decoration: inherit;\\n    -webkit-text-decoration: inherit;\\n    text-decoration: inherit;\\n  }\\n  b,\\n  strong {\\n    font-weight: bolder;\\n  }\\n  code,\\n  kbd,\\n  samp,\\n  pre {\\n    font-family: var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace);\\n    font-feature-settings: var(--default-mono-font-feature-settings,normal);\\n    font-variation-settings: var(--default-mono-font-variation-settings,normal);\\n    font-size: 1em;\\n  }\\n  small {\\n    font-size: 80%;\\n  }\\n  sub,\\n  sup {\\n    vertical-align: baseline;\\n    font-size: 75%;\\n    line-height: 0;\\n    position: relative;\\n  }\\n  sub {\\n    bottom: -.25em;\\n  }\\n  sup {\\n    top: -.5em;\\n  }\\n  table {\\n    text-indent: 0;\\n    border-color: inherit;\\n    border-collapse: collapse;\\n  }\\n  :-moz-focusring:where(:not(iframe)) {\\n    outline: auto;\\n  }\\n  progress {\\n    vertical-align: baseline;\\n  }\\n  summary {\\n    display: list-item;\\n  }\\n  ol,\\n  ul,\\n  menu {\\n    list-style: none;\\n  }\\n  img,\\n  svg,\\n  video,\\n  canvas,\\n  audio,\\n  iframe,\\n  embed,\\n  object {\\n    vertical-align: middle;\\n    display: block;\\n  }\\n  img,\\n  video {\\n    max-width: 100%;\\n    height: auto;\\n  }\\n  button,\\n  input,\\n  select,\\n  optgroup,\\n  textarea {\\n    font: inherit;\\n    font-feature-settings: inherit;\\n    font-variation-settings: inherit;\\n    letter-spacing: inherit;\\n    color: inherit;\\n    opacity: 1;\\n    background-color: #0000;\\n    border-radius: 0;\\n  }\\n  ::file-selector-button {\\n    font: inherit;\\n    font-feature-settings: inherit;\\n    font-variation-settings: inherit;\\n    letter-spacing: inherit;\\n    color: inherit;\\n    opacity: 1;\\n    background-color: #0000;\\n    border-radius: 0;\\n  }\\n  :where(select:is([multiple], [size])) optgroup {\\n    font-weight: bolder;\\n  }\\n  :where(select:is([multiple], [size])) optgroup option {\\n    padding-inline-start: 20px;\\n  }\\n  ::file-selector-button {\\n    margin-inline-end: 4px;\\n  }\\n  ::placeholder {\\n    opacity: 1;\\n  }\\n  @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {\\n    ::placeholder {\\n      color: currentColor;\\n    }\\n    @supports (color:color-mix(in lab, red, red)) {\\n      ::placeholder {\\n        color: color-mix(in oklab, currentcolor 50%, transparent);\\n      }\\n    }\\n  }\\n  textarea {\\n    resize: vertical;\\n  }\\n  ::-webkit-search-decoration {\\n    -webkit-appearance: none;\\n  }\\n  ::-webkit-date-and-time-value {\\n    min-height: 1lh;\\n    text-align: inherit;\\n  }\\n  ::-webkit-datetime-edit {\\n    display: inline-flex;\\n  }\\n  ::-webkit-datetime-edit-fields-wrapper {\\n    padding: 0;\\n  }\\n  ::-webkit-datetime-edit {\\n    padding-block: 0;\\n  }\\n  ::-webkit-datetime-edit-year-field {\\n    padding-block: 0;\\n  }\\n  ::-webkit-datetime-edit-month-field {\\n    padding-block: 0;\\n  }\\n  ::-webkit-datetime-edit-day-field {\\n    padding-block: 0;\\n  }\\n  ::-webkit-datetime-edit-hour-field {\\n    padding-block: 0;\\n  }\\n  ::-webkit-datetime-edit-minute-field {\\n    padding-block: 0;\\n  }\\n  ::-webkit-datetime-edit-second-field {\\n    padding-block: 0;\\n  }\\n  ::-webkit-datetime-edit-millisecond-field {\\n    padding-block: 0;\\n  }\\n  ::-webkit-datetime-edit-meridiem-field {\\n    padding-block: 0;\\n  }\\n  ::-webkit-calendar-picker-indicator {\\n    line-height: 1;\\n  }\\n  :-moz-ui-invalid {\\n    box-shadow: none;\\n  }\\n  button,\\n  input:where([type=button], [type=reset], [type=submit]) {\\n    appearance: button;\\n  }\\n  ::file-selector-button {\\n    appearance: button;\\n  }\\n  ::-webkit-inner-spin-button {\\n    height: auto;\\n  }\\n  ::-webkit-outer-spin-button {\\n    height: auto;\\n  }\\n  [hidden]:where(:not([hidden=until-found])) {\\n    display: none !important;\\n  }\\n}\\n@layer components;\\n@layer utilities {\\n  .inline-flex {\\n    display: inline-flex;\\n  }\\n  .table {\\n    display: table;\\n  }\\n  .border-collapse {\\n    border-collapse: collapse;\\n  }\\n  .resize {\\n    resize: both;\\n  }\\n  .items-center {\\n    align-items: center;\\n  }\\n  .justify-center {\\n    justify-content: center;\\n  }\\n  .rounded-md {\\n    border-radius: var(--radius-md);\\n  }\\n  .border {\\n    border-style: var(--tw-border-style);\\n    border-width: 1px;\\n  }\\n  .bg-blue-500 {\\n    background-color: var(--color-blue-500);\\n  }\\n  .bg-gray-200 {\\n    background-color: var(--color-gray-200);\\n  }\\n  .bg-gray-500 {\\n    background-color: var(--color-gray-500);\\n  }\\n  .bg-indigo-600 {\\n    background-color: var(--color-indigo-600);\\n  }\\n  .bg-red-700 {\\n    background-color: var(--color-red-700);\\n  }\\n  .bg-transparent {\\n    background-color: #0000;\\n  }\\n  .px-2 {\\n    padding-inline: calc(var(--spacing) * 2);\\n  }\\n  .px-4 {\\n    padding-inline: calc(var(--spacing) * 4);\\n  }\\n  .px-6 {\\n    padding-inline: calc(var(--spacing) * 6);\\n  }\\n  .py-1 {\\n    padding-block: var(--spacing);\\n  }\\n  .py-2 {\\n    padding-block: calc(var(--spacing) * 2);\\n  }\\n  .py-3 {\\n    padding-block: calc(var(--spacing) * 3);\\n  }\\n  .text-base {\\n    font-size: var(--text-base);\\n    line-height: var(--tw-leading,var(--text-base--line-height));\\n  }\\n  .text-sm {\\n    font-size: var(--text-sm);\\n    line-height: var(--tw-leading,var(--text-sm--line-height));\\n  }\\n  .text-xs {\\n    font-size: var(--text-xs);\\n    line-height: var(--tw-leading,var(--text-xs--line-height));\\n  }\\n  .font-medium {\\n    --tw-font-weight:var(--font-weight-medium);\\n    font-weight: var(--font-weight-medium);\\n  }\\n  .text-blue-500 {\\n    color: var(--color-blue-500);\\n  }\\n  .text-gray-900 {\\n    color: var(--color-gray-900);\\n  }\\n  .text-indigo-600 {\\n    color: var(--color-indigo-600);\\n  }\\n  .text-white {\\n    color: var(--color-white);\\n  }\\n  .underline {\\n    text-decoration-line: underline;\\n  }\\n  .outline {\\n    outline-style: var(--tw-outline-style);\\n    outline-width: 1px;\\n  }\\n  .transition-colors {\\n    transition-property:\\n      color,\\n      background-color,\\n      border-color,\\n      outline-color,\\n      text-decoration-color,\\n      fill,\\n      stroke,\\n      --tw-gradient-from,\\n      --tw-gradient-via,\\n      --tw-gradient-to;\\n    transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));\\n    transition-duration: var(--tw-duration,var(--default-transition-duration));\\n  }\\n  @media (hover: hover) {\\n    .hover\\\\:bg-blue-100:hover {\\n      background-color: var(--color-blue-100);\\n    }\\n    .hover\\\\:bg-blue-600:hover {\\n      background-color: var(--color-blue-600);\\n    }\\n    .hover\\\\:bg-gray-600:hover {\\n      background-color: var(--color-gray-600);\\n    }\\n  }\\n}\\n@property --tw-border-style { syntax:\\\"*\\\";inherits:false;initial-value:solid }\\n@property --tw-font-weight { syntax:\\\"*\\\";inherits:false }\\n@property --tw-outline-style { syntax:\\\"*\\\";inherits:false;initial-value:solid }\\n\")","import type { ButtonHTMLAttributes, ReactNode } from \"react\";\r\n\r\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\r\n    text?: string;\r\n    size?: \"sm\" | \"md\" | \"lg\";\r\n    theme?: \"primary\" | \"secondary\" | \"tertiary\";\r\n    children?: ReactNode;\r\n}\r\n\r\nconst sizeClasses: Record<NonNullable<ButtonProps[\"size\"]>, string> = {\r\n    sm: \"px-2 py-1 text-xs\",\r\n    md: \"px-4 py-2 text-sm\",\r\n    lg: \"px-6 py-3 text-base\",\r\n};\r\n\r\nconst themeClasses: Record<NonNullable<ButtonProps[\"theme\"]>, string> = {\r\n    primary: \"bg-blue-500 text-white hover:bg-blue-600\",\r\n    secondary: \"bg-gray-500 text-white hover:bg-gray-600\",\r\n    tertiary: \"bg-transparent text-blue-500 hover:bg-blue-100\",\r\n};\r\n\r\nexport const Button = ({\r\n    text,\r\n    theme = \"primary\",\r\n    size = \"md\",\r\n    className = \"\",\r\n    children,\r\n    ...props\r\n}: ButtonProps) => {\r\n    return (\r\n        <button\r\n            className={`rounded-md font-medium transition-colors ${sizeClasses[size]} ${themeClasses[theme]} ${className}`}\r\n            {...props}\r\n        >\r\n            {children ?? text}\r\n        </button>\r\n    );\r\n};"],"mappings":";AACyB,SAAR,YAA6B,KAAK,EAAE,SAAS,IAAI,CAAC,GAAG;AAC1D,MAAI,CAAC,OAAO,OAAO,aAAa,YAAa;AAE7C,QAAM,OAAO,SAAS,QAAQ,SAAS,qBAAqB,MAAM,EAAE,CAAC;AACrE,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,OAAO;AAEb,MAAI,aAAa,OAAO;AACtB,QAAI,KAAK,YAAY;AACnB,WAAK,aAAa,OAAO,KAAK,UAAU;AAAA,IAC1C,OAAO;AACL,WAAK,YAAY,KAAK;AAAA,IACxB;AAAA,EACF,OAAO;AACL,SAAK,YAAY,KAAK;AAAA,EACxB;AAEA,MAAI,MAAM,YAAY;AACpB,UAAM,WAAW,UAAU;AAAA,EAC7B,OAAO;AACL,UAAM,YAAY,SAAS,eAAe,GAAG,CAAC;AAAA,EAChD;AACF;;;ACvB8B,YAAY,kyTAA40T;;;AC8Bx3T;AArBR,IAAM,cAAgE;AAAA,EAClE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;AAEA,IAAM,eAAkE;AAAA,EACpE,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AACd;AAEO,IAAM,SAAS,CAAC;AAAA,EACnB;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACP,MAAmB;AACf,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW,4CAA4C,YAAY,IAAI,CAAC,IAAI,aAAa,KAAK,CAAC,IAAI,SAAS;AAAA,MAC3G,GAAG;AAAA,MAEH,sBAAY;AAAA;AAAA,EACjB;AAER;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birbalkr/buildui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "BuildUI is a collection of reusable React + TypeScript + Tailwind CSS UI components, animations, layouts, and interaction patterns.",
   "license": "MIT",
   "type": "module",
@@ -15,16 +15,15 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
-    },
-    "./styles.css": "./dist/styles.css"
+    }
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "npm run build:js && npm run build:css",
+    "build": "npm run build:css && npm run build:js",
+    "build:css": "tailwindcss -i ./src/styles.css -o ./src/styles.compiled.css --minify",
     "build:js": "tsup",
-    "build:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "npm run build"

package/dist/styles.css

@@ -1,2 +0,0 @@
-/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@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-font-weight:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, 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-indigo-50:oklch(96.2% .018 272.314);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-700:oklch(45.7% .24 277.023);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-medium:500;--radius-md:.375rem;--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)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, 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;-webkit-text-decoration: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{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}: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)){::placeholder{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{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-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]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-md{border-radius:var(--radius-md)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-indigo-600{background-color:var(--color-indigo-600)}.bg-transparent{background-color:#0000}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-2{padding-block:calc(var(--spacing) * 2)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.text-gray-900{color:var(--color-gray-900)}.text-indigo-600{color:var(--color-indigo-600)}.text-white{color:var(--color-white)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.hover\:bg-gray-300:hover{background-color:var(--color-gray-300)}.hover\:bg-indigo-50:hover{background-color:var(--color-indigo-50)}.hover\:bg-indigo-700:hover{background-color:var(--color-indigo-700)}}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-50:disabled{opacity:.5}}@property --tw-font-weight{syntax:"*";inherits:false}