@vaneui/ui 0.2.2-alpha.20250907183237.5f63365 → 0.2.2-alpha.20250913214402.427a7ea

package/dist/src/components/ui/props/fontWeight.d.ts

@@ -0,0 +1,20 @@
+/** Thin font weight - CSS font-weight: 100 */
+export declare const THIN: "thin";
+/** Extra light font weight - CSS font-weight: 200 */
+export declare const EXTRALIGHT: "extralight";
+/** Light font weight - CSS font-weight: 300 */
+export declare const LIGHT: "light";
+/** Normal font weight - CSS font-weight: 400 (default) */
+export declare const NORMAL: "normal";
+/** Medium font weight - CSS font-weight: 500 */
+export declare const MEDIUM: "medium";
+/** Semibold font weight - CSS font-weight: 600 */
+export declare const SEMIBOLD: "semibold";
+/** Bold font weight - CSS font-weight: 700 */
+export declare const BOLD: "bold";
+/** Extra bold font weight - CSS font-weight: 800 */
+export declare const EXTRABOLD: "extrabold";
+/** Black font weight - CSS font-weight: 900 (heaviest) */
+export declare const BLACK: "black";
+/** All font weight property values */
+export declare const FONT_WEIGHT_VALUES: readonly ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"];

package/dist/src/components/ui/props/gap.d.ts

@@ -0,0 +1,6 @@
+/** Enable spacing between flex/grid items - uses size-responsive gap values */
+export declare const GAP: "gap";
+/** Disable spacing between flex/grid items - no gap applied */
+export declare const NO_GAP: "noGap";
+/** All gap property values */
+export declare const GAP_VALUES: readonly ["gap", "noGap"];

package/dist/src/components/ui/props/hide.d.ts

@@ -0,0 +1,12 @@
+/** Hide element on extra-small screens and up - visible only on mobile */
+export declare const XS_HIDE: "xsHide";
+/** Hide element on small screens and up - visible only on extra-small mobile */
+export declare const SM_HIDE: "smHide";
+/** Hide element on medium screens and up - visible only on small screens and below */
+export declare const MD_HIDE: "mdHide";
+/** Hide element on large screens and up - visible only on medium screens and below */
+export declare const LG_HIDE: "lgHide";
+/** Hide element on extra-large screens and up - visible only on large screens and below */
+export declare const XL_HIDE: "xlHide";
+/** All hide property values */
+export declare const HIDE_VALUES: readonly ["xsHide", "smHide", "mdHide", "lgHide", "xlHide"];

package/dist/src/components/ui/props/items.d.ts

@@ -0,0 +1,12 @@
+/** Align items to the start of the cross axis */
+export declare const ITEMS_START: "itemsStart";
+/** Align items to the end of the cross axis */
+export declare const ITEMS_END: "itemsEnd";
+/** Center items along the cross axis */
+export declare const ITEMS_CENTER: "itemsCenter";
+/** Align items along their baseline */
+export declare const ITEMS_BASELINE: "itemsBaseline";
+/** Stretch items to fill the cross axis */
+export declare const ITEMS_STRETCH: "itemsStretch";
+/** All items property values */
+export declare const ITEMS_VALUES: readonly ["itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch"];

package/dist/src/components/ui/props/justify.d.ts

@@ -0,0 +1,18 @@
+/** Pack items toward the start of the main axis */
+export declare const JUSTIFY_START: "justifyStart";
+/** Pack items toward the end of the main axis */
+export declare const JUSTIFY_END: "justifyEnd";
+/** Center items along the main axis */
+export declare const JUSTIFY_CENTER: "justifyCenter";
+/** Distribute items with space between them */
+export declare const JUSTIFY_BETWEEN: "justifyBetween";
+/** Distribute items with space around them */
+export declare const JUSTIFY_AROUND: "justifyAround";
+/** Distribute items with equal space around them */
+export declare const JUSTIFY_EVENLY: "justifyEvenly";
+/** Stretch items to fill the main axis */
+export declare const JUSTIFY_STRETCH: "justifyStretch";
+/** Align items along their baseline on main axis */
+export declare const JUSTIFY_BASELINE: "justifyBaseline";
+/** All justify property values */
+export declare const JUSTIFY_VALUES: readonly ["justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline"];

package/dist/src/components/ui/props/keys.d.ts

@@ -1,97 +1,224 @@
+/** Core layout properties for positioning and sizing elements */
 export declare const LAYOUT_CORE: readonly ["size", "hide", "items", "justify", "position", "display", "overflow"];
