flikkui 0.1.0-beta.2

package/dist/components/core/ProgressiveBlur/ProgressiveBlur.types.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+export type ProgressiveBlurPosition = 'top' | 'bottom' | 'left' | 'right';
+export interface ProgressiveBlurProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Position(s) where the blur effect should be applied
+     * Can be a single position or array of positions
+     */
+    position: ProgressiveBlurPosition | ProgressiveBlurPosition[];
+    /**
+     * Blur intensity in pixels
+     * @default 8
+     */
+    blurIntensity?: number;
+    /**
+     * Custom blur levels array for more control
+     * If provided, overrides blurIntensity
+     */
+    blurLevels?: number[];
+    /**
+     * Size of the blur region (height for top/bottom, width for left/right)
+     * @default "40px"
+     */
+    size?: string;
+    /**
+     * Custom className for styling overrides
+     */
+    className?: string;
+    /**
+     * Theme overrides
+     */
+    theme?: ProgressiveBlurThemeOverrides;
+}
+export interface ProgressiveBlurThemeOverrides {
+    /**
+     * Base styles for the blur container
+     */
+    baseStyle?: string;
+    /**
+     * Position-specific styles
+     */
+    positions?: Partial<Record<ProgressiveBlurPosition, string>>;
+}

package/dist/components/core/ProgressiveBlur/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ProgressiveBlur } from './ProgressiveBlur';
+export type { ProgressiveBlurProps, ProgressiveBlurPosition, ProgressiveBlurThemeOverrides, } from './ProgressiveBlur.types';

package/dist/components/core/Segmented/Segmented.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { SegmentedProps } from "./Segmented.types";
+export declare const Segmented: React.ForwardRefExoticComponent<SegmentedProps & React.RefAttributes<HTMLDivElement>> & {
+    Item: React.ForwardRefExoticComponent<import("./Segmented.types").SegmentedItemProps & React.RefAttributes<HTMLButtonElement>>;
+};
+export default Segmented;

package/dist/components/core/Segmented/Segmented.theme.d.ts

@@ -0,0 +1,30 @@
+import { SegmentedSize } from './Segmented.types';
+/**
+ * Internal theme structure for the Segmented component
+ */
+interface SegmentedTheme {
+    baseStyle: string;
+    sizes: Record<SegmentedSize, string>;
+    blockStyle: string;
+    disabledStyle: string;
+    slidingBackgroundStyle: string;
+}
+/**
+ * Internal theme structure for the SegmentedItem component
+ */
+interface SegmentedItemTheme {
+    baseStyle: string;
+    sizes: Record<SegmentedSize, string>;
+    selectedStyle: string;
+    unselectedStyle: string;
+    disabledStyle: string;
+}
+/**
+ * Default theme for the Segmented component
+ */
+export declare const segmentedTheme: SegmentedTheme;
+/**
+ * Default theme for the SegmentedItem component
+ */
+export declare const segmentedItemTheme: SegmentedItemTheme;
+export {};

package/dist/components/core/Segmented/Segmented.types.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+/**
+ * Size options for the Segmented component
+ */
+export type SegmentedSize = "sm" | "md" | "lg";
+/**
+ * Segmented component props
+ */
+export interface SegmentedProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** The currently selected value (controlled mode) */
+    value?: string;
+    /** Function called when selection changes */
+    onChange?: (value: string) => void;
+    /** Size of the segmented control */
+    size?: SegmentedSize;
+    /** Whether the segmented control is disabled */
+    disabled?: boolean;
+    /** Whether the segmented control should take full width */
+    block?: boolean;
+    /** Children SegmentedItem components */
+    children?: React.ReactNode;
+    /** Custom className for the sliding background */
+    slidingBackgroundClassName?: string;
+}
+/**
+ * SegmentedItem component props
+ */
+export interface SegmentedItemProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /** The value for this segment */
+    value: string;
+    /** Whether this segment is disabled */
+    disabled?: boolean;
+    /** Children content */
+    children?: React.ReactNode;
+}

package/dist/components/core/Segmented/SegmentedContext.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { SegmentedSize } from "./Segmented.types";
+/**
+ * Context interface for sharing state between Segmented and SegmentedItem
+ */
+interface SegmentedContextValue {
+    selectedValue?: string;
+    onChange?: (value: string) => void;
+    size: SegmentedSize;
+    disabled: boolean;
+}
+/**
+ * Context for sharing state between Segmented container and SegmentedItem components
+ */
+export declare const SegmentedContext: React.Context<SegmentedContextValue | null>;
+export {};

