banhatten-ui 0.1.2 → 0.2.0

package/dist/specs/slider.json

@@ -0,0 +1,91 @@
+{
+  "name": "Slider",
+  "description": "Range slider supporting single-handle and double-handle (range) modes. Uses ProgressBar track styling and SliderHandle for thumb.",
+
+  "base": {
+    "display": "flex",
+    "flexDirection": "column",
+    "width": "100%"
+  },
+
+  "track": {
+    "height": "8px",
+    "borderRadius": "{radius.full}",
+    "bg": "{alias.bg-tertiary}"
+  },
+
+  "fill": {
+    "bg": "{alias.bg-brand}",
+    "borderRadius": "{radius.full}"
+  },
+
+  "variants": {
+    "single": {
+      "description": "One handle. Fill from 0 to value."
+    },
+    "double": {
+      "description": "Two handles. Fill between start and end values."
+    }
+  },
+
+  "states": {
+    "disabled": {
+      "pointerEvents": "none",
+      "cursor": "default"
+    }
+  },
+
+  "props": {
+    "variant": { "type": "enum", "values": ["single", "double"], "default": "single" },
+    "value": { "type": "number | [number, number]", "description": "Current value. Number for single, tuple for double." },
+    "min": { "type": "number", "default": 0 },
+    "max": { "type": "number", "default": 100 },
+    "step": { "type": "number", "default": 1 },
+    "label": { "type": "ReactNode", "description": "Label text above the slider." },
+    "showLabelInfoIcon": { "type": "boolean", "default": false },
+    "helperText": { "type": "ReactNode", "description": "Helper text below the slider." },
+    "valueLabelVariant": { "type": "enum", "values": ["tooltip", "label"], "description": "How to display the value on the handle." },
+    "valueLabelPosition": { "type": "enum", "values": ["above", "below"], "default": "below" },
+    "formatValue": { "type": "function", "description": "(value: number) => string. Formats the displayed value." },
+    "disabled": { "type": "boolean", "default": false }
+  },
+
+  "slots": {
+    "label": { "position": "above", "fontSize": "14px", "fontWeight": 500, "color": "{alias.text-primary}", "marginBottom": "{spacing.sm}" },
+    "helperText": { "position": "below", "fontSize": "14px", "color": "{alias.text-secondary}", "marginTop": "{spacing.sm}" },
+    "infoIcon": { "element": "Icon", "name": "info", "size": "xs", "color": "{alias.icon-tertiary}" }
+  },
+
+  "subComponents": {
+    "SliderHandle": {
+      "description": "Draggable handle positioned on the track. Fixed 24x24px circle.",
+      "base": {
+        "size": "24px",
+        "borderRadius": "{radius.full}",
+        "border": { "width": "1px", "color": "{alias.border-brand}" },
+        "bg": "{alias.bg-primary}",
+        "shadow": "{shadow.sm}",
+        "cursor": "grab",
+        "transition": "background-color"
+      },
+      "states": {
+        "hover": { "bg": "{alias.bg-brand-tertiary}" },
+        "active": { "bg": "{alias.bg-brand-secondary}", "cursor": "grabbing" }
+      },
+      "props": {
+        "valueLabel": { "type": "ReactNode", "description": "Value to display as tooltip or label." },
+        "labelVariant": { "type": "enum", "values": ["tooltip", "label"] },
+        "labelPosition": { "type": "enum", "values": ["above", "below"], "default": "below" }
+      },
+      "valueLabelStyles": {
+        "tooltip": { "uses": "Tooltip component", "variant": "light", "offset": "8px" },
+        "label": { "fontSize": "12px", "color": "{alias.text-primary}", "offset": "8px" }
+      }
+    }
+  },
+
+  "accessibility": {
+    "role": "group",
+    "notes": "Hidden range input(s) for keyboard navigation. aria-valuenow, aria-valuemin, aria-valuemax, aria-valuetext on inputs. Double variant labels inputs as 'start' and 'end'."
+  }
+}

package/dist/specs/tag.json

