@crisellevaldez/speculo-ui 0.7.45

package/README.md

@@ -0,0 +1,134 @@
+# Speculo UI
+
+A modern React component library built with TypeScript and Tailwind CSS.
+
+## Installation
+
+1. Create `.npmrc` in your project root:
+
+```
+@crisellevaldez:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
+```
+
+2. Install the package:
+
+```bash
+npm install @crisellevaldez/speculo-ui
+```
+
+3. Add to your `tailwind.config.js`:
+
+```js
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    // ... your other content paths
+    "./node_modules/@crisellevaldez/speculo-ui/dist/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+};
+```
+
+4. **Important**: Import the required styles in your main CSS file (e.g., app.css or globals.css):
+
+```css
+@import "@crisellevaldez/speculo-ui/styles.css";
+```
+
+This import provides:
+
+- CSS variables for theming (colors, border radius)
+- Dark mode support through CSS variables
+- Base component styles
+
+5. For Next.js projects, add to `next.config.js`:
+
+```js
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ["@crisellevaldez/speculo-ui"],
+};
+
+module.exports = nextConfig;
+```
+
+## Usage
+
+```tsx
+import { Button } from "@crisellevaldez/speculo-ui";
+
+function App() {
+  return <Button>Click me</Button>;
+}
+```
+
+## Theming
+
+The library uses CSS variables for theming, providing:
+
+- Consistent color palette across components
+- Built-in dark mode support
+- Easy customization through CSS variables
+- HSL color format for flexible color manipulation
+
+## Components
+
+- Button
+- Input
+- Select
+- Checkbox
+- Radio
+- Switch
+- Modal
+- Drawer
+- Toast
+- Typography
+- And more...
+
+## Documentation
+
+View the full documentation and examples at [https://speculo-ui.web.app](https://speculo-ui.web.app)

package/dist/App.d.ts

@@ -0,0 +1,2 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

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

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+
+export interface AccordionItemProps {
+    title: React.ReactNode;
+    children: React.ReactNode;
+    disabled?: boolean;
+}
+export interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    items: AccordionItemProps[];
+    type?: "single" | "multiple";
+    defaultValue?: string | string[];
+    value?: string | string[];
+    onChange?: (value: string | string[]) => void;
+}
+export declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & {
+    isOpen: boolean;
+    onToggle: () => void;
+    itemId: string;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "default" | "destructive" | "warning" | "success" | "info";
+}
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+export declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+export declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "default" | "secondary" | "outline" | "destructive" | "success" | "warning" | "info";
+    size?: "sm" | "md" | "lg";
+}
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive" | "success" | "link";
+    size?: "xs" | "sm" | "md" | "lg" | "icon";
+    isLoading?: boolean;
+}
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Calendar/Calendar.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+
+export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "onMouseEnter" | "onMouseLeave"> {
+    value?: Date;
+    onChange?: (date: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: boolean;
+    locale?: string;
+    disabledDates?: Date[];
+    highlightedDates?: Date[];
+    onMouseEnter?: (date: Date) => void;
+    onMouseLeave?: (date: Date) => void;
+}
+export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label?: string;
+    error?: string;
+    indeterminate?: boolean;
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export interface CheckboxGroupProps {
+    children: React.ReactNode;
+    label?: string;
+    error?: string;
+    className?: string;
+}
+export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;

package/dist/components/ComboBox/ComboBox.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+
+export interface ComboBoxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface ComboBoxProps {
+    options: ComboBoxOption[];
+    value?: string | string[];
+    onChange?: (value: string | string[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    multiple?: boolean;
+    maxItems?: number;
+    className?: string;
+    onInputChange?: (value: string) => void;
+    renderOption?: (option: ComboBoxOption) => React.ReactNode;
+}
+export declare const ComboBox: React.ForwardRefExoticComponent<ComboBoxProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Container/Container.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+
+export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    padding?: boolean;
+    centered?: boolean;
+    as?: "div" | "section" | "article" | "main";
+}
+export declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+
+export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    value: Date | null;
+    onChange: (date: Date | null) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: boolean;
+    isLoading?: boolean;
+    locale?: string;
+    disabledDates?: Date[];
+    placeholder?: string;
+    error?: string;
+    helperText?: string;
+}
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+
+export interface DateRange {
+    from: Date | null;
+    to: Date | null;
+}
+export interface DateRangePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    value: DateRange;
+    onChange: (range: DateRange) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: boolean;
+    isLoading?: boolean;
+    locale?: string;
+    disabledDates?: Date[];
+    placeholder?: {
+        from: string;
+        to: string;
+    };
+    error?: string;
+    helperText?: string;
+}
+export declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+
+export interface DrawerHeaderProps {
+    children: React.ReactNode;
+    className?: string;
+    onClose?: () => void;
+}
+export interface DrawerBodyProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export interface DrawerFooterProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const DrawerHeader: React.FC<DrawerHeaderProps>;
+declare const DrawerBody: React.FC<DrawerBodyProps>;
+declare const DrawerFooter: React.FC<DrawerFooterProps>;
+export interface DrawerProps {
+    open: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    side?: "left" | "right" | "top" | "bottom";
+    size?: "sm" | "md" | "lg" | "xl" | "full";
+    overlay?: boolean;
+    closeOnOverlayClick?: boolean;
+    closeOnEsc?: boolean;
+}
+declare const DrawerComponent: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Drawer: typeof DrawerComponent & {
+    Header: typeof DrawerHeader;
+    Body: typeof DrawerBody;
+    Footer: typeof DrawerFooter;
+};
+export {};