+/** Flexbox-specific layout properties for flex containers */
 export declare const LAYOUT_FLEX: readonly ["wrap", "gap", "flexDirection", "reverse"];
+/** Padding properties for internal spacing control */
 export declare const PADDING: readonly ["padding"];
+/** Responsive breakpoint properties for different screen sizes */
 export declare const BREAKPOINT: readonly ["breakpoint"];
+/** Core visual properties including appearance colors and transparency */
 export declare const VISUAL_CORE: readonly ["appearance", "transparent"];
-export declare const VISUAL_DECORATION: readonly ["border", "shadow", "ring"];
+/** Visual decoration properties for borders, shadows, and focus rings */
+export declare const VISUAL_DECORATION: readonly ["border", "shadow", "ring", "focusVisible"];
+/** Layout-specific visual decoration (excluding focusVisible for non-interactive elements) */
+export declare const VISUAL_DECORATION_LAYOUT: readonly ["border", "shadow", "ring"];
+/** Shape properties for border radius and corner rounding */
 export declare const SHAPE: readonly ["shape"];
+/** Typography styling properties for text appearance and formatting */
 export declare const TYPOGRAPHY_STYLE: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign"];
+/** List-specific styling properties for bullet points and numbering */
 export declare const LIST_STYLE: readonly ["listStyle"];
+/** Variant properties for filled/outline styling modes */
 export declare const VARIANT: readonly ["variant"];
-export declare const COMPONENT_PROPS_CATEGORY: readonly ["appearance", "transparent", "wrap", "gap", "flexDirection", "reverse", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "listStyle", "size", "hide", "items", "justify", "position", "display", "overflow", "breakpoint", "padding", "border", "shadow", "ring", "shape", "variant", "mode"];
+/** All available component property categories combined */
+export declare const COMPONENT_PROPS_CATEGORY: readonly ["appearance", "transparent", "wrap", "gap", "flexDirection", "reverse", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "listStyle", "size", "hide", "items", "justify", "position", "display", "overflow", "breakpoint", "padding", "border", "shadow", "ring", "focusVisible", "shape", "variant"];
 /**
- * Describes what the @ComponentKeys.appearance can be applied to
+ * Describes category for which the appearance can be applied
  * @see ComponentKeys.appearance
  */
-export declare const APPEARANCE_CATEGORY: readonly ["text", "border", "ring", "shadow", "bg", "accent"];
+export declare const APPEARANCE_CATEGORY: readonly ["text", "border", "ring", "shadow", "bg", "accent", "focusVisible"];
+/** Type for appearance category keys used in theming */
 export type AppearanceCategoryKey = typeof APPEARANCE_CATEGORY[number];
+/** Type for all component category keys */
 export type ComponentCategoryKey = typeof COMPONENT_PROPS_CATEGORY[number];
