rupoui 1.3.8 → 1.5.0

package/README.md

@@ -104,6 +104,74 @@ Apply custom themes using the `data-theme` attribute:
 
 ## 🧩 Components
 
+### Card
+
+A composable container component for grouping related content, with support for layout slots and interactive states.
+
+```tsx
+import { Button, Card, CardBody, CardFooter, CardHeader } from "rupoui";
+
+<Card radius="lg" shadow="sm" className="max-w-md">
+  <CardHeader>
+    <h4 className="text-lg font-semibold">Pro Plan</h4>
+    <p className="text-default-500 text-sm">Best for growing teams</p>
+  </CardHeader>
+  <CardBody>Includes analytics, priority support, and team collaboration features.</CardBody>
+  <CardFooter>
+    <Button fullWidth>Upgrade</Button>
+  </CardFooter>
+</Card>;
+```
+
+**Props:**
+
+- `variant`: `solid` (default), `bordered`, `flat`, `ghost`.
+- `color`: `default` (default), `primary`, `secondary`, `success`, `warning`, `danger`.
+- `radius`: `none`, `sm`, `md`, `lg`, `xl`.
+- `shadow`: `none` (default), `sm`, `md`, `lg`.
+- `isHoverable`, `isClickable`, `isBlurred`, `fullWidth`.
+- `classNames`: Slot styling for `base`, `header`, `body`, `footer`.
+
+### Accordion
+
+An accessible disclosure component for showing and hiding sections of content.
+
+```tsx
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "rupoui";
+
+<Accordion type="single" defaultValue="item-1" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>What is RupoUI?</AccordionTrigger>
+    <AccordionContent>
+      RupoUI is a modern React UI library built with TypeScript and Tailwind CSS.
+    </AccordionContent>
+  </AccordionItem>
+
+  <AccordionItem value="item-2">
+    <AccordionTrigger>Is it accessible?</AccordionTrigger>
+    <AccordionContent>
+      Yes. It supports ARIA semantics and keyboard interactions out of the box.
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>;
+```
+
+**Props (Accordion):**
+
+- `type`: `single` (default) or `multiple`.
+- `value` / `defaultValue` / `onValueChange`: Controlled and uncontrolled state.
+- `collapsible`: Allows closing the open item in `single` mode.
+- `variant`: `solid` (default), `bordered`, `ghost`.
+- `color`: `default` (default), `primary`, `secondary`, `success`, `warning`, `danger`.
+- `radius`: `none`, `sm`, `md` (default), `lg`, `xl`.
+- `fullWidth`: Whether the accordion takes full width.
+- `classNames`: Slot styling for `base`, `item`, `trigger`, `triggerInner`, `indicator`, `content`, `contentInner`.
+
+**Accessibility & Keyboard:**
+
+- ARIA: `aria-expanded`, `aria-controls`, `role="region"`, `aria-labelledby`.
+- Keyboard: `Enter` / `Space` to toggle, `ArrowUp` / `ArrowDown` to move focus, `Home` / `End` for first/last trigger.
+
 ### Button
 
 A versatile button component with support for loading states and icons.
@@ -253,8 +321,8 @@ import { DatePicker } from "rupoui";
 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";