package/dist/components/DualDateRangePicker/DualCalendar.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+
+export interface DualCalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "onMouseEnter" | "onMouseLeave"> {
+    value?: Date | null;
+    endValue?: Date | null;
+    onChange?: (date: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: boolean;
+    locale?: string;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    disabledDates?: Date[];
+    highlightedDates?: Date[];
+    onMouseEnter?: (date: Date) => void;
+    onMouseLeave?: (date: Date) => void;
+    viewDate: Date;
+}
+export declare const DualCalendar: React.ForwardRefExoticComponent<DualCalendarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/DualDateRangePicker/DualDateRangePicker.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+
+export interface DateRange {
+    from: Date | null;
+    to: Date | null;
+}
+export interface DualDateRangePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "showPresets"> {
+    value: DateRange;
+    onChange: (range: DateRange) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: boolean;
+    isLoading?: boolean;
+    locale?: string;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    disabledDates?: Date[];
+    placeholder?: {
+        from: string;
+        to: string;
+    };
+    error?: string;
+    helperText?: string;
+    showPresets?: boolean;
+}
+export declare const DualDateRangePicker: React.ForwardRefExoticComponent<DualDateRangePickerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/DualDateRangePicker/useFloatingPosition.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+
+interface PositionConfig {
+    dropdownHeight: number;
+    dropdownWidth: number;
+    mobileBreakpoint: number;
+    padding: number;
+}
+export declare const useFloatingPosition: (triggerRef: RefObject<HTMLElement>, dropdownRef: RefObject<HTMLElement>, isOpen: boolean, config: PositionConfig) => void;
+export {};

package/dist/components/FirebaseTest/FirebaseTest.d.ts

@@ -0,0 +1 @@
+export declare function FirebaseTest(): import("react/jsx-runtime").JSX.Element;

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+
+export interface FormControlProps {
+    children: React.ReactNode;
+    className?: string;
+    error?: string;
+    required?: boolean;
+}
+export declare const FormControl: React.FC<FormControlProps>;
+export interface FormLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    required?: boolean;
+}
+export declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps & React.RefAttributes<HTMLLabelElement>>;
+export interface FormErrorMessageProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const FormErrorMessage: React.FC<FormErrorMessageProps>;
+export interface FormHelperTextProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const FormHelperText: React.FC<FormHelperTextProps>;
+export declare const Form: {
+    Control: React.FC<FormControlProps>;
+    Label: React.ForwardRefExoticComponent<FormLabelProps & React.RefAttributes<HTMLLabelElement>>;
+    ErrorMessage: React.FC<FormErrorMessageProps>;
+    HelperText: React.FC<FormHelperTextProps>;
+};

package/dist/components/HoverCard/HoverCard.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+
+export interface HoverCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    trigger: React.ReactNode;
+    openDelay?: number;
+    closeDelay?: number;
+    side?: "top" | "right" | "bottom" | "left";
+    align?: "start" | "center" | "end";
+    arrow?: boolean;
+}
+export declare const HoverCard: React.ForwardRefExoticComponent<HoverCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    error?: string;
+    helperText?: string;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    isLoading?: boolean;
+    inputSize?: "sm" | "md" | "lg";
+    clearable?: boolean;
+    onClear?: () => void;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Loading/Loading.d.ts