@@ -0,0 +1,104 @@
+{
+  "name": "Tag",
+  "description": "Interactive label chip supporting simple text, dot indicator, and icon variants. Selectable with optional close action.",
+
+  "base": {
+    "display": "inline-flex",
+    "alignItems": "center",
+    "justifyContent": "center",
+    "borderRadius": "{radius.sm}",
+    "fontWeight": 400,
+    "flexShrink": 0,
+    "gap": "4px",
+    "border": { "width": "1px" },
+    "transition": "background-color, border-color, color"
+  },
+
+  "variants": {
+    "simple": {},
+    "with-dot": {},
+    "with-icon": {}
+  },
+
+  "sizes": {
+    "small": { "height": "24px", "paddingX": "{spacing.sm}", "fontSize": "12px", "lineHeight": "16px" },
+    "large": { "height": "28px", "paddingX": "{spacing.md}", "fontSize": "14px", "lineHeight": "20px" }
+  },
+
+  "states": {
+    "default": {
+      "bg": "{alias.bg-primary}",
+      "border": { "color": "{alias.border-strong}" },
+      "text": "{alias.text-primary}",
+      "hover": { "bg": "{alias.highlight-hover}" }
+    },
+    "focus": {
+      "bg": "{alias.bg-primary}",
+      "border": { "color": "{alias.border-brand}" },
+      "text": "{alias.text-brand}"
+    },
+    "active": {
+      "bg": "{alias.bg-brand-tertiary}",
+      "border": { "color": "{alias.border-brand}" },
+      "text": "{alias.text-primary}",
+      "hover": { "bg": "{alias.bg-brand-tertiary}" }
+    },
+    "disabled": {
+      "bg": "{alias.bg-secondary}",
+      "border": { "color": "{alias.border-inactive-subtle}" },
+      "text": "{alias.text-inactive}",
+      "pointerEvents": "none"
+    }
+  },
+
+  "props": {
+    "type": { "type": "enum", "values": ["simple", "with-dot", "with-icon"], "default": "simple" },
+    "state": { "type": "enum", "values": ["default", "focus", "active", "disabled"], "default": "default" },
+    "size": { "type": "enum", "values": ["small", "large"], "default": "small" },
+    "leftIcon": { "type": "string", "default": "calendar_month", "description": "Material Symbol name for leading icon (type='with-icon')." },
+    "iconVariant": { "type": "enum", "values": ["outlined", "rounded", "sharp"], "default": "outlined" },
+    "iconFilled": { "type": "boolean", "default": false },
+    "close": { "type": "boolean", "default": false, "description": "Whether to show a close button on the right." },
+    "onClose": { "type": "function", "description": "Callback fired when the close button is clicked." }
+  },
+
+  "slots": {
+    "dot": {
+      "position": "start",
+      "size": "6px",
+      "borderRadius": "{radius.full}",
+      "defaultColor": "{alias.bg-success}",
+      "disabledColor": "currentColor"
+    },
+    "leftIcon": {
+      "position": "start",
+      "element": "Icon",
+      "iconSizeByTagSize": { "small": "xs", "large": "sm" },
+      "colorByState": {
+        "default": "{alias.text-primary}",
+        "focus": "{alias.text-brand}",
+        "active": "{alias.text-brand}",
+        "disabled": "{alias.text-inactive}"
+      }
+    },
+    "closeButton": {
+      "position": "end",
+      "element": "CloseButton",
+      "variant": "ghost",
+      "size": "sm",
+      "colorByState": {
+        "default": "{alias.text-primary}",
+        "focus": "{alias.text-brand}",
+        "active": "{alias.text-brand}",
+        "disabled": "{alias.text-inactive}"
+      }
+    }
+  },
+
+  "defaults": { "type": "simple", "state": "default", "size": "small" },
+
+  "accessibility": {
+    "role": "status",
+    "notes": "Rendered as a <span>. Dot and icon are aria-hidden. Close button has aria-label='Remove tag'."
+  }
+}

package/dist/specs/textarea.json