+export * from './appearance';
+export * from './border';
+export * from './breakpoint';
+export * from './display';
+export * from './flexDirection';
+export * from './fontFamily';
+export * from './fontStyle';
+export * from './fontWeight';
+export * from './gap';
+export * from './hide';
+export * from './items';
+export * from './justify';
+export * from './listStyle';
+export * from './mode';
+export * from './overflow';
+export * from './padding';
+export * from './position';
+export * from './reverse';
+export * from './ring';
+export * from './shadow';
+export * from './focusVisible';
+export * from './shape';
+export * from './size';
+export * from './textAlign';
+export * from './textDecoration';
+export * from './textTransform';
+export * from './transparent';
+export * from './variant';
+export * from './wrap';
+/** Component property keys mapping categories to their available values */
 export declare const ComponentKeys: {
+    /** Color appearance options */
     readonly appearance: readonly ["default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "link"];
+    /** Border visibility: border (show) or noBorder (hide) */
     readonly border: readonly ["border", "noBorder"];
+    /** Column breakpoints for responsive grid layouts */
     readonly breakpoint: readonly ["xsCol", "smCol", "mdCol", "lgCol", "xlCol"];
+    /** CSS display property values for element layout behavior */
     readonly display: readonly ["inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden"];
+    /** Flex direction: row (horizontal), column (vertical), or reversed variants */
     readonly flexDirection: readonly ["row", "column", "rowReverse", "columnReverse"];
+    /** Font family types: sans-serif, serif, or monospace */
     readonly fontFamily: readonly ["sans", "serif", "mono"];
+    /** Font style: italic or notItalic (normal) */
     readonly fontStyle: readonly ["italic", "notItalic"];
+    /** Font weight from thin (100) to black (900) */
     readonly fontWeight: readonly ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"];
+    /** Spacing between flex/grid items: gap (enabled) or noGap (disabled) */
     readonly gap: readonly ["gap", "noGap"];
+    /** Hide elements at specific breakpoint sizes */
     readonly hide: readonly ["xsHide", "smHide", "mdHide", "lgHide", "xlHide"];
+    /** Cross-axis alignment for flex items (align-items) */
     readonly items: readonly ["itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch"];
+    /** Main-axis alignment for flex items (justify-content) */
     readonly justify: readonly ["justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline"];
+    /** List bullet/numbering style: disc (bullets) or decimal (numbers) */
     readonly listStyle: readonly ["disc", "decimal"];
-    readonly mode: readonly ["base", "hover", "active"];
+    /** Overflow behavior for content that exceeds container bounds */
     readonly overflow: readonly ["overflowAuto", "overflowHidden", "overflowClip", "overflowVisible", "overflowScroll", "overflowXAuto", "overflowYAuto", "overflowXHidden", "overflowYHidden", "overflowXClip", "overflowYClip", "overflowXVisible", "overflowYVisible", "overflowXScroll", "overflowYScroll"];
+    /** Internal spacing: padding (enabled) or noPadding (disabled) */
     readonly padding: readonly ["padding", "noPadding"];
+    /** CSS positioning: relative, absolute, fixed, sticky, static */
     readonly position: readonly ["relative", "absolute", "fixed", "sticky", "static"];
+    /** Reverse the order of flex items */
     readonly reverse: readonly ["reverse"];
+    /** Focus ring visibility: ring (show) or noRing (hide) */
     readonly ring: readonly ["ring", "noRing"];
+    /** Drop shadow visibility: shadow (enabled) or noShadow (disabled) */
     readonly shadow: readonly ["shadow", "noShadow"];
+    /** Focus-visible outline visibility: focusVisible (show) or noFocusVisible (hide) */
+    readonly focusVisible: readonly ["focusVisible", "noFocusVisible"];
+    /** Border radius shape: pill (fully rounded), sharp (no radius), rounded (medium radius) */
     readonly shape: readonly ["pill", "sharp", "rounded"];
+    /** Size scale from extra-small to extra-large */
     readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+    /** Text alignment: left, center, right, justify */
     readonly textAlign: readonly ["textLeft", "textCenter", "textRight", "textJustify"];
+    /** Text decoration: underline, strikethrough (lineThrough), none (noUnderline), overline */
     readonly textDecoration: readonly ["underline", "lineThrough", "noUnderline", "overline"];
+    /** Text case transformation: UPPERCASE, lowercase, Capitalize, normalCase */
     readonly textTransform: readonly ["uppercase", "lowercase", "capitalize", "normalCase"];
+    /** Make background (layout/UI) or text (typography) transparent */
     readonly transparent: readonly ["transparent"];
+    /** Style variant: filled (solid background) or outline (border only) */
     readonly variant: readonly ["filled", "outline"];
+    /** Flex item wrapping behavior: wrap, no-wrap, or wrap-reverse */
     readonly wrap: readonly ["flexWrap", "flexNoWrap", "flexWrapReverse"];
 };
-export type ModeKey = typeof ComponentKeys.mode[number];
+/** Interaction state keys for component styling modes */
+export type ModeKey = typeof import('./mode').ModeKeys.mode[number];
+/** Size scale keys: xs, sm, md, lg, xl */
 export type SizeKey = typeof ComponentKeys.size[number];
+/** Style variant keys: filled or outline */
 export type VariantKey = typeof ComponentKeys.variant[number];
+/** Color appearance keys for semantic styling */
 export type AppearanceKey = typeof ComponentKeys.appearance[number];
+/** Transparency key for making backgrounds or text transparent */
 export type TransparentKey = typeof ComponentKeys.transparent[number];
-export type LinkKey = 'link';
+/** List style keys for bullet points and numbering */
 export type ListStyleKey = typeof ComponentKeys.listStyle[number];
+/** Font family keys: sans, serif, mono */
 export type FontFamilyKey = typeof ComponentKeys.fontFamily[number];
+/** Font weight keys from thin to black */
 export type FontWeightKey = typeof ComponentKeys.fontWeight[number];
+/** Font style keys: italic or notItalic */
 export type FontStyleKey = typeof ComponentKeys.fontStyle[number];
+/** Text decoration keys: underline, lineThrough, noUnderline, overline */
 export type TextDecorationKey = typeof ComponentKeys.textDecoration[number];
+/** Text case transformation keys: uppercase, lowercase, capitalize, normalCase */
 export type TextTransformKey = typeof ComponentKeys.textTransform[number];
+/** Text alignment keys: textLeft, textCenter, textRight, textJustify */
 export type TextAlignKey = typeof ComponentKeys.textAlign[number];
+/** Responsive breakpoint column keys for grid layouts */
 export type BreakpointKey = typeof ComponentKeys.breakpoint[number];
+/** Breakpoint-specific hide keys for responsive visibility */
 export type HideKey = typeof ComponentKeys.hide[number];
+/** CSS position keys: relative, absolute, fixed, sticky, static */
 export type PositionKey = typeof ComponentKeys.position[number];
+/** Flex direction keys: row, column, rowReverse, columnReverse */
 export type FlexDirectionKey = typeof ComponentKeys.flexDirection[number];
+/** Flex align-items keys for cross-axis alignment */
 export type ItemsKey = typeof ComponentKeys.items[number];
+/** Flex justify-content keys for main-axis alignment */
 export type JustifyKey = typeof ComponentKeys.justify[number];
+/** Flex wrap keys: flexWrap, flexNoWrap, flexWrapReverse */
 export type WrapKey = typeof ComponentKeys.wrap[number];
+/** CSS display property keys for layout behavior */
 export type DisplayKey = typeof ComponentKeys.display[number];
+/** CSS overflow property keys for content clipping behavior */
 export type OverflowKey = typeof ComponentKeys.overflow[number];
+/** Composite categories built from core blocks */
+/** Complete layout category including core and flex properties */
 export declare const LAYOUT_FULL: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse"];
-export declare const VISUAL_FULL: readonly ["appearance", "transparent", "border", "shadow", "ring", "shape"];
+/** Complete visual category including core, decoration, and shape properties */
+export declare const VISUAL_FULL: readonly ["appearance", "transparent", "border", "shadow", "ring", "focusVisible", "shape"];
+/** Layout-specific visual category (excludes focusVisible for non-interactive elements) */
+export declare const VISUAL_LAYOUT: readonly ["appearance", "transparent", "border", "shadow", "ring", "shape"];
+/** Complete typography category for text styling */
 export declare const TYPOGRAPHY_FULL: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign"];
-export declare const INTERACTIVE_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
-export declare const BUTTON_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
-export declare const BADGE_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
-export declare const CHIP_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
-export declare const CODE_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
+/** Categories for interactive components like buttons, badges, chips */
+export declare const INTERACTIVE_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "focusVisible", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
+/** Button component categories */
+export declare const BUTTON_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "focusVisible", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
+/** Badge component categories */
+export declare const BADGE_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "focusVisible", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
+/** Chip component categories */
+export declare const CHIP_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "focusVisible", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
+/** Code component categories */
+export declare const CODE_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "focusVisible", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
+/** Typography component categories */
+/** Categories for typography components like Text, Title, Link */
 export declare const TYPOGRAPHY_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "variant"];