@@ -0,0 +1,5 @@
+interface LoadingProps {
+    className?: string;
+}
+export declare const Loading: ({ className }: LoadingProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,45 @@
+import { default as React } from 'react';
+
+export interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "full";
+    closeOnOverlayClick?: boolean;
+    closeOnEsc?: boolean;
+    initialFocus?: React.RefObject<HTMLElement>;
+    className?: string;
+    loading?: boolean;
+}
+export interface ModalHeaderProps {
+    children: React.ReactNode;
+    className?: string;
+    onClose?: () => void;
+}
+export interface ModalBodyProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export interface ModalFooterProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const ModalHeader: React.FC<ModalHeaderProps>;
+declare const ModalBody: React.FC<ModalBodyProps>;
+declare const ModalFooter: React.FC<ModalFooterProps>;
+export declare const Modal: React.FC<ModalProps> & {
+    Header: typeof ModalHeader;
+    Body: typeof ModalBody;
+    Footer: typeof ModalFooter;
+};
+export interface ModalProviderProps {
+    children: React.ReactNode;
+}
+export interface ModalContextType {
+    openModal: (modal: React.ReactNode) => void;
+    closeModal: () => void;
+}
+export declare const ModalContext: React.Context<ModalContextType | null>;
+export declare const ModalProvider: React.FC<ModalProviderProps>;
+export declare const useModal: () => ModalContextType;
+export {};

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+
+export interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    siblingCount?: number;
+    showFirstLast?: boolean;
+    size?: "sm" | "md" | "lg";
+    disabled?: boolean;
+}
+export declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/PhoneNumber/PhoneNumber.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { Country } from 'react-phone-number-input';
+
+export interface PhoneNumberProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {
+    value: string | undefined;
+    onChange: (value: string | undefined) => void;
+    error?: string;
+    isLoading?: boolean;
+    defaultCountry?: Country;
+    helperText?: string;
+}
+export declare const PhoneNumber: React.ForwardRefExoticComponent<PhoneNumberProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Progress/Progress.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+
+export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: number;
+    max?: number;
+    variant?: "default" | "circle" | "loading";
+    size?: "sm" | "md" | "lg";
+    showValue?: boolean;
+    indeterminate?: boolean;
+}
+export declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label?: string;
+    error?: string;
+}
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+export interface RadioGroupProps {
+    children: React.ReactNode;
+    label?: string;
+    error?: string;
+    className?: string;
+    name: string;
+    value?: string;
+    onChange?: (value: string) => void;
+}
+export declare const RadioGroup: React.FC<RadioGroupProps>;

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+
+export interface SelectOption {
+    value: string;
+    label: string;
+}
+export interface SelectProps {
+    options: SelectOption[];
+    value?: string | string[];
+    onChange?: (value: string | string[]) => void;
+    placeholder?: string;
+    error?: string;
+    helperText?: string;
+    disabled?: boolean;
+    isLoading?: boolean;
+    multiple?: boolean;
+    searchable?: boolean;
+    className?: string;
+    renderOption?: (option: SelectOption) => React.ReactNode;
+    rows?: number;
+    variant?: "default" | "ghost";
+    menuWidth?: string | number;
+}
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+
+export interface SidebarItemProps {
+    icon?: React.ReactNode;
+    label: React.ReactNode;
+    href?: string;
+    items?: Omit<SidebarItemProps, "items">[];
+    disabled?: boolean;
+}
+export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+    items: SidebarItemProps[];
+    collapsed?: boolean;
+    onCollapse?: (collapsed: boolean) => void;
+    defaultCollapsed?: boolean;
+}
+export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+
+export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    label?: string;
+    size?: "sm" | "md" | "lg";
+}
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+
+export interface Column<T> {
+    key: keyof T | string;
+    header: React.ReactNode;
+    cell?: (item: T) => React.ReactNode;
+    sortable?: boolean;
+    minWidth?: string;
+    width?: string;
+    isPinned?: boolean;
+    pinPosition?: string;
+    resizable?: boolean;
+    isCentered?: boolean;
+}
+export interface TableProps<T extends Record<string, unknown>> {
+    columns: Column<T>[];
+    data: T[];
+    keyExtractor: (item: T) => string | number;
+    selectable?: boolean;
+    selectedRows?: string[];
+    onSelectRows?: (rows: string[]) => void;
+    sortable?: boolean;
+    onSort?: (key: string, direction: "asc" | "desc") => void;
+    className?: string;
+    loading?: boolean;
+    rowSelectable?: boolean;
+    selectedRowId?: string;
+    onRowSelect?: (id: string | undefined) => void;
+    size?: "sm" | "md" | "lg" | "xl";
+    emptyStateText?: string;
+    onRowDoubleClick?: (item: T) => void;
+}
+export declare function Table<T extends Record<string, unknown>>({ columns: initialColumns, data, keyExtractor, selectable, selectedRows, onSelectRows, sortable, onSort, className, loading, rowSelectable, selectedRowId, onRowSelect, size, emptyStateText, onRowDoubleClick, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;