@brosco/ui 0.0.22 → 0.0.24

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.
@@ -2,11 +2,12 @@ import { Spinner as e } from "../spinner/index.js";
2
2
  import { Button as t } from "@base-ui/react";
3
3
  import { jsx as n, jsxs as r } from "react/jsx-runtime";
4
4
  import './button-D4ZNioAF.css';//#region src/button/button.module.css
5
- var i = {}, a = ({ children: a, icon: o, isPending: s, ...c }) => /* @__PURE__ */ r(t, {
5
+ var i = {}, a = ({ children: a, icon: o, isPending: s, isIconOnly: c, ...l }) => /* @__PURE__ */ r(t, {
6
6
  className: i.wrapper,
7
7
  "data-pending": s,
8
- ...c,
9
- children: [s ? /* @__PURE__ */ n(e, {}) : o, a]
8
+ "data-icon-only": c,
9
+ ...l,
10
+ children: [s ? /* @__PURE__ */ n(e, {}) : o, !c && /* @__PURE__ */ n("span", { children: a })]
10
11
  });
11
12
  //#endregion
12
13
  export { a as t };
@@ -1,7 +1,2 @@
1
- import type { ButtonProps as BaseButtonProps } from "@base-ui/react";
2
- import type { ReactNode } from "react";
3
- export type ButtonProps = BaseButtonProps & {
4
- icon?: ReactNode;
5
- isPending?: boolean;
6
- };
7
- export declare const Button: ({ children, icon, isPending, ...props }: ButtonProps) => import("react").JSX.Element;
1
+ import type { ButtonProps } from "./button.types";
2
+ export declare const Button: ({ children, icon, isPending, isIconOnly, ...props }: ButtonProps) => import("react").JSX.Element;
@@ -0,0 +1,11 @@
1
+ import type { ButtonProps as BaseButtonProps } from "@base-ui/react";
2
+ import type { ReactNode } from "react";
3
+ export type ButtonProps = BaseButtonProps & {
4
+ isPending?: boolean;
5
+ } & ({
6
+ icon?: never;
7
+ isIconOnly?: never;
8
+ } | {
9
+ icon: ReactNode;
10
+ isIconOnly?: boolean;
11
+ });
@@ -1 +1,2 @@
1
1
  export * from "./button";
2
+ export * from "./button.types";
@@ -1,2 +1,2 @@
1
- import { t as e } from "./button-C6PhxKcd.js";
1
+ import { t as e } from "./button-Cgz8SZfV.js";
2
2
  export { e as Button };
package/dist/index.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import { Spinner as e } from "./spinner/index.js";
2
- import { t } from "./button/button-C6PhxKcd.js";
2
+ import { t } from "./button/button-Cgz8SZfV.js";
3
3
  export { t as Button, e as Spinner };
@@ -1 +1,2 @@
1
1
  export * from "./spinner";
2
+ export * from "./spinner.types";
@@ -1,16 +1,17 @@
1
- import { jsx as e } from "react/jsx-runtime";
1
+ import { cn as e } from "cn";
2
+ import { jsx as t } from "react/jsx-runtime";
2
3
  //#region src/spinner/spinner.tsx
3
- var t = ({ size: t = 24 }) => /* @__PURE__ */ e("svg", {
4
+ var n = ({ className: n, size: r = 24 }) => /* @__PURE__ */ t("svg", {
4
5
  stroke: "currentColor",
5
6
  fill: "currentColor",
6
7
  strokeWidth: "0",
7
8
  version: "1.1",
8
9
  viewBox: "0 0 16 16",
9
- height: t,
10
- width: t,
10
+ height: r,
11
+ width: r,
11
12
  xmlns: "http://www.w3.org/2000/svg",
12
- className: "animate-spin",
13
- children: /* @__PURE__ */ e("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" })
13
+ className: e("animate-spin", n),
14
+ children: /* @__PURE__ */ t("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" })
14
15
  });
15
16
  //#endregion
16
- export { t as Spinner };
17
+ export { n as Spinner };
@@ -1,4 +1,2 @@
1
- export type SpinnerProps = {
2
- size?: number;
3
- };
4
- export declare const Spinner: ({ size }: SpinnerProps) => import("react").JSX.Element;
1
+ import type { SpinnerProps } from "./spinner.types";
2
+ export declare const Spinner: ({ className, size }: SpinnerProps) => import("react").JSX.Element;
@@ -0,0 +1,4 @@
1
+ import type { HTMLAttributes } from "react";
2
+ export type SpinnerProps = Pick<HTMLAttributes<HTMLElement>, "className"> & {
3
+ size?: number;
4
+ };
@@ -0,0 +1,2 @@
1
+ /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
2
+ @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-red-500:oklch(63.7% .237 25.331);--color-green-600:oklch(62.7% .194 149.214);--color-blue-500:oklch(62.3% .214 259.815);--color-zinc-500:oklch(55.2% .016 285.938);--color-zinc-900:oklch(21% .006 285.885);--color-white:#fff;--animate-spin:spin 1s linear infinite;--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;-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{.animate-spin{animation:var(--animate-spin)}}: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)}@keyframes spin{to{transform:rotate(360deg)}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brosco/ui",
3
- "version": "0.0.22",
3
+ "version": "0.0.24",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist"
@@ -10,18 +10,20 @@
10
10
  "types": "./dist/index.d.ts",
11
11
  "import": "./dist/index.js"
12
12
  },
13
- "./styles.css": "./dist/_css/styles.css"
13
+ "./styles.css": "./dist/styles.css"
14
14
  },