+/** Categories for list components with typography and list-specific styling */
 export declare const LIST_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "listStyle", "size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "padding", "variant"];
+/** Layout component categories */
+/** Categories for grid layout components */
 export declare const GRID_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "variant"];
+/** Categories for container layout components */
 export declare const CONTAINER_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "variant"];
+/** Categories for column layout components */
 export declare const COL_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "variant"];
+/** Categories for row layout components with responsive breakpoints */
 export declare const ROW_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "breakpoint", "appearance", "transparent", "border", "shadow", "ring", "shape", "variant"];
+/** Categories for stack layout components with responsive and padding support */
 export declare const STACK_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "breakpoint", "padding", "appearance", "transparent", "border", "shadow", "ring", "shape", "variant"];
+/** Categories for card components with full typography and layout support */
 export declare const CARD_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "breakpoint", "appearance", "transparent", "border", "shadow", "ring", "shape", "padding", "variant"];
+/** Categories for divider components with basic layout and visual properties */
 export declare const DIVIDER_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "padding"];
+/** Categories for section layout components with full responsive support */
 export declare const SECTION_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "padding", "breakpoint", "variant"];
-export declare const CHECKBOX_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "border", "shadow", "ring", "shape", "variant"];
+/** Form component categories */
+/** Categories for checkbox form components */
+export declare const CHECKBOX_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "border", "shadow", "ring", "focusVisible", "shape", "variant"];
+/** Categories for label form components with typography support */
 export declare const LABEL_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "variant"];