+import { DateRangePicker } from "rupoui";
 
 const Example = () => {
   const [range, setRange] = useState<{ start: Date | null; end: Date | null }>({
@@ -264,11 +332,7 @@ const Example = () => {
 
   return (
     <>
-      <DateRangePicker
-        label="Travel Dates"
-        value={range}
-        onChange={setRange}
-      />
+      <DateRangePicker label="Travel Dates" value={range} onChange={setRange} />
 
       <DateRangePicker
         label="Range (Two Inputs)"
@@ -295,7 +359,7 @@ const Example = () => {
 - **Validation**: `isInvalid`, `isDisabled`, `isReadOnly`, `minDate`, `maxDate`, `disabledDates`.
 - **Range Input**:
   - `rangeInput`: `single` (default) or `two`.
-  - `separator`: separator string between start/end (default: ` – `).
+  - `separator`: separator string between start/end (default: `–`).
   - `inputMode`: `text` (default) or `segmented`.
 - **Style Variants**:
   - `variant`: `solid` (default), `bordered`, `flat`, `ghost`.

package/dist/components/accordion/Accordion.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { AccordionProps } from './accordion.types';
+
+export declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/accordion/AccordionContent.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { AccordionContentProps } from './accordion.types';
+
+export declare const AccordionContent: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/accordion/AccordionItem.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { AccordionItemProps } from './accordion.types';
+
+export declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/accordion/AccordionTrigger.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { AccordionTriggerProps } from './accordion.types';
+
+export declare const AccordionTrigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,214 @@
+export declare const accordion: import('tailwind-variants').TVReturnType<{
+    variant: {
+        solid: {
+            item: string;
+            trigger: string;
+        };
+        bordered: {
+            item: string;
+            trigger: string;
+        };
+        ghost: {
+            item: string;
+            trigger: string;
+        };
+    };
+    color: {
+        default: {
+            trigger: string;
+            indicator: string;
+        };
+        primary: {
+            trigger: string;
+            indicator: string;
+        };
+        secondary: {
+            trigger: string;
+            indicator: string;
+        };
+        success: {
+            trigger: string;
+            indicator: string;
+        };
+        warning: {
+            trigger: string;
+            indicator: string;
+        };
+        danger: {
+            trigger: string;
+            indicator: string;
+        };
+    };
+    radius: {
+        none: {
+            item: string;
+        };
+        sm: {
+            item: string;
+        };
+        md: {
+            item: string;
+        };
+        lg: {
+            item: string;
+        };
+        xl: {
+            item: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    item: string;
+    trigger: string;
+    triggerInner: string;
+    indicator: string;
+    content: string;
+    contentInner: string;
+}, undefined, {
+    variant: {
+        solid: {
+            item: string;
+            trigger: string;
+        };
+        bordered: {
+            item: string;
+            trigger: string;
+        };
+        ghost: {
+            item: string;
+            trigger: string;
+        };
+    };
+    color: {
+        default: {
+            trigger: string;
+            indicator: string;
+        };
+        primary: {
+            trigger: string;
+            indicator: string;
+        };
+        secondary: {
+            trigger: string;
+            indicator: string;
+        };
+        success: {
+            trigger: string;
+            indicator: string;
+        };
+        warning: {
+            trigger: string;
+            indicator: string;
+        };
+        danger: {
+            trigger: string;
+            indicator: string;
+        };
+    };
+    radius: {
+        none: {
+            item: string;
+        };
+        sm: {
+            item: string;
+        };
+        md: {
+            item: string;
+        };
+        lg: {
+            item: string;
+        };
+        xl: {
+            item: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    item: string;
+    trigger: string;
+    triggerInner: string;
+    indicator: string;
+    content: string;
+    contentInner: string;
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        solid: {
+            item: string;
+            trigger: string;
+        };
+        bordered: {
+            item: string;
+            trigger: string;
+        };
+        ghost: {
+            item: string;
+            trigger: string;
+        };
+    };
+    color: {
+        default: {
+            trigger: string;
+            indicator: string;
+        };
+        primary: {
+            trigger: string;
+            indicator: string;
+        };
+        secondary: {
+            trigger: string;
+            indicator: string;
+        };
+        success: {
+            trigger: string;
+            indicator: string;
+        };
+        warning: {
+            trigger: string;
+            indicator: string;
+        };
+        danger: {
+            trigger: string;
+            indicator: string;
+        };
+    };
+    radius: {
+        none: {
+            item: string;
+        };
+        sm: {
+            item: string;
+        };
+        md: {
+            item: string;
+        };
+        lg: {
+            item: string;
+        };
+        xl: {
+            item: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    item: string;
+    trigger: string;
+    triggerInner: string;
+    indicator: string;
+    content: string;
+    contentInner: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,36 @@
+import { HTMLMotionProps } from 'framer-motion';
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import { accordion } from './accordion.styles';
+
+export type AccordionType = "single" | "multiple";
+export type AccordionVariant = "solid" | "bordered" | "ghost";
+export type AccordionColor = "default" | "primary" | "secondary" | "success" | "warning" | "danger";
+export type AccordionRadius = "none" | "sm" | "md" | "lg" | "xl";
+export type AccordionValue = string | string[] | null;
+export type AccordionSlots = keyof ReturnType<typeof accordion>;
+export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue" | "value" | "color"> {
+    children: ReactNode;
+    type?: AccordionType;
+    value?: AccordionValue;
+    defaultValue?: AccordionValue;
+    onValueChange?: (value: AccordionValue) => void;
+    collapsible?: boolean;
+    variant?: AccordionVariant;
+    color?: AccordionColor;
+    radius?: AccordionRadius;
+    fullWidth?: boolean;
+    className?: string;
+    classNames?: Partial<Record<AccordionSlots, string>>;
+}
+export interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    value: string;
+    disabled?: boolean;
+}
+export interface AccordionTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    children: ReactNode;
+    indicator?: ReactNode;
+}
+export interface AccordionContentProps extends Omit<HTMLMotionProps<"div">, "ref"> {
+    children: ReactNode;
+}

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

@@ -0,0 +1,39 @@
+import { RefObject } from 'react';
+import { AccordionColor, AccordionProps, AccordionRadius, AccordionValue, AccordionVariant } from './accordion.types';
+
+type RegisteredTrigger = {
+    id: string;
+    ref: RefObject<HTMLButtonElement | null>;
+    disabled: boolean;
+};
+export interface AccordionContextValue {
+    type: NonNullable<AccordionProps["type"]>;
+    value: AccordionValue;
+    collapsible: boolean;
+    variant: NonNullable<AccordionVariant>;
+    color: NonNullable<AccordionColor>;
+    radius: NonNullable<AccordionRadius>;
+    fullWidth: boolean;
+    classNames?: AccordionProps["classNames"];
+    isItemOpen: (itemValue: string) => boolean;
+    toggleItem: (itemValue: string) => void;
+    registerTrigger: (trigger: RegisteredTrigger) => void;
+    unregisterTrigger: (id: string) => void;
+    focusNextTrigger: (currentId: string) => void;
+    focusPreviousTrigger: (currentId: string) => void;
+    focusFirstTrigger: () => void;
+    focusLastTrigger: () => void;
+}
+export interface AccordionItemContextValue {
+    value: string;
+    disabled: boolean;
+    isOpen: boolean;
+    triggerId: string;
+    contentId: string;
+    toggle: () => void;
+}
+export declare const AccordionContext: import('react').Context<AccordionContextValue | null>;
+export declare const AccordionItemContext: import('react').Context<AccordionItemContextValue | null>;
+export declare const useAccordionContext: () => AccordionContextValue;
+export declare const useAccordionItemContext: () => AccordionItemContextValue;
+export {};

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

@@ -0,0 +1,6 @@
+export * from './Accordion';
+export * from './AccordionContent';
+export * from './AccordionItem';
+export * from './AccordionTrigger';
+export * from './accordion.styles';
+export * from './accordion.types';

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>>;