asheeui 1.1.1 → 2.2.1

package/dist/components/radio/RadioGroup.d.ts

@@ -1,144 +0,0 @@
-import { ReactNode } from 'react';
-import { Color } from '../../shared';
-import { FieldSizeKey, FieldStatus, LabelAlign } from '../field/field-config';
-import { RadioVariant } from './radio-config';
-/**
- * Configuration options for the RadioGroup component.
- */
-export interface RadioGroupProps {
-    /**
-     * Radio components to render inside the group.
-     */
-    children: ReactNode;
-    /**
-     * Name attribute for all radio inputs in the group.
-     * Auto-generated if not provided.
-     */
-    name?: string;
-    /**
-     * Controlled selected value.
-     */
-    value?: string;
-    /**
-     * Uncontrolled initial selected value.
-     */
-    defaultValue?: string;
-    /**
-     * Callback fired when the selection changes.
-     * Receives the new selected value.
-     */
-    onChange?: (value: string) => void;
-    /**
-     * Size scale for all radios in the group.
-     * @default "md"
-     */
-    size?: FieldSizeKey;
-    /**
-     * Theme accent color for all radios in the group.
-     * @default "primary"
-     */
-    color?: Color;
-    /**
-     * Visual style variant for all radios in the group.
-     * @default "default"
-     */
-    variant?: RadioVariant;
-    /**
-     * Layout orientation of the radio group.
-     * - `horizontal`: Radios are laid out in a row.
-     * - `vertical`: Radios are laid out in a column.
-     * @default "vertical"
-     */
-    orientation?: "horizontal" | "vertical";
-    /**
-     * Validation status for the group.
-     * @default "default"
-     */
-    status?: FieldStatus;
-    /**
-     * Label text for the group.
-     */
-    label?: string;
-    /**
-     * Alignment of the label relative to the group.
-     * @default "left"
-     */
-    labelAlign?: LabelAlign;
-    /**
-     * Description text shown below the label.
-     */
-    description?: string;
-    /**
-     * Validation message shown below the group.
-     */
-    message?: string;
-    /**
-     * Whether the field is required.
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * Whether all radios in the group are disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Extra CSS classes for the group container.
-     */
-    className?: string;
-}
-/**
- * A group of radio buttons that manages shared state and layout.
- *
- * RadioGroup wraps multiple Radio components and provides a consistent
- * context for shared props like name, value, size, color, and disabled
- * state. It also handles labeling, validation, and layout through the
- * FieldShell component.
- *
- * @param props - RadioGroup configuration options.
- * @param props.children - Radio components to render.
- * @param props.name - Name attribute for all radios.
- * @param props.value - Controlled selected value.
- * @param props.defaultValue - Uncontrolled initial selected value.
- * @param props.onChange - Callback fired when selection changes.
- * @param props.size - Size scale for all radios. Defaults to "md".
- * @param props.color - Theme accent color. Defaults to "primary".
- * @param props.variant - Visual style variant. Defaults to "default".
- * @param props.orientation - Layout orientation. Defaults to "vertical".
- * @param props.status - Validation status. Defaults to "default".
- * @param props.label - Label text for the group.
- * @param props.labelAlign - Alignment of the label. Defaults to "left".
- * @param props.description - Description text.
- * @param props.message - Validation message.
- * @param props.required - Whether the field is required.
- * @param props.disabled - Whether all radios are disabled.
- * @param props.className - Extra CSS classes.
- *
- * @example
- * ```tsx
- * import { Radio, RadioGroup } from "asheeui";
- * import { useState } from "react";
- *
- * export function Example() {
- *   const [value, setValue] = useState("option-1");
- *
- *   return (
- *     <RadioGroup
- *       label="Choose an option"
- *       value={value}
- *       onChange={setValue}
- *       orientation="horizontal"
- *     >
- *       <Radio value="option-1" label="Option 1" />
- *       <Radio value="option-2" label="Option 2" />
- *       <Radio value="option-3" label="Option 3" disabled />
- *     </RadioGroup>
- *   );
- * }
- * ```
- *
- * @see Radio - The individual radio component.
- * @see RadioConfig - The configuration type for component defaults.
- */
-export declare const RadioGroup: import('react').ForwardRefExoticComponent<RadioGroupProps & import('react').RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=RadioGroup.d.ts.map

