@arkyn/components 3.0.1-beta.4 → 3.0.1-beta.40

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

@@ -0,0 +1,57 @@
+import { HTMLAttributes } from "react";
+import "./styles.css";
+type SliderProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    value: number;
+    onChange: (value: number) => void;
+    disabled?: boolean;
+    onDragging?: (value: boolean) => void;
+};
+/**
+ * Slider component - interactive range input for selecting numeric values
+ *
+ * @param props - Slider component properties
+ * @param props.value - Current slider value (0-100)
+ * @param props.onChange - Callback function called when value changes
+ * @param props.disabled - Disables slider interaction. Default: false
+ * @param props.onDragging - Callback function called when dragging state changes
+ *
+ * **...Other valid HTML properties for div element**
+ *
+ * @returns Slider JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic slider
+ * const [value, setValue] = useState(50);
+ * <Slider value={value} onChange={setValue} />
+ *
+ * // Disabled slider
+ * <Slider value={75} onChange={() => {}} disabled />
+ *
+ * // Slider with dragging callback
+ * const [isDragging, setIsDragging] = useState(false);
+ * <Slider
+ *   value={value}
+ *   onChange={setValue}
+ *   onDragging={setIsDragging}
+ * />
+ *
+ * // Complete example with useSlider hook
+ * function SliderExample() {
+ *   const [sliderValue, setSliderValue] = useSlider(25);
+ *   const [isDragging, setIsDragging] = useState(false);
+ *
+ *   return (
+ *     <Slider
+ *       value={sliderValue}
+ *       onChange={setSliderValue}
+ *       onDragging={setIsDragging}
+ *       className="custom-slider"
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function Slider(props: SliderProps): import("react/jsx-runtime").JSX.Element;
+export { Slider };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/slider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAEpE,OAAO,cAAc,CAAC;AAEtB,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAEH,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,2CAuEjC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/slider/index.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import "./styles.css";
+/**
+ * Slider component - interactive range input for selecting numeric values
+ *
+ * @param props - Slider component properties
+ * @param props.value - Current slider value (0-100)
+ * @param props.onChange - Callback function called when value changes
+ * @param props.disabled - Disables slider interaction. Default: false
+ * @param props.onDragging - Callback function called when dragging state changes
+ *
+ * **...Other valid HTML properties for div element**
+ *
+ * @returns Slider JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic slider
+ * const [value, setValue] = useState(50);
+ * <Slider value={value} onChange={setValue} />
+ *
+ * // Disabled slider
+ * <Slider value={75} onChange={() => {}} disabled />
+ *
+ * // Slider with dragging callback
+ * const [isDragging, setIsDragging] = useState(false);
+ * <Slider
+ *   value={value}
+ *   onChange={setValue}
+ *   onDragging={setIsDragging}
+ * />
+ *
+ * // Complete example with useSlider hook
+ * function SliderExample() {
+ *   const [sliderValue, setSliderValue] = useSlider(25);
+ *   const [isDragging, setIsDragging] = useState(false);
+ *
+ *   return (
+ *     <Slider
+ *       value={sliderValue}
+ *       onChange={setSliderValue}
+ *       onDragging={setIsDragging}
+ *       className="custom-slider"
+ *     />
+ *   );
+ * }
+ * ```
+ */
+function Slider(props) {
+    const { onChange, value, disabled = false, onDragging, className = "", ...rest } = props;
+    const [isDragging, setIsDragging] = useState(false);
+    const sliderRef = useRef(null);
+    const handleMouseDown = () => setIsDragging(true);
+    const handleMouseUp = () => setIsDragging(false);
+    const handleMouseMove = (event) => {
+        if (disabled)
+            return;
+        if (!isDragging || !sliderRef.current)
+            return;
+        const rect = sliderRef.current.getBoundingClientRect();
+        const offsetX = event.clientX - rect.left;
+        const newValue = Math.min(Math.max((offsetX / rect.width) * 100, 0), 100);
+        onChange(newValue);
+    };
+    const handleSliderClick = (event) => {
+        if (disabled)
+            return;
+        if (!sliderRef.current)
+            return;
+        const rect = sliderRef.current.getBoundingClientRect();
+        const offsetX = event.clientX - rect.left;
+        const newValue = Math.min(Math.max((offsetX / rect.width) * 100, 0), 100);
+        onChange(newValue);
+    };
+    useEffect(() => {
+        if (isDragging) {
+            onDragging && onDragging(true);
+            document.addEventListener("mousemove", handleMouseMove);
+            document.addEventListener("mouseup", handleMouseUp);
+        }
+        else {
+            onDragging && onDragging(false);
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+        }
+        return () => {
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [isDragging]);
+    const isDraggingClass = isDragging ? "isDragging" : "isNotDragging";
+    const disabledClass = disabled ? "isDisabled" : "isEnabled";
+    const sliderClassname = `arkynSliderTrack ${isDraggingClass} ${disabledClass} ${className}`;
+    return (_jsxs("div", { ...rest, className: sliderClassname, onMouseDown: handleMouseDown, onClick: handleSliderClick, ref: sliderRef, children: [_jsx("div", { className: "arkynSliderFill", style: { width: `${value}%` } }), _jsx("div", { className: "arkynSliderThumb", style: { left: `${value}%` } })] }));
+}
+export { Slider };

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

@@ -0,0 +1,94 @@
+import type { ButtonHTMLAttributes } from "react";
+import "./styles.css";
+type SwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onChange" | "defaultValue" | "onCheck" | "value"> & {
+    label?: string;
+    size?: "sm" | "md" | "lg";
+    defaultChecked?: boolean;
+    checked?: boolean;
+    value?: string;
+    unCheckedValue?: string;
+    name: string;
+    onCheck?: (value: string) => void;
+};
+/**
+ * Switch component - used for creating toggle switches with on/off states
+ *
+ * @param props - Switch component properties
+ * @param props.name - Required field name for form handling and input identification
+ * @param props.label - Optional label text to display next to the switch
+ * @param props.size - Size variant of the switch. Default: "lg"
+ * @param props.defaultChecked - Default checked state for uncontrolled usage. Default: false
+ * @param props.checked - Controlled checked state of the switch
+ * @param props.value - Value to be used when switch is checked. Default: "checked"
+ * @param props.unCheckedValue - Value to be used when switch is unchecked. Default: ""
+ * @param props.onCheck - Callback function called when switch state changes, receives the current value
+ *
+ * **...Other valid HTML properties for button element (except children, onChange, defaultValue, onCheck, value)**
+ *
+ * @returns Switch JSX element wrapped in FieldWrapper with optional label
+ *
+ * @example
+ * ```tsx
+ * // Basic switch
+ * <Switch name="notifications" label="Enable notifications" />
+ *
+ * // Switch with custom values
+ * <Switch
+ *   name="theme"
+ *   label="Dark mode"
+ *   value="dark"
+ *   unCheckedValue="light"
+ *   onCheck={(value) => console.log('Theme:', value)}
+ * />
+ *
+ * // Controlled switch with callback
+ * <Switch
+ *   name="autoSave"
+ *   label="Auto-save documents"
+ *   checked={isAutoSaveEnabled}
+ *   onCheck={(value) => setIsAutoSaveEnabled(!!value)}
+ *   size="md"
+ * />
+ *
+ * // Small switch with default checked state
+ * <Switch
+ *   name="marketing"
+ *   label="Marketing emails"
+ *   size="sm"
+ *   defaultChecked={true}
+ *   value="subscribed"
+ *   unCheckedValue="unsubscribed"
+ * />
+ *
+ * // Switch with custom styling and disabled state
+ * <Switch
+ *   name="premium"
+ *   label="Premium features"
+ *   className="premium-switch"
+ *   disabled={!isPremiumUser}
+ *   onCheck={(value) => handlePremiumToggle(value)}
+ * />
+ *
+ * // Large switch for accessibility
+ * <Switch
+ *   name="accessibility"
+ *   label="High contrast mode"
+ *   size="lg"
+ *   checked={isHighContrast}
+ *   onCheck={(value) => setIsHighContrast(!!value)}
+ *   value="enabled"
+ *   unCheckedValue="disabled"
+ * />
+ *
+ * // Switch without label for inline usage
+ * <Switch
+ *   name="inline_toggle"
+ *   value="on"
+ *   unCheckedValue="off"
+ *   onCheck={(value) => console.log('Toggle state:', value)}
+ * />
+ * ```
+ */
+declare function Switch(props: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export { Switch };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/switch/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,cAAc,CAAC;AAItB,KAAK,WAAW,GAAG,IAAI,CACrB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,UAAU,GAAG,cAAc,GAAG,SAAS,GAAG,OAAO,CAC/D,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;AAEH,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,2CAoDjC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/switch/index.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+import "./styles.css";
+import { FieldWrapper } from "../fieldWrapper";
+import { FieldLabel } from "../fieldLabel";
+/**
+ * Switch component - used for creating toggle switches with on/off states
+ *
+ * @param props - Switch component properties
+ * @param props.name - Required field name for form handling and input identification
+ * @param props.label - Optional label text to display next to the switch
+ * @param props.size - Size variant of the switch. Default: "lg"
+ * @param props.defaultChecked - Default checked state for uncontrolled usage. Default: false
+ * @param props.checked - Controlled checked state of the switch
+ * @param props.value - Value to be used when switch is checked. Default: "checked"
+ * @param props.unCheckedValue - Value to be used when switch is unchecked. Default: ""
+ * @param props.onCheck - Callback function called when switch state changes, receives the current value
+ *
+ * **...Other valid HTML properties for button element (except children, onChange, defaultValue, onCheck, value)**
+ *
+ * @returns Switch JSX element wrapped in FieldWrapper with optional label
+ *
+ * @example
+ * ```tsx
+ * // Basic switch
+ * <Switch name="notifications" label="Enable notifications" />
+ *
+ * // Switch with custom values
+ * <Switch
+ *   name="theme"
+ *   label="Dark mode"
+ *   value="dark"
+ *   unCheckedValue="light"
+ *   onCheck={(value) => console.log('Theme:', value)}
+ * />
+ *
+ * // Controlled switch with callback
+ * <Switch
+ *   name="autoSave"
+ *   label="Auto-save documents"
+ *   checked={isAutoSaveEnabled}
+ *   onCheck={(value) => setIsAutoSaveEnabled(!!value)}
+ *   size="md"
+ * />
+ *
+ * // Small switch with default checked state
+ * <Switch
+ *   name="marketing"
+ *   label="Marketing emails"
+ *   size="sm"
+ *   defaultChecked={true}
+ *   value="subscribed"
+ *   unCheckedValue="unsubscribed"
+ * />
+ *
+ * // Switch with custom styling and disabled state
+ * <Switch
+ *   name="premium"
+ *   label="Premium features"
+ *   className="premium-switch"
+ *   disabled={!isPremiumUser}
+ *   onCheck={(value) => handlePremiumToggle(value)}
+ * />
+ *
+ * // Large switch for accessibility
+ * <Switch
+ *   name="accessibility"
+ *   label="High contrast mode"
+ *   size="lg"
+ *   checked={isHighContrast}
+ *   onCheck={(value) => setIsHighContrast(!!value)}
+ *   value="enabled"
+ *   unCheckedValue="disabled"
+ * />
+ *
+ * // Switch without label for inline usage
+ * <Switch
+ *   name="inline_toggle"
+ *   value="on"
+ *   unCheckedValue="off"
+ *   onCheck={(value) => console.log('Toggle state:', value)}
+ * />
+ * ```
+ */
+function Switch(props) {
+    const { label, size = "lg", defaultChecked = false, checked: baseChecked = null, value, unCheckedValue = "", name, className: baseClassName = "", onCheck, id, ...rest } = props;
+    const inputRef = useRef(null);
+    const inputId = id || useId();
+    const [isChecked, setIsChecked] = useState(defaultChecked);
+    const currentChecked = typeof baseChecked === "boolean" ? baseChecked : isChecked;
+    function handleCheck() {
+        setIsChecked(!isChecked);
+        onCheck && onCheck(!currentChecked ? value || "checked" : unCheckedValue);
+    }
+    const checkedClass = currentChecked ? "checkedTrue" : "checkedFalse";
+    const className = `arkynSwitch ${checkedClass} ${size} ${baseClassName}`;
+    return (_jsxs(FieldWrapper, { children: [label && _jsx(FieldLabel, { children: label }), _jsx("button", { type: "button", onClick: handleCheck, className: className, ...rest, children: _jsx("input", { id: inputId, type: "hidden", name: name, ref: inputRef, onClick: handleCheck, value: currentChecked ? value || "checked" : unCheckedValue }) })] }));
+}
+export { Switch };

package/dist/components/tab/tabButton/index.d.ts

@@ -0,0 +1,72 @@
+import { ButtonHTMLAttributes, ReactNode } from "react";
+import "./styles.css";
+type TabButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "value" | "type"> & {
+    children: ReactNode;
+    value: string;
+};
+/**
+ * TabButton component - used as interactive buttons within a TabContainer for tab navigation
+ *
+ * @param props - TabButton component properties
+ * @param props.children - Content to display inside the tab button (required)
+ * @param props.value - Unique identifier for the tab button (required)
+ * @param props.disabled - Whether the button is disabled. Can be overridden by TabContainer's disabled state
+ *
+ * **...Other valid HTML button properties except children, value, and type**
+ *
+ * @returns TabButton JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic tab buttons within TabContainer
+ * <TabContainer>
+ *   <TabButton value="home">Home</TabButton>
+ *   <TabButton value="about">About</TabButton>
+ *   <TabButton value="contact">Contact</TabButton>
+ * </TabContainer>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Tab button with click handler
+ * <TabContainer onChange={(value) => console.log('Tab changed:', value)}>
+ *   <TabButton
+ *     value="profile"
+ *     onClick={() => console.log('Profile tab clicked')}
+ *   >
+ *     Profile
+ *   </TabButton>
+ *   <TabButton value="settings">Settings</TabButton>
+ * </TabContainer>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Disabled tab button
+ * <TabContainer>
+ *   <TabButton value="available">Available</TabButton>
+ *   <TabButton value="coming-soon" disabled>
+ *     Coming Soon
+ *   </TabButton>
+ * </TabContainer>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Tab buttons with custom styling and default value
+ * <TabContainer defaultValue="dashboard">
+ *   <TabButton
+ *     value="dashboard"
+ *     className="custom-tab"
+ *     aria-label="Dashboard tab"
+ *   >
+ *     Dashboard
+ *   </TabButton>
+ *   <TabButton value="analytics">Analytics</TabButton>
+ *   <TabButton value="reports">Reports</TabButton>
+ * </TabContainer>
+ * ```
+ */
+declare function TabButton(props: TabButtonProps): import("react/jsx-runtime").JSX.Element;
+export { TabButton };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/tab/tabButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tab/tabButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpE,OAAO,cAAc,CAAC;AAEtB,KAAK,cAAc,GAAG,IAAI,CACxB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,MAAM,CAC9B,GAAG;IACF,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AAEH,iBAAS,SAAS,CAAC,KAAK,EAAE,cAAc,2CAkCvC;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/tab/tabButton/index.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTab } from "../tabContext";
+import "./styles.css";
+/**
+ * TabButton component - used as interactive buttons within a TabContainer for tab navigation
+ *
+ * @param props - TabButton component properties
+ * @param props.children - Content to display inside the tab button (required)
+ * @param props.value - Unique identifier for the tab button (required)
+ * @param props.disabled - Whether the button is disabled. Can be overridden by TabContainer's disabled state
+ *
+ * **...Other valid HTML button properties except children, value, and type**
+ *
+ * @returns TabButton JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic tab buttons within TabContainer
+ * <TabContainer>
+ *   <TabButton value="home">Home</TabButton>
+ *   <TabButton value="about">About</TabButton>
+ *   <TabButton value="contact">Contact</TabButton>
+ * </TabContainer>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Tab button with click handler
+ * <TabContainer onChange={(value) => console.log('Tab changed:', value)}>
+ *   <TabButton
+ *     value="profile"
+ *     onClick={() => console.log('Profile tab clicked')}
+ *   >
+ *     Profile
+ *   </TabButton>
+ *   <TabButton value="settings">Settings</TabButton>
+ * </TabContainer>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Disabled tab button
+ * <TabContainer>
+ *   <TabButton value="available">Available</TabButton>
+ *   <TabButton value="coming-soon" disabled>
+ *     Coming Soon
+ *   </TabButton>
+ * </TabContainer>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Tab buttons with custom styling and default value
+ * <TabContainer defaultValue="dashboard">
+ *   <TabButton
+ *     value="dashboard"
+ *     className="custom-tab"
+ *     aria-label="Dashboard tab"
+ *   >
+ *     Dashboard
+ *   </TabButton>
+ *   <TabButton value="analytics">Analytics</TabButton>
+ *   <TabButton value="reports">Reports</TabButton>
+ * </TabContainer>
+ * ```
+ */
+function TabButton(props) {
+    const { children, disabled: rawDisabled = false, className: baseClassName = "", onClick, value, ...rest } = props;
+    const { disabled, currentTab, changeCurrentTab } = useTab();
+    const isDisabled = disabled || rawDisabled;
+    const disabledClass = isDisabled ? "isDisabled" : "";
+    const activeClass = currentTab === value && value ? "isActive" : "";
+    const className = `arkynTabButton ${disabledClass} ${activeClass} ${baseClassName}`;
+    function handleClick(event) {
+        changeCurrentTab(value);
+        onClick && onClick(event);
+    }
+    return (_jsx("button", { onClick: handleClick, className: className.trim(), ...rest, disabled: isDisabled, type: "button", children: children }));
+}
+export { TabButton };

package/dist/components/tab/tabContainer/index.d.ts

@@ -0,0 +1,83 @@
+import { HTMLAttributes, ReactNode } from "react";
+import "./styles.css";
+type TabContainerProps = Omit<HTMLAttributes<HTMLElement>, "onChange" | "children" | "ref" | "onClick"> & {
+    children: ReactNode;
+    disabled?: boolean;
+    defaultValue?: string;
+    onChange?: (index: string) => void;
+};
+/**
+ * TabContainer component - used as a wrapper for TabButton components to create tabbed navigation
+ *
+ * @param props - TabContainer component properties
+ * @param props.children - TabButton components and other content (required)
+ * @param props.disabled - Whether all tab buttons are disabled. Default: false
+ * @param props.defaultValue - Initial tab value to be selected
+ * @param props.onChange - Callback function called when tab changes, receives the tab value
+ *
+ * **...Other valid HTML nav properties except onClick, children, and ref**
+ *
+ * @returns TabContainer JSX element
+ *
+ * @example
+ * ```tsx
+ * // Basic tab container
+ * <TabContainer>
+ *   <TabButton value="home">Home</TabButton>
+ *   <TabButton value="about">About</TabButton>
+ *   <TabButton value="contact">Contact</TabButton>
+ * </TabContainer>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Tab container with default value and change handler
+ * <TabContainer
+ *   defaultValue="dashboard"
+ *   onChange={(value) => console.log('Active tab:', value)}
+ * >
+ *   <TabButton value="dashboard">Dashboard</TabButton>
+ *   <TabButton value="analytics">Analytics</TabButton>
+ *   <TabButton value="settings">Settings</TabButton>
+ * </TabContainer>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Disabled all tabs
+ * <TabContainer disabled>
+ *   <TabButton value="tab1">Tab 1</TabButton>
+ *   <TabButton value="tab2">Tab 2</TabButton>
+ * </TabContainer>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Tab container with custom styling and state management
+ * function MyTabs() {
+ *   const [activeTab, setActiveTab] = useState('profile');
+ *
+ *   return (
+ *     <div>
+ *       <TabContainer
+ *         defaultValue={activeTab}
+ *         onChange={setActiveTab}
+ *         className="custom-tabs"
+ *         role="tablist"
+ *       >
+ *         <TabButton value="profile">Profile</TabButton>
+ *         <TabButton value="account">Account</TabButton>
+ *         <TabButton value="notifications">Notifications</TabButton>
+ *       </TabContainer>
+ *
+ *       {activeTab === 'profile' && <ProfileContent />}
+ *       {activeTab === 'account' && <AccountContent />}
+ *       {activeTab === 'notifications' && <NotificationsContent />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function TabContainer(props: TabContainerProps): import("react/jsx-runtime").JSX.Element;
+export { TabContainer };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/tab/tabContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tab/tabContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG5D,OAAO,cAAc,CAAC;AAEtB,KAAK,iBAAiB,GAAG,IAAI,CAC3B,cAAc,CAAC,WAAW,CAAC,EAC3B,UAAU,GAAG,UAAU,GAAG,KAAK,GAAG,SAAS,CAC5C,GAAG;IACF,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AAEH,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CA8B7C;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}