@bunnix/components 0.9.0 → 0.9.2

package/src/components/Text.mjs

@@ -1,38 +1,69 @@
 import Bunnix from "@bunnix/core";
+import { clampSize, toSizeToken } from "../utils/sizeUtils.mjs";
 const { span, p, h1, h2, h3, h4 } = Bunnix;
 
-export default function Text({
-  type = "text",
-  color = "primary",
-  design = "regular",
-  class: className = "",
-  ...rest
-} = {}, children) {
+export default function Text(props = {}, children) {
+  const isState = (value) => value && typeof value.map === "function";
+  
+  // Normalize arguments: Text("Value"), Text(State), or Text({ props }, value)
+  if (
+    props === null ||
+    props === undefined ||
+    Array.isArray(props) ||
+    typeof props === "string" ||
+    isState(props)
+  ) {
+    children = props;
+    props = {};
+  }
+
+  const {
+    type = "text",
+    color = "default",
+    design = "regular",
+    weight,
+    size,
+    wrap,
+    class: className = "",
+    ...rest
+  } = props;
+
+  const normalizeSize = (value) =>
+    clampSize(value, ["xsmall", "small", "regular", "large", "xlarge"], "regular");
+  const normalizedSize = normalizeSize(size);
+  const sizeToken = toSizeToken(normalizedSize);
+  const sizeClass = sizeToken ? `text-${sizeToken}` : "";
   const tagMap = {
     text: span,
     paragraph: p,
     heading1: h1,
     heading2: h2,
     heading3: h3,
-    heading4: h4
+    heading4: h4,
   };
 
   const tag = tagMap[type] || span;
-  
-  // Color mapping: primary -> text-primary, secondary -> text-secondary, etc.
   const colorClass = color ? `text-${color}` : "";
-  
-  // Design mapping: mono -> text-mono, regular -> ""
   const designClass = design === "mono" ? "text-mono" : "";
-  
-  const isState = className && typeof className.map === "function";
+  const weightClass =
+    weight === "bold" ? "bold" : weight === "semibold" ? "semibold" : "";
 
-  const combinedClass = isState
-    ? className.map((value) => `${colorClass} ${designClass} ${value}`.trim())
-    : `${colorClass} ${designClass} ${className}`.trim();
+  const isClassState = isState(className);
 
-  return tag({
-    class: combinedClass,
-    ...rest
-  }, children);
+  const wrapClass =
+    wrap === "nowrap" ? "whitespace-nowrap" : wrap === "wrap" ? "" : "";
+
+  const combinedClass = isClassState
+    ? className.map((value) =>
+        `${colorClass} ${designClass} ${weightClass} ${sizeClass} ${wrapClass} ${value}`.trim(),
+      )
+    : `${colorClass} ${designClass} ${weightClass} ${sizeClass} ${wrapClass} ${className}`.trim();
+
+  return tag(
+    {
+      class: combinedClass,
+      ...rest,
+    },
+    children,
+  );
 }

package/src/components/TimePicker.mjs

@@ -1,4 +1,5 @@
 import Bunnix, { useRef, useState, useMemo } from "@bunnix/core";
+import { clampSize, toSizeToken } from "../utils/sizeUtils.mjs";
 import Icon from "./Icon.mjs";
 const { div, button, span, hr, input } = Bunnix;
 
@@ -8,7 +9,7 @@ export default function TimePicker({
   id,
   placeholder,
   variant = "regular",
-  size = "md",
+  size = "regular",
   class: className = ""
 } = {}) {
   const popoverRef = useRef(null);
@@ -96,25 +97,22 @@ export default function TimePicker({
 
   const hasValue = isModified.map(m => !!m);
 
-  const normalizeSize = (value) => {
-    if (!value || value === "default" || value === "regular" || value === "md") return "md";
-    if (value === "sm") return "md";
-    if (value === "lg" || value === "xl") return value;
-    return value;
-  };
+  // TimePicker does not support small size (clamps to regular)
+  const normalizeSize = (value) => clampSize(value, ["xsmall", "regular", "large", "xlarge"], "regular");
   const normalizedSize = normalizeSize(size);
+  const sizeToken = toSizeToken(normalizedSize);
   const variantClass = variant === "rounded" ? "rounded-full" : "";
-  const triggerSizeClass = normalizedSize === "xl"
+  const triggerSizeClass = sizeToken === "xl"
     ? "dropdown-xl"
-    : normalizedSize === "lg"
+    : sizeToken === "lg"
       ? "dropdown-lg"
       : "";
-  const iconSizeValue = normalizedSize === "sm"
-    ? "sm"
-    : normalizedSize === "lg"
-      ? "lg"
-      : normalizedSize === "xl"
-        ? "xl"
+  const iconSizeValue = normalizedSize === "small"
+    ? "small"
+    : normalizedSize === "large"
+      ? "large"
+      : normalizedSize === "xlarge"
+        ? "xlarge"
         : undefined;
 
   return div({ class: `timepicker-wrapper ${className}`.trim() }, [

package/src/components/ToastNotification.mjs

@@ -1,5 +1,6 @@
 import Bunnix, { useEffect, useRef, useState } from "@bunnix/core";
-import Icon from "./Icon.mjs";
+import { clampSize, toSizeToken } from "../utils/sizeUtils.mjs";
+import { resolveIconClass } from "../utils/iconUtils.mjs";
 const { div, h4 } = Bunnix;
 
 const defaultToast = {
@@ -11,13 +12,9 @@ const defaultToast = {
 
 export const toastState = useState(defaultToast);
 
-export const showToast = ({ message, duration = 3, anchor = "topRight", size = "md", icon } = {}) => {
-  const normalizeSize = (value) => {
-    if (!value || value === "default" || value === "regular" || value === "md") return "md";
-    if (value === "sm") return "md";
-    if (value === "lg" || value === "xl") return value;
-    return value;
-  };
+export const showToast = ({ message, duration = 3, anchor = "topRight", size = "regular", icon } = {}) => {
+  // ToastNotification does not support small size (clamps to regular)
+  const normalizeSize = (value) => clampSize(value, ["xsmall", "regular", "large", "xlarge"], "regular");
   toastState.set({
     open: true,
     message: message ?? "",
@@ -77,13 +74,16 @@ export default function ToastNotification() {
     const motionClass = value.anchor === "topLeft" || value.anchor === "bottomLeft"
       ? "slide-in-left"
       : "slide-in-right";
-    const sizeClass = value.size === "lg" ? "p-lg" : value.size === "xl" ? "p-xl" : "p-base";
+    const sizeToken = toSizeToken(value.size);
+    const sizeClass = sizeToken === "xl" ? "p-xl" : sizeToken === "lg" ? "p-lg" : sizeToken === "md" ? "p-base" : "p-sm";
     return `box-control card shadow bg-base ${sizeClass} w-300 overflow-visible ${motionClass}`.trim();
   });
   const textSizeClass = toastState.map((value) => {
-    if (value.size === "lg") return "text-lg";
-    if (value.size === "xl") return "text-xl";
-    return "text-base";
+    const sizeToken = toSizeToken(value.size);
+    if (sizeToken === "xl") return "text-xl";
+    if (sizeToken === "lg") return "text-lg";
+    if (sizeToken === "md") return "text-base";
+    return "text-sm";
   });
 
   return div({
@@ -95,7 +95,10 @@ export default function ToastNotification() {
       div({ class: "row-container items-center gap-sm no-margin" }, [
         div({
           class: toastState.map((value) =>
-            value.icon ? `icon ${value.icon} icon-base` : "hidden"
+            (() => {
+              const resolvedIcon = resolveIconClass(value.icon);
+              return resolvedIcon ? `icon ${resolvedIcon} icon-base` : "hidden";
+            })()
           )
         }),
         h4({ class: textSizeClass.map(cls => `no-margin ${cls}`.trim()) }, toastState.map((value) => value.message))

package/src/components/ToggleSwitch.mjs

@@ -1,4 +1,5 @@
 import Bunnix from "@bunnix/core";
+import { clampSize, toSizeToken } from "../utils/sizeUtils.mjs";
 const { label, input, span } = Bunnix;
 
 export default function ToggleSwitch({
@@ -8,14 +9,11 @@ export default function ToggleSwitch({
   class: className = "",
   ...inputProps
 }) {
-  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;
-  };
+  // ToggleSwitch supports all sizes
+  const normalizeSize = (value) => clampSize(value, ["xsmall", "small", "regular", "large", "xlarge"], "regular");
   const normalizedSize = normalizeSize(size);
-  const sizeClass = normalizedSize === "lg" ? "switch-lg" : normalizedSize === "xl" ? "switch-xl" : "";
+  const sizeToken = toSizeToken(normalizedSize);
+  const sizeClass = sizeToken === "xl" ? "switch-xl" : sizeToken === "lg" ? "switch-lg" : "";
   const change = onChange ?? inputProps.change;
 
   return label({ class: `switch-control ${sizeClass} ${className}`.trim() }, [

package/src/components/VStack.mjs

@@ -1,7 +1,7 @@
 import Bunnix from "@bunnix/core";
 const { div } = Bunnix;
 
-export default function VStack(props = {}, children) {
+export default function VStack(props = {}, ...children) {
   if (props === null || props === undefined || Array.isArray(props) || typeof props !== "object") {
     children = props;
     props = {};
@@ -13,14 +13,15 @@ export default function VStack(props = {}, children) {
     class: className = "",
     ...rest
   } = props;
-  // For VStack, alignment controls the vertical distribution (main axis)
+  // For VStack, alignment controls horizontal alignment (cross axis)
   const alignmentMap = {
-    leading: "justify-start",
-    middle: "justify-center",
-    trailing: "justify-end"
+    leading: "items-start",
+    middle: "items-center",
+    trailing: "items-end"
   };
 
   const gapMap = {
+    xsmall: "gap-xs",
     small: "gap-sm",
     regular: "gap-md",
     large: "gap-lg"
@@ -31,5 +32,5 @@ export default function VStack(props = {}, children) {
   return div({
     class: combinedClass,
     ...rest
-  }, children);
+  }, ...children);
 }

package/src/index.mjs

@@ -1,7 +1,9 @@
 export { default as AccordionGroup } from "./components/AccordionGroup.mjs";
 export { default as Badge } from "./components/Badge.mjs";
 export { default as Button } from "./components/Button.mjs";
+export { default as Card } from "./components/Card.mjs";
 export { default as Checkbox } from "./components/Checkbox.mjs";
+export { default as CodeBlock } from "./components/CodeBlock.mjs";
 export { default as ComboBox } from "./components/ComboBox.mjs";
 export { default as Container } from "./components/Container.mjs";
 export { default as DatePicker } from "./components/DatePicker.mjs";

package/src/styles/buttons.css

@@ -42,6 +42,8 @@ button:focus-visible,
 .btn {
   background-color: var(--accent-color);
   color: white;
+  --text-color-default: inherit;
+  --icon-color-default: currentColor;
 }
 
 .btn:visited {
@@ -61,6 +63,8 @@ button:focus-visible,
 .btn-flat {
   background-color: transparent;
   color: var(--color-primary);
+  --text-color-default: inherit;
+  --icon-color-default: currentColor;
 }
 
 .btn-flat:visited {
@@ -81,6 +85,8 @@ button:focus-visible,
   background-color: transparent;
   border: 1px solid var(--border-color);
   color: var(--color-primary);
+  --text-color-default: inherit;
+  --icon-color-default: currentColor;
 }
 
 .btn-outline:visited {
@@ -97,6 +103,8 @@ button:focus-visible,
 .btn-destructive {
   background-color: var(--color-destructive-dimmed);
   color: white;
+  --text-color-default: inherit;
+  --icon-color-default: currentColor;
 }
 
 .btn-destructive:visited {

package/src/styles/colors.css

@@ -13,6 +13,10 @@ body {
 }
 
 /* Text Color Utilities */
+.text-default {
+  color: var(--text-color-default, var(--color-primary));
+}
+
 .text-primary {
   color: var(--color-primary);
 }
@@ -58,6 +62,10 @@ body {
   background-color: var(--background-color) !important;
 }
 
+.icon-default {
+  background-color: var(--icon-color-default, var(--color-primary)) !important;
+}
+
 .icon-base {
   background-color: var(--color-primary) !important;
 }

package/src/styles/controls.css

@@ -51,6 +51,24 @@ select {
   background-size: 1rem;
 }
 
+.combobox {
+  position: relative;
+  width: 100%;
+}
+
+.combobox-select {
+  background-image: none !important;
+  padding-right: calc(var(--base-padding) * 3) !important;
+}
+
+.combobox-chevron {
+  position: absolute;
+  right: var(--base-padding);
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
 .input-search {
   position: relative;
   width: 100%;
@@ -299,6 +317,49 @@ kbd {
   font-size: var(--font-size-xs) !important;
 }
 
+/* Code Block */
+.codeblock {
+  width: 100%;
+}
+
+.codeblock-pre {
+  margin: 0;
+  padding: var(--base-padding);
+  border-radius: var(--min-control-radius);
+  border: 1px solid var(--border-color);
+  background-color: var(--alternate-background-color);
+}
+
+.codeblock-pre code {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: var(--font-size);
+  line-height: 1.6;
+  white-space: pre;
+  color: var(--color-primary);
+  text-shadow: none;
+}
+
+.codeblock-pre.codeblock-wrap code {
+  white-space: pre-wrap;
+}
+
+.codeblock-pre code.codeblock-code,
+.codeblock-pre code.codeblock-code[class*="language-"] {
+  color: var(--color-primary);
+  text-shadow: none;
+}
+
+.codeblock-pre code.codeblock-code span {
+  text-shadow: none;
+}
+
+.codeblock-pre code.codeblock-code .token,
+.codeblock-pre code.codeblock-code[class*="language-"] .token {
+  background: transparent;
+  box-shadow: none;
+}
+
 /* Control Sizes */
 .input-lg {
   padding: calc(var(--base-padding) * 0.75) calc(var(--base-padding) * 1.25) !important;

package/src/styles/layout.css

@@ -116,7 +116,7 @@ nav,
   align-items: center;
   border: 1px solid var(--border-color);
   border-radius: var(--min-control-radius);
-  padding: calc(var(--base-padding) * 0.5);
+  padding: var(--base-padding);
 }
 
 .gap-xs {
@@ -153,17 +153,14 @@ nav,
 
 .justify-start {
   justify-content: flex-start !important;
-  text-align: left;
 }
 
 .justify-center {
   justify-content: center !important;
-  text-align: center;
 }
 
 .justify-end {
   justify-content: flex-end !important;
-  text-align: right;
 }
 
 .shrink-0 {
@@ -191,6 +188,10 @@ nav,
 }
 
 /* New Utilities for Layout Page */
+.flex-1 {
+  flex: 1;
+}
+
 .w-full {
   width: 100%;
 }
@@ -207,6 +208,10 @@ nav,
   min-width: 200px;
 }
 
+.w-400 {
+  min-width: 400px;
+}
+
 .max-w-100 {
   max-width: 100px;
 }
@@ -239,6 +244,14 @@ nav,
   height: 40px;
 }
 
+.w-24 {
+  width: 24px;
+}
+
+.h-24 {
+  height: 24px;
+}
+
 .h-200 {
   height: 200px;
 }
@@ -251,6 +264,10 @@ nav,
   padding: calc(var(--base-padding) * 0.5);
 }
 
+.p-md {
+  padding: var(--base-padding);
+}
+
 .pt-sm {
   padding-top: calc(var(--base-padding) * 0.5) !important;
 }
@@ -285,6 +302,11 @@ nav,
   padding-bottom: calc(var(--base-gap) * 0.5);
 }
 
+.py-sm {
+  padding-top: calc(var(--base-gap) * 0.8);
+  padding-bottom: calc(var(--base-gap) * 0.8);
+}
+
 .py-md {
   padding-top: calc(var(--base-gap) * 2);
   padding-bottom: calc(var(--base-gap) * 2);
@@ -339,6 +361,10 @@ nav,
   border-radius: 1rem !important;
 }
 
+.rounded-circle {
+  border-radius: 9999px;
+}
+
 .border-dashed {
   border: 1px dashed var(--border-color);
 }
@@ -355,6 +381,22 @@ nav,
   overflow: auto;
 }
 
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.overflow-y-hidden {
+  overflow-y: hidden;
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
 .select-none {
   user-select: none;
 }
@@ -365,6 +407,12 @@ nav,
   z-index: 10;
 }
 
+.sticky-bottom {
+  position: sticky;
+  bottom: var(--sticky-offset, 0);
+  z-index: 10;
+}
+
 .z-99 {
   z-index: 99 !important;
 }
@@ -423,7 +471,7 @@ nav,
 }
 
 .dialog-base {
-  margin: 0;
+  margin: auto;
   padding: 0;
   border: none;
   outline: none;
@@ -439,6 +487,17 @@ nav,
   background-color: rgba(0, 0, 0, 0.4);
 }
 
+@media (prefers-color-scheme: dark) {
+  .dialog-backdrop::backdrop {
+    background-color: rgba(var(--background-color-rgb), 0.4);
+  }
+}
+
+.dialog-panel {
+  width: auto;
+  max-width: calc(100vw - (var(--base-padding) * 2));
+}
+
 .overflow-visible {
   overflow: visible !important;
 }

package/src/styles/media.css

@@ -153,3 +153,14 @@
   border: 1px solid rgba(0,0,0,0.1);
   flex-shrink: 0;
 }
+
+/* Force raster images to black in light mode and white in dark mode */
+.high-contrast {
+  filter: brightness(0);
+}
+
+@media (prefers-color-scheme: dark) {
+  .high-contrast {
+    filter: brightness(0) invert(1);
+  }
+}

package/src/styles/menu.css

@@ -10,8 +10,14 @@
   /* Modern CSS Anchor Positioning (Chrome/Edge) */
   position-anchor: var(--anchor-id);
   position: fixed;
+  
+  /* Default positioning (left-aligned, below anchor) */
   top: anchor(var(--anchor-id) bottom);
   left: anchor(var(--anchor-id) left);
+  
+  /* Default fallbacks and ordering */
+  position-try-fallbacks: --flip-v, --flip-v-right, --flip-h, --flip-vh;
+  position-try-order: most-height;
 
   /* Fallback for Safari/Firefox:
      Since .menu-wrapper is relative, this puts it below the button
@@ -19,37 +25,50 @@
   margin-top: var(--base-gap);
 }
 
-/* Custom Try States to prevent horizontal shifting */
+/* Custom Try States with consistent spacing */
 @position-try --flip-v {
   top: auto;
   bottom: anchor(var(--anchor-id) top);
   left: anchor(var(--anchor-id) left);
+  margin-top: 0;
+  margin-bottom: var(--base-gap);
 }
 
 @position-try --flip-v-right {
   top: auto;
   bottom: anchor(var(--anchor-id) top);
   right: anchor(var(--anchor-id) right);
+  margin-top: 0;
+  margin-bottom: var(--base-gap);
 }
 
-[popover].menu-popover {
-  position-try-fallbacks: --flip-v, --flip-v-right;
+@position-try --flip-h {
+  top: anchor(var(--anchor-id) bottom);
+  left: auto;
+  right: anchor(var(--anchor-id) right);
+  margin-top: var(--base-gap);
+  margin-bottom: 0;
 }
 
-/* Alignment Modifiers for Menu */
-.menu-anchor-right {
-  left: auto !important;
-  right: anchor(var(--anchor-id) right) !important;
+@position-try --flip-vh {
+  top: auto;
+  bottom: anchor(var(--anchor-id) top);
+  left: auto;
+  right: anchor(var(--anchor-id) right);
+  margin-top: 0;
+  margin-bottom: var(--base-gap);
 }
 
-.menu-anchor-left {
-  left: anchor(var(--anchor-id) left) !important;
-  right: auto !important;
+/* Alignment Modifiers - Override default positioning */
+[popover].menu-popover.menu-anchor-right {
+  left: auto;
+  right: anchor(var(--anchor-id) right);
+  position-try-fallbacks: --flip-v-right, --flip-v, --flip-vh, --flip-h;
 }
 
-[popover].menu-popover {
-  position-try-fallbacks: --flip-v, --flip-v-right;
-  position-try-order: most-height;
+[popover].menu-popover.menu-anchor-left {
+  /* Uses default left/top positioning from base rule */
+  position-try-fallbacks: --flip-v, --flip-v-right, --flip-h, --flip-vh;
 }
 
 [popover].menu-popover.match-anchor {
@@ -69,18 +88,17 @@
   color: white !important;
 }
 
-[popover].menu-popover.menu-anchor-right {
-  position-try-fallbacks: --flip-v-right, --flip-v;
-}
-
-[popover].menu-popover.menu-anchor-left {
-  position-try-fallbacks: --flip-v, --flip-v-right;
-}
-
 [popover]:popover-open {
   display: flex;
 }
 
+/* Ensure menu content fits within viewport and scrolls if needed */
+[popover].menu-popover > .card {
+  max-height: calc(100dvh - var(--base-padding) * 4);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
 .menu-wrapper {
   position: relative;
   display: inline-block;