package/dist/components/radio/RadioGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/radio/RadioGroup.tsx"],"names":[],"mappings":"AAQA,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAI1C,OAAO,KAAK,EACV,YAAY,EACZ,WAAW,EACX,UAAU,EACX,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAGL,KAAK,YAAY,EAClB,MAAM,gBAAgB,CAAC;AAKxB;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;;OAGG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IAEpB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAExC;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,eAAO,MAAM,UAAU,4GAuGtB,CAAC"}

package/dist/components/radio/RadioGroup.js

@@ -1,52 +0,0 @@
-"use client";
-"use client";
-import { cn as e } from "../../utils/cn.js";
-import { useAsheeConfig as t } from "../../libs/context.js";
-import { resolveCascade as n } from "../../utils/resolve-token.js";
-import { FieldShell as r } from "../field/FieldShell.js";
-import { FALLBACK_RADIO_CONFIG as i } from "./radio-config.js";
-import { RadioContext as a } from "./radio-context.js";
-import { forwardRef as o, useCallback as s, useId as c, useState as l } from "react";
-import { jsx as u } from "react/jsx-runtime";
-//#region src/components/radio/RadioGroup.tsx
-var d = o(({ children: o, name: d, value: f, defaultValue: p, onChange: m, size: h, color: g, variant: _, orientation: v = "vertical", status: y, label: b, labelAlign: x, description: S, message: C, required: w, disabled: T, className: E }, D) => {
-	let O = t().components?.radio, k = c(), A = d ?? k, [j, M] = l(p), N = f !== void 0, P = N ? f : j, F = s((e) => {
-		N || M(e), m?.(e);
-	}, [N, m]), I = b ? `${k}-label` : void 0, L = S ? `${k}-description` : void 0, R = C ? `${k}-message` : void 0, z = [L, R].filter(Boolean).join(" ") || void 0, B = y ?? i.status, V = n(x, O?.labelAlign, void 0, i.labelAlign);
-	return /* @__PURE__ */ u(r, {
-		id: k,
-		htmlFor: null,
-		labelId: I,
-		label: b,
-		labelAlign: V,
-		description: S,
-		descriptionId: L,
-		message: C,
-		messageId: R,
-		status: B,
-		required: w,
-		children: /* @__PURE__ */ u(a.Provider, {
-			value: {
-				name: A,
-				value: P,
-				onChange: F,
-				size: h,
-				color: g,
-				variant: _,
-				disabled: T,
-				status: B
-			},
-			children: /* @__PURE__ */ u("div", {
-				ref: D,
-				role: "radiogroup",
-				"aria-labelledby": I,
-				"aria-describedby": z,
-				className: e("flex", v === "vertical" ? "flex-col gap-2" : "flex-row flex-wrap gap-4", E),
-				children: o
-			})
-		})
-	});
-});
-d.displayName = "RadioGroup";
-//#endregion
-export { d as RadioGroup };

package/dist/components/radio/index.d.ts

@@ -1,4 +0,0 @@
-export * from './Radio';
-export * from './RadioGroup';
-export * from './radio-config';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/radio/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/radio/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC"}

package/dist/components/radio/index.js

@@ -1,5 +0,0 @@
-export * from "./Radio.js";
-export * from "./RadioGroup.js";
-export * from "./radio-config.js";
-export * from "./radio-context.js";
-export * from "./radio-styles.js";

package/dist/components/radio/radio-config.d.ts

@@ -1,53 +0,0 @@
-import { FieldSizeKey } from '../field/field-config';
-import { InputConfig } from '../input';
-/**
- * Size key for radio components.
- * Maps to the FieldSizeKey type: "sm", "md", or "lg".
- */
-export type RadioSizeKey = FieldSizeKey;
-/**
- * Visual style variant of the radio.
- * - `default`: Standard radio button with a circular indicator.
- * - `card`: Radio rendered as a card-style container.
- */
-export type RadioVariant = "default" | "card";
-/**
- * Theme configuration options for the Radio component.
- *
- * Set under `components.radio` in the AsheeUI config. Values feed the
- * component-level fallback tier of the theme cascade.
- */
-export interface RadioConfig extends Omit<InputConfig, "variant"> {
-    /**
-     * Visual style variant.
-     * Controls whether the radio appears as a standard button or a card.
-     *
-     * @default "default"
-     */
-    variant?: RadioVariant;
-}
-/**
- * Default config values registered for the Radio component.
- * Sets radius to "full" for circular radio buttons.
- */
-export declare const defaultRadioConfig: RadioConfig;
-/**
- * Hard fallback values used when no config tier provides a value.
- * These values are used when instance props, component config,
- * and global defaults are all undefined.
- */
-export declare const FALLBACK_RADIO_CONFIG: {
-    readonly radius: "full";
-    readonly variant: "default";
-    readonly size: FieldSizeKey;
-    readonly color: import('../..').Color;
-    readonly labelAlign: import('../field').LabelAlign;
-    readonly fullWidth: boolean;
-    readonly status: import('../field').FieldStatus;
-};
-declare module "../../libs/registry" {
-    interface ComponentTypeConfigRegistry {
-        radio: RadioConfig;
-    }
-}
-//# sourceMappingURL=radio-config.d.ts.map

