@bunnix/components 0.9.0 → 0.9.2

package/src/styles/table.css

@@ -7,7 +7,7 @@
 
 .table th,
 .table td {
-  padding: var(--base-padding);
+  padding: calc(var(--base-padding) * 0.8) var(--base-padding);
   vertical-align: middle;
   border-bottom: 1px solid var(--border-color);
 }
@@ -32,7 +32,7 @@
   border: 1px solid var(--border-color);
   border-radius: var(--base-radius);
   /* Ensure background colors don't bleed */
-  overflow: hidden; 
+  overflow: hidden;
 }
 
 /* Ensure border works with radius on table element */

package/src/styles/typography.css

@@ -71,6 +71,26 @@ h6 {
   font-size: 1.25rem;
 }
 
+.text-uppercase {
+  text-transform: uppercase;
+}
+
+.text-lowercase {
+  text-transform: lowercase;
+}
+
+.text-capitalize {
+  text-transform: capitalize;
+}
+
+.bold {
+  font-weight: var(--font-bold);
+}
+
+.semibold {
+  font-weight: var(--font-semibold);
+}
+
 .font-inherit {
   font-weight: inherit;
   font-size: inherit;
@@ -85,6 +105,11 @@ h6 {
   white-space: pre-line;
 }
 
+.no-selectable {
+  user-select: none;
+  -webkit-user-select: none;
+}
+
 .label {
   display: block;
   font-size: var(--font-size);

package/src/styles/variables.css

@@ -18,6 +18,7 @@
 
   --border-color: #ccc;
   --background-color: #fff;
+  --background-color-rgb: 255, 255, 255;
   --alternate-background-color: #f5f5f5;
   --highlight-background-color: #e5e5e5;
 
@@ -42,6 +43,7 @@
 
   /* Typography */
   --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
   --font-regular: 400;
   --font-bold: 600;
   --font-semibold: 500;
@@ -186,6 +188,7 @@
 
     --border-color: #333;
     --background-color: #000;
+    --background-color-rgb: 0, 0, 0;
     --alternate-background-color: #111;
     --highlight-background-color: #222;
 

package/src/utils/iconUtils.mjs

@@ -0,0 +1,10 @@
+export const resolveIconClass = (value) => {
+  if (typeof value !== "string") return "";
+  const raw = value.trim();
+  if (!raw) return "";
+  const parts = raw.split(/\s+/);
+  const hasIconClass = parts.some((part) => part.startsWith("icon-"));
+  if (hasIconClass) return raw;
+  parts[0] = `icon-${parts[0]}`;
+  return parts.join(" ");
+};

package/src/utils/sizeUtils.mjs

@@ -0,0 +1,87 @@
+/**
+ * Standard size vocabulary for Bunnix components
+ * Supported values: xsmall | small | regular | large | xlarge
+ * Legacy aliases (xs, sm, md, lg, xl, default) are accepted for compatibility.
+ */
+
+const sizeAliasMap = {
+  xsmall: "xsmall",
+  xs: "xsmall",
+  small: "small",
+  sm: "small",
+  regular: "regular",
+  md: "regular",
+  default: "regular",
+  large: "large",
+  lg: "large",
+  xlarge: "xlarge",
+  xl: "xlarge",
+};
+
+const sizeTokenMap = {
+  xsmall: "xs",
+  small: "sm",
+  regular: "md",
+  large: "lg",
+  xlarge: "xl",
+};
+
+const sizeOrder = ["xsmall", "small", "regular", "large", "xlarge"];
+
+export function toSizeToken(value) {
+  const normalized = normalizeSize(value);
+  return sizeTokenMap[normalized];
+}
+
+/**
+ * Normalizes size values to standard vocabulary
+ * @param {string} value - The size value to normalize
+ * @returns {string} Normalized size value
+ */
+export function normalizeSize(value) {
+  if (!value) return "regular";
+
+  // Map legacy values to standard ones
+  if (sizeAliasMap[value]) return sizeAliasMap[value];
+
+  // Validate against standard vocabulary
+  if (sizeOrder.includes(value)) return value;
+
+  // Fallback to medium if invalid
+  return "regular";
+}
+
+/**
+ * Clamps size values to component-specific ranges
+ * @param {string} size - The size value to clamp
+ * @param {Array<string>} supportedSizes - Array of supported sizes for this component
+ * @param {string} defaultSize - Default size if unsupported
+ * @returns {string} Clamped size value
+ */
+export function clampSize(size, supportedSizes = sizeOrder, defaultSize = "regular") {
+  const normalized = normalizeSize(size);
+
+  // If component supports this size, return it
+  if (supportedSizes.includes(normalized)) return normalized;
+
+  // Prefer explicit default when unsupported (e.g., small -> regular)
+  if (supportedSizes.includes(defaultSize)) return defaultSize;
+
+  // Find closest supported size
+  const normalizedIndex = sizeOrder.indexOf(normalized);
+  const supportedIndices = supportedSizes.map((s) => sizeOrder.indexOf(s));
+
+  // Find the closest supported size
+  let closestSize = defaultSize;
+  let minDistance = Infinity;
+
+  for (const supportedIndex of supportedIndices) {
+    const distance = Math.abs(supportedIndex - normalizedIndex);
+    if (distance < minDistance) {
+      minDistance = distance;
+      closestSize = sizeOrder[supportedIndex];
+    }
+  }
+
+  return closestSize;
+}