-export declare const IMG_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "border", "shadow", "ring", "shape", "variant"];
+/** Categories for input form components with interactive and form-specific properties */
+export declare const INPUT_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "focusVisible", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
+/** Media component categories */
+/** Categories for image media components */
+export declare const IMG_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "border", "shadow", "ring", "focusVisible", "shape", "variant"];
+/** Props type mapping category keys to their possible values */
 export type CategoryProps = {
     [K in ComponentCategoryKey]?: (typeof ComponentKeys)[K][number];
 };
-export declare const COMPONENT: readonly ["button", "badge", "chip", "code", "card", "divider", "container", "row", "col", "stack", "section", "grid2", "grid3", "grid4", "pageTitle", "sectionTitle", "title", "text", "link", "list", "listItem", "checkbox", "label", "img"];
+/** All available component names in the library */
+export declare const COMPONENT: readonly ["button", "badge", "chip", "code", "card", "divider", "container", "row", "col", "stack", "section", "grid2", "grid3", "grid4", "grid5", "grid6", "pageTitle", "sectionTitle", "title", "text", "link", "list", "listItem", "checkbox", "label", "img", "input"];
+/** Type for component name keys */
 export type ComponentKey = typeof COMPONENT[number];
+/** Mapping of each component to its available property categories */
 export declare const ComponentCategories: Record<ComponentKey, readonly string[]>;

package/dist/src/components/ui/props/listStyle.d.ts

@@ -0,0 +1,6 @@
+/** Disc bullet points - circular bullets for list items */
+export declare const DISC: "disc";
+/** Decimal numbers - numbered list items (1, 2, 3...) */
+export declare const DECIMAL: "decimal";
+/** All list style property values */
+export declare const LIST_STYLE_VALUES: readonly ["disc", "decimal"];

package/dist/src/components/ui/props/mode.d.ts

@@ -0,0 +1,21 @@
+/** Base state - default resting appearance */
+export declare const BASE: "base";
+/** Hover state - appearance when cursor hovers over element */
+export declare const HOVER: "hover";
+/** Active state - appearance when element is being pressed/clicked */
+export declare const ACTIVE: "active";
+/** Focus state - appearance when element receives focus */
+export declare const FOCUS: "focus";
+/** Focus visible state - appearance when element has visible focus indicator */
+export declare const FOCUS_VISIBLE: "focusVisible";
+/** All mode property values */
+export declare const MODE_VALUES: readonly ["base", "hover", "active", "focus", "focusVisible"];
+/** Styling mode keys for different interaction states */
+export declare const ModeKeys: {
+    /** Interaction states for styling: base, hover, active, focus, focusVisible */
+    readonly mode: readonly ["base", "hover", "active", "focus", "focusVisible"];
+};
+/** Type for mode keys */
+export type ModeKey = typeof ModeKeys.mode[number];
+/** Type for all mode category keys */
+export type ModeCategoryKey = keyof typeof ModeKeys;

package/dist/src/components/ui/props/overflow.d.ts