package/dist/components/radio/radio-config.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"radio-config.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio-config.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAEL,KAAK,YAAY,EAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAEhE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC;AAExC;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,CAAC;AAE9C;;;;;GAKG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;IAC/D;;;;;OAKG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,WAIhC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;CAIxB,CAAC;AAEX,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,KAAK,EAAE,WAAW,CAAC;KACpB;CACF"}

package/dist/components/radio/radio-config.js

@@ -1,17 +0,0 @@
-"use client";
-import { registerComponentDefaults as e } from "../../libs/registry.js";
-import { FALLBACK_FIELD_CONFIG as t } from "../field/field-config.js";
-import { defaultInputConfig as n } from "../input/input-config.js";
-//#region src/components/radio/radio-config.ts
-var r = {
-	...n,
-	radius: "full",
-	variant: "default"
-}, i = {
-	...t,
-	radius: "full",
-	variant: "default"
-};
-e("radio", r);
-//#endregion
-export { i as FALLBACK_RADIO_CONFIG, r as defaultRadioConfig };

package/dist/components/radio/radio-context.d.ts

@@ -1,59 +0,0 @@
-import { Color } from '../../shared';
-import { FieldSizeKey, FieldStatus } from '../field/field-config';
-import { RadioVariant } from './radio-config';
-/**
- * Context value for the radio group.
- * Contains all shared props that Radio components inherit from their group.
- */
-export interface RadioContextValue {
-    /**
-     * Name attribute for all radio inputs in the group.
-     */
-    name?: string;
-    /**
-     * Currently selected value in the group.
-     */
-    value?: string;
-    /**
-     * Callback fired when the selection changes.
-     */
-    onChange?: (value: string) => void;
-    /**
-     * Size scale for all radios in the group.
-     */
-    size?: FieldSizeKey;
-    /**
-     * Theme accent color for all radios in the group.
-     */
-    color?: Color;
-    /**
-     * Visual style variant for all radios in the group.
-     */
-    variant?: RadioVariant;
-    /**
-     * Whether all radios in the group are disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Validation status for the group.
-     */
-    status?: FieldStatus;
-}
-/**
- * React context for the radio group state.
- */
-export declare const RadioContext: import('react').Context<RadioContextValue | null>;
-/**
- * Hook for accessing the radio group context.
- * Returns the current context value or null if used outside a RadioGroup.
- *
- * @returns The radio group context value, or null if not in a group.
- *
- * @example
- * ```tsx
- * const group = useRadioGroupContext();
- * const isChecked = group ? group.value === value : controlledChecked;
- * ```
- */
-export declare const useRadioGroupContext: () => RadioContextValue | null;
-//# sourceMappingURL=radio-context.d.ts.map

package/dist/components/radio/radio-context.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"radio-context.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio-context.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,mDAAgD,CAAC;AAE1E;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,oBAAoB,gCAAiC,CAAC"}

package/dist/components/radio/radio-context.js

@@ -1,7 +0,0 @@
-"use client";
-"use client";
-import { createContext as e, useContext as t } from "react";
-//#region src/components/radio/radio-context.ts
-var n = e(null), r = () => t(n);
-//#endregion
-export { n as RadioContext, r as useRadioGroupContext };

package/dist/components/radio/radio-styles.d.ts

