@bunnix/components 0.9.0

package/@types/index.d.ts

@@ -0,0 +1,269 @@
+export type BunnixChild = any;
+export type BunnixChildren = BunnixChild | BunnixChild[];
+
+export interface BaseProps {
+  class?: string;
+  [key: string]: unknown;
+}
+
+export interface ButtonProps extends BaseProps {
+  type?: string;
+  variant?: string;
+  size?: "sm" | "md" | "lg" | "xl" | string;
+  href?: string;
+  disabled?: boolean;
+  onClick?: (event?: any) => void;
+  click?: (event?: any) => void;
+}
+
+export interface IconProps extends BaseProps {
+  name?: string;
+  fill?: string;
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | string;
+}
+
+export interface TextProps extends BaseProps {
+  type?: "text" | "paragraph" | "heading1" | "heading2" | "heading3" | "heading4" | string;
+  color?: string;
+  design?: "regular" | "mono" | string;
+}
+
+export interface ContainerProps extends BaseProps {
+  type?: "main" | "content" | "page" | string;
+  direction?: "horizontal" | "vertical" | string;
+}
+
+export interface StackProps extends BaseProps {
+  alignment?: "leading" | "middle" | "trailing" | string;
+  gap?: "small" | "regular" | "large" | string;
+}
+
+export interface BadgeProps extends BaseProps {
+  tone?: "base" | "success" | "info" | "warning" | "danger" | "accent" | "dimmed" | string;
+  size?: "xs" | "sm" | "md" | string;
+  variant?: "solid" | "soft" | "outline" | string;
+  icon?: string;
+  overlap?: boolean;
+  shape?: "capsule" | "circle" | string;
+}
+
+export interface InputFieldProps extends BaseProps {
+  type?: string;
+  variant?: "regular" | "rounded" | string;
+  value?: string;
+  placeholder?: string;
+  label?: string;
+  disabled?: boolean;
+  suggestions?: string[];
+  onInput?: (event?: any) => void;
+  onChange?: (event?: any) => void;
+  onFocus?: (event?: any) => void;
+  onBlur?: (event?: any) => void;
+  onKeyDown?: (event?: any) => void;
+  input?: (event?: any) => void;
+  change?: (event?: any) => void;
+  focus?: (event?: any) => void;
+  blur?: (event?: any) => void;
+  keydown?: (event?: any) => void;
+}
+
+export interface ComboBoxOption {
+  value: string;
+  label?: string;
+}
+
+export interface ComboBoxProps extends BaseProps {
+  options?: Array<string | ComboBoxOption>;
+  selection?: any;
+  size?: "sm" | "md" | "lg" | "xl" | string;
+  onChange?: (event?: any) => void;
+  change?: (event?: any) => void;
+}
+
+export interface CheckboxProps extends BaseProps {
+  labelText?: string;
+  size?: "sm" | "md" | "lg" | "xl" | string;
+  onCheck?: (checked: boolean) => void;
+  check?: (checked: boolean) => void;
+  onChange?: (event?: any) => void;
+}
+
+export interface RadioCheckboxProps extends BaseProps {
+  labelText?: string;
+  size?: "sm" | "md" | "lg" | "xl" | string;
+  onCheck?: (checked: boolean) => void;
+  check?: (checked: boolean) => void;
+  onChange?: (event?: any) => void;
+}
+
+export interface ToggleSwitchProps extends BaseProps {
+  labelText?: string;
+  size?: "sm" | "md" | "lg" | "xl" | string;
+  onChange?: (event?: any) => void;
+}
+
+export interface SearchBoxItem {
+  title?: string;
+  snippet?: string;
+  icon?: string;
+  [key: string]: unknown;
+}
+
+export interface SearchBoxProps extends BaseProps {
+  data?: SearchBoxItem[];
+  value?: string | any;
+  placeholder?: string;
+  onInput?: (event?: any) => void;
+  input?: (event?: any) => void;
+  size?: "sm" | "md" | "lg" | "xl" | string;
+  variant?: "regular" | "rounded" | string;
+  onSelect?: (item?: SearchBoxItem) => void;
+  select?: (item?: SearchBoxItem) => void;
+}
+
+export interface SidebarItem {
+  id?: string;
+  label?: string;
+  icon?: string;
+  href?: string | null;
+  badge?: string | number | { value?: string | number; tone?: string; variant?: string; size?: string };
+  children?: SidebarItem[];
+  isExpanded?: boolean;
+  isHeader?: boolean;
+  isSeparator?: boolean;
+  [key: string]: unknown;
+}
+
+export interface SidebarProps extends BaseProps {
+  items?: SidebarItem[];
+  selection?: string;
+  onSelect?: (id?: string) => void;
+  onItemSelect?: (id?: string) => void;
+  searchable?: boolean;
+  searchProps?: Record<string, unknown>;
+}
+
+export interface NavigationBarProps extends BaseProps {
+  title?: string | (() => BunnixChildren);
+  leading?: BunnixChildren | (() => BunnixChildren);
+  trailing?: BunnixChildren | (() => BunnixChildren);
+  searchable?: boolean;
+  searchData?: SearchBoxItem[];
+  searchValue?: string | any;
+  onSearchInput?: (event?: any) => void;
+  onSearchSelect?: (item?: SearchBoxItem) => void;
+  searchProps?: Record<string, unknown>;
+}
+
+export interface DatePickerProps extends BaseProps {
+  id?: string;
+  placeholder?: string;
+  range?: boolean;
+  variant?: "regular" | "rounded" | string;
+  size?: "md" | "lg" | "xl" | string;
+}
+
+export interface TimePickerProps extends BaseProps {
+  id?: string;
+  placeholder?: string;
+  variant?: "regular" | "rounded" | string;
+  size?: "md" | "lg" | "xl" | string;
+}
+
+export interface DropdownMenuItem {
+  title?: string;
+  icon?: string;
+  destructive?: boolean;
+  isSeparator?: boolean;
+  selected?: boolean;
+  click?: () => void;
+  [key: string]: unknown;
+}
+
+export interface DropdownMenuProps extends BaseProps {
+  items?: DropdownMenuItem[];
+  id?: string;
+  align?: "left" | "right" | string;
+  placeholder?: string;
+  size?: "sm" | "md" | "lg" | "xl" | string;
+  onSelect?: (item?: DropdownMenuItem) => void;
+}
+
+export interface PopoverMenuProps extends BaseProps {
+  trigger?: BunnixChildren;
+  items?: DropdownMenuItem[];
+  id?: string;
+  align?: "left" | "right" | string;
+  size?: "sm" | "md" | "lg" | "xl" | string;
+  onSelect?: (item?: DropdownMenuItem) => void;
+}
+
+export interface DialogConfirmation {
+  text?: string;
+  action?: () => void;
+  variant?: string;
+  disabled?: boolean;
+  extra?: { text?: string; action?: () => void };
+}
+
+export interface ShowDialogOptions {
+  title?: string;
+  message?: string;
+  confirmation?: DialogConfirmation;
+  content?: (args: { setConfirmDisabled: (disabled: boolean) => void }) => BunnixChildren;
+}
+
+export interface ToastOptions {
+  message?: string;
+  duration?: number;
+  anchor?: "topRight" | "topLeft" | "bottomRight" | "bottomLeft" | string;
+  size?: "md" | "lg" | "xl" | string;
+  icon?: string;
+}
+
+export type Component<P = BaseProps> = (props?: P, children?: BunnixChildren) => any;
+
+export const AccordionGroup: Component<BaseProps>;
+export const Badge: Component<BadgeProps>;
+export const Button: Component<ButtonProps>;
+export const Checkbox: Component<CheckboxProps>;
+export const ComboBox: Component<ComboBoxProps>;
+export const Container: Component<ContainerProps>;
+export const DatePicker: Component<DatePickerProps>;
+export const Dialog: Component<BaseProps>;
+export const DropdownMenu: Component<DropdownMenuProps>;
+export const Grid: Component<BaseProps>;
+export const HStack: Component<StackProps>;
+export const Icon: Component<IconProps>;
+export const InputField: Component<InputFieldProps>;
+export const NavigationBar: Component<NavigationBarProps>;
+export const PageHeader: Component<BaseProps>;
+export const PageSection: Component<BaseProps>;
+export const PopoverMenu: Component<PopoverMenuProps>;
+export const RadioCheckbox: Component<RadioCheckboxProps>;
+export const SearchBox: Component<SearchBoxProps>;
+export const Sidebar: Component<SidebarProps>;
+export const Table: Component<BaseProps>;
+export const Text: Component<TextProps>;
+export const TimePicker: Component<TimePickerProps>;
+export const ToastNotification: Component<BaseProps>;
+export const ToggleSwitch: Component<ToggleSwitchProps>;
+export const VStack: Component<StackProps>;
+
+export const dialogState: any;
+export function showDialog(options?: ShowDialogOptions): void;
+export function hideDialog(): void;
+
+export const toastState: any;
+export function showToast(options?: ToastOptions): void;
+export function hideToast(): void;
+
+declare module "@bunnix/components/styles.css" {
+  const content: string;
+  export default content;
+}
+
+declare module "@bunnix/components/styles" {
+  const content: string;
+  export default content;
+}

