@brosco/ui 0.0.81 → 0.0.83

package/dist/index.css

@@ -25,7 +25,6 @@
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
       --tw-border-style: solid;
-      --tw-duration: initial;
     }
   }
 }
@@ -43,9 +42,21 @@
 }
 :root,
 :host {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-muted: var(--muted);
+  --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 {
@@ -129,20 +140,17 @@
   .button {
     justify-content: center;
     align-items: center;
-    gap: calc(var(--spacing, 0.25rem) * 2);
-    --tw-font-weight: var(--font-weight-medium, 500);
-    font-weight: var(--font-weight-medium, 500);
+    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, cubic-bezier(0.4, 0, 0.2, 1))
-    );
-    transition-duration: var(
-      --tw-duration,
-      var(--default-transition-duration, 0.15s)
+      var(--default-transition-timing-function)
     );
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
     -webkit-user-select: none;
     user-select: none;
     display: inline-flex;
@@ -168,40 +176,31 @@
     pointer-events: none;
   }
   .button--sm {
-    height: calc(var(--spacing, 0.25rem) * 9);
-    font-size: var(--text-sm, 0.875rem);
-    line-height: var(
-      --tw-leading,
-      var(--text-sm--line-height, calc(1.25 / 0.875))
-    );
+    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, 0.25rem) * 10);
-    font-size: var(--text-sm, 0.875rem);
-    line-height: var(
-      --tw-leading,
-      var(--text-sm--line-height, calc(1.25 / 0.875))
-    );
+    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, 0.25rem) * 11);
-    font-size: var(--text-base, 1rem);
-    line-height: var(
-      --tw-leading,
-      var(--text-base--line-height, calc(1.5 / 1))
-    );
+    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, 0.25rem) * 9);
+    width: calc(var(--spacing) * 9);
   }
   .button--icon-only.button--md {
-    width: calc(var(--spacing, 0.25rem) * 10);
+    width: calc(var(--spacing) * 10);
   }
   .button--icon-only.button--lg {
-    width: calc(var(--spacing, 0.25rem) * 11);
+    width: calc(var(--spacing) * 11);
   }
   .button--solid {
     background-color: var(--bg);
@@ -243,108 +242,16 @@
     }
   }
   .button--light:focus-visible:not(.button--pending):after {
-    top: calc(var(--spacing, 0.25rem) * 2);
-    right: calc(var(--spacing, 0.25rem) * 3);
-    left: calc(var(--spacing, 0.25rem) * 3);
-    height: calc(var(--spacing, 0.25rem) * 0.5);
+    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, spin 1s linear infinite);
-  }
-  [role="tabs"] {
-    display: flex;
-  }
-  [role="tabs"] [role="tablist"] {
-    gap: var(--spacing, 0.25rem);
-    display: flex;
-    position: relative;
-  }
-  [role="tabs"] [role="tab"],
-  [role="tabs"] .menu-tab {
-    z-index: 10;
-    height: calc(var(--spacing, 0.25rem) * 9);
-    cursor: pointer;
-    padding-inline: calc(var(--spacing, 0.25rem) * 4);
-    font-size: var(--text-sm, 0.875rem);
-    line-height: var(
-      --tw-leading,
-      var(--text-sm--line-height, calc(1.25 / 0.875))
-    );
-    --tw-font-weight: var(--font-weight-medium, 500);
-    font-weight: var(--font-weight-medium, 500);
-    white-space: nowrap;
-    color: var(--color-muted);
-    -webkit-user-select: none;
-    user-select: none;
-    justify-content: center;
-    align-items: center;
-    display: inline-flex;
-    position: relative;
-  }
-  :is([role="tabs"] [role="tab"], [role="tabs"] .menu-tab):focus-visible {
-    --tw-outline-style: none;
-    outline-style: none;
-  }
-  :is([role="tabs"] [role="tab"], [role="tabs"] .menu-tab):hover,
-  :is([role="tabs"] [role="tab"], [role="tabs"] .menu-tab)[data-active],
-  :is([role="tabs"] [role="tab"], [role="tabs"] .menu-tab)[data-popup-open] {
-    color: var(--color-foreground);
-  }
-  [role="tabs"] [role="presentation"] {
-    background-color: var(--color-foreground);
-    transition-property: left, width;
-    transition-timing-function: var(
-      --tw-ease,
-      var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1))
-    );
-    transition-duration: var(
-      --tw-duration,
-      var(--default-transition-duration, 0.15s)
-    );
-    --tw-duration: 0.2s;
-    bottom: 0;
-    left: var(--active-tab-left);
-    width: var(--active-tab-width);
-    border-radius: 2147483647px;
-    height: 3px;
-    transition-duration: 0.2s;
-    position: absolute;
-  }
-  .menu-popup {
-    min-width: calc(var(--spacing, 0.25rem) * 40);
-    border-radius: var(--radius-md, 0.375rem);
-    border-style: var(--tw-border-style);
-    background-color: var(--color-background);
-    padding: var(--spacing, 0.25rem);
-    --tw-shadow:
-      0 10px 15px -3px var(--tw-shadow-color, #0000001a),
-      0 4px 6px -4px var(--tw-shadow-color, #0000001a);
-    box-shadow:
-      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
-      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    border-width: 1px;
-  }
-  .menu-item {
-    cursor: pointer;
-    border-radius: var(--radius-sm, 0.25rem);
-    padding-inline: calc(var(--spacing, 0.25rem) * 3);
-    padding-block: calc(var(--spacing, 0.25rem) * 2);
-    font-size: var(--text-sm, 0.875rem);
-    line-height: var(
-      --tw-leading,
-      var(--text-sm--line-height, calc(1.25 / 0.875))
-    );
-    --tw-outline-style: none;
-    outline-style: none;
-    align-items: center;
-    display: flex;
-  }
-  .menu-item:hover,
-  .menu-item[data-highlighted] {
-    background-color: var(--color-muted);
+    animation: var(--animate-spin);
   }
   :disabled,
   [data-disabled] {
@@ -441,10 +348,6 @@
   inherits: false;
   initial-value: solid;
 }
-@property --tw-duration {
-  syntax: "*";
-  inherits: false;
-}
 @keyframes spin {
   to {
     transform: rotate(360deg);

package/dist/index.d.ts

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

package/dist/index.js

@@ -1,191 +1 @@
-import { Button as e } from "@base-ui/react"
-import { Menu as a } from "@base-ui/react/menu"
-import { Tabs as o } from "@base-ui/react/tabs"
-import { cn as t } from "cn"
-import * as s from "react"
-import { jsx as n, jsxs as r } from "react/jsx-runtime"
-import { tv as i } from "tailwind-variants"
-import "./index.css"
-
-var c = ({ 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`,
-      }),
-    }),
-  l = 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`,
-    },
-  }),
-  u = i({
-    extend: l,
-    variants: { isPending: { true: `button--pending` } },
-    defaultVariants: { variant: `solid` },
-  }),
-  d = ({
-    children: i,
-    icon: a,
-    className: o,
-    disabled: s,
-    variant: d,
-    color: f,
-    rounded: p,
-    size: m,
-    isIconOnly: h,
-    fullWidth: g,
-    isPending: _,
-    ...v
-  }) => {
-    let y = !!v.render,
-      b = y
-        ? l({
-            variant: d,
-            color: f,
-            rounded: p,
-            size: m,
-            isIconOnly: h,
-            fullWidth: g,
-          })
-        : u({
-            variant: d,
-            color: f,
-            rounded: p,
-            size: m,
-            isIconOnly: h,
-            fullWidth: g,
-            isPending: _,
-          })
-    return r(e, {
-      className: t(b, o),
-      disabled: !y && s,
-      nativeButton: !y,
-      ...v,
-      children: [_ && !y ? n(c, {}) : a, !h && n(`span`, { children: i })],
-    })
-  },
-  f = s.createContext(null)
-function p({ defaultValue: e, children: t }) {
-  let i = s.useRef(null),
-    a = s.useRef(new Map()),
-    [c, l] = s.useState(null),
-    u = s.useCallback((e, t, n) => {
-      t && a.current.set(e, { element: t, active: n })
-    }, []),
-    d = s.useCallback((e) => {
-      a.current.delete(e)
-    }, []),
-    p = s.useCallback(() => {
-      let e = i.current
-      if (!e) return
-      let t = Array.from(a.current.values()).find((e) => e.active)
-      if (!t) {
-        l(null)
-        return
-      }
-      let n = e.getBoundingClientRect(),
-        r = t.element.getBoundingClientRect()
-      l({ left: r.left - n.left, width: r.width })
-    }, [])
-  return n(o.Root, {
-    defaultValue: e,
-    role: `tabs`,
-    children: n(f.Provider, {
-      value: { registerMenuTab: u, unregisterMenuTab: d, updateIndicator: p },
-      children: r(o.List, {
-        ref: i,
-        children: [
-          t,
-          n(o.Indicator, {
-            style: c ? { left: c.left, width: c.width } : void 0,
-          }),
-        ],
-      }),
-    }),
-  })
-}
-function m({ id: e, active: t = !1, children: i, items: o }) {
-  let c = s.useContext(f),
-    l = s.useRef(null)
-  return (
-    s.useLayoutEffect(() => {
-      if (c)
-        return (
-          c.registerMenuTab(e, l.current, t),
-          c.updateIndicator(),
-          () => {
-            c.unregisterMenuTab(e)
-          }
-        )
-    }, [c, e, t]),
-    r(a.Root, {
-      children: [
-        n(a.Trigger, {
-          className: `menu-tab`,
-          "data-active": t ? `` : void 0,
-          ref: l,
-          children: i,
-        }),
-        n(a.Portal, {
-          children: n(a.Positioner, {
-            sideOffset: 6,
-            children: n(a.Popup, {
-              className: `menu-popup`,
-              children: o.map((e) =>
-                n(
-                  a.LinkItem,
-                  { className: `menu-item`, href: e.href, children: e.label },
-                  e.href,
-                ),
-              ),
-            }),
-          }),
-        }),
-      ],
-    })
-  )
-}
-export {
-  d as Button,
-  m as MenuTab,
-  c as Spinner,
-  p as TabsNavigation,
-  u as buttonVariants,
-  l 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";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};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brosco/ui",
-  "version": "0.0.81",
+  "version": "0.0.83",
   "type": "module",
   "files": [
     "dist"

package/dist/tabs-navigation /index.d.ts

@@ -1 +0,0 @@
-export * from "./tabs-navigation ";

package/dist/tabs-navigation /tabs-navigation .d.ts

@@ -1,14 +0,0 @@
-import * as React from "react";
-export declare function TabsNavigation({ defaultValue, children, }: {
-    defaultValue: string;
-    children: React.ReactNode;
-}): React.JSX.Element;
-export declare function MenuTab({ id, active, children, items, }: {
-    id: string;
-    active?: boolean;
-    children: React.ReactNode;
-    items: Array<{
-        label: string;
-        href: string;
-    }>;
-}): React.JSX.Element;