package/dist/components/core/Segmented/SegmentedItem.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { SegmentedItemProps } from "./Segmented.types";
+export declare const SegmentedItem: React.ForwardRefExoticComponent<SegmentedItemProps & React.RefAttributes<HTMLButtonElement>>;
+export default SegmentedItem;

package/dist/components/core/Segmented/index.d.ts

@@ -0,0 +1,4 @@
+import Segmented from './Segmented';
+export { Segmented } from './Segmented';
+export type { SegmentedProps, SegmentedItemProps, SegmentedSize } from './Segmented.types';
+export { Segmented as default };

package/dist/components/core/Stepper/Stepper.animations.d.ts

@@ -0,0 +1,9 @@
+import { Variants } from "motion/react";
+/**
+ * Animation variants for the connector line
+ */
+export declare const connectorLineVariants: Variants;
+/**
+ * Animation variants for the step circle
+ */
+export declare const stepCircleVariants: Variants;

package/dist/components/core/Stepper/Stepper.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { StepperProps } from './Stepper.types';
+/**
+ * Stepper component for displaying multi-step vertical progress
+ *
+ * @example
+ * ```tsx
+ * <Stepper
+ *   activeStep={1}
+ *   steps={[
+ *     { label: "Create account", completed: true },
+ *     { label: "Profile information", active: true },
+ *     { label: "Business information" },
+ *     { label: "Theme" },
+ *     { label: "Preview" }
+ *   ]}
+ * />
+ * ```
+ */
+declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLElement>>;
+export default Stepper;

package/dist/components/core/Stepper/Stepper.theme.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Default theme for the Stepper component
+ * Matches the original visual design while using CSS variables
+ */
+export declare const stepperTheme: {
+    baseStyle: string;
+    connector: {
+        baseStyle: string;
+        completedStyle: string;
+        upcomingStyle: string;
+    };
+    icon: {
+        baseStyle: string;
+        completedStyle: string;
+        currentStyle: string;
+        upcomingStyle: string;
+        currentDotStyle: string;
+        upcomingDotStyle: string;
+    };
+    label: {
+        baseStyle: string;
+        statusStyles: {
+            complete: string;
+            current: string;
+            upcoming: string;
+        };
+    };
+    description: {
+        baseStyle: string;
+        statusStyles: {
+            complete: string;
+            current: string;
+            upcoming: string;
+        };
+    };
+};

package/dist/components/core/Stepper/Stepper.types.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+/**
+ * Step data interface for the stepper
+ */
+export interface StepData {
+    /** The step label */
+    label: string;
+    /** Optional description */
+    description?: string;
+    /** Whether this step is completed */
+    completed?: boolean;
+    /** Whether this step is active */
+    active?: boolean;
+    /** Optional href for clickable steps */
+    href?: string;
+    /** Whether the step is disabled */
+    disabled?: boolean;
+}
+/**
+ * Props for the Stepper component
+ */
+export interface StepperProps extends React.HTMLAttributes<HTMLElement> {
+    /** Current active step index (0-based) */
+    activeStep: number;
+    /** Array of step data */
+    steps: StepData[];
+    /** Additional class name */
+    className?: string;
+}

package/dist/components/core/Stepper/components/ConnectorLine.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+/**
+ * Props for the ConnectorLine component
+ */
+export interface ConnectorLineProps {
+    /** Status of the connector: 'complete', 'current', 'upcoming', or 'active-complete' */
+    status: "complete" | "current" | "upcoming" | "active-complete";
+    /** Whether this is the last item (no connector needed) */
+    isLast: boolean;
+    /** Status of the next step (if any) */
+    nextStepStatus?: "complete" | "current" | "upcoming" | "active-complete";
+    /** Whether to animate this connector */
+    animate?: boolean;
+    /** Additional className to apply */
+    className?: string;
+}
+/**
+ * ConnectorLine component for displaying the vertical line between steps
+ */
+declare const ConnectorLine: React.FC<ConnectorLineProps>;
+export default ConnectorLine;

