@bunnix/components 0.10.3 → 0.11.0

package/@types/index.d.ts

@@ -16,6 +16,10 @@ export type StateLike<T = any> = {
 
 export interface LayoutProps extends BaseProps {
   gap?: number | string;
+  fontSize?: number | string;
+  overflow?: string;
+  overflowX?: string;
+  overflowY?: string;
   width?: number | string;
   height?: number | string;
   minWidth?: number | string;
@@ -24,8 +28,24 @@ export interface LayoutProps extends BaseProps {
   maxHeight?: number | string;
   fillWidth?: boolean;
   fillHeight?: boolean;
+  zIndex?: number | string;
+  border?: "none" | "primary" | "secondary" | "tertiary" | "transparent";
+  bgColor?: "primary" | "primary-dimmed" | "secondary" | "success" | "success-dimmed" | "warning" | "warning-dimmed" | "danger" | string;
+  margin?: number | string;
   marginX?: number | string;
   marginY?: number | string;
+  marginTop?: number | string;
+  marginBottom?: number | string;
+  marginLeft?: number | string;
+  marginRight?: number | string;
+  padding?: number | string;
+  paddingX?: number | string;
+  paddingY?: number | string;
+  paddingTop?: number | string;
+  paddingBottom?: number | string;
+  paddingLeft?: number | string;
+  paddingRight?: number | string;
+  borderRadius?: number | string;
 }
 
 export interface GridColumn {
@@ -71,7 +91,7 @@ export interface ButtonProps extends LayoutProps {
   variant?: "primary" | "secondary" | "tertiary" | "danger" | string;
   disabled?: boolean | StateLike<boolean>;
   outline?: boolean;
-  padding?: boolean;
+  padding?: number | string | boolean;
   click?: (event?: any) => void;
 }
 
@@ -85,6 +105,7 @@ export interface LinkButtonProps extends LayoutProps {
 
 export interface TextInputProps extends LayoutProps {
   value?: string | number | Date | StateLike<any>;
+  focused?: boolean | StateLike<boolean>;
   placeholder?: string;
   type?: string;
   label?: string;
@@ -93,6 +114,62 @@ export interface TextInputProps extends LayoutProps {
   input?: (event?: any) => void;
 }
 
+export interface TextAreaProps extends LayoutProps {
+  value?: string | number | StateLike<any>;
+  focused?: boolean | StateLike<boolean>;
+  placeholder?: string;
+  label?: string;
+  outline?: boolean;
+  disabled?: boolean;
+  minLines?: number;
+  maxLines?: number;
+  input?: (event?: any) => void;
+}
+
+export type MenuAnchor =
+  | "bottom-left"
+  | "bottom-right"
+  | "top-left"
+  | "top-right"
+  | "bottomLeft"
+  | "bottomRight"
+  | "topLeft"
+  | "topRight";
+
+export interface MenuItem {
+  key?: string;
+  text?: string;
+  icon?: string;
+  action?: (() => void) | null;
+  divider?: boolean;
+}
+
+export interface PickerProps extends LayoutProps {
+  value?: string | StateLike<string>;
+  options?: MenuItem[] | StateLike<MenuItem[]>;
+  label?: string;
+  outline?: boolean;
+  disabled?: boolean | StateLike<boolean>;
+  anchor?: MenuAnchor;
+  input?: (event?: any) => void;
+}
+
+export interface SegmentedPickerItem {
+  key: string;
+  text: string;
+  icon?: string;
+}
+
+export interface SegmentedPickerProps extends LayoutProps {
+  value?: string | StateLike<string>;
+  items?: SegmentedPickerItem[] | StateLike<SegmentedPickerItem[]>;
+  label?: string;
+  outline?: boolean;
+  disabled?: boolean;
+  input?: (event?: any) => void;
+  change?: (event?: any) => void;
+}
+
 export interface SelectOption {
   key?: string;
   content?: any;
@@ -100,7 +177,7 @@ export interface SelectOption {
 
 export interface SelectProps extends LayoutProps {
   value?: string | StateLike<string>;
-  options?: SelectOption[];
+  options?: SelectOption[] | StateLike<SelectOption[]>;
   label?: string;
   outline?: boolean;
   disabled?: boolean;
@@ -117,6 +194,33 @@ export interface CheckBoxProps extends LayoutProps {
   input?: (event?: any) => void;
 }
 
+export interface SwitchProps extends LayoutProps {
+  checked?: boolean | StateLike<boolean>;
+  value?: boolean | StateLike<boolean>;
+  label?: string;
+  outline?: boolean;
+  disabled?: boolean;
+  change?: (event?: any) => void;
+  input?: (event?: any) => void;
+}
+
+export interface SliderStep {
+  value: number;
+  label?: string;
+}
+
+export interface SliderProps extends LayoutProps {
+  value?: number | StateLike<number>;
+  min?: number | StateLike<number>;
+  max?: number | StateLike<number>;
+  step?: number | StateLike<number>;
+  steps?: SliderStep[] | StateLike<SliderStep[]>;
+  label?: string;
+  outline?: boolean;
+  disabled?: boolean;
+  input?: (event?: any) => void;
+}
+
 export interface TableHeader {
   content?: any;
   key?: string;
@@ -124,20 +228,33 @@ export interface TableHeader {
 }
 
 export interface TableProps extends LayoutProps {
-  headers?: TableHeader[];
-  rows?: Array<Record<string, any>>;
+  headers?: TableHeader[] | StateLike<TableHeader[]>;
+  rows?: Array<Record<string, any>> | StateLike<Array<Record<string, any>>>;
+  type?: "regular" | "alternate-rows";
+  hideHeaders?: boolean;
+  renderCell?: (
+    record: Record<string, any>,
+    rowIndex: number,
+    field: string,
+  ) => BunnixChild;
 }
 
-export interface DialogConfirmation {
+export interface DialogAction {
   text?: string;
   variant?: string;
   action?: (() => void) | null;
 }
 
+export interface DialogConfirmation extends DialogAction {}
+
 export interface ShowDialogOptions {
-  title?: string;
+  title?: string | BunnixChild;
   contents?: any[] | any;
-  confirmation?: DialogConfirmation;
+  padding?: number | string;
+  width?: number | string;
+  height?: number | string;
+  secondary?: DialogAction;
+  confirmation?: DialogAction;
 }
 
 export interface ProgressBarProps extends LayoutProps {
@@ -145,7 +262,53 @@ export interface ProgressBarProps extends LayoutProps {
   color?: "primary" | "primary-dimmed" | "secondary" | "tertiary" | "success" | "warning" | "danger" | "error" | "link" | string;
 }
 
-export type Component<P = BaseProps> = (props?: P, ...children: BunnixChildren[]) => any;
+export interface OutlineProps extends LayoutProps {
+  /** Always-visible trigger content — accepts any Bunnix node (text, icon, row, etc.) */
+  anchor?: BunnixChild;
+  /** Collapsible content shown when expanded — accepts any Bunnix node */
+  details?: BunnixChild;
+  /** Whether to render the chevron toggle icon (default: true) */
+  showChevron?: boolean;
+  /** Controlled open/closed state — accepts a static boolean (initial value) or StateLike<boolean> for two-way binding */
+  open?: boolean | StateLike<boolean>;
+}
+
+export interface MenuProps extends LayoutProps {
+  items?: MenuItem[] | StateLike<MenuItem[]>;
+  trigger?:
+    | BunnixChild
+    | ((state: { isOpen: boolean; toggle: () => void }) => BunnixChild);
+  anchor?: MenuAnchor;
+}
+
+/** Sidebar navigation item configuration */
+export interface SidebarItem {
+  /** Unique identifier for the sidebar item */
+  key: string;
+  /** Display text for the item */
+  text: string;
+  /** Optional official Framework7 icon name */
+  icon?: string;
+  /** If true, renders as a section header instead of a clickable item */
+  isHeader?: boolean;
+  /** Optional nested child items rendered below this item when expanded */
+  children?: SidebarItem[];
+  /** Initial expanded state for items that have nested children */
+  expanded?: boolean;
+}
+
+/** Props for the Sidebar component */
+export interface SidebarProps extends LayoutProps {
+  /** Array of sidebar items or a state object containing items. Supports dynamic updates via StateLike */
+  items?: SidebarItem[] | StateLike<SidebarItem[]>;
+  /** Currently selected item key, null for no selection, or a state object. Updates on item click */
+  selection?: string | null | StateLike<string | null>;
+}
+
+export type Component<P = BaseProps> = {
+  (...children: BunnixChildren[]): any;
+  (props: P, ...children: BunnixChildren[]): any;
+};
 
 export const Column: Component<LayoutProps>;
 export const Row: Component<LayoutProps>;
@@ -164,14 +327,20 @@ export const Button: Component<ButtonProps>;
 export const LinkButton: Component<LinkButtonProps>;
 
 export const TextInput: Component<TextInputProps>;
+export const TextArea: Component<TextAreaProps>;
 export const Select: Component<SelectProps>;
 export const CheckBox: Component<CheckBoxProps>;
+export const Switch: Component<SwitchProps>;
+export const SegmentedPicker: Component<SegmentedPickerProps>;
+export const Slider: Component<SliderProps>;
 
 export const Table: Component<TableProps>;
 export const Code: Component<BaseProps & { html?: string; language?: string }>;
 
-export const Sidebar: Component<BaseProps>;
-export const Menu: Component<BaseProps>;
+export const Sidebar: Component<SidebarProps>;
+export const Picker: Component<PickerProps>;
+export const Menu: Component<MenuProps>;
+export const Outline: Component<OutlineProps>;
 
 export function useDialog(): {
   Dialog: Component<BaseProps>;
@@ -184,8 +353,3 @@ declare module "@bunnix/components/styles.css" {
   const content: string;
   export default content;
 }
-
-declare module "@bunnix/components/styles" {
-  const content: string;
-  export default content;
-}

package/README.md

@@ -28,6 +28,10 @@ import {
   Text,
   Button,
   TextInput,
+  TextArea,
+  Switch,
+  Slider,
+  Picker,
   ProgressBar,
 } from "@bunnix/components";
 
@@ -40,19 +44,52 @@ Column(
     Button({ variant: "tertiary" }, "Cancel"),
   ),
   TextInput({ label: "Name", placeholder: "Type here" }),
+  TextArea({
+    label: "Notes",
+    minLines: 3,
+    maxLines: 6,
+    placeholder: "Write more...",
+  }),
+  Switch({ checked: false, label: "Enable sync" }),
+  Picker({
+    value: "calendar",
+    options: [
+      { key: "calendar", text: "Calendar", icon: "calendar" },
+      { key: "messages", text: "Messages", icon: "chat_bubble_2" },
+    ],
+  }),
+  Slider({ min: 0, max: 100, step: 5, value: 50 }),
   ProgressBar({ value: 65, color: "success" }),
 );
 ```
 
+## Layout Border Prop
+
+Layout primitives accept a resolved `border` prop:
+
+`"none" | "primary" | "secondary" | "tertiary" | "transparent"`
+
+```js
+Column(
+  { gap: 8 },
+  Column({ border: "primary", padding: "regular", radius: "regular" }, "Primary"),
+  Column({ border: "secondary", padding: "regular", radius: "regular" }, "Secondary"),
+  Column({ border: "tertiary", padding: "regular", radius: "regular" }, "Tertiary"),
+  Column({ border: "transparent", padding: "regular", radius: "regular" }, "Transparent"),
+);
+```
+
+These border tokens automatically adapt to light and dark color schemes, with `secondary` and `tertiary` rendered as softer tones of the primary border.
+
 ## Exported API
 
 - Layout: `Column`, `Row`, `Spacer`, `Grid`
 - Typography: `Heading`, `Text`
 - Media: `Media`, `Icon`, `Spinner`, `Avatar`
 - Buttons: `Button`, `LinkButton`
-- Inputs: `TextInput`, `Select`, `CheckBox`
+- Inputs: `TextInput`, `TextArea`, `Select`, `CheckBox`, `Switch`, `Slider`
 - Data display: `Table`, `Code`
-- Navigation: `Sidebar`, `Menu`
+- Navigation: `Sidebar`, `Picker`, `Menu`
 - Feedback: `useDialog`, `ProgressBar`
 
 ## ProgressBar Colors
@@ -78,9 +115,9 @@ Primary consumer stylesheet:
 
 - `@bunnix/components/styles.css`
 
-Optional core styles (advanced use):
+Canonical public stylesheet:
 
-- `@bunnix/components/src/core/core.css`
+- `@bunnix/components/styles.css`
 - `@bunnix/components/src/core/input.css`
 - `@bunnix/components/src/core/table.css`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bunnix/components",
-  "version": "0.10.3",
+  "version": "0.11.0",
   "description": "Bunnix components: a set of bunnix ready components for modern web apps.",
   "keywords": [
     "bunnix",
@@ -29,9 +29,7 @@
       "types": "./@types/index.d.ts",
       "default": "./src/index.mjs"
     },
-    "./styles": "./src/core/core.css",
-    "./core.css": "./src/core/core.css",
-    "./icons/*": "./src/icons/*"
+    "./styles.css": "./src/core/core.css"
   },
   "sideEffects": [
     "./src/core/*.css"
@@ -41,10 +39,7 @@
     "@types"
   ],
   "scripts": {
-    "test": "node --test",
-    "sanitize:icons": "node scripts/sanitizeSvgs.mjs",
-    "prebuild": "npm run sanitize:icons && node scripts/generateIconRegistry.mjs",
-    "build:icons": "npm run sanitize:icons && node scripts/generateIconRegistry.mjs"
+    "test": "node --test"
   },
   "peerDependencies": {
     "@bunnix/core": "^0.9.4"

package/src/core/buttons.css

@@ -14,6 +14,7 @@
   -webkit-user-select: none;
   min-height: 32px;
   font-size: 1rem;
+  font-weight: var(--font-weight-heavy);
 }
 
 .button:disabled {

package/src/core/core.css

@@ -25,6 +25,8 @@
   --color-bg-secondary: light-dark(#EDEDED, #1A1A1A);
 
   --color-border-primary: light-dark(#D2D2D2, #3D3D3D);
+  --color-border-secondary: light-dark(#E0E0E0, #2E2E2E);
+  --color-border-tertiary: light-dark(#ECECEC, #242424);
   --color-outline: light-dark(#000, #fff);
   --color-outline-dimmed: light-dark(#444, #555);
 
@@ -398,12 +400,14 @@ body {
 }
 
 /* Layout positioning */
-.sticky-top {
+.sticky-top,
+[sticky="top"] {
   position: sticky;
   top: 0;
 }
 
-.sticky-bottom {
+.sticky-bottom,
+[sticky="bottom"] {
   position: sticky;
   bottom: 0;
 }
@@ -492,6 +496,16 @@ body {
   border: 1px solid var(--color-border-primary);
 }
 
+.border-secondary,
+[border="secondary"] {
+  border: 1px solid var(--color-border-secondary);
+}
+
+.border-tertiary,
+[border="tertiary"] {
+  border: 1px solid var(--color-border-tertiary);
+}
+
 .border-transparent,
 [border="transparent"] {
   border: 1px solid transparent;

package/src/core/dialog.css

@@ -2,7 +2,9 @@
 .dialog {
   border: 1px solid var(--color-border-primary);
   border-radius: var(--radius-lg);
-  padding: var(--padding-sm);
+  padding: 0;
+  background-color: var(--color-bg-primary);
+  overflow: hidden;
 }
 
 .dialog::backdrop {

package/src/core/dialog.mjs

@@ -23,6 +23,14 @@ import { Icon } from "./media.mjs";
 
 const { dialog } = Bunnix;
 
+const resolveDialogSize = (value) =>
+  typeof value === "number" ? `${value}px` : value;
+
+const renderDialogTitle = (title) =>
+  typeof title === "string"
+    ? Heading({ h3: true, flexShrink: 0 }, title)
+    : title;
+
 /**
  * Creates a dialog controller and render component.
  *
@@ -35,6 +43,10 @@ export const useDialog = () => {
   const dialogState = useState({
     title: "",
     contents: [],
+    padding: "regular",
+    width: null,
+    height: null,
+    secondary: null,
     confirmation: { text: "OK", variant: "primary" },
   });
   const dialogRef = useRef(null);
@@ -50,28 +62,84 @@ export const useDialog = () => {
         dialogRef.current?.close();
       };
 
-      return dialog(
-        {
-          ref: dialogRef,
-          cancel: closeDialog,
-          class: `dialog`,
-        },
-        Show(
-          dialogState,
-          (state) => (
+      return Show(
+        dialogState,
+        (state) => (
+          dialog(
+            {
+              ref: dialogRef,
+              cancel: closeDialog,
+              class: `dialog`,
+              style: {
+                ...(state.width ? { width: resolveDialogSize(state.width) } : {}),
+                ...(state.height ? { height: resolveDialogSize(state.height) } : {}),
+              },
+            },
             Column(
-              { class: "padding-md", gap: 12, minWidth: 420, maxWidth: 580 },
+              {
+                gap: 12,
+                minWidth: state.width ? undefined : 420,
+                maxWidth: state.width ? undefined : 580,
+                maxHeight: state.height ? undefined : "calc(100vh - 32px)",
+                ...(state.width ? { fillWidth: true } : {}),
+                ...(state.height ? { fillHeight: true } : {}),
+                minHeight: 0,
+                overflow: "hidden",
+              },
               Row(
-                { gap: 24, alignItems: "center" },
-                Heading({ h3: true, flexShrink: 0 }, state.title),
+                {
+                  gap: 24,
+                  alignItems: "center",
+                  paddingX: state.padding,
+                  paddingTop: state.padding,
+                  flexShrink: 0,
+                },
+                renderDialogTitle(state.title),
                 Spacer(),
                 Button(
                   { variant: "tertiary", click: closeDialog },
-                  Icon({ name: "close", color: "secondary", size: 20 }),
+                  Icon({ name: "xmark", color: "secondary", size: 20 }),
+                ),
+              ),
+              state.contents.length > 0 && Column(
+                {
+                  flexGrow: 1,
+                  minHeight: 0,
+                },
+                Column(
+                  {
+                    gap: 12,
+                    paddingX: state.padding,
+                    fillHeight: true,
+                    minHeight: 0,
+                    style: {
+                      overflowY: "auto",
+                    },
+                  },
+                  ...state.contents,
                 ),
               ),
-              state.contents.length > 0 && Column(...state.contents),
               Row(
+                {
+                  paddingX: state.padding,
+                  paddingBottom: state.padding,
+                  bgColor: "primary",
+                  flexShrink: 0,
+                },
+                ...(state.secondary ? [
+                  Button(
+                    {
+                      minWidth: 80,
+                      variant: state.secondary.variant,
+                      click: () => {
+                        let action = state.secondary.action;
+                        (action) && action();
+                        closeDialog();
+                      }
+                    },
+                    state.secondary.text
+                  ),
+                ] : []),
                 Spacer(),
                 Button(
                   {
@@ -86,7 +154,7 @@ export const useDialog = () => {
                   state.confirmation.text
                 )
               ),
-            )
+            ),
           )
         )
       );
@@ -95,8 +163,15 @@ export const useDialog = () => {
      * Opens dialog with provided content and confirmation behavior.
      *
      * @param {Object} [config] - Dialog config
-     * @param {string} [config.title] - Dialog title text
+     * @param {string|*} [config.title] - Dialog title text or custom node
      * @param {Array|*} [config.contents=[]] - Renderable content block(s)
+     * @param {number|string} [config.padding="regular"] - Shared dialog section padding
+     * @param {number|string} [config.width] - Fixed dialog width
+     * @param {number|string} [config.height] - Fixed dialog height
+     * @param {Object} [config.secondary] - Optional secondary button config
+     * @param {string} [config.secondary.text="Cancel"] - Secondary label
+     * @param {string} [config.secondary.variant="secondary"] - Button variant
+     * @param {Function|null} [config.secondary.action=null] - Action run before close
      * @param {Object} [config.confirmation] - Confirmation button config
      * @param {string} [config.confirmation.text=\"OK\"] - Confirmation label
      * @param {string} [config.confirmation.variant=\"primary\"] - Button variant
@@ -106,14 +181,24 @@ export const useDialog = () => {
     showDialog: ({
       title,
       contents = [],
+      padding = "regular",
+      width = null,
+      height = null,
+      secondary,
       confirmation,
     } = {}) => {
+      const defaultSecondary = { text: "Cancel", variant: "secondary", action: null };
       const defaultConfirmation = { text: "OK", variant: "primary", action: null };
+      const mergedSecondary = secondary ? { ...defaultSecondary, ...secondary } : null;
       const mergedConfirmation = { ...defaultConfirmation, ...confirmation };
 
       dialogState.set({
         title,
         contents: Array.isArray(contents) ? contents : [contents],
+        padding,
+        width,
+        height,
+        secondary: mergedSecondary,
         confirmation: mergedConfirmation,
       });
       dialogRef.current?.showModal();