@@ -1,36 +0,0 @@
-import { Color } from '../../shared';
-import { FieldSizeKey, FieldStatus } from '../field/field-config';
-/**
- * CSS classes for radio outer circle size.
- * Controls the diameter of the radio button.
- */
-export declare const RADIO_OUTER_SIZE_CLASS: Record<FieldSizeKey, string>;
-/**
- * CSS classes for radio inner dot size.
- * Controls the diameter of the selected indicator.
- */
-export declare const RADIO_INNER_SIZE_CLASS: Record<FieldSizeKey, string>;
-/**
- * CSS classes for radio label font size.
- * Controls the text size of the label and description.
- */
-export declare const RADIO_FONT_SIZE_CLASS: Record<FieldSizeKey, string>;
-/**
- * CSS classes for radio gap based on size.
- * Controls the spacing between the radio button and its label.
- */
-export declare const RADIO_GAP_CLASS: Record<FieldSizeKey, string>;
-/**
- * CSS classes for radio color variants.
- * Maps color keys to border, background, and card background classes.
- */
-export declare const RADIO_COLOR_CLASS: Record<Color, {
-    border: string;
-    bg: string;
-    cardBg: string;
-}>;
-/**
- * CSS classes for radio status border styles.
- */
-export declare const RADIO_STATUS_BORDER_CLASS: Record<FieldStatus, string>;
-//# sourceMappingURL=radio-styles.d.ts.map

package/dist/components/radio/radio-styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"radio-styles.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEvE;;;GAGG;AACH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAI/D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAI/D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAI9D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAIxD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CACpC,KAAK,EACL;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAgC/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAKjE,CAAC"}

package/dist/components/radio/radio-styles.js

@@ -1,57 +0,0 @@
-"use client";
-//#region src/components/radio/radio-styles.ts
-var e = {
-	sm: "size-4",
-	md: "size-5",
-	lg: "size-6"
-}, t = {
-	sm: "size-2",
-	md: "size-2.5",
-	lg: "size-3"
-}, n = {
-	sm: "text-xs",
-	md: "text-sm",
-	lg: "text-base"
-}, r = {
-	sm: "gap-2",
-	md: "gap-2.5",
-	lg: "gap-3"
-}, i = {
-	none: {
-		border: "border-border",
-		bg: "bg-foreground",
-		cardBg: "bg-secondary/10"
-	},
-	primary: {
-		border: "border-primary",
-		bg: "bg-primary",
-		cardBg: "bg-primary/10"
-	},
-	secondary: {
-		border: "border-secondary",
-		bg: "bg-secondary",
-		cardBg: "bg-secondary/10"
-	},
-	danger: {
-		border: "border-danger",
-		bg: "bg-danger",
-		cardBg: "bg-danger/10"
-	},
-	warning: {
-		border: "border-warning",
-		bg: "bg-warning",
-		cardBg: "bg-warning/10"
-	},
-	success: {
-		border: "border-success",
-		bg: "bg-success",
-		cardBg: "bg-success/10"
-	}
-}, a = {
-	default: "border-border",
-	error: "border-danger",
-	warning: "border-warning",
-	success: "border-success"
-};
-//#endregion
-export { i as RADIO_COLOR_CLASS, n as RADIO_FONT_SIZE_CLASS, r as RADIO_GAP_CLASS, t as RADIO_INNER_SIZE_CLASS, e as RADIO_OUTER_SIZE_CLASS, a as RADIO_STATUS_BORDER_CLASS };

package/dist/components/resizable-screen/ResizableScreen.d.ts