@@ -0,0 +1,63 @@
+{
+  "name": "TextArea",
+  "description": "Multi-line text input with label, helper text, error state, and character counter.",
+
+  "base": {
+    "display": "flex",
+    "width": "100%",
+    "alignItems": "flex-start",
+    "bg": "{alias.component-input-bg}",
+    "border": { "width": "1px", "color": "{alias.border-strong}" },
+    "borderRadius": "{radius.sm}",
+    "shadow": "{shadow.xs}",
+    "transition": "border-color",
+    "minHeight": "88px",
+    "paddingX": "{spacing.sm}",
+    "paddingY": "{spacing.sm}",
+    "fontSize": "14px",
+    "lineHeight": "20px"
+  },
+
+  "states": {
+    "disabled": {
+      "bg": "{alias.bg-secondary}",
+      "border": { "color": "{alias.border-inactive}" },
+      "shadow": "none",
+      "pointerEvents": "none",
+      "text": "{alias.text-inactive}"
+    },
+    "error": {
+      "border": { "color": "{alias.border-danger-secondary}" }
+    },
+    "focused": {
+      "border": { "color": "{alias.border-brand}" },
+      "focusRing": { "width": "4px", "color": "{alias.border-focused}", "inset": "-1px", "borderRadius": "{radius.sm}" }
+    },
+    "focused+error": {
+      "border": { "color": "{alias.border-danger}" },
+      "focusRing": { "width": "4px", "color": "{alias.border-focused-danger}", "inset": "-1px", "borderRadius": "{radius.sm}" }
+    }
+  },
+
+  "props": {
+    "label": { "type": "string", "description": "Label text above the textarea." },
+    "optional": { "type": "boolean", "default": false, "description": "Displays (Optional) + info icon next to label." },
+    "helperText": { "type": "string", "description": "Helper text below the textarea." },
+    "helperTextIcon": { "type": "string", "description": "Material Symbol name for helper text icon." },
+    "errorMessage": { "type": "string", "description": "Error message below the textarea. Overrides helperText." },
+    "maxLength": { "type": "number", "description": "Shows character counter beside the textarea." },
+    "rows": { "type": "number", "default": 4 },
+    "disabled": { "type": "boolean", "default": false }
+  },
+
+  "slots": {
+    "label": { "position": "above", "fontSize": "14px", "fontWeight": 500, "color": "{alias.text-primary}", "marginBottom": "{spacing.sm}" },
+    "helperText": { "position": "below", "fontSize": "14px", "color": "{alias.text-secondary}", "errorColor": "{alias.text-error}", "marginTop": "{spacing.sm}" },
+    "characterCounter": { "position": "end-outside", "fontSize": "14px", "color": "{alias.text-tertiary}", "errorColor": "{alias.text-error}" }
+  },
+
+  "accessibility": {
+    "role": "textbox",
+    "notes": "aria-invalid set when error. aria-describedby links to helperText or errorMessage."
+  }
+}

package/dist/specs/toggle.json

@@ -0,0 +1,79 @@
+{
+  "name": "Toggle",
+  "description": "Switch/toggle control with optional label and support text. Supports icon mode showing check/close on the thumb.",
+
+  "base": {
+    "display": "inline-flex",
+    "gap": "{spacing.md}",
+    "cursor": "pointer"
+  },
+
+  "track": {
+    "borderRadius": "{radius.full}",
+    "padding": "2px",
+    "transition": "background-color",
+    "off": {
+      "bg": "{alias.bg-quarterary}",
+      "hover": { "bg": "rgba(from {alias.bg-quarterary} r g b / 0.8)" }
+    },
+    "on": {
+      "bg": "{alias.component-toggle-brand-bg}",
+      "hover": { "bg": "{alias.component-toggle-brand-bg-hover}" }
+    }
+  },
+
+  "thumb": {
+    "borderRadius": "{radius.full}",
+    "bg": "{alias.bg-primary}",
+    "shadow": "{shadow.md}",
+    "transition": "transform"
+  },
+
+  "sizes": {
+    "sm": {
+      "track": { "height": "20px", "width": "32px" },
+      "thumb": { "size": "14px", "translateX": "12px" }
+    },
+    "md": {
+      "track": { "height": "24px", "width": "40px" },
+      "thumb": { "size": "20px", "translateX": "16px" }
+    }
+  },
+
+  "states": {
+    "disabled": {
+      "cursor": "default",
+      "track": { "bg": "{alias.bg-inactive-subtle}" },
+      "thumb": { "bg": "{alias.bg-quarterary}", "shadow": "none" },
+      "labelColor": "{alias.text-inactive}"
+    },
+    "focus": {
+      "ring": "2px",
+      "ringColor": "{alias.border-brand}",
+      "ringOffset": "2px"
+    }
+  },
+
+  "props": {
+    "size": { "type": "enum", "values": ["sm", "md"], "default": "md" },
+    "label": { "type": "string", "description": "Label text next to the toggle." },
+    "supportText": { "type": "string", "description": "Support text below the label." },
+    "togglePosition": { "type": "enum", "values": ["leading", "trailing"], "default": "trailing" },
+    "withIcon": { "type": "boolean", "default": false, "description": "Show check icon when on, close icon when off." },
+    "checked": { "type": "boolean" },
+    "disabled": { "type": "boolean", "default": false }
+  },
+
+  "slots": {
+    "label": { "fontSize": "14px", "fontWeight": 500, "lineHeight": "16px", "color": "{alias.text-primary}" },
+    "supportText": { "fontSize": "14px", "lineHeight": "20px", "color": "{alias.text-secondary}", "gap": "{spacing.xxs}" },
+    "thumbIcon": { "element": "Icon", "size": "xs", "onIcon": "check", "offIcon": "close" }
+  },
+
+  "defaults": { "size": "md" },
+
+  "accessibility": {
+    "role": "switch",
+    "notes": "aria-checked reflects on/off state. Native checkbox input is visually hidden."
+  }
+}

