@als-tp/als-react-ts-ui 0.3.1 → 0.5.0

package/dist/components/ALSRadio/ALSRadio.d.ts

@@ -0,0 +1,133 @@
+import * as React from "react";
+/**
+ * Size variants for the radio component
+ */
+export type ALSRadioSize = "sm" | "md" | "lg";
+/**
+ * Color variants for the radio component
+ */
+export type ALSRadioVariant = "primary" | "secondary" | "success" | "error";
+/**
+ * Orientation for the radio group layout
+ */
+export type ALSRadioOrientation = "horizontal" | "vertical";
+/**
+ * Props for individual radio option
+ */
+export interface ALSRadioOption {
+    /** Unique value for the radio option */
+    value: string;
+    /** Display label for the radio option */
+    label: React.ReactNode;
+    /** Whether this option is disabled */
+    disabled?: boolean;
+    /** Optional description text */
+    description?: string;
+}
+/**
+ * Props for ALSRadioGroup - the root container component
+ */
+export interface ALSRadioGroupProps {
+    /** Array of radio options to render */
+    options: ALSRadioOption[];
+    /** The name attribute for the radio group (used in forms) */
+    name?: string;
+    /** Default selected value (uncontrolled) */
+    defaultValue?: string;
+    /** Controlled selected value */
+    value?: string;
+    /** Callback when value changes */
+    onValueChange?: (value: string) => void;
+    /** Size variant */
+    size?: ALSRadioSize;
+    /** Color variant */
+    variant?: ALSRadioVariant;
+    /** Layout orientation */
+    orientation?: ALSRadioOrientation;
+    /** Whether the entire group is disabled */
+    disabled?: boolean;
+    /** Whether the group is read-only */
+    readOnly?: boolean;
+    /** Whether a selection is required */
+    required?: boolean;
+    /** Optional group label */
+    label?: React.ReactNode;
+    /** Optional error message */
+    error?: string;
+    /** Optional helper text */
+    helperText?: string;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional inline styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Props for standalone ALSRadioItem component
+ */
+export interface ALSRadioItemProps {
+    /** Unique value for the radio */
+    value: string;
+    /** Display label */
+    label?: React.ReactNode;
+    /** Optional description */
+    description?: string;
+    /** Whether disabled */
+    disabled?: boolean;
+    /** Size variant */
+    size?: ALSRadioSize;
+    /** Color variant */
+    variant?: ALSRadioVariant;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional inline styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Props for the radio indicator (the visual checkmark)
+ */
+export interface ALSRadioIndicatorProps {
+    /** Size variant */
+    size?: ALSRadioSize;
+    /** Color variant */
+    variant?: ALSRadioVariant;
+    /** Additional CSS class */
+    className?: string;
+    /** Additional inline styles */
+    style?: React.CSSProperties;
+}
+/**
+ * ALSRadioIndicator - The visual indicator inside the radio button
+ */
+export declare const ALSRadioIndicator: React.ForwardRefExoticComponent<ALSRadioIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * ALSRadioItem - Individual radio button with label
+ */
+export declare const ALSRadioItem: React.ForwardRefExoticComponent<ALSRadioItemProps & React.RefAttributes<HTMLLabelElement>>;
+/**
+ * ALSRadioGroup - The main container component for radio buttons
+ *
+ * @example
+ * ```tsx
+ * <ALSRadioGroup
+ *   label="Select your preference"
+ *   options={[
+ *     { value: 'option1', label: 'Option 1' },
+ *     { value: 'option2', label: 'Option 2' },
+ *   ]}
+ *   defaultValue="option1"
+ *   onValueChange={(value) => console.log(value)}
+ * />
+ * ```
+ */
+export declare const ALSRadioGroupRoot: React.FC<ALSRadioGroupProps>;
+/**
+ * ALSRadioRoot - Wrapper around RadioGroup from Base UI for custom composition
+ */
+export declare const ALSRadioRoot: React.ForwardRefExoticComponent<Omit<import("@base-ui-components/react/radio-group").RadioGroupProps & React.RefAttributes<HTMLDivElement> & {
+    size?: ALSRadioSize;
+    variant?: ALSRadioVariant;
+    orientation?: ALSRadioOrientation;
+    className?: string;
+    children?: React.ReactNode;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ALSRadio.d.ts.map

package/dist/components/ALSRadio/ALSRadio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ALSRadio.d.ts","sourceRoot":"","sources":["../../../src/components/ALSRadio/ALSRadio.tsx"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,43 @@
-export interface ALSRadioProps {
-}
-export declare function ALSRadio(props: ALSRadioProps): import("react/jsx-runtime").JSX.Element;
-export default ALSRadio;
+import type { ALSRadioGroupProps, ALSRadioItemProps, ALSRadioIndicatorProps, ALSRadioOption, ALSRadioSize, ALSRadioVariant, ALSRadioOrientation } from "./ALSRadio";
+/**
+ * ALSRadio - Radio button component system
+ *
+ * @example Simple usage with RadioGroup
+ * ```tsx
+ * <ALSRadio.Group
+ *   label="Select your preference"
+ *   options={[
+ *     { value: 'option1', label: 'Option 1' },
+ *     { value: 'option2', label: 'Option 2' },
+ *   ]}
+ *   defaultValue="option1"
+ *   onValueChange={(value) => console.log(value)}
+ * />
+ * ```
+ *
+ * @example Compound component usage
+ * ```tsx
+ * <ALSRadio.Root defaultValue="option1">
+ *   <ALSRadio.Item value="option1" label="Option 1" />
+ *   <ALSRadio.Item value="option2" label="Option 2" />
+ * </ALSRadio.Root>
+ * ```
+ */
+export declare const ALSRadio: {
+    /** Complete RadioGroup with options array - simplest usage */
+    Group: import("react").FC<ALSRadioGroupProps>;
+    /** Base RadioGroup for custom composition */
+    Root: import("react").ForwardRefExoticComponent<Omit<import("@base-ui-components/react/radio-group").RadioGroupProps & import("react").RefAttributes<HTMLDivElement> & {
+        size?: ALSRadioSize;
+        variant?: ALSRadioVariant;
+        orientation?: ALSRadioOrientation;
+        className?: string;
+        children?: React.ReactNode;
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    /** Individual radio item with label and description */
+    Item: import("react").ForwardRefExoticComponent<ALSRadioItemProps & import("react").RefAttributes<HTMLLabelElement>>;
+    /** Visual indicator inside the radio button */
+    Indicator: import("react").ForwardRefExoticComponent<ALSRadioIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+};
+export type { ALSRadioGroupProps, ALSRadioItemProps, ALSRadioIndicatorProps, ALSRadioOption, ALSRadioSize, ALSRadioVariant, ALSRadioOrientation, };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ALSRadio/index.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;CAE7B;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAM5C;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ALSRadio/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACR,kBAAkB,EAClB,iBAAiB,EACjB,sBAAsB,EACtB,cAAc,EACd,YAAY,EACZ,eAAe,EACf,mBAAmB,EACtB,MAAM,YAAY,CAAC;AAEpB;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,QAAQ;IACjB,8DAA8D;;IAE9D,6CAA6C;;;;;;;;IAE7C,uDAAuD;;IAEvD,+CAA+C;;CAElD,CAAC;AAEF,YAAY,EACR,kBAAkB,EAClB,iBAAiB,EACjB,sBAAsB,EACtB,cAAc,EACd,YAAY,EACZ,eAAe,EACf,mBAAmB,GACtB,CAAC"}

package/dist/components/ALSRadio/index.module.css

@@ -0,0 +1 @@
+._group_1qx6w_10{display:flex;flex-direction:column;gap:var(--space-sm)}._group--error_1qx6w_16 ._radio_1qx6w_16{border-color:var(--color-als-red-500)}._groupLabel_1qx6w_24{font-family:var(--font-family-base);font-weight:var(--font-weight-semibold);color:var(--text-primary);display:flex;align-items:center;gap:var(--space-xs)}._groupLabel--sm_1qx6w_33{font-size:var(--font-small)}._groupLabel--md_1qx6w_37{font-size:var(--font-base)}._groupLabel--lg_1qx6w_41{font-size:var(--font-h6)}._required_1qx6w_45{color:var(--color-als-red-500);font-weight:var(--font-weight-bold)}._radioGroup_1qx6w_54{display:flex;gap:var(--space-sm)}._radioGroup--vertical_1qx6w_59{flex-direction:column;align-items:flex-start}._radioGroup--horizontal_1qx6w_64{flex-direction:row;flex-wrap:wrap;align-items:center}._item_1qx6w_74{display:flex;align-items:flex-start;gap:var(--space-sm);cursor:pointer;-webkit-user-select:none;user-select:none;transition:opacity var(--transition-fast)}._item--sm_1qx6w_83{gap:var(--space-xs)}._item--md_1qx6w_87{gap:var(--space-sm)}._item--lg_1qx6w_91{gap:var(--space-md)}._item--disabled_1qx6w_95{cursor:not-allowed;opacity:.5}._radio_1qx6w_16{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);border:2px solid var(--border-primary);background-color:var(--color-als-white);padding:0;margin:0;flex-shrink:0;transition:background-color var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast)}._radio--sm_1qx6w_121{width:1rem;height:1rem}._radio--md_1qx6w_126{width:1.25rem;height:1.25rem}._radio--lg_1qx6w_131{width:1.5rem;height:1.5rem}._radio_1qx6w_16[data-unchecked]{border-color:var(--border-primary);background-color:var(--color-als-white)}._radio--primary_1qx6w_143[data-checked]{border-color:var(--color-als-aux-blue-500);background-color:var(--color-als-aux-blue-500)}._radio--secondary_1qx6w_149[data-checked]{border-color:var(--color-als-dark-blue);background-color:var(--color-als-dark-blue)}._radio--success_1qx6w_155[data-checked]{border-color:var(--color-als-green-900);background-color:var(--color-als-green-900)}._radio--error_1qx6w_161[data-checked]{border-color:var(--color-als-red-500);background-color:var(--color-als-red-500)}._radio_1qx6w_16:hover:not([data-disabled]){border-color:var(--color-als-aux-blue-500)}._radio--secondary_1qx6w_149:hover:not([data-disabled]){border-color:var(--color-als-dark-blue)}._radio--success_1qx6w_155:hover:not([data-disabled]){border-color:var(--color-als-green-900)}._radio--error_1qx6w_161:hover:not([data-disabled]){border-color:var(--color-als-red-500)}._radio_1qx6w_16:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-als-white),0 0 0 4px var(--color-als-aux-blue-500)}._radio--secondary_1qx6w_149:focus-visible{box-shadow:0 0 0 2px var(--color-als-white),0 0 0 4px var(--color-als-dark-blue)}._radio--success_1qx6w_155:focus-visible{box-shadow:0 0 0 2px var(--color-als-white),0 0 0 4px var(--color-als-green-900)}._radio--error_1qx6w_161:focus-visible{box-shadow:0 0 0 2px var(--color-als-white),0 0 0 4px var(--color-als-red-500)}._radio_1qx6w_16[data-disabled]{cursor:not-allowed;opacity:.5}._indicator_1qx6w_215{display:flex;align-items:center;justify-content:center;width:100%;height:100%;opacity:0;transform:scale(0);transition:opacity var(--transition-fast),transform var(--transition-fast)}._indicator_1qx6w_215[data-checked]{opacity:1;transform:scale(1)}._indicator_1qx6w_215:before{content:"";border-radius:var(--radius-full);background-color:var(--color-als-white)}._indicator--sm_1qx6w_238:before{width:.375rem;height:.375rem}._indicator--md_1qx6w_243:before{width:.5rem;height:.5rem}._indicator--lg_1qx6w_248:before{width:.625rem;height:.625rem}._content_1qx6w_257{display:flex;flex-direction:column;gap:2px;padding-top:1px}._label_1qx6w_264{font-family:var(--font-family-base);font-weight:var(--font-weight-regular);color:var(--text-primary);line-height:var(--line-height-tight)}._label--sm_1qx6w_271{font-size:var(--font-small)}._label--md_1qx6w_275{font-size:var(--font-base)}._label--lg_1qx6w_279{font-size:var(--font-h6)}._description_1qx6w_283{font-family:var(--font-family-base);font-weight:var(--font-weight-regular);color:var(--text-secondary);line-height:var(--line-height-base)}._description--sm_1qx6w_290{font-size:var(--font-tiny)}._description--md_1qx6w_294{font-size:var(--font-small)}._description--lg_1qx6w_298{font-size:var(--font-base)}._helperText_1qx6w_306{font-family:var(--font-family-base);font-size:var(--font-small);color:var(--text-secondary);margin-top:var(--space-xs)}._errorText_1qx6w_313{font-family:var(--font-family-base);font-size:var(--font-small);color:var(--color-als-red-500);margin-top:var(--space-xs);font-weight:var(--font-weight-regular)}