package/dist/components/core/Stepper/components/IconCircle.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+/**
+ * Props for the IconCircle component
+ */
+export interface IconCircleProps {
+    /** Status of the circle: 'complete', 'current', 'upcoming', or 'active-complete' */
+    status: "complete" | "current" | "upcoming" | "active-complete";
+    /** Step number to display for non-complete states */
+    stepNumber?: number;
+    /** Whether to animate this icon */
+    animate?: boolean;
+    /** Additional className to apply */
+    className?: string;
+}
+/**
+ * IconCircle component for displaying step status with consistent styling
+ */
+declare const IconCircle: React.FC<IconCircleProps>;
+export default IconCircle;

package/dist/components/core/Stepper/components/ProgressIndicator.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface ProgressIndicatorProps {
+    activeStep: number;
+    totalSteps: number;
+}
+declare const ProgressIndicator: React.FC<ProgressIndicatorProps>;
+export default ProgressIndicator;

package/dist/components/core/Stepper/components/StepContent.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { StepData } from "../Stepper.types";
+/**
+ * Props for the StepContent component
+ */
+export interface StepContentProps {
+    /** Step data including label and description */
+    step: StepData;
+    /** Status of the step: 'complete', 'current', 'upcoming', or 'active-complete' */
+    status: "complete" | "current" | "upcoming" | "active-complete";
+    /** Whether to animate this content */
+    animate?: boolean;
+    /** Additional className to apply */
+    className?: string;
+}
+/**
+ * StepContent component for displaying step label and description
+ */
+declare const StepContent: React.FC<StepContentProps>;
+export default StepContent;

package/dist/components/core/Stepper/components/StepperItem.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { StepData } from "../Stepper.types";
+/**
+ * Props for the StepperItem component
+ */
+export interface StepperItemProps {
+    /** Step data */
+    step: StepData;
+    /** Status of the step: 'complete', 'current', 'upcoming', or 'active-complete' */
+    status: "complete" | "current" | "upcoming" | "active-complete";
+    /** Status of the next step (if any) */
+    nextStepStatus?: "complete" | "current" | "upcoming" | "active-complete";
+    /** Whether this is the last step in the sequence */
+    isLast: boolean;
+    /** Step number (1-based index) */
+    stepNumber: number;
+    /** Additional className to apply */
+    className?: string;
+}
+/**
+ * StepperItem component for rendering an individual step
+ */
+declare const StepperItem: React.FC<StepperItemProps>;
+export default StepperItem;

package/dist/components/core/Stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Stepper';
+export type { StepperProps, StepData } from './Stepper.types';

package/dist/components/core/Tabs/Tabs.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { TabsProps } from "./Tabs.types";
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {
+    List: React.ForwardRefExoticComponent<import("./Tabs.types").TabsListProps & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<import("./Tabs.types").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<import("./Tabs.types").TabsContentProps & React.RefAttributes<HTMLDivElement>>;
+};
+export default Tabs;

package/dist/components/core/Tabs/Tabs.js

@@ -0,0 +1,52 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { tabsTheme } from './Tabs.theme.js';
+import { TabsContext } from './TabsContext.js';
+import { TabsList } from './TabsList.js';
+import { TabsTrigger } from './TabsTrigger.js';
+import { TabsContent } from './TabsContent.js';
+
+/**
+ * Tabs component for organizing content into separate views
+ * Uses compound component pattern with Tabs.List, Tabs.Trigger, and Tabs.Content
+ */
+var TabsComponent = React__default.forwardRef(function (_a, ref) {
+    var value = _a.value, defaultValue = _a.defaultValue, onValueChange = _a.onValueChange, _b = _a.orientation, orientation = _b === void 0 ? "horizontal" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, children = _a.children, className = _a.className, theme = _a.theme, props = __rest(_a, ["value", "defaultValue", "onValueChange", "orientation", "size", "disabled", "children", "className", "theme"]);
+    var _e = useState(value || defaultValue || ""), currentValue = _e[0], setCurrentValue = _e[1];
+    // Handle controlled vs uncontrolled
+    var isControlled = value !== undefined;
+    var activeValue = isControlled ? value : currentValue;
+    var handleValueChange = function (newValue) {
+        if (!isControlled) {
+            setCurrentValue(newValue);
+        }
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
+    };
+    var contextValue = {
+        value: activeValue,
+        onValueChange: handleValueChange,
+        orientation: orientation,
+        size: size,
+        disabled: disabled,
+    };
+    // Merge theme overrides
+    var mergedTheme = {
+        baseStyle: (theme === null || theme === void 0 ? void 0 : theme.baseStyle) || tabsTheme.baseStyle,
+        orientations: __assign(__assign({}, tabsTheme.orientations), theme === null || theme === void 0 ? void 0 : theme.orientations),
+        disabledStyle: (theme === null || theme === void 0 ? void 0 : theme.disabledStyle) || tabsTheme.disabledStyle,
+    };
+    return (React__default.createElement(TabsContext.Provider, { value: contextValue },
+        React__default.createElement("div", __assign({ ref: ref, className: cn(mergedTheme.baseStyle, mergedTheme.orientations[orientation], disabled && mergedTheme.disabledStyle, className // User overrides take precedence
+            ), "data-orientation": orientation, "data-size": size, "data-disabled": disabled }, props), children)));
+});
+// Set display name for dev tools and Storybook
+TabsComponent.displayName = "Tabs";
+// Create compound component with proper typing
+var Tabs = Object.assign(TabsComponent, {
+    List: TabsList,
+    Trigger: TabsTrigger,
+    Content: TabsContent,
+});
+
+export { Tabs, Tabs as default };