package/dist/specs/tooltip.json

@@ -0,0 +1,78 @@
+{
+  "name": "Tooltip",
+  "description": "Floating overlay that surfaces contextual information on hover/focus. Supports single-line (small) and title+subtitle (large) layouts with dark and light color schemes.",
+
+  "base": {
+    "borderRadius": "{radius.sm}",
+    "fontSize": "12px",
+    "lineHeight": "20px",
+    "maxWidth": "var(--radix-tooltip-content-available-width)",
+    "zIndex": 50,
+    "transition": "opacity 150ms ease-out"
+  },
+
+  "variants": {
+    "dark": {
+      "bg": "{alias.bg-always-dark}",
+      "text": "{alias.text-on-color}",
+      "subtitleColor": "{alias.text-on-color}",
+      "arrowFill": "{alias.bg-primary-inverse}"
+    },
+    "light": {
+      "bg": "{alias.bg-primary}",
+      "text": "{alias.text-primary}",
+      "subtitleColor": "{alias.text-on-color-inverse}",
+      "border": { "width": "1px", "color": "{alias.border-default}" },
+      "shadow": "{shadow.lg}",
+      "arrowFill": "#ffffff"
+    }
+  },
+
+  "sizes": {
+    "small": { "paddingX": "{spacing.md}", "paddingY": "{spacing.sm}" },
+    "large": { "paddingX": "{spacing.md}", "paddingY": "{spacing.md}", "display": "flex", "flexDirection": "column", "gap": "{spacing.xs}" }
+  },
+
+  "states": {
+    "open": { "opacity": 1 },
+    "closed": { "opacity": 0 }
+  },
+
+  "props": {
+    "content": { "type": "ReactNode", "description": "Single-line content (size='small')." },
+    "title": { "type": "string", "description": "Title text (size='large'). Auto-infers size='large' when provided." },
+    "subtitle": { "type": "string", "description": "Subtitle text (size='large'). Auto-infers size='large' when provided." },
+    "size": { "type": "enum", "values": ["small", "large"], "default": "small", "description": "Small: single text line. Large: title + subtitle. Auto-inferred from title/subtitle when omitted." },
+    "variant": { "type": "enum", "values": ["dark", "light"], "default": "dark" },
+    "side": { "type": "enum", "values": ["top", "bottom", "left", "right"], "default": "bottom" },
+    "sideOffset": { "type": "number", "default": 8, "description": "Distance in px between the tooltip and the trigger." },
+    "delayDuration": { "type": "number", "default": 200, "description": "Delay in ms before showing." },
+    "showArrow": { "type": "boolean", "default": true, "description": "When false, the arrow/pointer is not rendered." }
+  },
+
+  "slots": {
+    "title": {
+      "fontWeight": 500
+    },
+    "subtitle": {
+      "fontWeight": 400
+    },
+    "arrow": {
+      "width": "12px",
+      "height": "6px"
+    }
+  },
+
+  "subComponents": {
+    "TooltipProvider": { "description": "Context provider for shared tooltip delay configuration." },
+    "TooltipTrigger": { "description": "Wraps the trigger element. Uses asChild pattern." },
+    "TooltipContent": { "description": "The tooltip popup content. Accepts size, variant, title, subtitle, showArrow props." }
+  },
+
+  "defaults": { "variant": "dark", "size": "small", "side": "bottom", "sideOffset": 8, "delayDuration": 200, "showArrow": true },
+
+  "accessibility": {
+    "role": "tooltip",
+    "notes": "Built on Radix UI Tooltip primitives. Trigger uses asChild. Content is portaled. Keyboard accessible via focus."
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "banhatten-ui",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Banhatten Design System - React component library with token-based theming",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -21,7 +21,9 @@
       "types": "./dist/tokens/tailwind.config.d.ts",
       "import": "./dist/tokens/tailwind.config.mjs",
       "require": "./dist/tokens/tailwind.config.js"
-    }
+    },
+    "./specs/*": "./dist/specs/*.json",
+    "./CURSOR_RULE.md": "./dist/CURSOR_RULE.md"
   },
   "files": [
     "dist",