@@ -1,115 +0,0 @@
-import { HTMLAttributes, ReactNode } from 'react';
-import { ResizableScreenConfig } from './resizable-screen-config';
-type BaseResizableScreenProps = ResizableScreenConfig & Omit<HTMLAttributes<HTMLDivElement>, "children">;
-/**
- * Configuration options for the ResizableScreen component.
- */
-export interface ResizableScreenProps extends BaseResizableScreenProps {
-    /**
-     * Exactly two child nodes representing the primary and secondary panels.
-     * The first child is the primary (resizable) panel, the second is the secondary (flex) panel.
-     */
-    children: [ReactNode, ReactNode];
-    /**
-     * Initial size of the first panel as a percentage (0-100).
-     * Alias for defaultSize for backward compatibility.
-     */
-    left?: number;
-    /**
-     * Controlled size percentage (0-100) for the primary panel.
-     * When provided, the component becomes controlled.
-     */
-    size?: number;
-    /**
-     * Callback fired when pane size changes.
-     * Receives the new size percentage of the primary panel.
-     */
-    onSizeChange?: (size: number) => void;
-    /**
-     * Additional custom styling for the resize handle bar container.
-     */
-    handleClassName?: string;
-    /**
-     * Minimum height of the resizable container in pixels.
-     * Used when the container has no explicit height from its parent.
-     * @default 200
-     */
-    minContainerHeight?: number;
-    /**
-     * Minimum width of the resizable container in pixels.
-     * Used when the container has no explicit width from its parent.
-     * @default 200
-     */
-    minContainerWidth?: number;
-}
-/**
- * A split panel layout with a draggable handle for resizing the primary panel.
- *
- * ResizableScreen renders two panels separated by a resizable handle. The primary
- * panel (first child) can be resized by dragging the handle or using keyboard
- * controls (arrow keys, Home, End). It supports horizontal and vertical
- * orientations, configurable min/max sizes, and step increments for keyboard
- * resizing. Visual tokens resolve through the standard AsheeUI cascade.
- *
- * The component automatically handles accessibility attributes including
- * role="separator", aria-valuenow, aria-valuemin, aria-valuemax, and
- * aria-orientation for the resize handle.
- *
- * @param props - ResizableScreen configuration options.
- * @param props.children - Exactly two React nodes for the primary and secondary panels.
- * @param props.left - Initial size of the primary panel (alias for defaultSize).
- * @param props.size - Controlled size percentage for the primary panel.
- * @param props.onSizeChange - Callback fired when pane size changes.
- * @param props.defaultSize - Default size of the primary panel. Defaults to 50.
- * @param props.minSize - Minimum size of the primary panel. Defaults to 20.
- * @param props.maxSize - Maximum size of the primary panel. Defaults to 80.
- * @param props.step - Step size for keyboard resizing. Defaults to 2.
- * @param props.orientation - Layout orientation. Defaults to "horizontal".
- * @param props.hideHandle - Whether to hide the resize handle. Defaults to false.
- * @param props.handleClassName - Extra classes for the handle bar.
- * @param props.minContainerHeight - Minimum container height in pixels. Defaults to 200.
- * @param props.minContainerWidth - Minimum container width in pixels. Defaults to 200.
- * @param props.className - Extra classes for the container.
- *
- * @example
- * ```tsx
- * import { ResizableScreen } from "asheeui";
- *
- * export function Example() {
- *   return (
- *     <ResizableScreen
- *       defaultSize={60}
- *       minSize={30}
- *       maxSize={70}
- *       orientation="horizontal"
- *     >
- *       <div className="bg-primary/10 p-4">Left Panel</div>
- *       <div className="bg-success/10 p-4">Right Panel</div>
- *     </ResizableScreen>
- *   );
- * }
- * ```
- *
- * @example
- * ```tsx
- * // Vertical orientation with controlled size
- * const [size, setSize] = useState(50);
- *
- * <ResizableScreen
- *   size={size}
- *   onSizeChange={setSize}
- *   orientation="vertical"
- *   minSize={25}
- *   maxSize={75}
- * >
- *   <div className="bg-danger/10 p-4">Top Panel</div>
- *   <div className="bg-primary/10 p-4">Bottom Panel</div>
- * </ResizableScreen>
- * ```
- *
- * @see ResizableScreenConfig - The configuration type for component defaults.
- * @see useAsheeConfig - Hook for accessing the global configuration.
- */
-export declare const ResizableScreen: import('react').ForwardRefExoticComponent<ResizableScreenProps & import('react').RefAttributes<HTMLDivElement>>;
-export {};
-//# sourceMappingURL=ResizableScreen.d.ts.map

package/dist/components/resizable-screen/ResizableScreen.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ResizableScreen.d.ts","sourceRoot":"","sources":["../../../src/components/resizable-screen/ResizableScreen.tsx"],"names":[],"mappings":"AAUA,OAAO,EAEL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAIf,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,2BAA2B,CAAC;AAEnC,KAAK,wBAAwB,GAAG,qBAAqB,GACnD,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,wBAAwB;IACpE;;;OAGG;IACH,QAAQ,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAEjC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,eAAO,MAAM,eAAe,iHAiQ3B,CAAC"}

package/dist/components/resizable-screen/ResizableScreen.js