package/LICENSE

@@ -0,0 +1,7 @@
+ISC License
+
+Copyright (c) 2025 Morisson Maciel
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,184 @@
+# @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).
+
+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/`
+
+## Install
+
+```bash
+npm install @bunnix/components @bunnix/core
+```
+
+`@bunnix/core` is a peer dependency (required by design).
+
+## Usage
+
+Import the CSS once at your app entry:
+
+```js
+import "@bunnix/components/styles.css";
+```
+
+Then import components as needed:
+
+```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";
+
+Button({ variant: "regular" }, [
+  Icon({ name: "star", fill: "white" }),
+  "Star"
+]);
+```
+
+Search box with suggestions:
+
+```js
+import { SearchBox } from "@bunnix/components";
+
+SearchBox({
+  data: [
+    { title: "Users", snippet: "Manage users", icon: "person" },
+    { title: "Settings", snippet: "Configure app", icon: "gear" }
+  ]
+});
+```
+
+Dialog + toast helpers:
+
+```js
+import { Dialog, showDialog, ToastNotification, showToast } from "@bunnix/components";
+
+showDialog({ title: "Welcome", message: "Bunnix components ready." });
+showToast({ message: "Saved successfully", icon: "success-circle" });
+```
+
+## Assets (icons)
+
+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`.
+
+## Theming
+
+Override CSS variables after importing the stylesheet:
+
+```css
+:root {
+  --accent-color: #2563eb;
+  --background-color: #ffffff;
+  --border-color: #e5e7eb;
+  --base-padding: 0.75rem;
+  --base-gap: 0.6rem;
+  --font-family: "Inter", system-ui, sans-serif;
+}
+```
+
+## CSS modifiers (utilities)
+
+You can compose your own UI using the same CSS utilities the components use:
+
+- 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-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-base|white|secondary|tertiary|quaternary`
+
+Example:
+
+```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")
+]);
+```
+
+## Minimal webpack config
+
+This is a minimal setup that works with `@bunnix/components` (ESM, CSS, and SVG assets):
+
+```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" }
+    ]
+  },
+  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
+
+```
+src/
+  components/   # exported components
+  styles/       # design system CSS
+  icons/        # SVG assets
+  index.mjs     # package exports
+  styles.css    # CSS entry
+playgrounds/    # local showcase (uses the package)
+```
+
+## 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

