rupoui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 handi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,611 @@
+# RupoUI
+
+A modern, accessible, and highly customizable React UI library built with **Tailwind CSS** and **Framer Motion**. RupoUI focuses on developer experience, providing a type-safe, consistent, and motion-first design system.
+
+## 🚀 Features
+
+- **Tailwind CSS First**: Built on top of Tailwind CSS for infinite customization.
+- **Type-Safe**: Written in TypeScript with full type definitions.
+- **Accessible**: Follows ARIA patterns and best practices.
+- **Motion**: Integrated animations using Framer Motion.
+- **Customizable**: Global configuration and granular slot styling via `classNames`.
+- **Dark Mode**: Native support for dark mode.
+
+## 📦 Installation
+
+```bash
+npm install rupo-ui framer-motion tailwind-variants tailwind-merge clsx
+# or
+pnpm add rupo-ui framer-motion tailwind-variants tailwind-merge clsx
+```
+
+## 🛠 Setup
+
+### 1. Configure Tailwind CSS
+
+Add the RupoUI plugin to your `tailwind.config.js` or `tailwind.config.ts` content and plugins:
+
+```typescript
+// tailwind.config.ts
+import { rupoUi } from "rupo-ui/tailwind";
+
+export default {
+  content: [
+    // ... your app content
+    "./node_modules/rupo-ui/dist/**/*.{js,ts,jsx,tsx}",
+  ],
+  plugins: [rupoUi()],
+};
+```
+
+### 2. Add Provider
+
+Wrap your application with the `RupoUIProvider` to enable global configurations and styles:
+
+```tsx
+import { RupoUIProvider } from "rupo-ui";
+
+function App() {
+  return (
+    <RupoUIProvider>
+      <YourApp />
+    </RupoUIProvider>
+  );
+}
+```
+
+## 🧩 Components
+
+### Button
+
+A versatile button component with support for loading states and icons.
+
+```tsx
+import { Button } from "rupo-ui";
+
+<Button variant="solid" color="primary">
+  Click Me
+</Button>
+
+<Button isLoading color="secondary">
+  Loading
+</Button>
+
+<Button variant="bordered" radius="full">
+  Bordered
+</Button>
+```
+
+**Props:**
+
+- `variant`: `solid` (default), `bordered`, `flat`, `ghost`, `light`.
+- `color`: `primary`, `secondary`, `success`, `warning`, `danger`.
+- `size`: `sm`, `md` (default), `lg`.
+- `radius`: `none`, `sm`, `md`, `lg`, `full`.
+- `isLoading`: Shows a spinner and disables interaction.
+
+### Input
+
+A text input component with validation and content slots.
+
+```tsx
+import { Input } from "rupo-ui";
+
+<Input label="Email" placeholder="Enter your email" />
+
+<Input
+  label="Password"
+  type="password"
+  isInvalid
+  errorMessage="Invalid password"
+/>
+
+<Input
+  startContent={<MailIcon />}
+  variant="bordered"
+/>
+```
+
+**Props:**
+
+- `label`, `placeholder`, `description`, `errorMessage`.
+- `startContent`, `endContent`: Elements to display inside the input.
+- `isInvalid`, `isDisabled`, `isReadOnly`.
+
+### InputNumber
+
+A specialized numeric input with formatting, validation, and layout controls.
+
+```tsx
+import { InputNumber } from "rupo-ui";
+
+// Basic
+<InputNumber label="Quantity" min={0} max={100} />
+
+// Formatted Currency
+<InputNumber
+  label="Price"
+  format={{
+    style: "currency",
+    currency: "USD",
+    prefix: "$"
+  }}
+  defaultValue={1000}
+/>
+
+// Stacked Controls
+<InputNumber
+  label="Stacked"
+  controlsPosition="right"
+/>
+```
+
+**Features:**
+
+- **Controlled/Uncontrolled**: Supports both `value`/`onChange` and `defaultValue`.
+- **Formatting**: Format on blur via `format` prop (locale, precision, thousand separators, prefix/suffix).
+- **Layout**: `controlsPosition` prop for `split` (default) or `right` (vertical stack).
+- **Validation**: `min`, `max`, `step` clamping.
+
+### DatePicker
+
+A component that allows users to select a date from a calendar or enter it manually.
+
+```tsx
+import { DatePicker } from "rupo-ui";
+
+// Basic
+<DatePicker placeholder="Select a date" />
+
+// Segmented Input (Date Only)
+<DatePicker
+  inputMode="segmented"
+  placeholder="DD / MM / YYYY"
+/>
+
+// Date + Time (Minutes)
+<DatePicker
+  granularity="minute"
+  placeholder="Select Date & Time"
+/>
+
+// Date + Time (Seconds)
+<DatePicker
+  granularity="second"
+  placeholder="Select Date & Time"
+/>
+
+<DatePicker
+  minDate={new Date()}
+  format="dd/MM/yyyy"
+/>
+```
+
+**Props:**
+
+- `value`, `defaultValue`, `onChange`.
+- `granularity`: `date` (default), `minute`, `second`.
+- `inputMode`: `text` (default), `segmented`.
+- `minDate`, `maxDate`: Date constraints.
+- `disabledDates`: Array of disabled dates.
+- `format`: Date format string (e.g., "yyyy-MM-dd").
+- `locale`: Locale string for formatting.
+- `allowInput`: Whether to allow manual typing (legacy text mode).
+- `closeOnSelect`: Whether to close the calendar after selection (default: `true`).
+- `weekStartsOn`: Day index (0 for Sunday).
+- `isDisabled`, `isReadOnly`, `placeholder`.
+
+### 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.
+
+```tsx
+import { Calendar, CalendarEngine, getMonthGrid } from "rupo-ui";
+import { useState, useMemo } from "react";
+import { startOfMonth, addMonths, subMonths } from "date-fns";
+
+// Basic Calendar
+function useCalendarEngine() {
+  const [viewDate, setViewDate] = useState(startOfMonth(new Date()));
+  const [selectedDate, setSelectedDate] = useState<Date>();
+
+  const weeks = useMemo(() => {
+    const grid = getMonthGrid({ viewDate, selectedDate });
+    return grid.map((row) =>
+      row.map((cell) => ({
+        ...cell,
+        isOutsideMonth: !cell.isCurrentMonth,
+      })),
+    );
+  }, [viewDate, selectedDate]);
+
+  return {
+    weeks,
+    viewDate,
+    goToNextMonth: () => setViewDate((prev) => addMonths(prev, 1)),
+    goToPrevMonth: () => setViewDate((prev) => subMonths(prev, 1)),
+    setDate: setSelectedDate,
+  };
+}
+
+const MyCalendar = () => {
+  const engine = useCalendarEngine();
+  return <Calendar engine={engine} />;
+};
+
+// With Time Selection
+const CalendarWithTime = () => {
+  const engine = useCalendarEngine();
+  return <Calendar engine={engine} granularity="minute" />;
+};
+
+// With Seconds
+const CalendarWithSeconds = () => {
+  const engine = useCalendarEngine();
+  return <Calendar engine={engine} granularity="second" />;
+};
+```
+
+**Props:**
+
+- `engine`: The `CalendarEngine` object containing state and methods (required).
+  - `weeks`: A 2D array of `CalendarEngineDay` objects representing the calendar grid.
+  - `viewDate`: The currently displayed month/year.
+  - `goToNextMonth()`: Navigate to the next month.
+  - `goToPrevMonth()`: Navigate to the previous month.
+  - `setDate(date: Date)`: Set the selected date.
+- `granularity`: `date` (default), `minute`, `second` - Controls whether to show time selection.
+- `isDisabled`: Disables all interactions.
+- `isReadOnly`: Prevents date selection but allows navigation.
+- `classNames`: Custom styles for component slots:
+  - `base`, `header`, `headerTitle`, `grid`, `weekdaysWrapper`, `daysWrapper`
+  - `weekday`, `cell`, `cellSelected`, `cellToday`, `cellDisabled`, `cellOutside`, `time`
+
+**Features:**
+
+- **Headless Architecture**: Bring your own state management via the `engine` prop.
+- **Full Keyboard Navigation**: Arrow keys, Home/End, PageUp/PageDown support.
+- **Accessibility**: ARIA grid pattern with proper roles and labels.
+- **Time Selection**: Optional time picker for minute or second granularity.
+- **Helper Utility**: Use `getMonthGrid()` to generate calendar data from state.
+
+### Select
+
+A form component for selecting a value from a set of options, supporting single and multiple selection.
+
+```tsx
+import { Select, SelectItem } from "rupo-ui";
+
+// Basic
+<Select label="Favorite Animal">
+  <SelectItem key="cat">Cat</SelectItem>
+  <SelectItem key="dog">Dog</SelectItem>
+</Select>
+
+// Multiple Selection
+<Select
+  label="Tech Stack"
+  selectionMode="multiple"
+>
+  <SelectItem key="react">React</SelectItem>
+  <SelectItem key="vue">Vue</SelectItem>
+</Select>
+```
+
+**Features:**
+
+- **Dynamic**: Supports single and multiple selection modes.
+- **Controlled**: Fully controllable via `value` and `onValueChange`.
+- **Accessible**: Keyboard navigation and ARIA support out of the box.
+- **Customizable**: Styling slots for `trigger`, `popover`, `listbox`, `option`, etc.
+
+### Checkbox
+
+A control that allows the user to select one or more items from a set.
+
+```tsx
+import { Checkbox, CheckboxGroup } from "rupo-ui";
+
+// Single
+<Checkbox>Accept terms</Checkbox>
+
+// Indeterminate
+<Checkbox isIndeterminate>Select all</Checkbox>
+
+// Group
+<CheckboxGroup
+  label="Select cities"
+  defaultValue={["sydney", "london"]}
+  color="warning"
+>
+  <Checkbox value="sydney">Sydney</Checkbox>
+  <Checkbox value="london">London</Checkbox>
+  <Checkbox value="tokyo">Tokyo</Checkbox>
+</CheckboxGroup>
+```
+
+**Features:**
+
+- **Controlled/Uncontrolled**: Supports both `isSelected`/`onValueChange` and `defaultSelected`.
+- **Indeterminate**: Support for indeterminate state.
+- **Group Context**: `CheckboxGroup` manages shared state and propagates styles (`color`, `size`, etc.) to children.
+- **Accessibility**: Focus rings and native keyboard support.
+
+### Radio & RadioGroup
+
+A set of checkable buttons where only one can be checked at a time.
+
+```tsx
+import { Radio, RadioGroup } from "rupo-ui";
+
+<RadioGroup label="Select Plan" defaultValue="free" color="secondary">
+  <Radio value="free">Free</Radio>
+  <Radio value="pro">Pro (Recommended)</Radio>
+  <Radio value="enterprise" description="Contact sales">
+    Enterprise
+  </Radio>
+</RadioGroup>;
+```
+
+**Features:**
+
+- **Single Selection**: Managed automatically by `RadioGroup`.
+- **Customizable**: Full support for variants, colors, and sizes.
+- **Accessibility**: Full ARIA support and keyboard navigation.
+
+### Textarea
+
+A multiline text input component with consistent styling and resizing controls.
+
+```tsx
+import { Textarea } from "rupo-ui";
+
+<Textarea label="Description" placeholder="Enter your description" />
+
+<Textarea
+  label="Bio"
+  variant="bordered"
+  resize="vertical"
+  rows={4}
+/>
+```
+
+**Props:**
+
+- `label`, `placeholder`, `description`, `errorMessage`.
+- `resize`: `none` (default), `vertical`, `horizontal`, `both`.
+- `rows`: Number of text rows.
+- Standard `Input` styling props (`variant`, `color`, `size`, `radius`).
+
+### Spinner
+
+loading indicator.
+
+```tsx
+import { Spinner } from "rupo-ui";
+
+<Spinner size="lg" color="primary" />;
+```
+
+### Switch
+
+A control that allows the user to toggle between checked and not checked.
+
+```tsx
+import { Switch } from "rupo-ui";
+
+<Switch defaultSelected>WiFi</Switch>
+
+<Switch color="success" size="lg" startContent={<SunIcon />} endContent={<MoonIcon />}>
+  Dark Mode
+</Switch>
+```
+
+**Props:**
+
+- `size`: `sm`, `md` (default), `lg`.
+- `color`: `primary` (default), `secondary`, `success`, `warning`, `danger`.
+- `startContent`, `endContent`: Icons or text inside the thumb.
+- `isSelected`, `defaultSelected`, `onValueChange`.
+
+### Dropdown
+
+A floating menu that displays a list of actions or options.
+
+```tsx
+import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from "rupo-ui";
+
+<Dropdown>
+  <DropdownTrigger>
+    <Button variant="bordered">Open Menu</Button>
+  </DropdownTrigger>
+  <DropdownContent>
+    <DropdownItem key="new">New file</DropdownItem>
+    <DropdownItem key="copy">Copy link</DropdownItem>
+    <DropdownItem key="edit">Edit file</DropdownItem>
+    <DropdownItem key="delete" className="text-danger" color="danger">
+      Delete file
+    </DropdownItem>
+  </DropdownContent>
+</Dropdown>;
+```
+
+**Features:**
+
+- **Trigger**: Can wrap any element (Button, Avatar, etc.).
+- **Content**: Supports sections, dividers, and custom styling.
+- **Interaction**: Handles focus, keyboard navigation, and click outside automatically.
+
+### Modal
+
+A dialog that focuses the user's attention exclusively on an information or an action.
+
+```tsx
+import {
+  Modal,
+  ModalTrigger,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+} from "rupo-ui";
+
+<Modal>
+  <ModalTrigger>
+    <Button>Open Modal</Button>
+  </ModalTrigger>
+  <ModalContent>
+    {(onClose) => (
+      <>
+        <ModalHeader>Modal Title</ModalHeader>
+        <ModalBody>
+          <p>Modal content goes here...</p>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="danger" variant="light" onPress={onClose}>
+            Close
+          </Button>
+          <Button color="primary" onPress={onClose}>
+            Action
+          </Button>
+        </ModalFooter>
+      </>
+    )}
+  </ModalContent>
+</Modal>;
+```
+
+**Props:**
+
+- `size`: `xs` to `5xl`, `full`.
+- `backdrop`: `opaque` (default), `blur`, `transparent`.
+- `placement`: `auto`, `top`, `center` (default), `bottom`.
+- `scrollBehavior`: `normal` (default), `inside`, `outside`.
+
+### Tooltip
+
+A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
+
+```tsx
+import { Tooltip, Button } from "rupo-ui";
+
+<Tooltip content="I am a tooltip">
+  <Button>Hover me</Button>
+</Tooltip>;
+```
+
+**Props:**
+
+- `content`: The content of the tooltip.
+- `placement`: Position relative to the trigger (top, bottom, left, right, etc.).
+- `delay`: Delay in milliseconds before opening.
+- `closeDelay`: Delay in milliseconds before closing.
+- `offset`: Distance from the trigger.
+
+### Popover
+
+A non-modal dialog that floats around a trigger. It is used to display rich content behind a trigger element.
+
+```tsx
+import { Popover, PopoverTrigger, PopoverContent, Button } from "rupo-ui";
+
+<Popover placement="bottom">
+  <PopoverTrigger>
+    <Button>Open Popover</Button>
+  </PopoverTrigger>
+  <PopoverContent showArrow={true}>
+    <div className="px-1 py-2">
+      <div className="text-small font-bold">Popover Content</div>
+      <div className="text-tiny">This is the popover content</div>
+    </div>
+  </PopoverContent>
+</Popover>;
+```
+
+**Props:**
+
+- `placement`: Position relative to the trigger (`top`, `bottom`, `left`, `right`, etc.).
+- `offset`: Distance from the trigger.
+- `trigger`: Interaction to trigger the popover: `click` (default), `hover`.
+- `isOpen` / `defaultOpen` / `onOpenChange`: Controlled and uncontrolled state management.
+- `showArrow`: Whether to show an arrow (on `PopoverContent`).
+- `motionPreset`: `scale` (default), `fade`, `slide` (on `PopoverContent`).
+
+### Tabs
+
+A component that allows users to switch between different views or functional aspects of an application.
+
+```tsx
+import { Tabs, Tab } from "rupo-ui";
+
+<Tabs aria-label="Options">
+  <Tab key="photos" title="Photos">
+    <Card>Photos Content</Card>
+  </Tab>
+  <Tab key="music" title="Music">
+    <Card>Music Content</Card>
+  </Tab>
+  <Tab key="videos" title="Videos">
+    <Card>Videos Content</Card>
+  </Tab>
+</Tabs>
+
+// Vertical
+<Tabs isVertical aria-label="Vertical tabs">
+  <Tab key="settings" title="Settings" />
+  <Tab key="permissions" title="Permissions" />
+</Tabs>
+```
+
+**Props:**
+
+- `variant`: `solid` (default), `underlined`, `bordered`, `light`.
+- `color`: `default` (default), `primary`, `secondary`, `success`, `warning`, `danger`.
+- `size`: `sm`, `md` (default), `lg`.
+- `radius`: `none`, `sm`, `md`, `lg`, `full`.
+- `isVertical`: Whether to render tabs vertically.
+- `fullWidth`: Whether to take up the full width of the container.
+
+## 🎨 Customization
+
+### Global Configuration
+
+Set default props for any component globally via the provider:
+
+```tsx
+<RupoUIProvider
+  config={{
+    Button: {
+      radius: "full",
+      variant: "bordered",
+    },
+    Input: {
+      size: "lg",
+    },
+    Textarea: {
+      variant: "faded",
+    },
+  }}
+>
+  <App />
+</RupoUIProvider>
+```
+
+### Granular Styling
+
+Use the `classNames` prop to override inner slots of any component:
+
+```tsx
+<Input
+  classNames={{
+    input: "text-lg font-bold",
+    inputWrapper: "bg-gray-100 dark:bg-gray-800",
+    label: "text-primary",
+  }}
+/>
+```
+
+## 📄 License
+
+MIT

package/dist/components/button/Button.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+
+export declare const Button: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+    size?: "sm" | "md" | "lg";
+    variant?: "solid" | "flat" | "ghost" | "bordered";
+    color?: "primary" | "secondary" | "success" | "warning" | "danger";
+    radius?: "sm" | "md" | "lg" | "full";
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    fullWidth?: boolean;
+    startContent?: React.ReactNode;
+    endContent?: React.ReactNode;
+    as?: any;
+    href?: string;
+    classNames?: Partial<Record<"base" | "content" | "spinner", string>>;
+} & Omit<import('framer-motion').HTMLMotionProps<"button">, "ref"> & React.RefAttributes<HTMLButtonElement>>;