package/dist/components/ALSScrollArea/ALSScrollArea.d.ts

@@ -0,0 +1,133 @@
+import React from "react";
+/**
+ * Orientation options for scrollbars
+ */
+export type ALSScrollAreaOrientation = "horizontal" | "vertical";
+/**
+ * Size variants for the scroll area
+ */
+export type ALSScrollAreaSize = "sm" | "md" | "lg" | "full";
+/**
+ * Variant options for visual styling
+ */
+export type ALSScrollAreaVariant = "default" | "subtle" | "bordered";
+/**
+ * Props for the root scroll area component
+ */
+export interface ALSScrollAreaRootProps {
+    /** Content to render inside the scroll area */
+    children: React.ReactNode;
+    /** Additional CSS class names */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Size variant affecting dimensions */
+    size?: ALSScrollAreaSize;
+    /** Visual style variant */
+    variant?: ALSScrollAreaVariant;
+    /** Whether to show gradient fade at scroll edges */
+    showFade?: boolean;
+    /** Custom color for the fade gradient (CSS color value) */
+    fadeColor?: string;
+    /** Threshold in pixels before overflow edge attributes are applied */
+    overflowEdgeThreshold?: number;
+}
+/**
+ * Props for the viewport component
+ */
+export interface ALSScrollAreaViewportProps {
+    /** Content to render inside the viewport */
+    children: React.ReactNode;
+    /** Additional CSS class names */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Props for the content wrapper component
+ */
+export interface ALSScrollAreaContentProps {
+    /** Content to render */
+    children: React.ReactNode;
+    /** Additional CSS class names */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Props for the scrollbar component
+ */
+export interface ALSScrollAreaScrollbarProps {
+    /** Content (typically the Thumb component) */
+    children?: React.ReactNode;
+    /** Additional CSS class names */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Scrollbar orientation */
+    orientation?: ALSScrollAreaOrientation;
+    /** Whether to keep the scrollbar mounted when not scrollable */
+    keepMounted?: boolean;
+}
+/**
+ * Props for the scrollbar thumb component
+ */
+export interface ALSScrollAreaThumbProps {
+    /** Additional CSS class names */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Props for the corner component
+ */
+export interface ALSScrollAreaCornerProps {
+    /** Additional CSS class names */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Root component that wraps the entire scroll area.
+ * Provides context for child components.
+ *
+ * @example
+ * ```tsx
+ * <ALSScrollArea.Root size="md" variant="bordered">
+ *   <ALSScrollArea.Viewport>
+ *     <ALSScrollArea.Content>
+ *       {content}
+ *     </ALSScrollArea.Content>
+ *   </ALSScrollArea.Viewport>
+ *   <ALSScrollArea.Scrollbar>
+ *     <ALSScrollArea.Thumb />
+ *   </ALSScrollArea.Scrollbar>
+ * </ALSScrollArea.Root>
+ * ```
+ */
+export declare const ALSScrollAreaRoot: React.ForwardRefExoticComponent<ALSScrollAreaRootProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The actual scrollable container of the scroll area.
+ * Must contain the Content component.
+ */
+export declare const ALSScrollAreaViewport: React.ForwardRefExoticComponent<ALSScrollAreaViewportProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Container for the content of the scroll area.
+ * Should be placed inside the Viewport component.
+ */
+export declare const ALSScrollAreaContent: React.ForwardRefExoticComponent<ALSScrollAreaContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A vertical or horizontal scrollbar for the scroll area.
+ * Contains the Thumb component.
+ */
+export declare const ALSScrollAreaScrollbar: React.ForwardRefExoticComponent<ALSScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The draggable part of the scrollbar that indicates the current scroll position.
+ */
+export declare const ALSScrollAreaThumb: React.ForwardRefExoticComponent<ALSScrollAreaThumbProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A small rectangular area that appears at the intersection
+ * of horizontal and vertical scrollbars.
+ */
+export declare const ALSScrollAreaCorner: React.ForwardRefExoticComponent<ALSScrollAreaCornerProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ALSScrollArea.d.ts.map

package/dist/components/ALSScrollArea/ALSScrollArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ALSScrollArea.d.ts","sourceRoot":"","sources":["../../../src/components/ALSScrollArea/ALSScrollArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AASf;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG,YAAY,GAAG,UAAU,CAAC;AAEjE;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE5D;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAiBrE;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACnC,+CAA+C;IAC/C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,wCAAwC;IACxC,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAClC;AAED;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACvC,4CAA4C;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACtC,wBAAwB;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,2BAA2B;IACxC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,4BAA4B;IAC5B,WAAW,CAAC,EAAE,wBAAwB,CAAC;IACvC,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACpC,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACrC,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC/B;AA2BD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,iBAAiB,+FAwH5B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,qBAAqB,mGA6ChC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,oBAAoB,kGAoB/B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,sBAAsB,oGAgCjC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,kBAAkB,gGAkB7B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,mBAAmB,iGAkB9B,CAAC"}

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

@@ -1,5 +1,34 @@
-export interface ALSScrollAreaProps {
-}
-export declare function ALSScrollArea(props: ALSScrollAreaProps): import("react/jsx-runtime").JSX.Element;
-export default ALSScrollArea;
+import type { ALSScrollAreaRootProps, ALSScrollAreaViewportProps, ALSScrollAreaContentProps, ALSScrollAreaScrollbarProps, ALSScrollAreaThumbProps, ALSScrollAreaCornerProps, ALSScrollAreaOrientation, ALSScrollAreaSize, ALSScrollAreaVariant } from "./ALSScrollArea";
+/**
+ * ALSScrollArea - A native scroll container with custom scrollbars
+ *
+ * @example
+ * ```tsx
+ * <ALSScrollArea.Root size="md" variant="bordered">
+ *   <ALSScrollArea.Viewport>
+ *     <ALSScrollArea.Content>
+ *       {yourContent}
+ *     </ALSScrollArea.Content>
+ *   </ALSScrollArea.Viewport>
+ *   <ALSScrollArea.Scrollbar>
+ *     <ALSScrollArea.Thumb />
+ *   </ALSScrollArea.Scrollbar>
+ * </ALSScrollArea.Root>
+ * ```
+ */
+export declare const ALSScrollArea: {
+    /** Root container for the scroll area */
+    Root: import("react").ForwardRefExoticComponent<ALSScrollAreaRootProps & import("react").RefAttributes<HTMLDivElement>>;
+    /** Scrollable viewport container */
+    Viewport: import("react").ForwardRefExoticComponent<ALSScrollAreaViewportProps & import("react").RefAttributes<HTMLDivElement>>;
+    /** Content wrapper inside the viewport */
+    Content: import("react").ForwardRefExoticComponent<ALSScrollAreaContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    /** Scrollbar track (vertical or horizontal) */
+    Scrollbar: import("react").ForwardRefExoticComponent<ALSScrollAreaScrollbarProps & import("react").RefAttributes<HTMLDivElement>>;
+    /** Draggable scrollbar thumb */
+    Thumb: import("react").ForwardRefExoticComponent<ALSScrollAreaThumbProps & import("react").RefAttributes<HTMLDivElement>>;
+    /** Corner element for both scrollbars */
+    Corner: import("react").ForwardRefExoticComponent<ALSScrollAreaCornerProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export type { ALSScrollAreaRootProps, ALSScrollAreaViewportProps, ALSScrollAreaContentProps, ALSScrollAreaScrollbarProps, ALSScrollAreaThumbProps, ALSScrollAreaCornerProps, ALSScrollAreaOrientation, ALSScrollAreaSize, ALSScrollAreaVariant, };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ALSScrollArea/index.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,kBAAkB;CAElC;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAMtD;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ALSScrollArea/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EACR,sBAAsB,EACtB,0BAA0B,EAC1B,yBAAyB,EACzB,2BAA2B,EAC3B,uBAAuB,EACvB,wBAAwB,EACxB,wBAAwB,EACxB,iBAAiB,EACjB,oBAAoB,EACvB,MAAM,iBAAiB,CAAC;AAEzB;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,aAAa;IACtB,yCAAyC;;IAEzC,oCAAoC;;IAEpC,0CAA0C;;IAE1C,+CAA+C;;IAE/C,gCAAgC;;IAEhC,yCAAyC;;CAE5C,CAAC;AAEF,YAAY,EACR,sBAAsB,EACtB,0BAA0B,EAC1B,yBAAyB,EACzB,2BAA2B,EAC3B,uBAAuB,EACvB,wBAAwB,EACxB,wBAAwB,EACxB,iBAAiB,EACjB,oBAAoB,GACvB,CAAC"}

package/dist/components/ALSScrollArea/index.module.css

@@ -0,0 +1 @@
+._root_169v1_9{position:relative;box-sizing:border-box;width:100%;display:flex;flex-direction:column;overflow:hidden}._root--sm_169v1_19{max-height:10rem}._root--md_169v1_23{max-height:16rem}._root--lg_169v1_27{max-height:24rem}._root--full_169v1_31{height:100%;max-height:100%}._root--subtle_169v1_41{background-color:var(--color-als-gray-100);border-radius:var(--radius-md)}._root--bordered_169v1_46{border:1px solid var(--border-primary);border-radius:var(--radius-md)}._viewport_169v1_54{height:100%;overflow:auto;overscroll-behavior:contain;border-radius:inherit}._viewport_169v1_54:focus-visible{outline:2px solid var(--color-als-blue-500);outline-offset:-2px}._viewport--subtle_169v1_71{background-color:var(--color-als-gray-100)}._fadeOverlay_169v1_82{position:absolute;left:0;right:0;height:2.5rem;pointer-events:none;z-index:var(--z-base);transition:opacity var(--transition-fast)}._fadeOverlay--top_169v1_92{top:0;background:linear-gradient(to bottom,var(--fade-color, var(--color-als-gray-100)),transparent);border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}._fadeOverlay--bottom_169v1_104{bottom:0;background:linear-gradient(to top,var(--fade-color, var(--color-als-gray-100)),transparent);border-radius:inherit;border-top-left-radius:0;border-top-right-radius:0}._content_169v1_119{display:flex;flex-direction:column;gap:var(--space-md)}._content--sm_169v1_126{padding:var(--space-sm)}._content--md_169v1_130{padding:var(--space-md)}._content--lg_169v1_134{padding:var(--space-lg)}._content--full_169v1_138{padding:var(--space-md)}._scrollbar_169v1_145{display:flex;position:relative;background-color:var(--color-als-gray-500);border-radius:var(--radius-full);opacity:0;transition:opacity var(--transition-base);pointer-events:none}._scrollbar_169v1_145[data-orientation=vertical]{width:.375rem;margin:var(--space-sm)}._scrollbar_169v1_145[data-orientation=horizontal]{height:.375rem;margin:var(--space-sm)}._scrollbar_169v1_145:before{content:"";position:absolute}._scrollbar_169v1_145[data-orientation=vertical]:before{width:1.25rem;height:100%;left:50%;transform:translate(-50%)}._scrollbar_169v1_145[data-orientation=horizontal]:before{width:100%;height:1.25rem;top:50%;transform:translateY(-50%)}._scrollbar_169v1_145[data-scrolling]{transition-duration:0ms}._scrollbar_169v1_145[data-hovering],._scrollbar_169v1_145[data-scrolling]{opacity:1;pointer-events:auto}._scrollbar--default_169v1_198{background-color:var(--color-als-gray-500)}._scrollbar--subtle_169v1_202{background-color:transparent}._scrollbar--bordered_169v1_206{background-color:var(--color-als-gray-500)}._thumb_169v1_213{width:100%;border-radius:inherit;background-color:var(--color-als-aux-blue-500);transition:background-color var(--transition-fast)}._thumb_169v1_213:hover{background-color:var(--color-als-aux-blue-800)}._thumb_169v1_213:active{background-color:var(--color-als-aux-blue-900)}._thumb--default_169v1_229{background-color:var(--color-als-aux-blue-500)}._thumb--default_169v1_229:hover{background-color:var(--color-als-aux-blue-800)}._thumb--subtle_169v1_237{background-color:var(--color-als-gray-900)}._thumb--subtle_169v1_237:hover{background-color:var(--color-als-dark-blue)}._thumb--bordered_169v1_245{background-color:var(--color-als-aux-blue-500)}._thumb--bordered_169v1_245:hover{background-color:var(--color-als-aux-blue-800)}._corner_169v1_256,._corner--default_169v1_260,._corner--subtle_169v1_261,._corner--bordered_169v1_262{background-color:transparent}

package/dist/components/ALSSelect/index.module.css

@@ -0,0 +1 @@
+._trigger_krl6a_1{display:inline-flex;align-items:center;justify-content:space-between;min-width:12rem;padding:var(--space-sm) var(--space-md);font-family:var(--font-family-base);font-size:var(--font-base);line-height:var(--line-height-base);color:var(--text-primary);background-color:var(--color-als-white);border:1px solid var(--border-primary);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);outline:none;-webkit-user-select:none;user-select:none}._trigger_krl6a_1:hover{border-color:var(--color-als-blue-500)}._trigger_krl6a_1:focus-visible{border-color:var(--color-als-blue-500);box-shadow:0 0 0 2px var(--color-als-blue-100)}._trigger_krl6a_1[data-state=open]{border-color:var(--color-als-blue-500)}._trigger_krl6a_1[data-disabled]{color:var(--color-als-gray-900);background-color:var(--color-als-gray-100);border-color:var(--color-als-gray-500);cursor:not-allowed}._icon_krl6a_40{display:flex;align-items:center;justify-content:center;margin-left:var(--space-sm);color:var(--text-secondary)}._popup_krl6a_48{z-index:var(--z-dropdown);min-width:var(--anchor-width);padding:var(--space-xs);margin-top:var(--space-xs);background-color:var(--color-als-white);border:1px solid var(--border-secondary);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);outline:none;transform-origin:var(--transform-origin)}._popup_krl6a_48[data-state=open]{animation:_fadeIn_krl6a_1 var(--transition-duration-fast) ease-out}._popup_krl6a_48[data-state=closed]{animation:_fadeOut_krl6a_1 var(--transition-duration-fast) ease-in}._item_krl6a_69{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md);font-family:var(--font-family-base);font-size:var(--font-base);color:var(--text-primary);cursor:pointer;border-radius:var(--radius-sm);outline:none;-webkit-user-select:none;user-select:none;transition:background-color var(--transition-fast)}._item_krl6a_69[data-highlighted]{background-color:var(--color-als-gray-100);color:var(--color-als-blue-900)}._item_krl6a_69[data-selected]{font-weight:var(--font-weight-semibold);color:var(--color-als-blue-900)}._item_krl6a_69[data-disabled]{color:var(--color-als-gray-900);cursor:not-allowed}._itemIndicator_krl6a_99{display:flex;align-items:center;justify-content:center;margin-left:var(--space-sm);color:var(--color-als-blue-500)}._group_krl6a_107{padding:var(--space-xs) 0}._label_krl6a_111{padding:var(--space-xs) var(--space-md);font-size:var(--font-small);font-weight:var(--font-weight-semibold);color:var(--text-secondary)}._separator_krl6a_118{height:1px;margin:var(--space-xs) 0;background-color:var(--border-secondary)}@keyframes _fadeIn_krl6a_1{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes _fadeOut_krl6a_1{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}

package/dist/components/ALSSeparator/ALSSeparator.d.ts

@@ -0,0 +1,87 @@
+import React from "react";
+/**
+ * Orientation options for the separator
+ */
+export type ALSSeparatorOrientation = "horizontal" | "vertical";
+/**
+ * Visual variant options for the separator
+ */
+export type ALSSeparatorVariant = "solid" | "dashed" | "dotted";
+/**
+ * Size options for the separator thickness
+ */
+export type ALSSeparatorSize = "sm" | "md" | "lg";
+/**
+ * Color options for the separator
+ */
+export type ALSSeparatorColor = "default" | "subtle" | "strong" | "primary";
+/**
+ * Props for the ALSSeparator component
+ */
+export interface ALSSeparatorProps {
+    /**
+     * The orientation of the separator
+     * @default 'horizontal'
+     */
+    orientation?: ALSSeparatorOrientation;
+    /**
+     * The visual style variant of the separator
+     * @default 'solid'
+     */
+    variant?: ALSSeparatorVariant;
+    /**
+     * The thickness of the separator
+     * @default 'sm'
+     */
+    size?: ALSSeparatorSize;
+    /**
+     * The color intensity of the separator
+     * @default 'default'
+     */
+    color?: ALSSeparatorColor;
+    /**
+     * Whether to add spacing around the separator
+     * @default false
+     */
+    withSpacing?: boolean;
+    /**
+     * Optional label text to display in the middle of the separator
+     */
+    label?: string;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Additional inline styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Decorative separators are hidden from screen readers
+     * @default true
+     */
+    decorative?: boolean;
+}
+/**
+ * ALSSeparator - A visual divider component for separating content sections.
+ *
+ * This component wraps Base UI's Separator with ALS design system styling,
+ * providing consistent visual separation between content areas.
+ *
+ * @example
+ * ```tsx
+ * // Basic horizontal separator
+ * <ALSSeparator />
+ *
+ * // Vertical separator
+ * <ALSSeparator orientation="vertical" />
+ *
+ * // Separator with label
+ * <ALSSeparator label="Or continue with" />
+ *
+ * // Dashed separator with spacing
+ * <ALSSeparator variant="dashed" withSpacing />
+ * ```
+ */
+export declare const ALSSeparator: React.ForwardRefExoticComponent<ALSSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ALSSeparator.d.ts.map

package/dist/components/ALSSeparator/ALSSeparator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ALSSeparator.d.ts","sourceRoot":"","sources":["../../../src/components/ALSSeparator/ALSSeparator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,YAAY,GAAG,UAAU,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElD;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE5E;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAC9B;;;OAGG;IACH,WAAW,CAAC,EAAE,uBAAuB,CAAC;IAEtC;;;OAGG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAE9B;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IAExB;;;OAGG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAE1B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,YAAY,0FAyExB,CAAC"}

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

@@ -1,5 +1,5 @@
-export interface ALSSeparatorProps {
-}
-export declare function ALSSeparator(props: ALSSeparatorProps): import("react/jsx-runtime").JSX.Element;
-export default ALSSeparator;
+import { ALSSeparator } from "./ALSSeparator";
+import type { ALSSeparatorProps, ALSSeparatorOrientation, ALSSeparatorVariant, ALSSeparatorSize, ALSSeparatorColor } from "./ALSSeparator";
+export { ALSSeparator };
+export type { ALSSeparatorProps, ALSSeparatorOrientation, ALSSeparatorVariant, ALSSeparatorSize, ALSSeparatorColor, };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ALSSeparator/index.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,iBAAiB;CAEjC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAMpD;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ALSSeparator/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EACR,iBAAiB,EACjB,uBAAuB,EACvB,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,EACpB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,CAAC;AAExB,YAAY,EACR,iBAAiB,EACjB,uBAAuB,EACvB,mBAAmB,EACnB,gBAAgB,EAChB,iBAAiB,GACpB,CAAC"}

package/dist/components/ALSSeparator/index.module.css

@@ -0,0 +1 @@
+._separator_1xnsi_6{border:none;background-color:var(--border-primary);flex-shrink:0}._separator--horizontal_1xnsi_13{width:100%;height:1px}._separator--vertical_1xnsi_18{width:1px;height:auto;align-self:stretch}._separator--horizontal_1xnsi_13._separator--sm_1xnsi_25{height:1px}._separator--horizontal_1xnsi_13._separator--md_1xnsi_29{height:2px}._separator--horizontal_1xnsi_13._separator--lg_1xnsi_33{height:3px}._separator--vertical_1xnsi_18._separator--sm_1xnsi_25{width:1px}._separator--vertical_1xnsi_18._separator--md_1xnsi_29{width:2px}._separator--vertical_1xnsi_18._separator--lg_1xnsi_33{width:3px}._separator--solid_1xnsi_51{background-color:var(--border-primary);border-style:none}._separator--dashed_1xnsi_56{background-color:transparent;border-color:var(--border-primary)}._separator--dashed_1xnsi_56._separator--horizontal_1xnsi_13{border-top-style:dashed;border-top-width:1px;height:0}._separator--dashed_1xnsi_56._separator--horizontal_1xnsi_13._separator--md_1xnsi_29{border-top-width:2px}._separator--dashed_1xnsi_56._separator--horizontal_1xnsi_13._separator--lg_1xnsi_33{border-top-width:3px}._separator--dashed_1xnsi_56._separator--vertical_1xnsi_18{border-left-style:dashed;border-left-width:1px;width:0}._separator--dashed_1xnsi_56._separator--vertical_1xnsi_18._separator--md_1xnsi_29{border-left-width:2px}._separator--dashed_1xnsi_56._separator--vertical_1xnsi_18._separator--lg_1xnsi_33{border-left-width:3px}._separator--dotted_1xnsi_89{background-color:transparent;border-color:var(--border-primary)}._separator--dotted_1xnsi_89._separator--horizontal_1xnsi_13{border-top-style:dotted;border-top-width:1px;height:0}._separator--dotted_1xnsi_89._separator--horizontal_1xnsi_13._separator--md_1xnsi_29{border-top-width:2px}._separator--dotted_1xnsi_89._separator--horizontal_1xnsi_13._separator--lg_1xnsi_33{border-top-width:3px}._separator--dotted_1xnsi_89._separator--vertical_1xnsi_18{border-left-style:dotted;border-left-width:1px;width:0}._separator--dotted_1xnsi_89._separator--vertical_1xnsi_18._separator--md_1xnsi_29{border-left-width:2px}._separator--dotted_1xnsi_89._separator--vertical_1xnsi_18._separator--lg_1xnsi_33{border-left-width:3px}._separator--default_1xnsi_123{background-color:var(--border-primary);border-color:var(--border-primary)}._separator--subtle_1xnsi_128{background-color:var(--border-secondary);border-color:var(--border-secondary)}._separator--strong_1xnsi_133{background-color:var(--color-als-gray-900);border-color:var(--color-als-gray-900)}._separator--primary_1xnsi_138{background-color:var(--color-als-blue-500);border-color:var(--color-als-blue-500)}._separator--with-spacing_1xnsi_144._separator--horizontal_1xnsi_13{margin-top:var(--space-md);margin-bottom:var(--space-md)}._separator--with-spacing_1xnsi_144._separator--vertical_1xnsi_18{margin-left:var(--space-md);margin-right:var(--space-md)}._separatorContainer_1xnsi_155{display:flex;align-items:center;width:100%;gap:var(--space-md)}._separatorLine_1xnsi_162{flex:1;height:1px;border:none}._separatorLabel_1xnsi_168{font-family:var(--font-family-base);font-size:var(--font-small);font-weight:var(--font-weight-regular);color:var(--text-secondary);white-space:nowrap;padding:0 var(--space-xs)}._separator--with-label_1xnsi_178{margin-top:var(--space-md);margin-bottom:var(--space-md)}