@@ -1,89 +0,0 @@
-"use client";
-"use client";
-import { cn as e } from "../../utils/cn.js";
-import { useAsheeConfig as t } from "../../libs/context.js";
-import { resolveCascade as n } from "../../utils/resolve-token.js";
-import { FALLBACK_RESIZABLE_SCREEN_CONFIG as r } from "./resizable-screen-config.js";
-import { forwardRef as i, useCallback as a, useRef as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-//#region src/components/resizable-screen/ResizableScreen.tsx
-var u = i(({ children: i, left: u, size: d, defaultSize: f, minSize: p, maxSize: m, step: h, orientation: g, hideHandle: _, onSizeChange: v, handleClassName: y, minContainerHeight: b = 200, minContainerWidth: x = 200, className: S, style: C, ...w }, T) => {
-	let E = t().components?.resizableScreen, D = n(p, E?.minSize, void 0, r.minSize), O = n(m, E?.maxSize, void 0, r.maxSize), k = n(h, E?.step, void 0, r.step), A = n(g, E?.orientation, void 0, r.orientation), j = n(_, E?.hideHandle, void 0, r.hideHandle), M = n(f, E?.defaultSize, void 0, r.defaultSize), [N, P] = s(d ?? u ?? M), [F, I] = s(!1), L = o(null), R = d !== void 0, z = R ? d : N, B = a((e) => Math.min(Math.max(e, D), O), [D, O]), V = a((e) => {
-		let t = B(e);
-		R || P(t), v?.(t);
-	}, [
-		B,
-		R,
-		v
-	]), H = (e) => {
-		e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), I(!0);
-	}, U = (e) => {
-		if (!F || !L.current) return;
-		let t = L.current.getBoundingClientRect(), n = A === "horizontal", r = n ? t.width : t.height, i = n ? e.clientX - t.left : e.clientY - t.top;
-		if (r > 0) {
-			let e = i / r * 100;
-			V(e);
-		}
-	}, W = (e) => {
-		if (F) {
-			try {
-				e.currentTarget.releasePointerCapture(e.pointerId);
-			} catch {}
-			I(!1);
-		}
-	}, G = (e) => {
-		let t = A === "horizontal", n = t ? "ArrowLeft" : "ArrowUp", r = t ? "ArrowRight" : "ArrowDown";
-		e.key === n ? (e.preventDefault(), V(z - k)) : e.key === r ? (e.preventDefault(), V(z + k)) : e.key === "Home" ? (e.preventDefault(), V(D)) : e.key === "End" && (e.preventDefault(), V(O));
-	}, [K, q] = i, J = A === "horizontal";
-	return /* @__PURE__ */ l("div", {
-		ref: (e) => {
-			L.current = e, typeof T == "function" ? T(e) : T && (T.current = e);
-		},
-		className: e("flex relative", F && "select-none", J ? "flex-row" : "flex-col", S),
-		style: {
-			cursor: F ? J ? "col-resize" : "row-resize" : "default",
-			minHeight: `${b}px`,
-			minWidth: `${x}px`,
-			...C
-		},
-		...w,
-		children: [
-			/* @__PURE__ */ c("div", {
-				className: e("min-w-0 min-h-0 overflow-auto", F ? "transition-none" : "transition-[width,height] duration-150 ease-out"),
-				style: {
-					[J ? "width" : "height"]: `${z}%`,
-					flexShrink: 0,
-					flexGrow: 0
-				},
-				children: K
-			}),
-			!j && /* @__PURE__ */ c("div", {
-				role: "separator",
-				tabIndex: 0,
-				"aria-valuenow": Math.round(z),
-				"aria-valuemin": D,
-				"aria-valuemax": O,
-				"aria-orientation": J ? "horizontal" : "vertical",
-				"aria-label": "Resize panel split",
-				onPointerDown: H,
-				onPointerMove: U,
-				onPointerUp: W,
-				onPointerCancel: W,
-				onKeyDown: G,
-				className: e("relative z-20 shrink-0 flex items-center justify-center outline-none select-none group touch-none", J ? "w-4 self-stretch cursor-col-resize -mx-2" : "h-4 self-stretch w-full cursor-row-resize -my-2"),
-				children: /* @__PURE__ */ c("div", { className: e("transition-colors duration-150", J ? "w-1 self-stretch" : "h-1 self-stretch w-full", y || (F ? "bg-primary" : "bg-border group-hover:bg-primary/70 group-focus-visible:bg-primary")) })
-			}),
-			/* @__PURE__ */ c("div", {
-				className: e("min-w-0 min-h-0 overflow-auto", F ? "transition-none" : "transition-[width,height] duration-150 ease-out"),
-				style: {
-					[J ? "width" : "height"]: `${100 - z}%`,
-					flex: 1
-				},
-				children: q
-			})
-		]
-	});
-});
-u.displayName = "ResizableScreen";
-//#endregion
-export { u as ResizableScreen };