@sypra-ui/ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026
+
+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,84 @@
+# @sypra-ui/ui
+
+React primitives for React 18+ applications. They use Tailwind utility classes
+and semantic CSS variables, so the library has no runtime styling dependency.
+
+## Install
+
+```sh
+pnpm add @sypra-ui/ui
+```
+
+Import the theme tokens once in your global stylesheet:
+
+```css
+@import '@sypra-ui/ui/styles.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+Tell Tailwind to scan the installed package so it emits the utilities used by
+the components:
+
+```ts
+// tailwind.config.ts
+export default {
+  content: [
+    './src/**/*.{ts,tsx}',
+    './node_modules/@sypra-ui/ui/dist/**/*.{js,mjs}',
+  ],
+};
+```
+
+## Customize the theme
+
+Set the semantic tokens on `:root` for an application-wide theme, or on a
+wrapper to scope a theme to one part of the page.
+
+```css
+.brand-theme {
+  --rui-background: 224 30% 8%;
+  --rui-foreground: 210 40% 98%;
+  --rui-card: 224 25% 12%;
+  --rui-primary: 270 85% 62%;
+  --rui-primary-foreground: 0 0% 100%;
+  --rui-secondary: 224 20% 18%;
+  --rui-border: 224 18% 24%;
+  --rui-success: 142 71% 45%;
+  --rui-success-background: 142 45% 14%;
+  --rui-success-foreground: 142 70% 82%;
+  --rui-warning: 38 92% 50%;
+  --rui-warning-background: 36 45% 16%;
+  --rui-warning-foreground: 45 93% 81%;
+  --rui-ring: 270 85% 68%;
+  --rui-radius: 1rem;
+}
+```
+
+`--rui-radius` changes the default shape: use `0` for sharp controls, a small
+value for subtle rounding, or `9999px` for pills. The full token set is in
+`src/styles.css`.
+
+## Customize one component
+
+Most visual primitives accept `className`, and `Button` provides `variant` and
+`size` (`sm`, `md`, `lg`). Use regular Tailwind utilities for local sizing or
+shape changes. Prefix an override with `!` when it replaces a library utility
+for the same CSS property. Wrap a page composition in a themed element to
+scope token changes to that page.
+
+```tsx
+import { Button, Card } from '@sypra-ui/ui';
+
+<Button size="lg" className="!rounded-full !px-8 !text-base">
+  Upgrade
+</Button>
+
+<Card className="!rounded-none !border-violet-500 !bg-violet-50">
+  Custom card
+</Card>
+```
+
+The package is ESM-only. Import `@sypra-ui/ui/styles.css` exactly once per
+application.

package/dist/index.d.ts

@@ -0,0 +1,286 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, InputHTMLAttributes, ComponentPropsWithoutRef, SelectHTMLAttributes, ReactNode, CSSProperties, TableHTMLAttributes } from 'react';
+
+declare const cn: (...values: Array<string | false | null | undefined>) => string;
+
+declare const buttonStyles: {
+    readonly primary: "bg-[hsl(var(--rui-primary))] text-[hsl(var(--rui-primary-foreground))] hover:opacity-90";
+    readonly secondary: "bg-[hsl(var(--rui-secondary))] text-[hsl(var(--rui-secondary-foreground))] hover:opacity-80";
+    readonly outline: "border border-[hsl(var(--rui-border))] bg-transparent hover:bg-[hsl(var(--rui-accent))]";
+    readonly ghost: "bg-transparent hover:bg-[hsl(var(--rui-accent))]";
+    readonly destructive: "bg-[hsl(var(--rui-destructive))] text-[hsl(var(--rui-destructive-foreground))] hover:opacity-90";
+};
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: keyof typeof buttonStyles;
+    size?: 'sm' | 'md' | 'lg';
+    loading?: boolean;
+}
+declare function Button({ variant, size, loading, className, children, disabled, ...props }: ButtonProps): react.JSX.Element;
+declare function IconButton({ children, 'aria-label': label, className, ...props }: ButtonProps): react.JSX.Element;
+declare const Input: ({ className, ...props }: InputHTMLAttributes<HTMLInputElement>) => react.JSX.Element;
+declare const Textarea: ({ className, ...props }: ComponentPropsWithoutRef<"textarea">) => react.JSX.Element;
+declare const Label: ({ className, ...props }: ComponentPropsWithoutRef<"label">) => react.JSX.Element;
+declare const Checkbox: ({ className, ...props }: InputHTMLAttributes<HTMLInputElement>) => react.JSX.Element;
+declare const Radio: ({ className, ...props }: InputHTMLAttributes<HTMLInputElement>) => react.JSX.Element;
+declare const Switch: ({ checked, onChange, disabled, className, ...props }: Omit<InputHTMLAttributes<HTMLInputElement>, "type">) => react.JSX.Element;
+declare const Select: ({ className, children, ...props }: SelectHTMLAttributes<HTMLSelectElement>) => react.JSX.Element;
+
+type ChildrenProps$3 = {
+    children?: ReactNode;
+    className?: string;
+};
+declare function Card({ className, ...props }: ComponentPropsWithoutRef<'section'>): react.JSX.Element;
+declare function CardHeader({ className, ...props }: ComponentPropsWithoutRef<'div'>): react.JSX.Element;
+declare function CardTitle({ className, ...props }: ComponentPropsWithoutRef<'h3'>): react.JSX.Element;
+declare function CardDescription({ className, ...props }: ComponentPropsWithoutRef<'p'>): react.JSX.Element;
+declare function Badge({ className, variant, ...props }: ChildrenProps$3 & {
+    variant?: 'default' | 'success' | 'warning' | 'destructive' | 'outline';
+}): react.JSX.Element;
+declare function Avatar({ src, alt, fallback, className, }: {
+    src?: string;
+    alt?: string;
+    fallback?: ReactNode;
+    className?: string;
+}): react.JSX.Element;
+declare const Separator: ({ className, ...props }: ComponentPropsWithoutRef<"div">) => react.JSX.Element;
+declare const Skeleton: ({ className, ...props }: ComponentPropsWithoutRef<"div">) => react.JSX.Element;
+declare function Progress({ value, max, label, className, }: {
+    value: number;
+    max?: number;
+    label?: string;
+    className?: string;
+}): react.JSX.Element;
+
+type ChildrenProps$2 = {
+    children?: ReactNode;
+    className?: string;
+};
+declare function Dialog({ open: controlled, defaultOpen, onOpenChange, children, }: {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: ReactNode;
+}): react.JSX.Element;
+declare function DialogTrigger({ children, asChild, }: {
+    children: ReactNode;
+    asChild?: boolean;
+}): react.JSX.Element;
+declare function DialogClose({ children, asChild, }: {
+    children: ReactNode;
+    asChild?: boolean;
+}): react.JSX.Element;
+declare function DialogContent({ children, className, movable, constrainToViewport, style, ...props }: ChildrenProps$2 & {
+    movable?: boolean;
+    constrainToViewport?: boolean;
+    style?: CSSProperties;
+}): react.ReactPortal | null;
+declare const DialogHeader: ({ className, ...props }: ComponentPropsWithoutRef<"div">) => react.JSX.Element;
+declare const DialogTitle: ({ className, ...props }: ComponentPropsWithoutRef<"h2">) => react.JSX.Element;
+declare const DialogDescription: ({ className, ...props }: ComponentPropsWithoutRef<"p">) => react.JSX.Element;
+declare const DialogBody: ({ className, ...props }: ComponentPropsWithoutRef<"div">) => react.JSX.Element;
+declare const DialogFooter: ({ className, ...props }: ComponentPropsWithoutRef<"div">) => react.JSX.Element;
+declare const AlertDialog: typeof Dialog;
+declare const AlertDialogTrigger: typeof DialogTrigger;
+declare const AlertDialogContent: typeof DialogContent;
+declare const AlertDialogHeader: ({ className, ...props }: ComponentPropsWithoutRef<"div">) => react.JSX.Element;
+declare const AlertDialogTitle: ({ className, ...props }: ComponentPropsWithoutRef<"h2">) => react.JSX.Element;
+declare const AlertDialogDescription: ({ className, ...props }: ComponentPropsWithoutRef<"p">) => react.JSX.Element;
+declare const AlertDialogFooter: ({ className, ...props }: ComponentPropsWithoutRef<"div">) => react.JSX.Element;
+declare const AlertDialogClose: typeof DialogClose;
+declare function Sheet({ children, ...props }: ComponentPropsWithoutRef<typeof Dialog>): react.JSX.Element;
+declare const SheetTrigger: typeof DialogTrigger;
+declare const SheetClose: typeof DialogClose;
+declare function SheetContent({ className, ...props }: ComponentPropsWithoutRef<typeof DialogContent>): react.JSX.Element;
+declare const Drawer: typeof Sheet;
+declare const DrawerTrigger: typeof DialogTrigger;
+declare const DrawerContent: typeof SheetContent;
+
+declare function Popover({ trigger, children, className, open: controlledOpen, defaultOpen, onOpenChange, }: {
+    trigger: ReactNode;
+    children: ReactNode;
+    className?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}): react.JSX.Element;
+declare const Tooltip: ({ content, children, className, }: {
+    content: string;
+    children: ReactNode;
+    className?: string;
+}) => react.JSX.Element;
+declare function DropdownMenu({ trigger, children, }: {
+    trigger: ReactNode;
+    children: ReactNode;
+}): react.JSX.Element;
+declare const DropdownMenuItem: ({ className, ...props }: ComponentPropsWithoutRef<"button">) => react.JSX.Element;
+
+type ChildrenProps$1 = {
+    children?: ReactNode;
+    className?: string;
+};
+declare function Navbar({ brand, children, className, label, }: {
+    brand?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    label?: string;
+}): react.JSX.Element;
+declare function Sidebar({ children, className, label, }: ChildrenProps$1 & {
+    label?: string;
+}): react.JSX.Element;
+declare function MobileNav({ children, className, label, }: ChildrenProps$1 & {
+    label?: string;
+}): react.JSX.Element;
+declare function Breadcrumb({ items, }: {
+    items: Array<{
+        label: string;
+        href?: string;
+    }>;
+}): react.JSX.Element;
+declare function Tabs({ tabs, value, defaultValue, onValueChange, className, }: {
+    tabs: Array<{
+        value: string;
+        label: ReactNode;
+        content: ReactNode;
+        disabled?: boolean;
+    }>;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    className?: string;
+}): react.JSX.Element;
+declare function Accordion({ items, type, }: {
+    items: Array<{
+        value: string;
+        title: ReactNode;
+        content: ReactNode;
+    }>;
+    type?: 'single' | 'multiple';
+}): react.JSX.Element;
+declare function Pagination({ page, pageSize, total, onPageChange, onPageSizeChange, pageSizeOptions, ariaLabel, className, }: {
+    page: number;
+    pageSize: number;
+    total: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange?: (size: number) => void;
+    pageSizeOptions?: number[];
+    ariaLabel?: string;
+    className?: string;
+}): react.JSX.Element;
+
+declare function Alert({ title, children, variant, className, }: {
+    title?: ReactNode;
+    children?: ReactNode;
+    variant?: 'default' | 'destructive' | 'success';
+    className?: string;
+}): react.JSX.Element;
+declare function Toast({ title, description, action, className, }: {
+    title: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    className?: string;
+}): react.JSX.Element;
+declare const EmptyState: ({ title, description, action, className, }: {
+    title?: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    className?: string;
+}) => react.JSX.Element;
+declare const ErrorState: ({ title, onRetry, className, }: {
+    title?: ReactNode;
+    onRetry?: () => void;
+    className?: string;
+}) => react.JSX.Element;
+declare const LoadingState: ({ label, className, }: {
+    label?: string;
+    className?: string;
+}) => react.JSX.Element;
+
+type ChildrenProps = {
+    children?: ReactNode;
+    className?: string;
+};
+declare const PageShell: ({ as: Component, className, ...props }: ComponentPropsWithoutRef<"main"> & {
+    as?: "main" | "div";
+}) => react.JSX.Element;
+declare const PageHeader: ({ as: Heading, title, description, actions, className, }: {
+    title: ReactNode;
+    as?: "h1" | "h2" | "h3";
+    description?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+}) => react.JSX.Element;
+declare const PageContent: ({ className, ...props }: ComponentPropsWithoutRef<"div">) => react.JSX.Element;
+declare const Section: ({ title, description, children, className, }: ChildrenProps & {
+    title?: ReactNode;
+    description?: ReactNode;
+}) => react.JSX.Element;
+declare const Stack: ({ gap, className, ...props }: ComponentPropsWithoutRef<"div"> & {
+    gap?: 1 | 2 | 3 | 4 | 6 | 8;
+}) => react.JSX.Element;
+declare const Container: ({ className, ...props }: ComponentPropsWithoutRef<"div">) => react.JSX.Element;
+
+declare const Table: ({ className, ...props }: TableHTMLAttributes<HTMLTableElement>) => react.JSX.Element;
+declare const TableHeader: ({ className, ...props }: ComponentPropsWithoutRef<"thead">) => react.JSX.Element;
+declare const TableBody: ({ className, ...props }: ComponentPropsWithoutRef<"tbody">) => react.JSX.Element;
+declare const TableFooter: ({ className, ...props }: ComponentPropsWithoutRef<"tfoot">) => react.JSX.Element;
+declare const TableRow: ({ className, ...props }: ComponentPropsWithoutRef<"tr">) => react.JSX.Element;
+declare const TableHead: ({ className, ...props }: ComponentPropsWithoutRef<"th">) => react.JSX.Element;
+declare const TableCell: ({ className, ...props }: ComponentPropsWithoutRef<"td">) => react.JSX.Element;
+declare const TableCaption: ({ className, ...props }: ComponentPropsWithoutRef<"caption">) => react.JSX.Element;
+type DataColumn<T> = {
+    key: keyof T | string;
+    header: ReactNode;
+    cell?: (row: T) => ReactNode;
+    sortable?: boolean;
+    className?: string;
+};
+type DataTablePagination = {
+    page: number;
+    pageSize: number;
+    total: number;
+};
+declare function DataTable<T extends Record<string, unknown>>({ data, columns, loading, error, pagination, onPageChange, onRowClick, emptyMessage, className, }: {
+    data: T[];
+    columns: DataColumn<T>[];
+    loading?: boolean;
+    error?: ReactNode;
+    pagination?: DataTablePagination;
+    onPageChange?: (page: number) => void;
+    onRowClick?: (row: T) => void;
+    emptyMessage?: ReactNode;
+    className?: string;
+}): react.JSX.Element;
+declare function SearchableTable<T extends Record<string, unknown>>({ data, columns, searchKeys, ...props }: Omit<ComponentPropsWithoutRef<typeof DataTable<T>>, 'data'> & {
+    data: T[];
+    columns: DataColumn<T>[];
+    searchKeys: Array<keyof T>;
+}): react.JSX.Element;
+declare const PaginatedTable: typeof DataTable;
+
+declare function Command({ open, onOpenChange, items, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    items: Array<{
+        label: string;
+        onSelect: () => void;
+        keywords?: string[];
+    }>;
+}): react.JSX.Element;
+declare function ContextMenu({ children, menu, }: {
+    children: ReactNode;
+    menu: ReactNode;
+}): react.JSX.Element;
+declare function CopyButton({ value, children, onCopy, }: {
+    value: string;
+    children?: ReactNode;
+    onCopy?: () => void;
+}): react.JSX.Element;
+declare function PasswordInput({ className, ...props }: InputHTMLAttributes<HTMLInputElement>): react.JSX.Element;
+declare function FileUpload({ accept, multiple, onFiles, label, }: {
+    accept?: string;
+    multiple?: boolean;
+    onFiles: (files: File[]) => void;
+    label?: string;
+}): react.JSX.Element;
+
+export { Accordion, Alert, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Avatar, Badge, Breadcrumb, Button, type ButtonProps, Card, CardDescription, CardHeader, CardTitle, Checkbox, Command, Container, ContextMenu, CopyButton, type DataColumn, DataTable, type DataTablePagination, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerContent, DrawerTrigger, DropdownMenu, DropdownMenuItem, EmptyState, ErrorState, FileUpload, IconButton, Input, Label, LoadingState, MobileNav, Navbar, PageContent, PageHeader, PageShell, PaginatedTable, Pagination, PasswordInput, Popover, Progress, Radio, SearchableTable, Section, Select, Separator, Sheet, SheetClose, SheetContent, SheetTrigger, Sidebar, Skeleton, Stack, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Textarea, Toast, Tooltip, cn };