package/dist/components/core/Tabs/Tabs.theme.d.ts

@@ -0,0 +1,52 @@
+import { TabsSize, TabsOrientation } from './Tabs.types';
+/**
+ * Internal theme structure for the Tabs component
+ */
+interface TabsTheme {
+    baseStyle: string;
+    orientations: Record<TabsOrientation, string>;
+    disabledStyle: string;
+}
+/**
+ * Internal theme structure for the TabsList component
+ */
+interface TabsListTheme {
+    baseStyle: string;
+    orientations: Record<TabsOrientation, string>;
+    sizes: Record<TabsSize, string>;
+}
+/**
+ * Internal theme structure for the TabsTrigger component
+ */
+interface TabsTriggerTheme {
+    baseStyle: string;
+    orientations: Record<TabsOrientation, string>;
+    sizes: Record<TabsSize, string>;
+    selectedStyle: string;
+    unselectedStyle: string;
+    disabledStyle: string;
+}
+/**
+ * Internal theme structure for the TabsContent component
+ */
+interface TabsContentTheme {
+    baseStyle: string;
+    orientations: Record<TabsOrientation, string>;
+}
+/**
+ * Default theme for the Tabs component
+ */
+export declare const tabsTheme: TabsTheme;
+/**
+ * Default theme for the TabsList component
+ */
+export declare const tabsListTheme: TabsListTheme;
+/**
+ * Default theme for the TabsTrigger component
+ */
+export declare const tabsTriggerTheme: TabsTriggerTheme;
+/**
+ * Default theme for the TabsContent component
+ */
+export declare const tabsContentTheme: TabsContentTheme;
+export {};

package/dist/components/core/Tabs/Tabs.theme.js

@@ -0,0 +1,70 @@
+/**
+ * Default theme for the Tabs component
+ */
+var tabsTheme = {
+    // Base styles for the tabs container
+    baseStyle: "flex",
+    // Orientation variants
+    orientations: {
+        horizontal: "flex-col",
+        vertical: "flex-row",
+    },
+    // Disabled style
+    disabledStyle: "opacity-50 cursor-not-allowed pointer-events-none",
+};
+/**
+ * Default theme for the TabsList component
+ */
+var tabsListTheme = {
+    // Base styles for the tabs list
+    baseStyle: "relative inline-flex items-center justify-center",
+    // Orientation variants
+    orientations: {
+        horizontal: "flex-row border-b border-neutral-200",
+        vertical: "flex-col border-r border-neutral-200 justify-start items-end",
+    },
+    // Size variants using CSS variables
+    sizes: {
+        sm: "gap-1",
+        md: "gap-2",
+        lg: "gap-3",
+    },
+};
+/**
+ * Default theme for the TabsTrigger component
+ */
+var tabsTriggerTheme = {
+    // Base styles for the tab trigger
+    baseStyle: "relative inline-flex items-center justify-center whitespace-nowrap font-semibold transition-all duration-200 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+    // Orientation variants
+    orientations: {
+        horizontal: "border-b-2 border-transparent hover:border-neutral-300 data-[state=active]:border-primary-600 data-[state=active]:text-primary-600",
+        vertical: "border-r-2 border-transparent hover:border-neutral-300 data-[state=active]:border-primary-600 data-[state=active]:text-primary-600",
+    },
+    // Size variants
+    sizes: {
+        sm: "px-2 py-1.5 text-sm",
+        md: "px-2 py-2 text-sm",
+        lg: "px-2 py-3 text-base",
+    },
+    // Selected state
+    selectedStyle: "text-primary-600",
+    // Unselected state
+    unselectedStyle: "text-neutral-500 hover:text-neutral-900",
+    // Disabled state
+    disabledStyle: "opacity-50 cursor-not-allowed pointer-events-none",
+};
+/**
+ * Default theme for the TabsContent component
+ */
+var tabsContentTheme = {
+    // Base styles for the tab content
+    baseStyle: "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2",
+    // Orientation variants
+    orientations: {
+        horizontal: "mt-4",
+        vertical: "ml-4",
+    },
+};
+
+export { tabsContentTheme, tabsListTheme, tabsTheme, tabsTriggerTheme };

