@bunnix/components 0.9.2 → 0.9.4

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 & {});
@@ -78,6 +218,33 @@ export interface BadgeProps extends BaseProps {
   shape?: "capsule" | "circle" | string;
 }
 
+export type InputMaskType = 
+  | "date"          // DD/MM/YYYY
+  | "time"          // HH:MM
+  | "email"         // lowercase, no spaces
+  | "currency"      // $ 1,234.56
+  | "decimal"       // 123.45
+  | "integer"       // 123
+  | "phone"         // +1 (234) 567-8900
+  | "phone-br"      // +55 11 99999-9999 or +55 11 9999-9999 (Brazilian phone)
+  | "credit-card"   // 1234 5678 9012 3456
+  | "cpf"           // 123.456.789-01 (Brazilian CPF)
+  | "cnpj"          // 12.345.678/0001-90 (Brazilian CNPJ)
+  | "cep"           // 12345-678 (Brazilian ZIP code)
+  | string;         // Custom pattern using 9 (digit), A (letter), * (alphanumeric)
+
+export interface InputMaskConfig {
+  type?: InputMaskType;
+  pattern?: string;  // Custom pattern: 9=digit, A=letter, *=alphanumeric
+  options?: {
+    prefix?: string;
+    thousandsSeparator?: string;
+    decimalSeparator?: string;
+    decimalPlaces?: number;
+    allowNegative?: boolean;
+  };
+}
+
 export interface InputFieldProps extends BaseProps {
   type?: string;
   variant?: "regular" | "rounded" | string;
@@ -86,6 +253,8 @@ export interface InputFieldProps extends BaseProps {
   placeholder?: string;
   label?: string;
   disabled?: boolean;
+  autocomplete?: string;
+  mask?: InputMaskType | InputMaskConfig;
   suggestions?: string[];
   onInput?: (event?: any) => void;
   onChange?: (event?: any) => void;
@@ -115,6 +284,7 @@ export interface ComboBoxProps extends BaseProps {
   options?: Array<string | ComboBoxOption>;
   selection?: any;
   size?: SizeValue;
+  label?: string;
   onChange?: (event?: any) => void;
   change?: (event?: any) => void;
 }
@@ -206,14 +376,36 @@ export interface DatePickerProps extends BaseProps {
   placeholder?: string;
   range?: boolean;
   variant?: "regular" | "rounded" | string;
-  size?: SizeNoSmall;
+  size?: SizeRegularUp;
+  label?: string;
+  disabled?: boolean;
+  value?: Date | null;
+  onInput?: (event?: any) => void;
+  onChange?: (event?: { target: { value: string }; date: Date | null }) => void;
+  onFocus?: (event?: any) => void;
+  onBlur?: (event?: any) => void;
+  input?: (event?: any) => void;
+  change?: (event?: { target: { value: string }; date: Date | null }) => void;
+  focus?: (event?: any) => void;
+  blur?: (event?: any) => void;
 }
 
 export interface TimePickerProps extends BaseProps {
   id?: string;
   placeholder?: string;
   variant?: "regular" | "rounded" | string;
-  size?: SizeNoSmall;
+  size?: SizeRegularUp;
+  label?: string;
+  disabled?: boolean;
+  value?: { hours: number; minutes: number } | null;
+  onInput?: (event?: any) => void;
+  onChange?: (event?: { target: { value: string }; time: { hours: number; minutes: number } | null }) => void;
+  onFocus?: (event?: any) => void;
+  onBlur?: (event?: any) => void;
+  input?: (event?: any) => void;
+  change?: (event?: { target: { value: string }; time: { hours: number; minutes: number } | null }) => void;
+  focus?: (event?: any) => void;
+  blur?: (event?: any) => void;
 }
 
 export interface DropdownMenuItem {
@@ -344,6 +536,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>;
@@ -362,6 +555,11 @@ export const toastState: any;
 export function showToast(options?: ToastOptions): void;
 export function hideToast(): void;
 
+// Mask utilities
+export function applyMask(value: string, mask: InputMaskType | InputMaskConfig): string;
+export function validateMask(value: string, mask: InputMaskType | InputMaskConfig): boolean;
+export function getMaskMaxLength(mask: InputMaskType | InputMaskConfig): number | null;
+
 declare module "@bunnix/components/styles.css" {
   const content: string;
   export default content;

package/README.md

@@ -1,13 +1,8 @@
 # @bunnix/components
 
-Design system + UI components for Bunnix projects. This package ships ESM source with CSS + icon assets and is intended for modern, module-based builds (webpack/vite/rollup/etc).
+Design system + UI components for Bunnix projects. Ships ESM source with CSS and icon assets for modern bundlers.
 
-Disclaimer:
-- This project is currently in **alpha release candidate**. APIs and components may change until the first stable release.
-- Icon usage & attribution:
-  - COLLECTION: Framework7 Line Icons — LICENSE: MIT License — AUTHOR: framework7io
-  - COLLECTION: Iconcino Interface Icons — LICENSE: CC0 1.0 — AUTHOR: Gabriele Malaspina
-  - Sources (copy/paste): `https://framework7.io/icons/` and `https://iconcino.com/`
+**Status**: Alpha release candidate - APIs may change before v1.0
 
 ## Install
 
@@ -15,71 +10,78 @@ Disclaimer:
 npm install @bunnix/components @bunnix/core
 ```
 
-`@bunnix/core` is a peer dependency (required by design).
+`@bunnix/core` is a peer dependency.
 
-## Usage
+## Quick Start
 
-Import the CSS once at your app entry:
+Import CSS once at your app entry:
 
 ```js
 import "@bunnix/components/styles.css";
 ```
 
-Then import components as needed:
+Use components:
 
 ```js
-import { Button, Icon, Text } from "@bunnix/components";
-
-export default function Example() {
-  return Button({ variant: "regular" }, [
-    Icon({ name: "star", fill: "white" }),
-    Text({ type: "text" }, "Star")
-  ]);
-}
-```
-
-## Component examples
-
-Button with icon:
-
-```js
-import { Button, Icon } from "@bunnix/components";
+import { Button, Icon, InputField, DatePicker } from "@bunnix/components";
 
+// Button with icon
 Button({ variant: "regular" }, [
   Icon({ name: "star", fill: "white" }),
   "Star"
 ]);
+
+// Input with mask
+InputField({ label: "Phone", mask: "phone-br" });
+
+// Date picker
+DatePicker({ label: "Birth Date", change: (e) => console.log(e.date) });
 ```
 
-Search box with suggestions:
+## Key Features
 
-```js
-import { SearchBox } from "@bunnix/components";
+### Input Masks
+InputField supports 12+ built-in masks plus custom patterns:
+- `date`, `time`, `email`, `currency`, `decimal`, `integer`
+- `phone`, `phone-br`, `credit-card`
+- `cpf`, `cnpj`, `cep` (Brazilian documents)
+- Custom patterns: `{ pattern: "999.999.999-99" }` (9=digit, A=letter, *=alphanumeric)
 
-SearchBox({
-  data: [
-    { title: "Users", snippet: "Manage users", icon: "person" },
-    { title: "Settings", snippet: "Configure app", icon: "gear" }
-  ]
+```js
+InputField({ 
+  label: "Price",
+  mask: { type: "currency", options: { prefix: "R$", decimalPlaces: 2 }}
 });
 ```
 
-Dialog + toast helpers:
+Mask utilities available for custom use:
+```js
+import { applyMask, validateMask, getMaskMaxLength } from "@bunnix/components";
+```
 
+### Date & Time Pickers
+Text inputs with masks that show popover calendars/selectors on focus:
 ```js
-import { Dialog, showDialog, ToastNotification, showToast } from "@bunnix/components";
+DatePicker({ label: "Date", change: (e) => console.log(e.date) });
+TimePicker({ label: "Time", change: (e) => console.log(e.time) });
+```
+
+### Dialog & Toast
+```js
+import { showDialog, showToast } from "@bunnix/components";
 
-showDialog({ title: "Welcome", message: "Bunnix components ready." });
-showToast({ message: "Saved successfully", icon: "success-circle" });
+showDialog({ title: "Welcome", message: "Ready to go!" });
+showToast({ message: "Saved", icon: "success-circle" });
 ```
 
-## Assets (icons)
+### 30+ Components
+Button, Icon, Text, InputField, ComboBox, DatePicker, TimePicker, SearchBox, Checkbox, ToggleSwitch, Badge, Card, Table, Sidebar, NavigationBar, Dialog, Toast, and more.
 
-SVG icons are shipped with the package and referenced by CSS variables. If your bundler rewrites asset URLs, make sure it processes CSS `url(...)` values from `@bunnix/components`.
+See `/playgrounds` for live examples of all components.
 
 ## Theming
 
-Override CSS variables after importing the stylesheet:
+Override CSS variables:
 
 ```css
 :root {
@@ -87,98 +89,66 @@ Override CSS variables after importing the stylesheet:
   --background-color: #ffffff;
   --border-color: #e5e7eb;
   --base-padding: 0.75rem;
-  --base-gap: 0.6rem;
   --font-family: "Inter", system-ui, sans-serif;
 }
 ```
 
-## CSS modifiers (utilities)
+## CSS Utilities
 
-You can compose your own UI using the same CSS utilities the components use:
+Use the same utilities that power the components:
 
-- Layout: `row-container`, `column-container`, `grid-flow`, `gap-xs|sm|md|lg`, `items-start|center|end|stretch`, `justify-start|center|end`, `w-full`, `h-full`, `spacer-h`, `spacer-v`
-- Surfaces: `box`, `box-sm`, `box-control`, `box-capsule`, `card`, `shadow`, `rounded|rounded-sm|rounded-full`
-- 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`
-
-Example:
+- **Layout**: `row-container`, `column-container`, `grid-flow`, `gap-xs|sm|md|lg`
+- **Surfaces**: `box`, `card`, `shadow`, `rounded`
+- **Typography**: `text-primary|secondary|tertiary`, `text-sm|base|lg|xl`
+- **Buttons**: `btn`, `btn-flat`, `btn-outline`, `btn-destructive`
+- **Icons**: `icon`, `icon-<name>`, `icon-xs|sm|lg|xl`
 
 ```js
 import Bunnix from "@bunnix/core";
 const { div, span } = Bunnix;
 
-div({ class: "card row-container gap-sm items-center" }, [
-  span({ class: "icon icon-star icon-base icon-sm" }),
-  span({ class: "text-primary text-sm" }, "Custom card")
+div({ class: "card row-container gap-sm" }, [
+  span({ class: "icon icon-star icon-base" }),
+  span({ class: "text-primary" }, "Custom card")
 ]);
 ```
 
-## Minimal webpack config
+## Bundler Setup
 
-This is a minimal setup that works with `@bunnix/components` (ESM, CSS, and SVG assets):
+Works with webpack, vite, rollup, or any modern ESM bundler. Ensure your bundler:
+- Processes CSS imports
+- Handles CSS `url(...)` for SVG assets
+- Supports `.mjs` extensions
 
+Minimal webpack example:
 ```js
-import path from "path";
-import { fileURLToPath } from "url";
-import HtmlWebpackPlugin from "html-webpack-plugin";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
 export default {
-  entry: "./src/index.mjs",
-  output: {
-    filename: "main.js",
-    path: path.resolve(__dirname, "dist"),
-    clean: true,
-    assetModuleFilename: "images/[hash][ext][query]"
-  },
-  mode: "development",
   module: {
     rules: [
-      { test: /\\.css$/i, use: ["style-loader", "css-loader"] },
-      { test: /\\.(png|svg|jpg|jpeg|gif)$/i, type: "asset/resource" }
+      { test: /\.css$/i, use: ["style-loader", "css-loader"] },
+      { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: "asset/resource" }
     ]
-  },
-  resolve: {
-    extensions: [".mjs", ".js", ".json"]
-  },
-  plugins: [
-    new HtmlWebpackPlugin({ template: "./public/index.html" })
-  ],
-  devServer: {
-    static: { directory: path.join(__dirname, "public") },
-    compress: true,
-    port: 3000,
-    open: true
   }
 };
 ```
 
-## Project structure
+## Icon Attribution
+
+- Framework7 Line Icons (MIT) - framework7io
+- Iconcino Interface Icons (CC0 1.0) - Gabriele Malaspina
+
+## Project Structure
 
 ```
 src/
-  components/   # exported components
-  styles/       # design system CSS
+  components/   # Component library
+  styles/       # Design system CSS
   icons/        # SVG assets
-  index.mjs     # package exports
-  styles.css    # CSS entry
-playgrounds/    # local showcase (uses the package)
+  utils/        # Utilities (masks, etc.)
+  index.mjs     # Package exports
+playgrounds/    # Component showcase
 ```
 
-## Playground
-
-The playground consumes `@bunnix/components` directly. Start it with your preferred dev server (whatever you use today), and ensure the CSS import stays at `playgrounds/src/index.mjs`.
-
-## Publishing notes
-
-- This package targets ESM consumers and ships source files (no dist build).
-- Ensure `files` and `exports` in `package.json` include `src/` and CSS entries.
-- GitHub CI should run with Node that supports ESM (Node 16+ recommended).
-
 ## License
 
 ISC

package/package.json

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

package/src/components/ComboBox.mjs

@@ -1,11 +1,12 @@
 import Bunnix from "@bunnix/core";
 import { clampSize, toSizeToken } from "../utils/sizeUtils.mjs";
-const { select, option, div, span } = Bunnix;
+const { select, option, div, label, span } = Bunnix;
 
 export default function ComboBox({
   options = [],
   selection,
   size,
+  label: labelText,
   class: className = "",
   onChange,
   change,
@@ -40,7 +41,7 @@ export default function ComboBox({
     return option({ value: opt.value }, opt.label ?? opt.value);
   });
 
-  return div({ class: "combobox" }, [
+  const selectElement = div({ class: "combobox" }, [
     select({
       class: `combobox-select ${sizeClass} ${className}`.trim(),
       value: selection ?? "",
@@ -49,4 +50,9 @@ export default function ComboBox({
     }, resolvedChildren),
     span({ class: `combobox-chevron icon icon-chevron-down icon-base ${iconSizeClass}`.trim() })
   ]);
+
+  return div({ class: "column-container no-margin shrink-0 gap-0" }, [
+    labelText && label({ class: "label select-none" }, labelText),
+    selectElement
+  ]);
 }