@@ -0,0 +1,53 @@
+{
+  "name": "@bunnix/components",
+  "version": "0.9.0",
+  "description": "Bunnix components: a set of bunnix ready components for modern web apps.",
+  "keywords": [
+    "bunnix",
+    "componentes",
+    "reactive",
+    "stateful",
+    "web",
+    "app"
+  ],
+  "homepage": "https://github.com/bunnix-js/bunnix-components#readme",
+  "bugs": {
+    "url": "https://github.com/bunnix-js/bunnix-components/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bunnix-js/bunnix-components.git"
+  },
+  "license": "ISC",
+  "author": "@bunnix",
+  "type": "module",
+  "main": "src/index.mjs",
+  "style": "src/styles.css",
+  "types": "@types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./@types/index.d.ts",
+      "default": "./src/index.mjs"
+    },
+    "./styles": "./src/styles.css",
+    "./styles.css": "./src/styles.css",
+    "./icons/*": "./src/icons/*"
+  },
+  "sideEffects": [
+    "./src/styles.css",
+    "./src/styles/*.css"
+  ],
+  "files": [
+    "src",
+    "@types"
+  ],
+  "scripts": {
+    "test": "node --test"
+  },
+  "peerDependencies": {
+    "@bunnix/core": "^0.9.4"
+  },
+  "devDependencies": {
+    "@bunnix/core": "^0.9.4"
+  }
+}

package/src/components/AccordionGroup.mjs

@@ -0,0 +1,37 @@
+import Bunnix, { useState } from "@bunnix/core";
+const { div, button, span, p } = Bunnix;
+
+export default function AccordionGroup({ items = [], class: className = "", initialIndex } = {}) {
+  const resolvedInitial = Number.isInteger(initialIndex)
+    ? initialIndex
+    : items.findIndex((item) => item?.open);
+  const openIndex = useState(resolvedInitial >= 0 ? resolvedInitial : null);
+
+  const handleToggle = (index) => {
+    const current = openIndex.get();
+    openIndex.set(current === index ? null : index);
+  };
+
+  return div(
+    { class: `accordion-group ${className}`.trim() },
+    items.map((item, index) => {
+      const isOpen = openIndex.map((value) => value === index);
+      const iconClass = item.icon ? item.icon : "icon-add";
+      const description = item.description ?? item.content ?? "";
+
+      return div({ class: isOpen.map((open) => `accordion-item hoverable ${open ? "accordion-open" : ""}`) }, [
+        button({ class: "accordion-header", click: () => handleToggle(index) }, [
+          span({ class: isOpen.map((open) => `icon accordion-icon ${iconClass} ${open ? "bg-accent" : "bg-primary"}`) }),
+          span({ class: "accordion-title" }, item.title)
+        ]),
+        div({ class: "accordion-content" }, [
+          div({ class: "accordion-body" }, [
+            typeof description === "string"
+              ? p({ class: "accordion-description" }, description)
+              : description
+          ])
+        ])
+      ]);
+    })
+  );
+}