package/dist/components/core/Tabs/Tabs.types.d.ts

@@ -0,0 +1,100 @@
+import React from "react";
+/**
+ * Size options for the Tabs component
+ */
+export type TabsSize = "sm" | "md" | "lg";
+/**
+ * Orientation options for the Tabs component
+ */
+export type TabsOrientation = "horizontal" | "vertical";
+/**
+ * Theme overrides for Tabs components
+ */
+export interface TabsThemeOverrides {
+    baseStyle?: string;
+    orientations?: Partial<Record<TabsOrientation, string>>;
+    disabledStyle?: string;
+}
+export interface TabsListThemeOverrides {
+    baseStyle?: string;
+    orientations?: Partial<Record<TabsOrientation, string>>;
+    sizes?: Partial<Record<TabsSize, string>>;
+}
+export interface TabsTriggerThemeOverrides {
+    baseStyle?: string;
+    orientations?: Partial<Record<TabsOrientation, string>>;
+    sizes?: Partial<Record<TabsSize, string>>;
+    selectedStyle?: string;
+    unselectedStyle?: string;
+    disabledStyle?: string;
+}
+export interface TabsContentThemeOverrides {
+    baseStyle?: string;
+    orientations?: Partial<Record<TabsOrientation, string>>;
+}
+/**
+ * Tabs component props
+ */
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** The currently selected value (controlled mode) */
+    value?: string;
+    /** The default selected value (uncontrolled mode) */
+    defaultValue?: string;
+    /** Function called when selection changes */
+    onValueChange?: (value: string) => void;
+    /** Orientation of the tabs */
+    orientation?: TabsOrientation;
+    /** Size of the tabs */
+    size?: TabsSize;
+    /** Whether the tabs are disabled */
+    disabled?: boolean;
+    /** Children components (TabsList, TabsContent) */
+    children?: React.ReactNode;
+    /** Theme overrides */
+    theme?: TabsThemeOverrides;
+}
+/**
+ * TabsList component props
+ */
+export interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Children TabsTrigger components */
+    children?: React.ReactNode;
+    /** Theme overrides */
+    theme?: TabsListThemeOverrides;
+}
+/**
+ * TabsTrigger component props
+ */
+export interface TabsTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /** The value for this tab */
+    value: string;
+    /** Whether this tab is disabled */
+    disabled?: boolean;
+    /** Children content */
+    children?: React.ReactNode;
+    /** Theme overrides */
+    theme?: TabsTriggerThemeOverrides;
+}
+/**
+ * TabsContent component props
+ */
+export interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The value that this content corresponds to */
+    value: string;
+    /** Whether to force mount the content (keeps content in DOM when inactive) */
+    forceMount?: boolean;
+    /** Children content */
+    children?: React.ReactNode;
+    /** Theme overrides */
+    theme?: TabsContentThemeOverrides;
+}
+/**
+ * Context value for Tabs compound components
+ */
+export interface TabsContextValue {
+    value: string;
+    onValueChange: (value: string) => void;
+    orientation: TabsOrientation;
+    size: TabsSize;
+    disabled: boolean;
+}

package/dist/components/core/Tabs/TabsContent.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { TabsContentProps } from "./Tabs.types";
+/**
+ * TabsContent component displays content panels for tabs
+ */
+export declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;