@@ -0,0 +1,32 @@
+/** Auto overflow - show scrollbars if needed */
+export declare const OVERFLOW_AUTO: "overflowAuto";
+/** Hidden overflow - clip content without scrollbars */
+export declare const OVERFLOW_HIDDEN: "overflowHidden";
+/** Clip overflow - hard clip without scrollbars */
+export declare const OVERFLOW_CLIP: "overflowClip";
+/** Visible overflow - content extends beyond bounds */
+export declare const OVERFLOW_VISIBLE: "overflowVisible";
+/** Scroll overflow - always show scrollbars */
+export declare const OVERFLOW_SCROLL: "overflowScroll";
+/** Auto overflow on X-axis only */
+export declare const OVERFLOW_X_AUTO: "overflowXAuto";
+/** Auto overflow on Y-axis only */
+export declare const OVERFLOW_Y_AUTO: "overflowYAuto";
+/** Hidden overflow on X-axis only */
+export declare const OVERFLOW_X_HIDDEN: "overflowXHidden";
+/** Hidden overflow on Y-axis only */
+export declare const OVERFLOW_Y_HIDDEN: "overflowYHidden";
+/** Clip overflow on X-axis only */
+export declare const OVERFLOW_X_CLIP: "overflowXClip";
+/** Clip overflow on Y-axis only */
+export declare const OVERFLOW_Y_CLIP: "overflowYClip";
+/** Visible overflow on X-axis only */
+export declare const OVERFLOW_X_VISIBLE: "overflowXVisible";
+/** Visible overflow on Y-axis only */
+export declare const OVERFLOW_Y_VISIBLE: "overflowYVisible";
+/** Scroll overflow on X-axis only */
+export declare const OVERFLOW_X_SCROLL: "overflowXScroll";
+/** Scroll overflow on Y-axis only */
+export declare const OVERFLOW_Y_SCROLL: "overflowYScroll";
+/** All overflow property values */
+export declare const OVERFLOW_VALUES: readonly ["overflowAuto", "overflowHidden", "overflowClip", "overflowVisible", "overflowScroll", "overflowXAuto", "overflowYAuto", "overflowXHidden", "overflowYHidden", "overflowXClip", "overflowYClip", "overflowXVisible", "overflowYVisible", "overflowXScroll", "overflowYScroll"];

package/dist/src/components/ui/props/padding.d.ts

@@ -0,0 +1,6 @@
+/** Enable internal padding - uses size-responsive padding values */
+export declare const PADDING: "padding";
+/** Disable internal padding - no padding applied */
+export declare const NO_PADDING: "noPadding";
+/** All padding property values */
+export declare const PADDING_VALUES: readonly ["padding", "noPadding"];

package/dist/src/components/ui/props/position.d.ts

@@ -0,0 +1,12 @@
+/** Relative positioning - offset from normal position */
+export declare const RELATIVE: "relative";
+/** Absolute positioning - removed from normal flow */
+export declare const ABSOLUTE: "absolute";
+/** Fixed positioning - positioned relative to viewport */
+export declare const FIXED: "fixed";
+/** Sticky positioning - toggles between relative and fixed */
+export declare const STICKY: "sticky";
+/** Static positioning - normal document flow (default) */
+export declare const STATIC: "static";
+/** All position property values */
+export declare const POSITION_VALUES: readonly ["relative", "absolute", "fixed", "sticky", "static"];