package/src/components/Badge.mjs

@@ -0,0 +1,49 @@
+import Bunnix from "@bunnix/core";
+import Icon from "./Icon.mjs";
+
+const { span } = Bunnix;
+
+const toneClassMap = {
+  base: "badge-base",
+  success: "badge-success",
+  info: "badge-info",
+  warning: "badge-warning",
+  danger: "badge-danger",
+  accent: "badge-accent",
+  dimmed: "badge-dimmed"
+};
+
+const sizeClassMap = {
+  xs: "badge-xs",
+  sm: "badge-sm",
+  md: "badge-md"
+};
+
+const variantClassMap = {
+  solid: "badge-solid",
+  soft: "badge-soft",
+  outline: "badge-outline"
+};
+
+export default function Badge({
+  tone = "base",
+  size = "sm",
+  variant = "solid",
+  icon,
+  overlap = false,
+  shape = "capsule",
+  class: className = ""
+} = {}, children) {
+  const toneClass = toneClassMap[tone] || toneClassMap.base;
+  const sizeClass = sizeClassMap[size] || sizeClassMap.sm;
+  const variantClass = variantClassMap[variant] || variantClassMap.solid;
+  const iconSize = size === "md" ? "lg" : size === "xs" ? "xs" : "sm";
+  const overlapClass = overlap ? "badge-overlap" : "";
+  const shapeClass = shape === "circle" ? "badge-circle" : "";
+  const combinedClass = `badge ${toneClass} ${sizeClass} ${variantClass} ${overlapClass} ${shapeClass} ${className}`.trim();
+
+  return span({ class: combinedClass }, [
+    icon ? Icon({ name: icon, fill: "current", size: iconSize }) : null,
+    children
+  ]);
+}

package/src/components/Button.mjs

@@ -0,0 +1,76 @@
+import Bunnix from "@bunnix/core";
+const { button, a } = Bunnix;
+
+export default function Button({
+  type = "button",
+  variant = "regular",
+  size,
+  href,
+  disabled = false,
+  onClick,
+  click,
+  class: className = "",
+  ...rest
+} = {}, children) {
+  const normalizeSize = (value) => {
+    if (!value || value === "default" || value === "regular" || value === "md") return "md";
+    if (value === "sm") return "sm";
+    if (value === "lg" || value === "xl") return value;
+    return value;
+  };
+
+  const variantState = variant && typeof variant.map === "function" ? variant : null;
+  const sizeState = size && typeof size.map === "function" ? size : null;
+  const disabledState = disabled && typeof disabled.map === "function" ? disabled : null;
+  const resolvedVariant = variantState ? variantState.get() : variant;
+  const isHyperlink = resolvedVariant === "hyperlink";
+  const handler = onClick ?? click;
+
+  const buildClass = (variantValue, sizeValue, disabledValue) => {
+    const normalizedSize = normalizeSize(sizeValue);
+    const baseClass = isHyperlink ? "" : "btn";
+    const variantClass = (isHyperlink || variantValue === "regular") ? "" : `btn-${variantValue}`;
+    const sizeClass = (!isHyperlink && normalizedSize && normalizedSize !== "md" && (normalizedSize === "lg" || normalizedSize === "xl"))
+      ? `btn-${normalizedSize}`
+      : "";
+    const disabledClass = disabledValue ? "btn-disabled" : "";
+    return `${baseClass} ${variantClass} ${sizeClass} ${disabledClass} ${className}`.trim();
+  };
+
+  const combinedClass = variantState
+    ? variantState.map((value) =>
+        buildClass(value, sizeState ? sizeState.get() : size, disabledState ? disabledState.get() : disabled)
+      )
+    : sizeState
+      ? sizeState.map((value) =>
+          buildClass(resolvedVariant, value, disabledState ? disabledState.get() : disabled)
+        )
+      : disabledState
+        ? disabledState.map((value) => buildClass(resolvedVariant, size, value))
+        : buildClass(resolvedVariant, size, disabled);
+
+  const props = {
+    class: combinedClass,
+    disabled,
+    ...rest
+  };
+
+  // Only attach click handler if not disabled
+  if (handler) {
+    props.click = (event) => {
+      const isDisabled = disabledState ? disabledState.get() : !!disabled;
+      if (isDisabled) return;
+      handler(event);
+    };
+  }
+
+  if (type === "link" || isHyperlink) {
+    // If it's a hyperlink variant, default to link type unless explicitly button
+    if (!disabled) {
+      props.href = href || "#";
+    }
+    return a(props, children);
+  }
+
+  return button(props, children);
+}