@bunnix/components 0.9.2 → 0.9.3

package/@types/index.d.ts

@@ -11,6 +11,127 @@ export type LegacySize = "xs" | "sm" | "md" | "lg" | "xl" | "default";
 export type SizeValue = Size | LegacySize;
 export type SizeNoSmall = Exclude<SizeValue, "small" | "sm">;
 export type SizeRegularUp = Exclude<SizeValue, "xsmall" | "xs" | "small" | "sm">;
+export type IconNameSlug =
+  | "add"
+  | "add-circle"
+  | "alt"
+  | "archive"
+  | "at"
+  | "attestation"
+  | "bell"
+  | "bookmark"
+  | "bot"
+  | "button"
+  | "calculate"
+  | "calendar"
+  | "chart"
+  | "check"
+  | "chevron-down"
+  | "chevron-left"
+  | "chevron-right"
+  | "clip"
+  | "clock"
+  | "close"
+  | "close-circle"
+  | "cloud"
+  | "cloud-download"
+  | "cloud-upload"
+  | "columns-layout"
+  | "command"
+  | "cube"
+  | "delete"
+  | "dollar"
+  | "download"
+  | "draw"
+  | "duplicate"
+  | "edit"
+  | "exclamation-mark"
+  | "eye"
+  | "eye-open"
+  | "file"
+  | "file-html"
+  | "finger"
+  | "flag"
+  | "folder"
+  | "function"
+  | "gear"
+  | "gift"
+  | "globe"
+  | "grid"
+  | "hand"
+  | "heart"
+  | "home"
+  | "image"
+  | "inbox"
+  | "info"
+  | "key"
+  | "lamp"
+  | "link"
+  | "location"
+  | "locker"
+  | "login"
+  | "logout"
+  | "mail"
+  | "map"
+  | "markup"
+  | "merge"
+  | "more-horizontal"
+  | "more-vertical"
+  | "mouse"
+  | "palette"
+  | "password"
+  | "pencil"
+  | "people"
+  | "person"
+  | "person-add"
+  | "person-remove"
+  | "pin"
+  | "question-circle"
+  | "remove-circle"
+  | "return-arrow"
+  | "save"
+  | "search"
+  | "sections"
+  | "send"
+  | "share"
+  | "shine"
+  | "sliders"
+  | "star"
+  | "storage"
+  | "success-circle"
+  | "swap"
+  | "switch"
+  | "sync"
+  | "table"
+  | "tag"
+  | "terminal"
+  | "text"
+  | "thumb-down"
+  | "thumb-up"
+  | "timer"
+  | "toggle"
+  | "trash"
+  | "update-page"
+  | "upload"
+  | "video"
+  | "wallet"
+  | "window";
+export type IconName =
+  | IconNameSlug
+  | `icon-${IconNameSlug}`
+  | (string & {});
+export type IconFill =
+  | "default"
+  | "base"
+  | "white"
+  | "secondary"
+  | "tertiary"
+  | "quaternary"
+  | "destructive"
+  | `icon-${string}`
+  | (string & {});
+export type IconSizeClass = "icon-xs" | "icon-sm" | "icon-lg" | "icon-xl";
+export type IconSize = SizeValue | IconSizeClass | (string & {});
 
 export interface ButtonProps extends BaseProps {
   type?: string;
@@ -23,9 +144,9 @@ export interface ButtonProps extends BaseProps {
 }
 
 export interface IconProps extends BaseProps {
-  name?: string;
-  fill?: string;
-  size?: SizeValue | `icon-${string}`;
+  name?: IconName;
+  fill?: IconFill;
+  size?: IconSize;
 }
 
 export interface TextProps extends BaseProps {
@@ -48,6 +169,25 @@ export interface TextProps extends BaseProps {
   wrap?: "wrap" | "nowrap";
 }
 
+export interface ProgressBarProps extends BaseProps {
+  value?: number | any;
+  min?: number;
+  max?: number;
+  size?: SizeValue;
+  color?: "default"
+    | "primary"
+    | "primary-dimmed"
+    | "secondary"
+    | "tertiary"
+    | "quaternary"
+    | "destructive"
+    | "destructive-dimmed"
+    | "accent"
+    | "accent-dimmed"
+    | "white"
+    | (string & {});
+}
+
 export interface ContainerProps extends BaseProps {
   type?: "main" | "content" | "page" | (string & {});
   direction?: "row" | "column" | (string & {});
@@ -344,6 +484,7 @@ export const NavigationBar: Component<NavigationBarProps>;
 export const PageHeader: Component<PageHeaderProps>;
 export const PageSection: Component<PageSectionProps>;
 export const PopoverMenu: Component<PopoverMenuProps>;
+export const ProgressBar: Component<ProgressBarProps>;
 export const RadioCheckbox: Component<RadioCheckboxProps>;
 export const SearchBox: Component<SearchBoxProps>;
 export const Sidebar: Component<SidebarProps>;

package/README.md

@@ -101,7 +101,7 @@ You can compose your own UI using the same CSS utilities the components use:
 - Typography: `text-default|primary|secondary|tertiary|quaternary`, `text-accent`, `text-destructive`, `text-sm|base|lg|xl`, `text-mono`, `whitespace-nowrap`, `whitespace-pre-line`
 - Buttons: `btn`, `btn-flat`, `btn-outline`, `btn-destructive`, `btn-lg`, `btn-xl`, `btn-disabled`
 - Forms: `input-lg`, `input-xl`, `rounded-full` (useful for pill inputs)
-- Icons: `icon`, `icon-<name>`, `icon-xs|sm|lg|xl`, `icon-default|base|white|secondary|tertiary|quaternary`
+- Icons: `icon`, `icon-<name>`, `icon-xs|sm|lg|xl`, `icon-default|base|white|secondary|tertiary|quaternary|destructive`
 
 Example:
 
@@ -115,6 +115,12 @@ div({ class: "card row-container gap-sm items-center" }, [
 ]);
 ```
 
+## Icon props
+
+- `name`: icon slug (e.g. `star`) or a full class (e.g. `icon-star`). IDEs should autocomplete shipped icon names.
+- `fill`: `default | base | white | secondary | tertiary | quaternary | destructive` or any `icon-*` utility.
+- `size`: `xsmall | small | regular | large | xlarge` or `icon-xs | icon-sm | icon-lg | icon-xl`.
+
 ## Minimal webpack config
 
 This is a minimal setup that works with `@bunnix/components` (ESM, CSS, and SVG assets):

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bunnix/components",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "description": "Bunnix components: a set of bunnix ready components for modern web apps.",
   "keywords": [
     "bunnix",

package/src/components/Dialog.mjs

@@ -136,7 +136,7 @@ export default function Dialog() {
     VStack({
       ref: panelRef,
       gap: "regular",
-      class: "box-capsule dialog-panel shadow bg-base p-lg items-stretch dialog-appear"
+      class: "box-capsule dialog-panel shadow bg-base border-solid p-lg items-stretch dialog-appear"
     }, [
       HStack({ alignment: "leading", gap: "small", class: "items-center w-full" }, [
         Text({ type: "heading4", class: "no-margin" }, dialogState.map((value) => value.title)),

package/src/components/ProgressBar.mjs

@@ -0,0 +1,81 @@
+import Bunnix from "@bunnix/core";
+import { clampSize, toSizeToken } from "../utils/sizeUtils.mjs";
+
+const { div } = Bunnix;
+
+export default function ProgressBar({
+  value = 0,
+  min = 0,
+  max = 100,
+  size,
+  color = "default",
+  class: className = "",
+  ...rest
+} = {}) {
+  const isState = (val) => val && typeof val.map === "function";
+  const normalizeSize = (val) =>
+    clampSize(val, ["xsmall", "small", "regular", "large", "xlarge"], "regular");
+
+  const sizeState = isState(size) ? size : null;
+  const classState = isState(className) ? className : null;
+  const colorState = isState(color) ? color : null;
+  const valueState = isState(value) ? value : null;
+  const minState = isState(min) ? min : null;
+  const maxState = isState(max) ? max : null;
+
+  const buildClass = (sizeValue, classValue) => {
+    const normalizedSize = normalizeSize(sizeValue);
+    const sizeToken = toSizeToken(normalizedSize);
+    const sizeClass = sizeToken ? `progress-bar-${sizeToken}` : "";
+    return `progress-bar ${sizeClass} ${classValue || ""}`.trim();
+  };
+
+  const buildFillClass = (colorValue) => {
+    const resolvedColor = colorValue || "default";
+    return `progress-bar-fill text-${resolvedColor}`.trim();
+  };
+
+  const clampPercent = (val, minValue, maxValue) => {
+    const safeMin = Number.isFinite(Number(minValue)) ? Number(minValue) : 0;
+    const safeMax = Number.isFinite(Number(maxValue)) ? Number(maxValue) : 100;
+    const safeValue = Number.isFinite(Number(val)) ? Number(val) : 0;
+
+    if (safeMax <= safeMin) return 0;
+
+    const rawPercent = ((safeValue - safeMin) / (safeMax - safeMin)) * 100;
+    return Math.min(100, Math.max(0, rawPercent));
+  };
+
+  const buildFillStyle = (val, minValue, maxValue) =>
+    `width: ${clampPercent(val, minValue, maxValue)}%;`;
+
+  const combinedClass = sizeState
+    ? sizeState.map((value) => buildClass(value, classState ? classState.get() : className))
+    : classState
+      ? classState.map((value) => buildClass(size, value))
+      : buildClass(size, className);
+
+  const fillClass = colorState ? colorState.map((value) => buildFillClass(value)) : buildFillClass(color);
+
+  const fillStyle = valueState
+    ? valueState.map((val) =>
+        buildFillStyle(val, minState ? minState.get() : min, maxState ? maxState.get() : max)
+      )
+    : minState
+      ? minState.map((val) => buildFillStyle(value, val, maxState ? maxState.get() : max))
+      : maxState
+        ? maxState.map((val) => buildFillStyle(value, min, val))
+        : buildFillStyle(value, min, max);
+
+  return div(
+    {
+      class: combinedClass,
+      role: "progressbar",
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": value,
+      ...rest,
+    },
+    [div({ class: fillClass, style: fillStyle })],
+  );
+}

package/src/index.mjs

@@ -17,6 +17,7 @@ export { default as NavigationBar } from "./components/NavigationBar.mjs";
 export { default as PageHeader } from "./components/PageHeader.mjs";
 export { default as PageSection } from "./components/PageSection.mjs";
 export { default as PopoverMenu } from "./components/PopoverMenu.mjs";
+export { default as ProgressBar } from "./components/ProgressBar.mjs";
 export { default as RadioCheckbox } from "./components/RadioCheckbox.mjs";
 export { default as SearchBox } from "./components/SearchBox.mjs";
 export { default as Sidebar } from "./components/Sidebar.mjs";

package/src/styles/controls.css

@@ -201,6 +201,41 @@ textarea::placeholder {
   color: white;
 }
 
+/* Progress Bar */
+.progress-bar {
+  width: 100%;
+  background-color: var(--alternate-background-color);
+  border-radius: var(--min-control-radius);
+  overflow: hidden;
+}
+
+.progress-bar-fill {
+  height: 100%;
+  width: 0%;
+  background-color: currentColor;
+  transition: width 0.2s ease;
+}
+
+.progress-bar-xs {
+  height: 0.25rem;
+}
+
+.progress-bar-sm {
+  height: 0.375rem;
+}
+
+.progress-bar-md {
+  height: 0.5rem;
+}
+
+.progress-bar-lg {
+  height: 0.75rem;
+}
+
+.progress-bar-xl {
+  height: 1rem;
+}
+
 .badge-solid.badge-dimmed {
   background-color: var(--highlight-background-color);
   color: var(--color-secondary);