package/dist/src/components/ui/props/props.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentKeys, ComponentCategoryKey, BUTTON_CATEGORIES, BADGE_CATEGORIES, CHIP_CATEGORIES, CODE_CATEGORIES, GRID_CATEGORIES, ROW_CATEGORIES, COL_CATEGORIES, CARD_CATEGORIES, STACK_CATEGORIES, SECTION_CATEGORIES, DIVIDER_CATEGORIES, CONTAINER_CATEGORIES, TYPOGRAPHY_CATEGORIES, LIST_CATEGORIES, CHECKBOX_CATEGORIES, LABEL_CATEGORIES, IMG_CATEGORIES } from './keys';
+import { ComponentKeys, ComponentCategoryKey, BUTTON_CATEGORIES, BADGE_CATEGORIES, CHIP_CATEGORIES, CODE_CATEGORIES, GRID_CATEGORIES, ROW_CATEGORIES, COL_CATEGORIES, CARD_CATEGORIES, STACK_CATEGORIES, SECTION_CATEGORIES, DIVIDER_CATEGORIES, CONTAINER_CATEGORIES, TYPOGRAPHY_CATEGORIES, LIST_CATEGORIES, CHECKBOX_CATEGORIES, LABEL_CATEGORIES, IMG_CATEGORIES, INPUT_CATEGORIES } from './keys';
 /**
  * Creates component props by extracting keys from categories and making them optional boolean properties.
  * Combines the functionality of FlattenKeysFromCategories and BooleanProps.
@@ -32,13 +32,27 @@ type TagOrHref<E extends React.ElementType, Own> = WithTag<E, Own> | LinkBranch<
 export type ButtonProps<E extends React.ElementType = "button"> = TagOrHref<E, Base & Cats<typeof BUTTON_CATEGORIES>>;
 export type BadgeProps<E extends React.ElementType = "span"> = TagOrHref<E, Base & Cats<typeof BADGE_CATEGORIES>>;
 export type ChipProps<E extends React.ElementType = "span"> = TagOrHref<E, Base & Cats<typeof CHIP_CATEGORIES>>;
-export type GridProps<E extends React.ElementType = "div"> = TagOrHref<E, Base & Cats<typeof GRID_CATEGORIES>>;
-export type RowProps<E extends React.ElementType = "div"> = TagOrHref<E, Base & Cats<typeof ROW_CATEGORIES>>;
-export type ColProps<E extends React.ElementType = "div"> = TagOrHref<E, Base & Cats<typeof COL_CATEGORIES>>;
-export type CardProps<E extends React.ElementType = "div"> = TagOrHref<E, Base & Cats<typeof CARD_CATEGORIES>>;
-export type StackProps<E extends React.ElementType = "div"> = TagOrHref<E, Base & Cats<typeof STACK_CATEGORIES>>;
-export type SectionProps<E extends React.ElementType = "div"> = TagOrHref<E, Base & Cats<typeof SECTION_CATEGORIES>>;
-export type ContainerProps<E extends React.ElementType = "div"> = TagOrHref<E, Base & Cats<typeof CONTAINER_CATEGORIES>>;
+export type GridProps = (Base & React.HTMLAttributes<HTMLDivElement>) & Cats<typeof GRID_CATEGORIES> & {
+    tag?: React.ElementType;
+};
+export type RowProps = (Base & React.HTMLAttributes<HTMLDivElement>) & Cats<typeof ROW_CATEGORIES> & {
+    tag?: React.ElementType;
+};
+export type ColProps = (Base & React.HTMLAttributes<HTMLDivElement>) & Cats<typeof COL_CATEGORIES> & {
+    tag?: React.ElementType;
+};
+export type CardProps = (Base & React.HTMLAttributes<HTMLDivElement>) & Cats<typeof CARD_CATEGORIES> & {
+    tag?: React.ElementType;
+};
+export type StackProps = (Base & React.HTMLAttributes<HTMLDivElement>) & Cats<typeof STACK_CATEGORIES> & {
+    tag?: React.ElementType;
+};
+export type SectionProps = (Base & React.HTMLAttributes<HTMLDivElement>) & Cats<typeof SECTION_CATEGORIES> & {
+    tag?: React.ElementType;
+};
+export type ContainerProps = (Base & React.HTMLAttributes<HTMLDivElement>) & Cats<typeof CONTAINER_CATEGORIES> & {
+    tag?: React.ElementType;
+};
 export type TypographyProps<E extends React.ElementType = "span"> = TagOrHref<E, Base & Cats<typeof TYPOGRAPHY_CATEGORIES>>;
 export type DividerProps = (Base & React.HTMLAttributes<HTMLDivElement>) & Cats<typeof DIVIDER_CATEGORIES> & {
     tag?: React.ElementType;
@@ -58,4 +72,7 @@ export type LabelProps = (Base & React.LabelHTMLAttributes<HTMLLabelElement>) &
 export type ImgProps = (Base & React.ImgHTMLAttributes<HTMLImageElement>) & Cats<typeof IMG_CATEGORIES> & {
     tag?: React.ElementType;
 };
+export type InputProps = (Base & React.InputHTMLAttributes<HTMLInputElement>) & Cats<typeof INPUT_CATEGORIES> & {
+    tag?: React.ElementType;
+};
 export {};

package/dist/src/components/ui/props/reverse.d.ts

@@ -0,0 +1,4 @@
+/** Reverse flex direction - converts row to row-reverse or column to column-reverse */
+export declare const REVERSE: "reverse";
+/** All reverse property values */
+export declare const REVERSE_VALUES: readonly ["reverse"];

package/dist/src/components/ui/props/ring.d.ts

@@ -0,0 +1,6 @@
+/** Show ring - adds decorative ring/outline border around element */
+export declare const RING: "ring";
+/** Hide ring - removes ring/outline border styling */
+export declare const NO_RING: "noRing";
+/** All ring property values */
+export declare const RING_VALUES: readonly ["ring", "noRing"];

package/dist/src/components/ui/props/shadow.d.ts

@@ -0,0 +1,6 @@
+/** Enable drop shadow - adds size-responsive shadow styling */
+export declare const SHADOW: "shadow";
+/** Disable drop shadow - removes all shadow styling */
+export declare const NO_SHADOW: "noShadow";
+/** All shadow property values */
+export declare const SHADOW_VALUES: readonly ["shadow", "noShadow"];

package/dist/src/components/ui/props/shape.d.ts

