@birbalkr/buildui 1.0.4 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +47 -0
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +10 -1
package/README.md
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
# BuildUI
|
|
2
|
+
|
|
3
|
+
A collection of reusable React + TypeScript + Tailwind CSS UI components.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @birbalkr/buildui react react-dom
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { Button } from '@birbalkr/buildui';
|
|
15
|
+
|
|
16
|
+
function App() {
|
|
17
|
+
return (
|
|
18
|
+
<div>
|
|
19
|
+
<Button text="Click me" size="md" theme="primary" onClick={() => console.log("clicked")} />
|
|
20
|
+
</div>
|
|
21
|
+
);
|
|
22
|
+
}
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
No separate CSS import is needed — styles are bundled automatically.
|
|
26
|
+
|
|
27
|
+
## Components
|
|
28
|
+
|
|
29
|
+
### Button
|
|
30
|
+
|
|
31
|
+
| Prop | Type | Default | Description |
|
|
32
|
+
|----------|-----------------------------------------|-------------|---------------------------------------|
|
|
33
|
+
| `text` | `string` | — | Button label (ignored if `children` passed) |
|
|
34
|
+
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Button size |
|
|
35
|
+
| `theme` | `"primary" \| "secondary" \| "tertiary"`| `"primary"` | Color theme |
|
|
36
|
+
| `children` | `ReactNode` | — | Overrides `text` if provided |
|
|
37
|
+
| ...rest | native `<button>` attributes | — | `onClick`, `disabled`, `className`, etc. |
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
<Button text="Small" size="sm" />
|
|
41
|
+
<Button theme="secondary">Click me</Button>
|
|
42
|
+
<Button theme="tertiary" size="lg" onClick={() => alert("hi")} />
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## License
|
|
46
|
+
|
|
47
|
+
MIT
|
package/dist/index.cjs
CHANGED
|
@@ -72,7 +72,7 @@ var Button = ({
|
|
|
72
72
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
73
73
|
"button",
|
|
74
74
|
{
|
|
75
|
-
className: `rounded-md
|
|
75
|
+
className: `rounded-md ${sizeClasses[size]} ${themeClasses[theme]} ${className}`,
|
|
76
76
|
...props,
|
|
77
77
|
children: children ?? text
|
|
78
78
|
}
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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":[]}
|
|
1
|
+
{"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 ${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,cAAc,YAAY,IAAI,CAAC,IAAI,aAAa,KAAK,CAAC,IAAI,SAAS;AAAA,MAC7E,GAAG;AAAA,MAEH,sBAAY;AAAA;AAAA,EACjB;AAER;","names":[]}
|
package/dist/index.js
CHANGED
|
@@ -46,7 +46,7 @@ var Button = ({
|
|
|
46
46
|
return /* @__PURE__ */ jsx(
|
|
47
47
|
"button",
|
|
48
48
|
{
|
|
49
|
-
className: `rounded-md
|
|
49
|
+
className: `rounded-md ${sizeClasses[size]} ${themeClasses[theme]} ${className}`,
|
|
50
50
|
...props,
|
|
51
51
|
children: children ?? text
|
|
52
52
|
}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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":[]}
|
|
1
|
+
{"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 ${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,cAAc,YAAY,IAAI,CAAC,IAAI,aAAa,KAAK,CAAC,IAAI,SAAS;AAAA,MAC7E,GAAG;AAAA,MAEH,sBAAY;AAAA;AAAA,EACjB;AAER;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@birbalkr/buildui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.6",
|
|
4
4
|
"description": "BuildUI is a collection of reusable React + TypeScript + Tailwind CSS UI components, animations, layouts, and interaction patterns.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -10,6 +10,15 @@
|
|
|
10
10
|
"sideEffects": [
|
|
11
11
|
"**/*.css"
|
|
12
12
|
],
|
|
13
|
+
"keywords": [
|
|
14
|
+
"react",
|
|
15
|
+
"typescript",
|
|
16
|
+
"tailwindcss",
|
|
17
|
+
"ui",
|
|
18
|
+
"components",
|
|
19
|
+
"button",
|
|
20
|
+
"component-library"
|
|
21
|
+
],
|
|
13
22
|
"exports": {
|
|
14
23
|
".": {
|
|
15
24
|
"types": "./dist/index.d.ts",
|