@brosco/ui 0.0.84 → 0.0.86

package/dist/index.d.ts

@@ -1,3 +1,2 @@
-import "./_css/styles.css";
 export * from "./button";
 export * from "./spinner";

package/dist/index.js

@@ -1 +1 @@
-import{Button as e}from"@base-ui/react";import{cn as t}from"cn";import{jsx as n,jsxs as r}from"react/jsx-runtime";import{tv as i}from"tailwind-variants";import './index.css';var a=({className:e,size:r=24})=>n(`svg`,{className:t(`spinner`,e),fill:`currentColor`,height:r,stroke:`currentColor`,strokeWidth:`0`,version:`1.1`,viewBox:`0 0 16 16`,width:r,xmlns:`http://www.w3.org/2000/svg`,children:n(`path`,{d:`M16 8c-0.020-1.045-0.247-2.086-0.665-3.038-0.417-0.953-1.023-1.817-1.766-2.53s-1.624-1.278-2.578-1.651c-0.953-0.374-1.978-0.552-2.991-0.531-1.013 0.020-2.021 0.24-2.943 0.646-0.923 0.405-1.758 0.992-2.449 1.712s-1.237 1.574-1.597 2.497c-0.361 0.923-0.533 1.914-0.512 2.895 0.020 0.981 0.234 1.955 0.627 2.847 0.392 0.892 0.961 1.7 1.658 2.368s1.523 1.195 2.416 1.543c0.892 0.348 1.851 0.514 2.799 0.493 0.949-0.020 1.89-0.227 2.751-0.608 0.862-0.379 1.642-0.929 2.287-1.604s1.154-1.472 1.488-2.335c0.204-0.523 0.342-1.069 0.415-1.622 0.019 0.001 0.039 0.002 0.059 0.002 0.552 0 1-0.448 1-1 0-0.028-0.001-0.056-0.004-0.083h0.004zM14.411 10.655c-0.367 0.831-0.898 1.584-1.55 2.206s-1.422 1.112-2.254 1.434c-0.832 0.323-1.723 0.476-2.608 0.454-0.884-0.020-1.759-0.215-2.56-0.57-0.801-0.354-1.526-0.867-2.125-1.495s-1.071-1.371-1.38-2.173c-0.31-0.801-0.457-1.66-0.435-2.512s0.208-1.694 0.551-2.464c0.342-0.77 0.836-1.468 1.441-2.044s1.321-1.029 2.092-1.326c0.771-0.298 1.596-0.438 2.416-0.416s1.629 0.202 2.368 0.532c0.74 0.329 1.41 0.805 1.963 1.387s0.988 1.27 1.272 2.011c0.285 0.74 0.418 1.532 0.397 2.32h0.004c-0.002 0.027-0.004 0.055-0.004 0.083 0 0.516 0.39 0.94 0.892 0.994-0.097 0.544-0.258 1.075-0.481 1.578z`})}),o=i({base:`button`,variants:{variant:{solid:`button--solid`,bordered:`button--bordered`,light:`button--light`},color:{primary:`button--primary`,secondary:`button--secondary`,success:`button--success`,danger:`button--danger`},rounded:{full:`rounded-full`,lg:`rounded-lg`,md:`rounded-md`,sm:`rounded-sm`,none:`rounded-none`},size:{sm:`button--sm`,md:`button--md`,lg:`button--lg`},isIconOnly:{true:`button--icon-only`,false:`px-4`},fullWidth:{true:`w-full`}},defaultVariants:{variant:`light`,color:`primary`,rounded:`lg`,size:`md`}}),s=i({extend:o,variants:{isPending:{true:`button--pending`}},defaultVariants:{variant:`solid`}}),c=({children:i,icon:c,className:l,disabled:u,variant:d,color:f,rounded:p,size:m,isIconOnly:h,fullWidth:g,isPending:_,...v})=>{let y=!!v.render,b=y?o({variant:d,color:f,rounded:p,size:m,isIconOnly:h,fullWidth:g}):s({variant:d,color:f,rounded:p,size:m,isIconOnly:h,fullWidth:g,isPending:_});return r(e,{className:t(b,l),disabled:!y&&u,nativeButton:!y,...v,children:[_&&!y?n(a,{}):c,!h&&n(`span`,{children:i})]})};export{c as Button,a as Spinner,s as buttonVariants,o as linkVariants};
+import{Button as e}from"@base-ui/react";import{cn as t}from"cn";import{jsx as n,jsxs as r}from"react/jsx-runtime";import{tv as i}from"tailwind-variants";var a=({className:e,size:r=24})=>n(`svg`,{className:t(`spinner`,e),fill:`currentColor`,height:r,stroke:`currentColor`,strokeWidth:`0`,version:`1.1`,viewBox:`0 0 16 16`,width:r,xmlns:`http://www.w3.org/2000/svg`,children:n(`path`,{d:`M16 8c-0.020-1.045-0.247-2.086-0.665-3.038-0.417-0.953-1.023-1.817-1.766-2.53s-1.624-1.278-2.578-1.651c-0.953-0.374-1.978-0.552-2.991-0.531-1.013 0.020-2.021 0.24-2.943 0.646-0.923 0.405-1.758 0.992-2.449 1.712s-1.237 1.574-1.597 2.497c-0.361 0.923-0.533 1.914-0.512 2.895 0.020 0.981 0.234 1.955 0.627 2.847 0.392 0.892 0.961 1.7 1.658 2.368s1.523 1.195 2.416 1.543c0.892 0.348 1.851 0.514 2.799 0.493 0.949-0.020 1.89-0.227 2.751-0.608 0.862-0.379 1.642-0.929 2.287-1.604s1.154-1.472 1.488-2.335c0.204-0.523 0.342-1.069 0.415-1.622 0.019 0.001 0.039 0.002 0.059 0.002 0.552 0 1-0.448 1-1 0-0.028-0.001-0.056-0.004-0.083h0.004zM14.411 10.655c-0.367 0.831-0.898 1.584-1.55 2.206s-1.422 1.112-2.254 1.434c-0.832 0.323-1.723 0.476-2.608 0.454-0.884-0.020-1.759-0.215-2.56-0.57-0.801-0.354-1.526-0.867-2.125-1.495s-1.071-1.371-1.38-2.173c-0.31-0.801-0.457-1.66-0.435-2.512s0.208-1.694 0.551-2.464c0.342-0.77 0.836-1.468 1.441-2.044s1.321-1.029 2.092-1.326c0.771-0.298 1.596-0.438 2.416-0.416s1.629 0.202 2.368 0.532c0.74 0.329 1.41 0.805 1.963 1.387s0.988 1.27 1.272 2.011c0.285 0.74 0.418 1.532 0.397 2.32h0.004c-0.002 0.027-0.004 0.055-0.004 0.083 0 0.516 0.39 0.94 0.892 0.994-0.097 0.544-0.258 1.075-0.481 1.578z`})}),o=i({base:`button`,variants:{variant:{solid:`button--solid`,bordered:`button--bordered`,light:`button--light`},color:{primary:`button--primary`,secondary:`button--secondary`,success:`button--success`,danger:`button--danger`},rounded:{full:`rounded-full`,lg:`rounded-lg`,md:`rounded-md`,sm:`rounded-sm`,none:`rounded-none`},size:{sm:`button--sm`,md:`button--md`,lg:`button--lg`},isIconOnly:{true:`button--icon-only`,false:`px-4`},fullWidth:{true:`w-full`}},defaultVariants:{variant:`light`,color:`primary`,rounded:`lg`,size:`md`}}),s=i({extend:o,variants:{isPending:{true:`button--pending`}},defaultVariants:{variant:`solid`}}),c=({children:i,icon:c,className:l,disabled:u,variant:d,color:f,rounded:p,size:m,isIconOnly:h,fullWidth:g,isPending:_,...v})=>{let y=!!v.render,b=y?o({variant:d,color:f,rounded:p,size:m,isIconOnly:h,fullWidth:g}):s({variant:d,color:f,rounded:p,size:m,isIconOnly:h,fullWidth:g,isPending:_});return r(e,{className:t(b,l),disabled:!y&&u,nativeButton:!y,...v,children:[_&&!y?n(a,{}):c,!h&&n(`span`,{children:i})]})};export{c as Button,a as Spinner,s as buttonVariants,o as linkVariants};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brosco/ui",
-  "version": "0.0.84",
+  "version": "0.0.86",
   "type": "module",
   "files": [
     "dist"
@@ -9,7 +9,8 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    }
+    },
+    "./styles.css": "./dist/index.css"
   },
   "scripts": {
     "dev": "vite",

package/dist/index.css

@@ -1,353 +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;
-      --tw-scale-x: 1;
-      --tw-scale-y: 1;
-      --tw-scale-z: 1;
-      --tw-shadow: 0 0 #0000;
-      --tw-shadow-color: initial;
-      --tw-shadow-alpha: 100%;
-      --tw-inset-shadow: 0 0 #0000;
-      --tw-inset-shadow-color: initial;
-      --tw-inset-shadow-alpha: 100%;
-      --tw-ring-color: initial;
-      --tw-ring-shadow: 0 0 #0000;
-      --tw-inset-ring-color: initial;
-      --tw-inset-ring-shadow: 0 0 #0000;
-      --tw-ring-inset: initial;
-      --tw-ring-offset-width: 0px;
-      --tw-ring-offset-color: #fff;
-      --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-border-style: solid;
-    }
-  }
-}
-:root {
-  --eclipse: var(--color-zinc-900);
-  --background: var(--color-white);
-  --foreground: var(--eclipse);
-  --muted: var(--color-zinc-500);
-  --primary: var(--color-blue-500);
-  --secondary: var(--eclipse);
-  --success: var(--color-green-600);
-  --danger: var(--color-red-500);
-}
-:root,
-:host {
-  --color-red-500: oklch(63.7% 0.237 25.331);
-  --color-green-600: oklch(62.7% 0.194 149.214);
-  --color-blue-500: oklch(62.3% 0.214 259.815);
-  --color-zinc-500: oklch(55.2% 0.016 285.938);
-  --color-zinc-900: oklch(21% 0.006 285.885);
-  --color-white: #fff;
-  --spacing: 0.25rem;
-  --text-sm: 0.875rem;
-  --text-sm--line-height: calc(1.25 / 0.875);
-  --text-base: 1rem;
-  --text-base--line-height: calc(1.5 / 1);
-  --font-weight-medium: 500;
-  --animate-spin: spin 1s linear infinite;
-  --default-transition-duration: 0.15s;
-  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-@layer utilities;
-@layer components {
-  .button {
-    --color: transparent;
-    --bg: transparent;
-    --bg-hover: var(--bg);
-    --bg-active: var(--bg-hover);
-    --fg: currentColor;
-  }
-  .button--primary {
-    --color: var(--primary);
-  }
-  .button--secondary {
-    --color: var(--secondary);
-  }
-  .button--success {
-    --color: var(--success);
-  }
-  .button--danger {
-    --color: var(--danger);
-  }
-  .button--solid {
-    --bg: var(--color);
-    --bg-hover: var(--bg);
-  }
-  @supports (color: color-mix(in lab, red, red)) {
-    .button--solid {
-      --bg-hover: color-mix(in oklab, var(--bg) 90%, var(--eclipse) 10%);
-    }
-  }
-  .button--solid {
-    --bg-active: var(--bg);
-  }
-  @supports (color: color-mix(in lab, red, red)) {
-    .button--solid {
-      --bg-active: color-mix(in oklab, var(--bg) 80%, var(--eclipse) 20%);
-    }
-  }
-  .button--solid {
-    --fg: var(--color-white);
-  }
-  .button--solid.button--secondary {
-    --bg: var(--color);
-  }
-  @supports (color: color-mix(in lab, red, red)) {
-    .button--solid.button--secondary {
-      --bg: color-mix(in oklab, var(--color) 5%, transparent);
-    }
-  }
-  .button--solid.button--secondary {
-    --bg-hover: var(--bg);
-  }
-  @supports (color: color-mix(in lab, red, red)) {
-    .button--solid.button--secondary {
-      --bg-hover: color-mix(in oklab, var(--bg) 95%, var(--eclipse) 5%);
-    }
-  }
-  .button--solid.button--secondary {
-    --bg-active: var(--bg);
-  }
-  @supports (color: color-mix(in lab, red, red)) {
-    .button--solid.button--secondary {
-      --bg-active: color-mix(in oklab, var(--bg) 90%, var(--eclipse) 10%);
-    }
-  }
-  .button--solid.button--secondary {
-    --fg: var(--color);
-  }
-  .button--bordered,
-  .button--light {
-    --fg: var(--color);
-    --bg-hover: var(--fg);
-  }
-  @supports (color: color-mix(in lab, red, red)) {
-    .button--bordered,
-    .button--light {
-      --bg-hover: color-mix(in oklab, var(--fg) 5%, transparent);
-    }
-  }
-  .button {
-    justify-content: center;
-    align-items: center;
-    gap: calc(var(--spacing) * 2);
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-    white-space: nowrap;
-    color: var(--fg);
-    transition-property: background-color, scale;
-    transition-timing-function: var(
-      --tw-ease,
-      var(--default-transition-timing-function)
-    );
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-    -webkit-user-select: none;
-    user-select: none;
-    display: inline-flex;
-  }
-  .button:focus-visible {
-    --tw-outline-style: none;
-    outline-style: none;
-  }
-  .button:enabled {
-    cursor: pointer;
-  }
-  .button:hover {
-    background-color: var(--bg-hover);
-  }
-  .button:active {
-    --tw-scale-x: 95%;
-    --tw-scale-y: 95%;
-    --tw-scale-z: 95%;
-    scale: var(--tw-scale-x) var(--tw-scale-y);
-    background-color: var(--bg-active);
-  }
-  .button--pending {
-    pointer-events: none;
-  }
-  .button--sm {
-    height: calc(var(--spacing) * 9);
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-  }
-  .button--md {
-    height: calc(var(--spacing) * 10);
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-  }
-  .button--lg {
-    height: calc(var(--spacing) * 11);
-    font-size: var(--text-base);
-    line-height: var(--tw-leading, var(--text-base--line-height));
-  }
-  .button--icon-only {
-    flex-shrink: 0;
-  }
-  .button--icon-only.button--sm {
-    width: calc(var(--spacing) * 9);
-  }
-  .button--icon-only.button--md {
-    width: calc(var(--spacing) * 10);
-  }
-  .button--icon-only.button--lg {
-    width: calc(var(--spacing) * 11);
-  }
-  .button--solid {
-    background-color: var(--bg);
-  }
-  .button--solid:focus-visible:not(.button--pending) {
-    --tw-ring-color: var(--color);
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
-      calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow:
-      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
-      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    --tw-ring-offset-width: 2px;
-    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0
-      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  }
-  .button--bordered {
-    border-style: var(--tw-border-style);
-    border-width: 2px;
-    border-color: var(--fg);
-  }
-  .button--bordered:focus-visible:not(.button--pending) {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
-      calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow:
-      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
-      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    --tw-ring-offset-width: 2px;
-    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0
-      var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  }
-  .button--light {
-    text-underline-offset: 6px;
-    text-decoration-line: underline;
-    position: relative;
-  }
-  @media (hover: hover) {
-    .button--light:hover {
-      text-decoration-line: none;
-    }
-  }
-  .button--light:focus-visible:not(.button--pending):after {
-    top: calc(var(--spacing) * 2);
-    right: calc(var(--spacing) * 3);
-    left: calc(var(--spacing) * 3);
-    height: calc(var(--spacing) * 0.5);
-    content: "";
-    background-color: currentColor;
-    position: absolute;
-  }
-  .spinner {
-    animation: var(--animate-spin);
-  }
-  :disabled,
-  [data-disabled] {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-scale-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-inset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-ring-inset {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-offset-width {
-  syntax: "<length>";
-  inherits: false;
-  initial-value: 0;
-}
-@property --tw-ring-offset-color {
-  syntax: "*";
-  inherits: false;
-  initial-value: #fff;
-}
-@property --tw-ring-offset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}