@1001tv/manara 0.0.3-beta.0

package/dist/components/FormInputs/OtpInput/OtpInput.variants.d.ts

@@ -0,0 +1,24 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * OTP Slot variants using CVA (Class Variance Authority)
+ * Based on Manara Design System specifications
+ *
+ * Each OTP slot is a square input cell that holds a single digit.
+ *
+ * Sizes (from Figma):
+ * - default: 40×40, padding 12px, border-radius 12px
+ * - medium:  48×48, padding 12px, border-radius 16px
+ * - large:   56×56, padding 16px, border-radius 16px
+ *
+ * States:
+ * - default:  surface/primary, 1px border/primary
+ * - focus:    surface/accent, 2px border/focused (green)
+ * - invalid:  surface/primary, 2px border/critical (red)
+ * - disabled: surface/disabled, no visible border
+ */
+export declare const otpSlotVariants: (props?: ({
+    size?: "default" | "medium" | "large" | null | undefined;
+    isInvalid?: boolean | null | undefined;
+    isDisabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type OtpSlotVariantsProps = VariantProps<typeof otpSlotVariants>;

package/dist/components/FormInputs/OtpInput/index.d.ts

@@ -0,0 +1 @@
+export { OtpInput } from './OtpInput';

package/dist/components/FormInputs/Radio/Radio.d.ts

@@ -0,0 +1,25 @@
+import { RadioProps } from './Radio.types';
+/**
+ * Radio Component - Manara Design System
+ *
+ * A controlled radio button component that allows users to select one option
+ * from a group of choices. Supports two sizes, labels with required indicators,
+ * Arabic RTL, and disabled/focus states.
+ *
+ * The parent is responsible for managing state via isChecked + onChange.
+ * For a group of radios, use native radio `name` attribute to ensure only one
+ * is selected at a time.
+ *
+ * @example
+ * ```tsx
+ * const [selected, setSelected] = useState('');
+ *
+ * <Radio name="plan" value="basic"  isChecked={selected === 'basic'}  onChange={() => setSelected('basic')}  label="Basic" />
+ * <Radio name="plan" value="pro"    isChecked={selected === 'pro'}    onChange={() => setSelected('pro')}    label="Pro" />
+ * <Radio name="plan" value="expert" isChecked={selected === 'expert'} onChange={() => setSelected('expert')} label="Expert" />
+ *
+ * // Large + Required
+ * <Radio size="large" isChecked={val} onChange={() => setVal(true)} label="Option" isRequired />
+ * ```
+ */
+export declare const Radio: import('react').ForwardRefExoticComponent<RadioProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/FormInputs/Radio/Radio.types.d.ts

@@ -0,0 +1,58 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+/**
+ * Radio size variants
+ */
+export type RadioSize = 'default' | 'large';
+/**
+ * Radio state (for styling purposes in Matrix/Storybook)
+ */
+export type RadioState = 'default' | 'hover' | 'pressed' | 'disabled' | 'focused';
+/**
+ * Props for the Radio component
+ */
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'checked' | 'onChange'> {
+    /**
+     * Size variant of the radio button
+     * @default 'default'
+     */
+    size?: RadioSize;
+    /**
+     * Whether the radio is selected. Parent manages state via onChange.
+     * @default false
+     */
+    isChecked?: boolean;
+    /**
+     * Whether the radio is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the radio is focused (for Storybook/testing)
+     * The native browser focus is already handled in the css classes.
+     * This is only for testing/storybook to trigger the focus state.
+     * @default false
+     */
+    isFocused?: boolean;
+    /**
+     * Whether to render the radio in Arabic mode (RTL)
+     * @default false
+     */
+    isArabic?: boolean;
+    /**
+     * Label text or node displayed next to the radio button
+     */
+    label?: ReactNode;
+    /**
+     * Whether to show a required asterisk after the label
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Callback fired when the radio is selected
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * Additional CSS classes to apply
+     */
+    className?: string;
+}

package/dist/components/FormInputs/Radio/Radio.variants.d.ts

@@ -0,0 +1,30 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * Radio circle variants using CVA (Class Variance Authority)
+ * Based on Manara Design System specifications
+ *
+ * The radio circle is the inner visual element (fully rounded) that indicates
+ * selection state. It sits inside a touch-target wrapper that controls the
+ * overall hit area size (32×32 default, 40×40 large).
+ *
+ * Figma specs:
+ * - Default touch target: 32×32 (space400), inner circle: 20×20 (space250), 6px padding
+ * - Large touch target:   40×40 (space500), inner circle: 24×24 (space300), 8px padding
+ *
+ * Unchecked states:
+ * - default: surface/primary (#1c1d32) + border/primary (#3b3b4e)
+ * - hover:   surface/hover (#2e2f42) + border/primary
+ * - pressed: surface/accent (#0d0e25) + border/primary
+ * - disabled: surface/disabled (#2e2f42) + border/disabled (#2e2f42)
+ *
+ * Checked states (green circle + dark inner dot):
+ * - default: surface/brand (#13cb5c) + border transparent
+ * - hover:   surface/brand-hover (#11b954)
+ * - pressed: surface/brand-pressed (#0d9041)
+ * - disabled: surface/disabled + border/disabled (same as unchecked disabled)
+ */
+export declare const radioCircleVariants: (props?: ({
+    checked?: boolean | null | undefined;
+    isDisabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type RadioCircleVariantsProps = VariantProps<typeof radioCircleVariants>;

package/dist/components/FormInputs/Radio/index.d.ts

@@ -0,0 +1 @@
+export { Radio } from './Radio';

package/dist/components/FormInputs/Switch/Switch.d.ts

@@ -0,0 +1,24 @@
+import { SwitchProps } from './Switch.types';
+/**
+ * Switch Component - Manara Design System
+ *
+ * A controlled toggle switch that allows users to turn an option on or off.
+ * Supports two sizes, labels with required indicators, Arabic RTL,
+ * and disabled/focus states.
+ *
+ * The parent is responsible for managing state via isChecked + onChange.
+ *
+ * Architecture matches Figma: a relative container holds absolutely-positioned
+ * track and knob elements with pixel-precise placement.
+ *
+ * @example
+ * ```tsx
+ * const [enabled, setEnabled] = useState(false);
+ *
+ * <Switch isChecked={enabled} onChange={setEnabled} label="Enable notifications" />
+ *
+ * // Large + Required
+ * <Switch size="large" isChecked={val} onChange={setVal} label="Accept terms" isRequired />
+ * ```
+ */
+export declare const Switch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/FormInputs/Switch/Switch.types.d.ts

@@ -0,0 +1,58 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+/**
+ * Switch size variants
+ */
+export type SwitchSize = 'default' | 'large';
+/**
+ * Switch state (for styling purposes in Matrix/Storybook)
+ */
+export type SwitchState = 'default' | 'hover' | 'pressed' | 'disabled' | 'focused';
+/**
+ * Props for the Switch component
+ */
+export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'checked' | 'onChange'> {
+    /**
+     * Size variant of the switch
+     * @default 'default'
+     */
+    size?: SwitchSize;
+    /**
+     * Whether the switch is on. Parent manages state via onChange.
+     * @default false
+     */
+    isChecked?: boolean;
+    /**
+     * Whether the switch is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the switch is focused (for Storybook/testing)
+     * The native browser focus is already handled in the css classes.
+     * This is only for testing/storybook to trigger the focus state.
+     * @default false
+     */
+    isFocused?: boolean;
+    /**
+     * Whether to render the switch in Arabic mode (RTL)
+     * @default false
+     */
+    isArabic?: boolean;
+    /**
+     * Label text or node displayed next to the switch
+     */
+    label?: ReactNode;
+    /**
+     * Whether to show a required asterisk after the label
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Callback fired when the switch is toggled
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * Additional CSS classes to apply
+     */
+    className?: string;
+}

package/dist/components/FormInputs/Switch/Switch.variants.d.ts

@@ -0,0 +1,57 @@
+import { VariantProps } from 'class-variance-authority';
+import { SwitchSize } from './Switch.types';
+import { CSSProperties } from 'react';
+/**
+ * Switch track variants using CVA (Class Variance Authority)
+ * Based on Manara Design System specifications
+ *
+ * The track is the pill-shaped background absolutely positioned within
+ * the touch-target container (48×48 default, 56×56 large).
+ *
+ * Figma specs:
+ * - Default track: 48×28, border-radius full, top 10px
+ * - Large track:   56×32, border-radius full, top 12px
+ *
+ * Unchecked states (dark track + green border):
+ * - default: surface/primary (#1c1d32) + border/brand/primary (#13cb5c)
+ * - hover:   surface/hover (#2e2f42) + border/brand/hover (#11b954)
+ * - pressed: surface/accent (#0d0e25) + border/brand/pressed (#0d9041)
+ * - disabled: icon/disabled (#575767, --color-navy-300) + no border
+ *
+ * Checked states (green track, no border):
+ * - default: surface/brand (#13cb5c)
+ * - hover:   surface/brand-hover (#11b954)
+ * - pressed: surface/brand-pressed (#0d9041)
+ * - disabled: icon/disabled (#575767, --color-navy-300) + no border
+ */
+export declare const switchTrackVariants: (props?: ({
+    checked?: boolean | null | undefined;
+    isDisabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Switch knob variants. Sibling of the track (container-relative coords).
+ * DOM box stays at the checked size; state changes animate via transform
+ * only (translateX to slide, scale to shrink for unchecked) — keeps the
+ * animation on the GPU and avoids the vertical wiggle that comes from
+ * simultaneously interpolating width/height/top.
+ */
+export declare const switchKnobVariants: (props?: ({
+    checked?: boolean | null | undefined;
+    isDisabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type SwitchTrackVariantsProps = VariantProps<typeof switchTrackVariants>;
+export type SwitchKnobVariantsProps = VariantProps<typeof switchKnobVariants>;
+/**
+ * Switch style map. Knob `base` is the DOM box (checked size, centered);
+ * `checked` / `unchecked` only set transform so the toggle animates on the GPU.
+ * Visual targets — default unchecked 22×22@(3,13), checked 24×24@(22,12);
+ * large unchecked 26×26@(3,15), checked 28×28@(26,14).
+ */
+export declare const SWITCH_STYLE_MAP: Record<SwitchSize, {
+    track: CSSProperties;
+    knob: {
+        base: CSSProperties;
+        checked: CSSProperties;
+        unchecked: CSSProperties;
+    };
+}>;

package/dist/components/FormInputs/Switch/index.d.ts

@@ -0,0 +1 @@
+export { Switch } from './Switch';

package/dist/components/FormInputs/TextArea/TextArea.d.ts

@@ -0,0 +1,24 @@
+import { TextAreaProps } from './TextArea.types';
+/**
+ * TextArea Component - Manara Design System
+ *
+ * A text area allows users to input extended text that spans multiple lines.
+ * Supports two sizes, labels with required indicators, helper text with
+ * error/success states, Arabic RTL, and disabled/focus states.
+ *
+ * The component supports both controlled (value + onChange) and uncontrolled
+ * (defaultValue + ref) usage patterns.
+ *
+ * @example
+ * ```tsx
+ * const [value, setValue] = useState('');
+ * <TextArea value={value} onChange={setValue} label="Description" placeholder="Enter description" />
+ *
+ * // With validation
+ * <TextArea value={val} onChange={setVal} label="Bio" isInvalid helperText="Too short" />
+ *
+ * // Large + Required
+ * <TextArea size="large" label="Notes" isRequired placeholder="Enter notes" />
+ * ```
+ */
+export declare const TextArea: import('react').ForwardRefExoticComponent<TextAreaProps & import('react').RefAttributes<HTMLTextAreaElement>>;

package/dist/components/FormInputs/TextArea/TextArea.types.d.ts

@@ -0,0 +1,77 @@
+import { TextareaHTMLAttributes, ReactNode } from 'react';
+/**
+ * TextArea size variants
+ */
+export type TextAreaSize = 'default' | 'large';
+/**
+ * TextArea state (for styling purposes in Matrix/Storybook)
+ */
+export type TextAreaState = 'default' | 'focus' | 'typing' | 'filled' | 'invalid' | 'disabled';
+/**
+ * Helper text state for color control
+ */
+export type TextAreaHelperState = 'default' | 'error' | 'success';
+/**
+ * Props for the TextArea component
+ */
+export interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {
+    /**
+     * Size variant of the text area
+     * @default 'default'
+     */
+    size?: TextAreaSize;
+    /**
+     * Whether the text area is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the text area is focused (for Storybook/testing).
+     * The native browser focus is already handled in the css classes.
+     * This is only for testing/storybook to trigger the focus state.
+     * @default false
+     */
+    isFocused?: boolean;
+    /**
+     * Whether the text area is in an invalid/error state.
+     * Controls the border color (critical) and overrides helperState to 'error'.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether to render the text area in Arabic mode (RTL)
+     * @default false
+     */
+    isArabic?: boolean;
+    /**
+     * Whether to show a required asterisk after the label
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Label text or node displayed above the text area
+     */
+    label?: ReactNode;
+    /**
+     * Helper text displayed below the text area
+     */
+    helperText?: ReactNode;
+    /**
+     * Controls the color of helper text when not invalid.
+     * When isInvalid is true, this is overridden to 'error'.
+     * @default 'default'
+     */
+    helperState?: TextAreaHelperState;
+    /**
+     * Optional icon displayed before helper text (16x16)
+     */
+    helperIcon?: ReactNode;
+    /**
+     * Callback fired when the value changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Additional CSS classes to apply to the outer wrapper
+     */
+    className?: string;
+}

package/dist/components/FormInputs/TextArea/TextArea.variants.d.ts

@@ -0,0 +1,25 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * TextArea container variants using CVA (Class Variance Authority)
+ * Based on Manara Design System specifications
+ *
+ * The container is the visual box that wraps the textarea element
+ * and handles all interactive states.
+ *
+ * Variants:
+ * - size: Controls height, padding, border radius
+ *   - default: 80px height, 8px padding, 12px radius
+ *   - large: 120px height, 12px horizontal / 8px vertical padding, 16px radius
+ * - isInvalid: Error state with critical border
+ * - isDisabled: Disabled state styling
+ *
+ * Interactive states (focus, hover) are handled via CSS pseudo-classes:
+ * - hover: surface-manara-hover
+ * - focus-within: surface-manara-accent + border-manara-focused (2px)
+ */
+export declare const textAreaContainerVariants: (props?: ({
+    size?: "default" | "large" | null | undefined;
+    isInvalid?: boolean | null | undefined;
+    isDisabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type TextAreaContainerVariantsProps = VariantProps<typeof textAreaContainerVariants>;

package/dist/components/FormInputs/TextArea/index.d.ts

@@ -0,0 +1 @@
+export { TextArea } from './TextArea';

package/dist/components/FormInputs/TextField/TextField.d.ts

@@ -0,0 +1,24 @@
+import { TextFieldProps } from './TextField.types';
+/**
+ * TextField Component - Manara Design System
+ *
+ * A text field allows users to input, edit, or update text.
+ * Supports three sizes, labels with required indicators, helper text with
+ * error/success states, before/after icons, Arabic RTL, and disabled/focus states.
+ *
+ * The component supports both controlled (value + onChange) and uncontrolled
+ * (defaultValue + ref) usage patterns.
+ *
+ * @example
+ * ```tsx
+ * const [value, setValue] = useState('');
+ * <TextField value={value} onChange={setValue} label="Name" placeholder="Enter name" />
+ *
+ * // With validation
+ * <TextField value={val} onChange={setVal} label="Email" isInvalid helperText="Invalid email" />
+ *
+ * // Large + Required + Icons
+ * <TextField size="large" label="Search" isRequired iconBefore={<SearchIcon />} />
+ * ```
+ */
+export declare const TextField: import('react').ForwardRefExoticComponent<TextFieldProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/FormInputs/TextField/TextField.types.d.ts

@@ -0,0 +1,85 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+/**
+ * TextField size variants
+ */
+export type TextFieldSize = 'default' | 'medium' | 'large';
+/**
+ * TextField state (for styling purposes in Matrix/Storybook)
+ */
+export type TextFieldState = 'default' | 'focus' | 'typing' | 'filled' | 'invalid' | 'disabled';
+/**
+ * Helper text state for color control
+ */
+export type TextFieldHelperState = 'default' | 'error' | 'success';
+/**
+ * Props for the TextField component
+ */
+export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
+    /**
+     * Size variant of the text field
+     * @default 'default'
+     */
+    size?: TextFieldSize;
+    /**
+     * Whether the text field is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the text field is focused (for Storybook/testing).
+     * The native browser focus is already handled in the css classes.
+     * This is only for testing/storybook to trigger the focus state.
+     * @default false
+     */
+    isFocused?: boolean;
+    /**
+     * Whether the text field is in an invalid/error state.
+     * Controls the border color (critical) and overrides helperState to 'error'.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether to render the text field in Arabic mode (RTL)
+     * @default false
+     */
+    isArabic?: boolean;
+    /**
+     * Whether to show a required asterisk after the label
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Label text or node displayed above the text field
+     */
+    label?: ReactNode;
+    /**
+     * Helper text displayed below the text field
+     */
+    helperText?: ReactNode;
+    /**
+     * Controls the color of helper text when not invalid.
+     * When isInvalid is true, this is overridden to 'error'.
+     * @default 'default'
+     */
+    helperState?: TextFieldHelperState;
+    /**
+     * Optional icon displayed before helper text (16x16)
+     */
+    helperIcon?: ReactNode;
+    /**
+     * Callback fired when the value changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Icon displayed before the input text (24x24)
+     */
+    iconBefore?: ReactNode;
+    /**
+     * Icon displayed after the input text (24x24)
+     */
+    iconAfter?: ReactNode;
+    /**
+     * Additional CSS classes to apply to the outer wrapper
+     */
+    className?: string;
+}

package/dist/components/FormInputs/TextField/TextField.variants.d.ts

@@ -0,0 +1,23 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * TextField input container variants using CVA (Class Variance Authority)
+ * Based on Manara Design System specifications
+ *
+ * The input container is the visual box that wraps the input element,
+ * optional before/after icons, and handles all interactive states.
+ *
+ * Variants:
+ * - size: Controls height, padding, border radius, and typography
+ * - isInvalid: Error state with critical border
+ * - isDisabled: Disabled state styling
+ *
+ * Interactive states (focus, hover) are handled via CSS pseudo-classes:
+ * - hover: surface-manara-hover
+ * - focus-within: surface-manara-accent + border-manara-focused (2px)
+ */
+export declare const textFieldInputVariants: (props?: ({
+    size?: "default" | "medium" | "large" | null | undefined;
+    isInvalid?: boolean | null | undefined;
+    isDisabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type TextFieldInputVariantsProps = VariantProps<typeof textFieldInputVariants>;

package/dist/components/FormInputs/TextField/index.d.ts

@@ -0,0 +1 @@
+export { TextField } from './TextField';

package/dist/components/IconDisplay/IconDisplay.d.ts

@@ -0,0 +1,2 @@
+import { IconDisplayProps } from './IconDisplay.types';
+export declare const IconDisplay: ({ iconCategories, selectedCategory, className, iconWrapperClassName, iconComponentClassName, iconSize, fillCurrentColor, }: IconDisplayProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/IconDisplay/IconDisplay.types.d.ts

@@ -0,0 +1,30 @@
+import { SVGProps, ComponentType } from 'react';
+/**
+ * Defines the structure of an individual icon within a category.
+ */
+export interface IconItem {
+    name: string;
+    component: ComponentType<SVGProps<SVGSVGElement>>;
+}
+/**
+ * Defines the structure of an icon category.
+ */
+export interface IconCategory {
+    categoryName: string;
+    icons: IconItem[];
+}
+/**
+ * Props for the IconDisplay component.
+ */
+export interface IconDisplayProps {
+    iconCategories: IconCategory[];
+    selectedCategory?: string;
+    className?: string;
+    iconWrapperClassName?: string;
+    iconComponentClassName?: string;
+    iconSize?: {
+        width: string | number;
+        height: string | number;
+    };
+    fillCurrentColor?: boolean;
+}

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

@@ -0,0 +1 @@
+export { IconDisplay } from './IconDisplay';

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { LinkProps } from './Link.types';
+/**
+ * Link Component — Manara Design System
+ *
+ * Links navigate users to other pages, sections, or external resources.
+ * Supports brand/neutral types, three sizes, bold/regular weight,
+ * disabled state, optional icon, and Arabic RTL.
+ *
+ * @example
+ * ```tsx
+ * <Link label="Visit page" href="/page" />
+ * <Link label="External" type="neutral" size="small" />
+ * <Link label="رابط" isArabic />
+ * ```
+ */
+export declare const Link: FC<LinkProps>;