@@ -0,0 +1,8 @@
+/** Pill shape - fully rounded corners (rounded-full) */
+export declare const PILL: "pill";
+/** Sharp shape - no border radius (rounded-none) */
+export declare const SHARP: "sharp";
+/** Rounded shape - size-responsive border radius (varies by component size) */
+export declare const ROUNDED: "rounded";
+/** All shape property values */
+export declare const SHAPE_VALUES: readonly ["pill", "sharp", "rounded"];

package/dist/src/components/ui/props/size.d.ts

@@ -0,0 +1,12 @@
+/** Extra small size - affects padding, font-size, border-radius, and spacing */
+export declare const XS: "xs";
+/** Small size - affects padding, font-size, border-radius, and spacing */
+export declare const SM: "sm";
+/** Medium size (default) - affects padding, font-size, border-radius, and spacing */
+export declare const MD: "md";
+/** Large size - affects padding, font-size, border-radius, and spacing */
+export declare const LG: "lg";
+/** Extra large size - affects padding, font-size, border-radius, and spacing */
+export declare const XL: "xl";
+/** All size property values */
+export declare const SIZE_VALUES: readonly ["xs", "sm", "md", "lg", "xl"];

package/dist/src/components/ui/props/textAlign.d.ts

@@ -0,0 +1,10 @@
+/** Left-aligned text */
+export declare const TEXT_LEFT: "textLeft";
+/** Center-aligned text */
+export declare const TEXT_CENTER: "textCenter";
+/** Right-aligned text */
+export declare const TEXT_RIGHT: "textRight";
+/** Justified text */
+export declare const TEXT_JUSTIFY: "textJustify";
+/** All text align property values */
+export declare const TEXT_ALIGN_VALUES: readonly ["textLeft", "textCenter", "textRight", "textJustify"];

package/dist/src/components/ui/props/textDecoration.d.ts

@@ -0,0 +1,10 @@
+/** Add underline decoration below text */
+export declare const UNDERLINE: "underline";
+/** Add strikethrough/line-through decoration across text */
+export declare const LINE_THROUGH: "lineThrough";
+/** Remove text decoration (no underline, strikethrough, etc.) */
+export declare const NO_UNDERLINE: "noUnderline";
+/** Add overline decoration above text */
+export declare const OVERLINE: "overline";
+/** All text decoration property values */
+export declare const TEXT_DECORATION_VALUES: readonly ["underline", "lineThrough", "noUnderline", "overline"];

package/dist/src/components/ui/props/textTransform.d.ts

@@ -0,0 +1,10 @@
+/** Transform text to UPPERCASE */
+export declare const UPPERCASE: "uppercase";
+/** Transform text to lowercase */
+export declare const LOWERCASE: "lowercase";
+/** Transform text to Capitalize Each Word */
+export declare const CAPITALIZE: "capitalize";
+/** Normal case - no transformation */
+export declare const NORMAL_CASE: "normalCase";
+/** All text transform property values */
+export declare const TEXT_TRANSFORM_VALUES: readonly ["uppercase", "lowercase", "capitalize", "normalCase"];

package/dist/src/components/ui/props/transparent.d.ts

@@ -0,0 +1,4 @@
+/** Make background transparent for layout/UI components or text transparent for typography components */
+export declare const TRANSPARENT: "transparent";
+/** All transparent property values */
+export declare const TRANSPARENT_VALUES: readonly ["transparent"];

package/dist/src/components/ui/props/variant.d.ts

@@ -0,0 +1,6 @@
+/** Filled variant - solid background with contrasting text color */
+export declare const FILLED: "filled";
+/** Outline variant - transparent background with border and colored text (default) */
+export declare const OUTLINE: "outline";
+/** All variant property values */
+export declare const VARIANT_VALUES: readonly ["filled", "outline"];

package/dist/src/components/ui/props/wrap.d.ts

@@ -0,0 +1,8 @@
+/** Allow flex items to wrap to new lines when container is too narrow */
+export declare const FLEX_WRAP: "flexWrap";
+/** Force flex items to stay on single line (may overflow) */
+export declare const FLEX_NO_WRAP: "flexNoWrap";
+/** Wrap flex items in reverse order (last items wrap first) */
+export declare const FLEX_WRAP_REVERSE: "flexWrapReverse";
+/** All wrap property values */
+export declare const WRAP_VALUES: readonly ["flexWrap", "flexNoWrap", "flexWrapReverse"];