@newtonedev/components 0.1.0 → 0.1.2

package/dist/HueSlider/HueSlider.styles.d.ts

@@ -1,7 +1,13 @@
 import type { ResolvedTokens } from '../tokens/types';
-export declare function getHueSliderStyles(tokens: ResolvedTokens): {
+export declare const THUMB_SIZE = 18;
+/** Convert an HSL hue (S=100%, L=50%) to a hex string. */
+export declare function hueToHex(hue: number): string;
+/** Build an array of hex colors for the gradient track segments. */
+export declare function buildHueSegments(min: number, max: number): string[];
+export declare function getHueSliderStyles(tokens: ResolvedTokens, disabled: boolean): {
     container: {
         gap: number;
+        opacity: number;
     };
     labelRow: {
         flexDirection: "row";
@@ -9,20 +15,56 @@ export declare function getHueSliderStyles(tokens: ResolvedTokens): {
         alignItems: "center";
     };
     label: {
+        fontFamily: string;
         fontSize: number;
-        fontWeight: "600";
+        fontWeight: any;
         color: string;
     };
     value: {
+        fontFamily: string;
         fontSize: number;
-        fontWeight: "500";
+        fontWeight: any;
         color: string;
     };
-    sliderTrack: {
+    valueInput: {
+        width: number;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: number;
+        backgroundColor: string;
+        color: string;
+        fontFamily: string;
+        fontSize: number;
+        fontWeight: any;
+        textAlign: "right";
+    };
+    trackContainer: {
+        height: number;
+        justifyContent: "center";
+        position: "relative";
+    };
+    gradientTrack: {
+        position: "absolute";
+        left: number;
+        right: number;
         height: number;
         borderRadius: number;
+        flexDirection: "row";
         overflow: "hidden";
     };
+    segment: {
+        flex: number;
+    };
+    thumb: {
+        position: "absolute";
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
+    };
 };
-export declare function getHueSliderInputStyle(disabled: boolean, min?: number, max?: number): React.CSSProperties;
 //# sourceMappingURL=HueSlider.styles.d.ts.map

package/dist/HueSlider/HueSlider.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HueSlider.styles.d.ts","sourceRoot":"","sources":["../../src/HueSlider/HueSlider.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAgCtD,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,cAAc;;;;;;;;;;;;;;;;;;;;;;;;EA0BxD;AAED,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,OAAO,EACjB,GAAG,GAAE,MAAU,EACf,GAAG,GAAE,MAAY,GAChB,KAAK,CAAC,aAAa,CAUrB"}
+{"version":3,"file":"HueSlider.styles.d.ts","sourceRoot":"","sources":["../../src/HueSlider/HueSlider.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGtD,eAAO,MAAM,UAAU,KAAK,CAAC;AAG7B,0DAA0D;AAC1D,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAY5C;AAED,oEAAoE;AACpE,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAKnE;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO;;;;;;;;;;;;;oBAcrB,GAAG;;;;;;oBAML,GAAG;;;;;;;;;;;;;;oBAcH,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BvD"}

package/dist/HueSlider/HueSlider.types.d.ts

@@ -6,6 +6,7 @@ export interface HueSliderProps {
     readonly max?: number;
     readonly label?: string;
     readonly showValue?: boolean;
+    readonly editableValue?: boolean;
     readonly disabled?: boolean;
     readonly style?: ViewStyle | ViewStyle[];
 }

package/dist/HueSlider/HueSlider.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HueSlider.types.d.ts","sourceRoot":"","sources":["../../src/HueSlider/HueSlider.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAC1C"}
+{"version":3,"file":"HueSlider.types.d.ts","sourceRoot":"","sources":["../../src/HueSlider/HueSlider.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAC1C"}

package/dist/Icon/Icon.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { type ViewStyle } from 'react-native';
+import type { ElevationLevel } from '../theme/types';
+export interface IconProps {
+    /** Icon ligature name (e.g., 'home', 'settings', 'check') */
+    readonly name: string;
+    /** Font size in pixels (default: tokens.typography.size.base) */
+    readonly size?: number;
+    /** Optical size for variable font axis (default: same as size) */
+    readonly opticalSize?: number;
+    /** Fill state: 0=outlined, 1=filled (default: 0) */
+    readonly fill?: 0 | 1;
+    /** Icon color as hex string (default: tokens.textPrimary) */
+    readonly color?: string;
+    /** Elevation level for token computation (default: 1) */
+    readonly elevation?: ElevationLevel;
+    /** Additional styles */
+    readonly style?: ViewStyle;
+    /** Press handler */
+    readonly onPress?: () => void;
+}
+/**
+ * Material Symbols icon component with variable font support.
+ *
+ * Uses global icon configuration (variant, weight, auto-grade) from theme config,
+ * with per-instance control over size, fill, and color.
+ *
+ * @example
+ * ```tsx
+ * <Icon name="home" />
+ * <Icon name="settings" size={24} fill={1} />
+ * <Icon name="check" color="#00ff00" />
+ * ```
+ */
+export declare function Icon({ name, size, opticalSize, fill, color, elevation, style, onPress, }: IconProps): React.JSX.Element;
+//# sourceMappingURL=Icon.d.ts.map

package/dist/Icon/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,KAAK,SAAS,EAAkB,MAAM,cAAc,CAAC;AAGpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,WAAW,SAAS;IACxB,6DAA6D;IAC7D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,iEAAiE;IACjE,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,kEAAkE;IAClE,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,oDAAoD;IACpD,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACtB,6DAA6D;IAC7D,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,yDAAyD;IACzD,QAAQ,CAAC,SAAS,CAAC,EAAE,cAAc,CAAC;IACpC,wBAAwB;IACxB,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,oBAAoB;IACpB,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,IAAQ,EACR,KAAK,EACL,SAAa,EACb,KAAK,EACL,OAAO,GACR,EAAE,SAAS,qBA4BX"}

package/dist/Navbar/Navbar.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { NavbarProps } from './Navbar.types';
+export declare function Navbar({ children, left, right, height, bordered, }: NavbarProps): React.JSX.Element;
+//# sourceMappingURL=Navbar.d.ts.map

package/dist/Navbar/Navbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../src/Navbar/Navbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAIlD,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,MAAW,EACX,QAAe,GAChB,EAAE,WAAW,qBAmBb"}

package/dist/Navbar/Navbar.styles.d.ts

@@ -0,0 +1,31 @@
+import type { ResolvedTokens } from '../tokens/types';
+interface NavbarStyleInput {
+    readonly tokens: ResolvedTokens;
+    readonly height: number;
+    readonly bordered: boolean;
+}
+export declare function getNavbarStyles({ tokens, height, bordered }: NavbarStyleInput): {
+    container: {
+        flexDirection: "row";
+        alignItems: "center";
+        height: number;
+        flexShrink: number;
+        paddingHorizontal: number;
+        backgroundColor: string;
+        borderBottomWidth: number;
+        borderBottomColor: string;
+    };
+    left: {
+        flex: number;
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    right: {
+        flex: number;
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "flex-end";
+    };
+};
+export {};
+//# sourceMappingURL=Navbar.styles.d.ts.map

package/dist/Navbar/Navbar.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navbar.styles.d.ts","sourceRoot":"","sources":["../../src/Navbar/Navbar.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,UAAU,gBAAgB;IACxB,QAAQ,CAAC,MAAM,EAAE,cAAc,CAAC;IAChC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAED,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,gBAAgB;;;;;;;;;;;;;;;;;;;;;;EA0B7E"}

package/dist/Navbar/Navbar.types.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+export interface NavbarProps {
+    /** Full control mode — renders children directly */
+    readonly children?: ReactNode;
+    /** Left slot (e.g., page title, breadcrumbs) */
+    readonly left?: ReactNode;
+    /** Right slot (e.g., actions, user menu) */
+    readonly right?: ReactNode;
+    /** Navbar height in pixels. @default 56 */
+    readonly height?: number;
+    /** Show bottom border. @default true */
+    readonly bordered?: boolean;
+}
+//# sourceMappingURL=Navbar.types.d.ts.map

package/dist/Navbar/Navbar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navbar.types.d.ts","sourceRoot":"","sources":["../../src/Navbar/Navbar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,WAAW;IAC1B,oDAAoD;IACpD,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,gDAAgD;IAChD,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAC1B,4CAA4C;IAC5C,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,wCAAwC;IACxC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B"}

package/dist/Navbar/index.d.ts

@@ -0,0 +1,3 @@
+export { Navbar } from './Navbar';
+export type { NavbarProps } from './Navbar.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/Navbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Navbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/Popover/Popover.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { PopoverProps } from './Popover.types';
+export declare function Popover({ isOpen, onClose, trigger, children, width, maxHeight, offset, closeOnEscape, style, contentStyle, }: PopoverProps): React.JSX.Element;
+//# sourceMappingURL=Popover.d.ts.map

package/dist/Popover/Popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAQpD,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,OAAO,EACP,OAAO,EACP,QAAQ,EACR,KAAiB,EACjB,SAAe,EACf,MAAU,EACV,aAAoB,EACpB,KAAK,EACL,YAAY,GACb,EAAE,YAAY,qBAiFd"}

package/dist/Popover/Popover.styles.d.ts

@@ -0,0 +1,9 @@
+import type { ResolvedTokens } from '../tokens/types';
+export declare function getPopoverStyles(tokens: ResolvedTokens, triggerHeight: number, offset: number, maxHeight: number, width: 'trigger' | 'auto' | number, isOpen: boolean): {
+    container: {
+        position: "relative";
+        zIndex: number;
+    };
+    content: any;
+};
+//# sourceMappingURL=Popover.styles.d.ts.map

package/dist/Popover/Popover.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.styles.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,cAAc,EACtB,aAAa,EAAE,MAAM,EACrB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,EAClC,MAAM,EAAE,OAAO;;;;;;EA4BhB"}

package/dist/Popover/Popover.types.d.ts

@@ -0,0 +1,37 @@
+import type { ViewStyle } from 'react-native';
+export type PopoverPlacement = 'bottom' | 'top';
+export interface PopoverProps {
+    /** Whether the popover is currently open (controlled) */
+    readonly isOpen: boolean;
+    /** Callback when popover should close */
+    readonly onClose: () => void;
+    /** The trigger element — rendered always, popover content appears relative to it */
+    readonly trigger: React.ReactNode;
+    /** The popover content — rendered only when isOpen is true */
+    readonly children: React.ReactNode;
+    /** Preferred placement relative to trigger. @default 'bottom' */
+    readonly placement?: PopoverPlacement;
+    /** Width behavior: 'trigger' matches trigger width, 'auto' uses content width, number is fixed px. @default 'trigger' */
+    readonly width?: 'trigger' | 'auto' | number;
+    /** Maximum height for content area. @default 240 */
+    readonly maxHeight?: number;
+    /** Gap between trigger and content in px. @default 4 */
+    readonly offset?: number;
+    /** Whether pressing Escape closes the popover. @default true */
+    readonly closeOnEscape?: boolean;
+    /** Container style override */
+    readonly style?: ViewStyle | ViewStyle[];
+    /** Content container style override */
+    readonly contentStyle?: ViewStyle | ViewStyle[];
+}
+export interface UsePopoverOptions {
+    readonly initialOpen?: boolean;
+    readonly onOpenChange?: (isOpen: boolean) => void;
+}
+export interface UsePopoverReturn {
+    readonly isOpen: boolean;
+    readonly open: () => void;
+    readonly close: () => void;
+    readonly toggle: () => void;
+}
+//# sourceMappingURL=Popover.types.d.ts.map

package/dist/Popover/Popover.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.types.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B,yDAAyD;IACzD,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,yCAAyC;IACzC,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,oFAAoF;IACpF,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,8DAA8D;IAC9D,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,iEAAiE;IACjE,QAAQ,CAAC,SAAS,CAAC,EAAE,gBAAgB,CAAC;IACtC,yHAAyH;IACzH,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAC7C,oDAAoD;IACpD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,wDAAwD;IACxD,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,gEAAgE;IAChE,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC,+BAA+B;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IACzC,uCAAuC;IACvC,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CACjD;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACnD;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,IAAI,EAAE,MAAM,IAAI,CAAC;IAC1B,QAAQ,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC;CAC7B"}

package/dist/Popover/index.d.ts

@@ -0,0 +1,4 @@
+export { Popover } from './Popover';
+export type { PopoverProps, PopoverPlacement, UsePopoverOptions, UsePopoverReturn } from './Popover.types';
+export { usePopover } from './usePopover';
+//# sourceMappingURL=index.d.ts.map

package/dist/Popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAC3G,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/Popover/usePopover.d.ts

@@ -0,0 +1,3 @@
+import type { UsePopoverOptions, UsePopoverReturn } from './Popover.types';
+export declare function usePopover(options?: UsePopoverOptions): UsePopoverReturn;
+//# sourceMappingURL=usePopover.d.ts.map

package/dist/Popover/usePopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../src/Popover/usePopover.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAE3E,wBAAgB,UAAU,CAAC,OAAO,CAAC,EAAE,iBAAiB,GAAG,gBAAgB,CAsBxE"}

package/dist/Select/Select.d.ts

@@ -1,11 +1,4 @@
 import React from 'react';
 import type { SelectProps } from './Select.types';
-/**
- * Select dropdown component.
- *
- * Renders a native HTML <select> element styled with design tokens.
- * On web (via react-native-web), View renders as a div which can contain
- * standard HTML elements.
- */
-export declare function Select({ options, value, onValueChange, label, disabled, style, }: SelectProps): React.JSX.Element;
+export declare function Select({ options, value, onValueChange, label, placeholder, disabled, renderOption, renderValue, size, style, }: SelectProps): React.JSX.Element;
 //# sourceMappingURL=Select.d.ts.map

package/dist/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAIlD;;;;;;GAMG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,KAAK,EACL,aAAa,EACb,KAAK,EACL,QAAgB,EAChB,KAAK,GACN,EAAE,WAAW,qBAuCb"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAgB,MAAM,gBAAgB,CAAC;AAuBhE,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,KAAK,EACL,aAAa,EACb,KAAK,EACL,WAAW,EACX,QAAgB,EAChB,YAAY,EACZ,WAAW,EACX,IAAW,EACX,KAAK,GACN,EAAE,WAAW,qBAkHb"}

package/dist/Select/Select.styles.d.ts

@@ -1,23 +1,50 @@
 import type { ResolvedTokens } from '../tokens/types';
-export declare function getSelectStyles(tokens: ResolvedTokens, disabled: boolean): {
+export declare function getSelectStyles(tokens: ResolvedTokens, disabled: boolean, size: 'sm' | 'md', isOpen: boolean): {
     container: {
         gap: number;
+        zIndex: number;
     };
     label: {
+        fontFamily: string;
         fontSize: number;
-        fontWeight: "600";
+        fontWeight: any;
         color: string;
     };
-    select: {
+    trigger: {
+        flexDirection: "row";
+        alignItems: "center";
         backgroundColor: string;
         borderWidth: number;
         borderColor: string;
         borderRadius: number;
         paddingVertical: number;
-        paddingHorizontal: number;
+        paddingLeft: number;
+        paddingRight: number;
+        opacity: number;
+    };
+    triggerText: {
+        flex: number;
+        fontFamily: string;
         fontSize: number;
         color: string;
-        opacity: number;
+    };
+    iconWrapper: {
+        position: "absolute";
+        right: number;
+        top: number;
+        bottom: number;
+        justifyContent: "center";
+    };
+    groupLabel: {
+        fontFamily: string;
+        fontSize: number;
+        fontWeight: any;
+        color: string;
+        textTransform: "uppercase";
+        letterSpacing: number;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        paddingTop: number;
     };
 };
 //# sourceMappingURL=Select.styles.d.ts.map

package/dist/Select/Select.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../src/Select/Select.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,wBAAgB,eAAe,CAAC,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO;;;;;;;;;;;;;;;;;;;;EAwBxE"}
+{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../src/Select/Select.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,wBAAgB,eAAe,CAC7B,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,OAAO,EACjB,IAAI,EAAE,IAAI,GAAG,IAAI,EACjB,MAAM,EAAE,OAAO;;;;;;;;oBAiBsC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAiCH,GAAG;;;;;;;;EASzD"}

package/dist/Select/Select.types.d.ts

@@ -2,13 +2,37 @@ import type { ViewStyle } from 'react-native';
 export interface SelectOption {
     readonly label: string;
     readonly value: string;
+    readonly disabled?: boolean;
 }
-export interface SelectProps {
+export interface SelectOptionGroup {
+    readonly label: string;
     readonly options: readonly SelectOption[];
+}
+export type SelectItem = SelectOption | SelectOptionGroup;
+export declare function isOptionGroup(item: SelectItem): item is SelectOptionGroup;
+export interface SelectProps {
+    /** Flat options or grouped options */
+    readonly options: readonly SelectItem[];
+    /** Currently selected value */
     readonly value: string;
+    /** Callback when selection changes */
     readonly onValueChange: (value: string) => void;
+    /** Field label displayed above the trigger */
     readonly label?: string;
+    /** Placeholder text when no value is selected */
+    readonly placeholder?: string;
+    /** Disabled state */
     readonly disabled?: boolean;
+    /** Custom render for each option row */
+    readonly renderOption?: (option: SelectOption, state: {
+        readonly isSelected: boolean;
+        readonly isFocused: boolean;
+    }) => React.ReactNode;
+    /** Custom render for the trigger display text */
+    readonly renderValue?: (option: SelectOption | undefined) => React.ReactNode;
+    /** Size variant. @default 'md' */
+    readonly size?: 'sm' | 'md';
+    /** Container style override */
     readonly style?: ViewStyle | ViewStyle[];
 }
 //# sourceMappingURL=Select.types.d.ts.map

package/dist/Select/Select.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.types.d.ts","sourceRoot":"","sources":["../../src/Select/Select.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,OAAO,EAAE,SAAS,YAAY,EAAE,CAAC;IAC1C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAC1C"}
+{"version":3,"file":"Select.types.d.ts","sourceRoot":"","sources":["../../src/Select/Select.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,SAAS,YAAY,EAAE,CAAC;CAC3C;AAED,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,iBAAiB,CAAC;AAE1D,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,IAAI,iBAAiB,CAEzE;AAED,MAAM,WAAW,WAAW;IAC1B,sCAAsC;IACtC,QAAQ,CAAC,OAAO,EAAE,SAAS,UAAU,EAAE,CAAC;IACxC,+BAA+B;IAC/B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,sCAAsC;IACtC,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,8CAA8C;IAC9C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,iDAAiD;IACjD,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,qBAAqB;IACrB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,wCAAwC;IACxC,QAAQ,CAAC,YAAY,CAAC,EAAE,CACtB,MAAM,EAAE,YAAY,EACpB,KAAK,EAAE;QAAE,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAA;KAAE,KACjE,KAAK,CAAC,SAAS,CAAC;IACrB,iDAAiD;IACjD,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,GAAG,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7E,kCAAkC;IAClC,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC5B,+BAA+B;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAC1C"}

package/dist/Select/SelectOption.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { SelectOption as SelectOptionType, SelectProps } from './Select.types';
+interface SelectOptionRowProps {
+    readonly option: SelectOptionType;
+    readonly isSelected: boolean;
+    readonly isFocused: boolean;
+    readonly onSelect: () => void;
+    readonly renderOption?: SelectProps['renderOption'];
+    readonly size: 'sm' | 'md';
+}
+export declare function SelectOptionRow({ option, isSelected, isFocused, onSelect, renderOption, size, }: SelectOptionRowProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=SelectOption.d.ts.map

package/dist/Select/SelectOption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOption.d.ts","sourceRoot":"","sources":["../../src/Select/SelectOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,IAAI,gBAAgB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAKpF,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,MAAM,EAAE,gBAAgB,CAAC;IAClC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;IAC9B,QAAQ,CAAC,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;IACpD,QAAQ,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;CAC5B;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,UAAU,EACV,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,IAAI,GACL,EAAE,oBAAoB,qBAgFtB"}

package/dist/Select/useSelect.d.ts

@@ -0,0 +1,15 @@
+import type { SelectOption } from './Select.types';
+interface UseSelectOptions {
+    readonly flatOptions: readonly SelectOption[];
+    readonly value: string;
+    readonly isOpen: boolean;
+    readonly onSelect: (value: string) => void;
+    readonly onClose: () => void;
+    readonly onOpen: () => void;
+}
+export declare function useSelect({ flatOptions, value, isOpen, onSelect, onClose, onOpen, }: UseSelectOptions): {
+    focusedIndex: number;
+    handleKeyDown: (e: any) => void;
+};
+export {};
+//# sourceMappingURL=useSelect.d.ts.map

package/dist/Select/useSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelect.d.ts","sourceRoot":"","sources":["../../src/Select/useSelect.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,UAAU,gBAAgB;IACxB,QAAQ,CAAC,WAAW,EAAE,SAAS,YAAY,EAAE,CAAC;IAC9C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,QAAQ,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC;CAC7B;AAiBD,wBAAgB,SAAS,CAAC,EACxB,WAAW,EACX,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,MAAM,GACP,EAAE,gBAAgB;;uBAqBX,GAAG;EAyEV"}

package/dist/Sidebar/Sidebar.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SidebarProps } from './Sidebar.types';
+export declare function Sidebar({ children, header, footer, width, bordered, }: SidebarProps): React.JSX.Element;
+//# sourceMappingURL=Sidebar.d.ts.map

package/dist/Sidebar/Sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../src/Sidebar/Sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAIpD,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,MAAM,EACN,MAAM,EACN,KAAW,EACX,QAAe,GAChB,EAAE,YAAY,qBAcd"}

package/dist/Sidebar/Sidebar.styles.d.ts

@@ -0,0 +1,31 @@
+import type { ResolvedTokens } from '../tokens/types';
+interface SidebarStyleInput {
+    readonly tokens: ResolvedTokens;
+    readonly width: number;
+    readonly bordered: boolean;
+}
+export declare function getSidebarStyles({ tokens, width, bordered }: SidebarStyleInput): {
+    container: {
+        width: number;
+        flexShrink: number;
+        flexDirection: "column";
+        backgroundColor: string;
+        borderRightWidth: number;
+        borderRightColor: string;
+    };
+    header: {
+        flexShrink: number;
+        borderBottomWidth: number;
+        borderBottomColor: string;
+    };
+    body: {
+        flex: number;
+    };
+    footer: {
+        flexShrink: number;
+        borderTopWidth: number;
+        borderTopColor: string;
+    };
+};
+export {};
+//# sourceMappingURL=Sidebar.styles.d.ts.map

package/dist/Sidebar/Sidebar.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.styles.d.ts","sourceRoot":"","sources":["../../src/Sidebar/Sidebar.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,UAAU,iBAAiB;IACzB,QAAQ,CAAC,MAAM,EAAE,cAAc,CAAC;IAChC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;CAC5B;AAED,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,iBAAiB;;;;;;;;;;;;;;;;;;;;;;EA0B9E"}

package/dist/Sidebar/Sidebar.types.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+export interface SidebarProps {
+    /** Scrollable body content (navigation items, etc.) */
+    readonly children?: ReactNode;
+    /** Sticky header slot (logo, brand) */
+    readonly header?: ReactNode;
+    /** Sticky footer slot (user menu, settings) */
+    readonly footer?: ReactNode;
+    /** Fixed width in pixels. @default 260 */
+    readonly width?: number;
+    /** Show right border. @default true */
+    readonly bordered?: boolean;
+}
+//# sourceMappingURL=Sidebar.types.d.ts.map

package/dist/Sidebar/Sidebar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.types.d.ts","sourceRoot":"","sources":["../../src/Sidebar/Sidebar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,YAAY;IAC3B,uDAAuD;IACvD,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,uCAAuC;IACvC,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAC5B,+CAA+C;IAC/C,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAC5B,0CAA0C;IAC1C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,uCAAuC;IACvC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B"}

package/dist/Sidebar/index.d.ts

@@ -0,0 +1,3 @@
+export { Sidebar } from './Sidebar';
+export type { SidebarProps } from './Sidebar.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/Sidebar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Sidebar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/Slider/Slider.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { SliderProps } from './Slider.types';
-export declare function Slider({ value, onValueChange, min, max, step, label, showValue, disabled, style, }: SliderProps): React.JSX.Element;
+export declare function Slider({ value, onValueChange, min, max, step, label, showValue, editableValue, disabled, style, }: SliderProps): React.JSX.Element;
 //# sourceMappingURL=Slider.d.ts.map

package/dist/Slider/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAIlD,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,aAAa,EACb,GAAO,EACP,GAAS,EACT,IAAQ,EACR,KAAK,EACL,SAAiB,EACjB,QAAgB,EAChB,KAAK,GACN,EAAE,WAAW,qBAwCb"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../src/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAIlD,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,aAAa,EACb,GAAO,EACP,GAAS,EACT,IAAQ,EACR,KAAK,EACL,SAAiB,EACjB,aAAqB,EACrB,QAAgB,EAChB,KAAK,GACN,EAAE,WAAW,qBAwGb"}

package/dist/Slider/Slider.styles.d.ts

@@ -1,7 +1,9 @@
 import type { ResolvedTokens } from '../tokens/types';
-export declare function getSliderStyles(tokens: ResolvedTokens): {
+export declare const THUMB_SIZE = 16;
+export declare function getSliderStyles(tokens: ResolvedTokens, disabled: boolean): {
     container: {
         gap: number;
+        opacity: number;
     };
     labelRow: {
         flexDirection: "row";
@@ -9,19 +11,57 @@ export declare function getSliderStyles(tokens: ResolvedTokens): {
         alignItems: "center";
     };
     label: {
+        fontFamily: string;
         fontSize: number;
-        fontWeight: "600";
+        fontWeight: any;
         color: string;
     };
     value: {
+        fontFamily: string;
         fontSize: number;
-        fontWeight: "500";
+        fontWeight: any;
         color: string;
     };
+    valueInput: {
+        width: number;
+        paddingVertical: number;
+        paddingHorizontal: number;
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: number;
+        backgroundColor: string;
+        color: string;
+        fontFamily: string;
+        fontSize: number;
+        fontWeight: any;
+        textAlign: "right";
+    };
+    trackContainer: {
+        height: number;
+        justifyContent: "center";
+        position: "relative";
+    };
+    trackRail: {
+        position: "absolute";
+        left: number;
+        right: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+    };
+    trackFill: {
+        position: "absolute";
+        left: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+    };
+    thumb: {
+        position: "absolute";
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+    };
 };
-/**
- * Generate CSS for the range input styling.
- * Returns inline CSS properties for the native <input type="range">.
- */
-export declare function getSliderInputStyle(tokens: ResolvedTokens, disabled: boolean): React.CSSProperties;
 //# sourceMappingURL=Slider.styles.d.ts.map