15
15
  "scripts": {
16
16
  "dev": "vite",
17
- "build": "vite build && tsc -p tsconfig.build.json && node scripts/copy-css.mjs",
17
+ "build": "vite build && vite build --config vite.css.config.ts && tsc -p tsconfig.build.json",
18
18
  "lint": "eslint .",
19
19
  "preview": "vite preview",
20
20
  "format": "prettier --write \"**/*.{js,ts,jsx,tsx,md,mdx,mjs,css,json}\"",
21
- "release": "npm publish --access public"
21
+ "release": "npm publish --access public",
22
+ "clear": "rimraf dist"
22
23
  },
23
24
  "peerDependencies": {
24
- "@base-ui/react": "^1.8.0"
25
+ "@base-ui/react": "^1.8.0",
26
+ "cn": "^0.3.0"
25
27
  },
26
28
  "devDependencies": {
27
29
  "@eslint/js": "^10.0.1",
@@ -40,6 +42,7 @@
40
42
  "prettier-plugin-classnames": "^0.10.4",
41
43
  "prettier-plugin-merge": "^0.10.1",
42
44
  "prettier-plugin-tailwindcss": "^0.8.1",
45
+ "rimraf": "^6.1.3",
43
46
  "tailwindcss": "^4.3.3",
44
47
  "typescript": "^5.9.3",
45
48
  "typescript-eslint": "^8.69.0",
@@ -1 +0,0 @@
1
- @import "tailwindcss";@import "./variables.css";@import "./utils.css";: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)}
@@ -1 +0,0 @@
1
- @utility status-disabled{@apply pointer-events-none opacity-50;}@utility status-pending{@apply pointer-events-none;}@utility focus-visible-ring-*{&:focus-visible:not([data-pending]) { --tw-ring-color: --value([*]); --tw-ring-color: --value(--color-*, --default(currentcolor)); @apply ring-2 ring-offset-2; }}
@@ -1 +0,0 @@
1
- @theme{--color-background: var(--background); --color-foreground: var(--foreground); --color-muted: var(--muted); --color-primary: var(--primary); --color-secondary: var(--secondary); --color-success: var(--success); --color-danger: var(--danger);}