rupoui 1.3.7 → 1.4.0

package/README.md

@@ -248,6 +248,61 @@ import { DatePicker } from "rupoui";
   - `size`: `sm`, `md`, `lg`.
   - `radius`: `sm`, `md`, `lg`, `full`.
 
+### DateRangePicker
+
+A component for selecting a start and end date with calendar range selection, hover preview, and text/segmented input modes.
+
+```tsx
+import { DateRangePicker } from "rupoui";
+import { useState } from "react";
+
+const Example = () => {
+  const [range, setRange] = useState<{ start: Date | null; end: Date | null }>({
+    start: null,
+    end: null,
+  });
+
+  return (
+    <>
+      <DateRangePicker
+        label="Travel Dates"
+        value={range}
+        onChange={setRange}
+      />
+
+      <DateRangePicker
+        label="Range (Two Inputs)"
+        rangeInput="two"
+        value={range}
+        onChange={setRange}
+      />
+
+      <DateRangePicker
+        label="Range (Segmented)"
+        inputMode="segmented"
+        value={range}
+        onChange={setRange}
+      />
+    </>
+  );
+};
+```
+
+**Props:**
+
+- **Field Props**: `label`, `description`, `errorMessage`, `fullWidth`.
+- **State**: `value`, `defaultValue`, `onChange`.
+- **Validation**: `isInvalid`, `isDisabled`, `isReadOnly`, `minDate`, `maxDate`, `disabledDates`.
+- **Range Input**:
+  - `rangeInput`: `single` (default) or `two`.
+  - `separator`: separator string between start/end (default: ` – `).
+  - `inputMode`: `text` (default) or `segmented`.
+- **Style Variants**:
+  - `variant`: `solid` (default), `bordered`, `flat`, `ghost`.
+  - `color`: `primary`, `secondary`, `success`, `warning`, `danger`.
+  - `size`: `sm`, `md`, `lg`.
+  - `radius`: `sm`, `md`, `lg`, `full`.
+
 ### Calendar
 
 A pure renderer component for displaying a calendar grid with full keyboard navigation and accessibility support. It uses an external engine for state management, giving you complete control over the calendar's behavior.

package/dist/components/card/Card.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { CardProps } from './card.types';
+
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLElement>>;

package/dist/components/card/CardLayout.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { CardBodyProps, CardFooterProps, CardHeaderProps } from './card.types';
+
+export declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;
+export declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/card/card.styles.d.ts

@@ -0,0 +1,238 @@
+export declare const card: import('tailwind-variants').TVReturnType<{
+    variant: {
+        solid: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+        flat: {
+            base: string;
+        };
+        ghost: {
+            base: string;
+        };
+    };
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+    };
+    radius: {
+        none: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+    shadow: {
+        none: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+    isHoverable: {
+        true: {
+            base: string;
+        };
+    };
+    isClickable: {
+        true: {
+            base: string[];
+        };
+    };
+    isBlurred: {
+        true: {
+            base: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    header: string;
+    body: string;
+    footer: string;
+}, undefined, {
+    variant: {
+        solid: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+        flat: {
+            base: string;
+        };
+        ghost: {
+            base: string;
+        };
+    };
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+    };
+    radius: {
+        none: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+    shadow: {
+        none: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+    isHoverable: {
+        true: {
+            base: string;
+        };
+    };
+    isClickable: {
+        true: {
+            base: string[];
+        };
+    };
+    isBlurred: {
+        true: {
+            base: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    header: string;
+    body: string;
+    footer: string;
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        solid: {
+            base: string;
+        };
+        bordered: {
+            base: string;
+        };
+        flat: {
+            base: string;
+        };
+        ghost: {
+            base: string;
+        };
+    };
+    color: {
+        default: {};
+        primary: {};
+        secondary: {};
+        success: {};
+        warning: {};
+        danger: {};
+    };
+    radius: {
+        none: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+    shadow: {
+        none: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+    };
+    isHoverable: {
+        true: {
+            base: string;
+        };
+    };
+    isClickable: {
+        true: {
+            base: string[];
+        };
+    };
+    isBlurred: {
+        true: {
+            base: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    header: string;
+    body: string;
+    footer: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,40 @@
+import { HTMLMotionProps } from 'framer-motion';
+import { HTMLAttributes, ReactNode } from 'react';
+import { card } from './card.styles';
+
+export type CardVariant = "solid" | "bordered" | "flat" | "ghost";
+export type CardColor = "default" | "primary" | "secondary" | "success" | "warning" | "danger";
+export type CardRadius = "none" | "sm" | "md" | "lg" | "xl";
+export type CardShadow = "none" | "sm" | "md" | "lg";
+export type CardSlots = keyof ReturnType<typeof card>;
+export interface CardProps extends Omit<HTMLMotionProps<"div">, "color" | "onClick" | "ref"> {
+    children: ReactNode;
+    variant?: CardVariant;
+    color?: CardColor;
+    radius?: CardRadius;
+    shadow?: CardShadow;
+    isHoverable?: boolean;
+    isClickable?: boolean;
+    isBlurred?: boolean;
+    fullWidth?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
+    className?: string;
+    classNames?: {
+        base?: string;
+        header?: string;
+        body?: string;
+        footer?: string;
+    };
+}
+export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    className?: string;
+}
+export interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    className?: string;
+}
+export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    className?: string;
+}

package/dist/components/card/context.d.ts

@@ -0,0 +1,15 @@
+import { CardProps } from './card.types';
+
+export interface CardContextValue {
+    variant: NonNullable<CardProps["variant"]>;
+    color: NonNullable<CardProps["color"]>;
+    radius: NonNullable<CardProps["radius"]>;
+    shadow: NonNullable<CardProps["shadow"]>;
+    isHoverable: boolean;
+    isClickable: boolean;
+    isBlurred: boolean;
+    fullWidth: boolean;
+    classNames?: CardProps["classNames"];
+}
+export declare const CardContext: import('react').Context<CardContextValue | null>;
+export declare const useCardContext: () => CardContextValue;

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

@@ -0,0 +1,4 @@
+export * from './Card';
+export * from './CardLayout';
+export * from './card.types';
+export * from './card.styles';