@proyecto-viviana/ui 0.1.5 → 0.2.0

package/README.md

@@ -0,0 +1,192 @@
+# @proyecto-viviana/ui
+
+Styled UI components for SolidJS - beautiful, accessible, and ready to use.
+
+## Installation
+
+```bash
+bun add @proyecto-viviana/ui solid-js
+```
+
+## Setup
+
+Import the CSS in your app entry point:
+
+```tsx
+import "@proyecto-viviana/ui/styles.css";
+```
+
+## Quick Start
+
+```tsx
+import { Button, TextField, Select } from "@proyecto-viviana/ui";
+import "@proyecto-viviana/ui/styles.css";
+
+function App() {
+  return (
+    <div>
+      <TextField label="Email" placeholder="Enter your email" />
+      <Button variant="accent" onPress={() => alert("Hello!")}>
+        Submit
+      </Button>
+    </div>
+  );
+}
+```
+
+## Available Components
+
+### Form Controls
+
+| Component | Description |
+|-----------|-------------|
+| Button | Action buttons with variants |
+| TextField | Text input with label |
+| NumberField | Numeric input with inc/dec |
+| SearchField | Search input with clear |
+| Slider | Range slider |
+| Checkbox, CheckboxGroup | Checkboxes |
+| RadioGroup, Radio | Radio buttons |
+| ToggleSwitch | Toggle switch |
+
+### Selection
+
+| Component | Description |
+|-----------|-------------|
+| Select | Dropdown select |
+| Menu, MenuItem | Action menus |
+| ListBox, ListBoxOption | Selectable lists |
+
+### Navigation
+
+| Component | Description |
+|-----------|-------------|
+| Tabs, TabList, Tab, TabPanel | Tabbed navigation |
+| Breadcrumbs, BreadcrumbItem | Breadcrumb trail |
+| Link | Accessible links |
+| Landmark, SkipLink, LandmarkNavigator | ARIA landmarks with F6 navigation |
+
+### Data Display
+
+| Component | Description |
+|-----------|-------------|
+| Table | Data tables with sorting/selection |
+| GridList, GridListItem | Grid lists with keyboard nav |
+| Tree, TreeItem | Hierarchical tree views |
+
+### Color
+
+| Component | Description |
+|-----------|-------------|
+| ColorSlider | Single channel color slider |
+| ColorArea | 2D color gradient picker |
+| ColorWheel | Circular hue picker |
+| ColorField | Hex/RGB color input |
+| ColorSwatch | Color preview |
+| ColorPicker | Complete color picker |
+
+### Feedback
+
+| Component | Description |
+|-----------|-------------|
+| Alert | Informational alerts |
+| Badge | Status badges |
+| ProgressBar | Progress indicators |
+| Tooltip | Contextual tooltips |
+| Dialog | Modal dialogs |
+
+### Layout
+
+| Component | Description |
+|-----------|-------------|
+| Separator | Visual dividers |
+| Avatar, AvatarGroup | User avatars |
+
+### Custom Components
+
+| Component | Description |
+|-----------|-------------|
+| Chip | Tag-like chips |
+| ProfileCard | User profile cards |
+| EventCard | Event display |
+| CalendarCard | Calendar widget |
+| Conversation | Chat bubbles |
+| LateralNav | Side navigation |
+| PageLayout | Page structure |
+
+## Examples
+
+### Button
+
+```tsx
+<Button>Default</Button>
+<Button variant="accent">Accent</Button>
+<Button variant="negative">Delete</Button>
+<Button style="outline">Outline</Button>
+```
+
+### TextField
+
+```tsx
+<TextField label="Name" placeholder="Enter your name" />
+<TextField label="Email" type="email" isRequired />
+```
+
+### Select
+
+```tsx
+<Select
+  label="Country"
+  items={[
+    { key: "us", label: "United States" },
+    { key: "uk", label: "United Kingdom" },
+  ]}
+  onSelectionChange={(key) => console.log(key)}
+/>
+```
+
+### Tabs
+
+```tsx
+<Tabs defaultSelectedKey="overview">
+  <TabList>
+    <Tab id="overview">Overview</Tab>
+    <Tab id="features">Features</Tab>
+  </TabList>
+  <TabPanel id="overview">Overview content</TabPanel>
+  <TabPanel id="features">Features content</TabPanel>
+</Tabs>
+```
+
+## Sizes
+
+Most components support size variants:
+
+```tsx
+<Button size="sm">Small</Button>
+<Button size="md">Medium</Button>
+<Button size="lg">Large</Button>
+```
+
+## Theming
+
+Customize via CSS variables:
+
+```css
+:root {
+  --color-primary-100: #your-color;
+  --color-accent: #your-accent;
+}
+```
+
+## TypeScript
+
+Full TypeScript support:
+
+```tsx
+import { Button, type ButtonProps } from "@proyecto-viviana/ui";
+```
+
+## License
+
+MIT

package/dist/autocomplete/index.d.ts

@@ -0,0 +1,89 @@
+/**
+ * SearchAutocomplete component for proyecto-viviana-ui
+ *
+ * A styled autocomplete component combining a search input with a
+ * filterable dropdown list of options.
+ */
+import { type JSX } from 'solid-js';
+export type SearchAutocompleteSize = 'sm' | 'md' | 'lg';
+export interface SearchAutocompleteItem {
+    id: string;
+    name: string;
+    [key: string]: unknown;
+}
+export interface SearchAutocompleteProps<T extends SearchAutocompleteItem = SearchAutocompleteItem> {
+    /** The items to display in the dropdown. */
+    items: T[];
+    /** The size of the autocomplete. @default 'md' */
+    size?: SearchAutocompleteSize;
+    /** Placeholder text for the input. */
+    placeholder?: string;
+    /** Accessible label for the input. */
+    'aria-label'?: string;
+    /** Label text shown above the input. */
+    label?: string;
+    /** Description text shown below the input. */
+    description?: string;
+    /** The current input value (controlled). */
+    inputValue?: string;
+    /** The default input value (uncontrolled). */
+    defaultInputValue?: string;
+    /** Handler called when the input value changes. */
+    onInputChange?: (value: string) => void;
+    /** Handler called when an item is selected. */
+    onSelect?: (item: T) => void;
+    /** Additional CSS class name. */
+    class?: string;
+    /** Whether the input is disabled. */
+    isDisabled?: boolean;
+    /**
+     * Custom filter function. By default, filters by case-insensitive name match.
+     */
+    filter?: (textValue: string, inputValue: string) => boolean;
+    /**
+     * Custom render function for items.
+     */
+    renderItem?: (item: T) => JSX.Element;
+    /**
+     * Key to use for the display text. @default 'name'
+     */
+    textKey?: keyof T;
+}
+/**
+ * A styled autocomplete component for searching and selecting from a list.
+ *
+ * @example
+ * ```tsx
+ * const items = [
+ *   { id: '1', name: 'Apple' },
+ *   { id: '2', name: 'Banana' },
+ *   { id: '3', name: 'Cherry' },
+ * ];
+ *
+ * <SearchAutocomplete
+ *   items={items}
+ *   placeholder="Search fruits..."
+ *   aria-label="Fruit search"
+ *   onSelect={(item) => console.log('Selected:', item)}
+ * />
+ *
+ * // With custom filter
+ * <SearchAutocomplete
+ *   items={items}
+ *   filter={(textValue, inputValue) =>
+ *     textValue.toLowerCase().startsWith(inputValue.toLowerCase())
+ *   }
+ *   onSelect={(item) => console.log('Selected:', item)}
+ * />
+ *
+ * // With label and description
+ * <SearchAutocomplete
+ *   items={items}
+ *   label="Search"
+ *   description="Type to filter the list"
+ *   placeholder="Start typing..."
+ * />
+ * ```
+ */
+export declare function SearchAutocomplete<T extends SearchAutocompleteItem = SearchAutocompleteItem>(props: SearchAutocompleteProps<T>): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/autocomplete/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/autocomplete/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,KAAK,GAAG,EAAmD,MAAM,UAAU,CAAA;AAYpF,MAAM,MAAM,sBAAsB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEvD,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAED,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,sBAAsB,GAAG,sBAAsB;IAChG,4CAA4C;IAC5C,KAAK,EAAE,CAAC,EAAE,CAAA;IACV,kDAAkD;IAClD,IAAI,CAAC,EAAE,sBAAsB,CAAA;IAC7B,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,mDAAmD;IACnD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;IAC5B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAA;IAC3D;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,GAAG,CAAC,OAAO,CAAA;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,CAAA;CAClB;AAyJD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,sBAAsB,GAAG,sBAAsB,EAC1F,KAAK,EAAE,uBAAuB,CAAC,CAAC,CAAC,GAChC,GAAG,CAAC,OAAO,CAyDb"}

package/dist/breadcrumbs/index.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Breadcrumbs component for proyecto-viviana-ui
+ *
+ * Styled breadcrumbs component built on top of solidaria-components.
+ * Inspired by Spectrum 2's Breadcrumbs component patterns.
+ */
+import { type JSX } from 'solid-js';
+import { type BreadcrumbsProps as HeadlessBreadcrumbsProps, type BreadcrumbItemProps as HeadlessBreadcrumbItemProps } from '@proyecto-viviana/solidaria-components';
+export type BreadcrumbsSize = 'sm' | 'md' | 'lg';
+export type BreadcrumbsVariant = 'default' | 'subtle';
+export interface BreadcrumbsProps<T> extends Omit<HeadlessBreadcrumbsProps<T>, 'class' | 'style'> {
+    /** The size of the breadcrumbs. */
+    size?: BreadcrumbsSize;
+    /** The visual variant. */
+    variant?: BreadcrumbsVariant;
+    /** Whether to show separators between items. */
+    showSeparator?: boolean;
+    /** Additional CSS class name. */
+    class?: string;
+}
+export interface BreadcrumbItemProps extends Omit<HeadlessBreadcrumbItemProps, 'class' | 'style'> {
+    /** Additional CSS class name. */
+    class?: string;
+}
+/**
+ * Breadcrumbs show hierarchy and navigational context for a user's location within an application.
+ *
+ * Built on solidaria-components Breadcrumbs for full accessibility support.
+ */
+export declare function Breadcrumbs<T>(props: BreadcrumbsProps<T>): JSX.Element;
+export declare namespace Breadcrumbs {
+    var Item: typeof BreadcrumbItem;
+}
+/**
+ * A BreadcrumbItem represents an individual breadcrumb in the navigation trail.
+ */
+export declare function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/breadcrumbs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/breadcrumbs/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,KAAK,GAAG,EAAyC,MAAM,UAAU,CAAA;AAC1E,OAAO,EAGL,KAAK,gBAAgB,IAAI,wBAAwB,EACjD,KAAK,mBAAmB,IAAI,2BAA2B,EAGxD,MAAM,wCAAwC,CAAA;AAM/C,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAChD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,QAAQ,CAAA;AAkBrD,MAAM,WAAW,gBAAgB,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC/F,mCAAmC;IACnC,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,gDAAgD;IAChD,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,2BAA2B,EAAE,OAAO,GAAG,OAAO,CAAC;IAC/F,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAyCD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA6BtE;yBA7Be,WAAW;;;AAmC3B;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CA+CtE"}

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/button/Button.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,KAAK,GAAG,EAA6C,MAAM,UAAU,CAAC;AAE/E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAsDtD"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/button/Button.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,KAAK,GAAG,EAA6C,MAAM,UAAU,CAAC;AAE/E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAqDtD"}

package/dist/calendar/DateField.d.ts

@@ -0,0 +1,47 @@
+/**
+ * DateField component for proyecto-viviana-ui
+ *
+ * Styled date field component with segment-based editing.
+ */
+import { type JSX } from 'solid-js';
+import { type DateFieldProps as HeadlessDateFieldProps, type CalendarDate, type DateValue } from '@proyecto-viviana/solidaria-components';
+export type DateFieldSize = 'sm' | 'md' | 'lg';
+export interface DateFieldProps<T extends DateValue = DateValue> extends Omit<HeadlessDateFieldProps<T>, 'class' | 'style' | 'children'> {
+    /** The size of the field. @default 'md' */
+    size?: DateFieldSize;
+    /** Additional CSS class name. */
+    class?: string;
+    /** Label for the field. */
+    label?: string;
+    /** Description text. */
+    description?: string;
+    /** Error message. */
+    errorMessage?: string;
+}
+/**
+ * A date field allows users to enter and edit date values using a keyboard.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <DateField label="Birth date" />
+ *
+ * // Controlled
+ * const [date, setDate] = createSignal<CalendarDate | null>(null);
+ * <DateField
+ *   label="Event date"
+ *   value={date()}
+ *   onChange={setDate}
+ * />
+ *
+ * // With validation
+ * <DateField
+ *   label="Future date"
+ *   minValue={today(getLocalTimeZone())}
+ *   errorMessage="Date must be in the future"
+ * />
+ * ```
+ */
+export declare function DateField<T extends DateValue = CalendarDate>(props: DateFieldProps<T>): JSX.Element;
+export type { CalendarDate, DateValue };
+//# sourceMappingURL=DateField.d.ts.map

package/dist/calendar/DateField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateField.d.ts","sourceRoot":"","sources":["../../src/calendar/DateField.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,GAAG,EAAc,MAAM,UAAU,CAAC;AAChD,OAAO,EAIL,KAAK,cAAc,IAAI,sBAAsB,EAC7C,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,wCAAwC,CAAC;AAMhD,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,CAC7D,SAAQ,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;IACvE,2CAA2C;IAC3C,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA+BD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,SAAS,GAAG,YAAY,EAC1D,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GACvB,GAAG,CAAC,OAAO,CAyGb;AAGD,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC"}

package/dist/calendar/DatePicker.d.ts

@@ -0,0 +1,48 @@
+/**
+ * DatePicker component for proyecto-viviana-ui
+ *
+ * Styled date picker component that combines a date field with a calendar popup.
+ */
+import { type JSX } from 'solid-js';
+import { type DatePickerProps as HeadlessDatePickerProps, type CalendarDate, type DateValue } from '@proyecto-viviana/solidaria-components';
+export type DatePickerSize = 'sm' | 'md' | 'lg';
+export interface DatePickerProps<T extends DateValue = DateValue> extends Omit<HeadlessDatePickerProps<T>, 'class' | 'style' | 'children'> {
+    /** The size of the picker. @default 'md' */
+    size?: DatePickerSize;
+    /** Additional CSS class name. */
+    class?: string;
+    /** Label for the field. */
+    label?: string;
+    /** Description text. */
+    description?: string;
+    /** Error message. */
+    errorMessage?: string;
+    /** Placeholder text. */
+    placeholder?: string;
+}
+/**
+ * A date picker combines a date field and a calendar popup.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <DatePicker label="Event date" />
+ *
+ * // Controlled
+ * const [date, setDate] = createSignal<CalendarDate | null>(null);
+ * <DatePicker
+ *   label="Appointment"
+ *   value={date()}
+ *   onChange={setDate}
+ * />
+ *
+ * // With constraints
+ * <DatePicker
+ *   label="Future booking"
+ *   minValue={today(getLocalTimeZone())}
+ * />
+ * ```
+ */
+export declare function DatePicker<T extends DateValue = CalendarDate>(props: DatePickerProps<T>): JSX.Element;
+export type { CalendarDate, DateValue };
+//# sourceMappingURL=DatePicker.d.ts.map

package/dist/calendar/DatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/calendar/DatePicker.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,GAAG,EAAoB,MAAM,UAAU,CAAC;AACtD,OAAO,EAML,KAAK,eAAe,IAAI,uBAAuB,EAC/C,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,wCAAwC,CAAC;AA4BhD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhD,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,CAC9D,SAAQ,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;IACxE,4CAA4C;IAC5C,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAkCD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,SAAS,GAAG,YAAY,EAC3D,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GACxB,GAAG,CAAC,OAAO,CA6Ib;AAqCD,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC"}

package/dist/calendar/RangeCalendar.d.ts

@@ -0,0 +1,42 @@
+/**
+ * RangeCalendar component for proyecto-viviana-ui
+ *
+ * Styled range calendar component built on top of solidaria-components.
+ * A range calendar displays a grid of days and allows users to select a date range.
+ */
+import { type JSX } from 'solid-js';
+import { type CalendarDate, type DateValue, type RangeValue } from '@proyecto-viviana/solidaria-components';
+import type { RangeCalendarStateProps } from '@proyecto-viviana/solid-stately';
+export type RangeCalendarSize = 'sm' | 'md' | 'lg';
+export interface RangeCalendarProps<T extends DateValue = DateValue> extends Omit<RangeCalendarStateProps<T>, 'locale'> {
+    /** The size of the calendar. @default 'md' */
+    size?: RangeCalendarSize;
+    /** Additional CSS class name. */
+    class?: string;
+    /** The locale to use for formatting. */
+    locale?: string;
+    /** Custom aria label. */
+    'aria-label'?: string;
+}
+/**
+ * A range calendar displays a grid of days and allows users to select a date range.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <RangeCalendar
+ *   aria-label="Trip dates"
+ *   onChange={(range) => console.log(range)}
+ * />
+ *
+ * // Controlled
+ * const [range, setRange] = createSignal<RangeValue<CalendarDate> | null>(null);
+ * <RangeCalendar
+ *   value={range()}
+ *   onChange={setRange}
+ * />
+ * ```
+ */
+export declare function RangeCalendar<T extends DateValue = CalendarDate>(props: RangeCalendarProps<T>): JSX.Element;
+export type { RangeValue };
+//# sourceMappingURL=RangeCalendar.d.ts.map

package/dist/calendar/RangeCalendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeCalendar.d.ts","sourceRoot":"","sources":["../../src/calendar/RangeCalendar.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,KAAK,GAAG,EAAc,MAAM,UAAU,CAAC;AAChD,OAAO,EAML,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,wCAAwC,CAAC;AAChD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAM/E,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,CACjE,SAAQ,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC;IAClD,8CAA8C;IAC9C,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA+BD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,SAAS,GAAG,YAAY,EAC9D,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAC3B,GAAG,CAAC,OAAO,CAgJb;AAGD,YAAY,EAAE,UAAU,EAAE,CAAC"}

package/dist/calendar/TimeField.d.ts

@@ -0,0 +1,44 @@
+/**
+ * TimeField component for proyecto-viviana-ui
+ *
+ * Styled time field component with segment-based editing.
+ */
+import { type JSX } from 'solid-js';
+import { type TimeFieldProps as HeadlessTimeFieldProps, type TimeValue } from '@proyecto-viviana/solidaria-components';
+export type TimeFieldSize = 'sm' | 'md' | 'lg';
+export interface TimeFieldProps<T extends TimeValue = TimeValue> extends Omit<HeadlessTimeFieldProps<T>, 'class' | 'style' | 'children'> {
+    /** The size of the field. @default 'md' */
+    size?: TimeFieldSize;
+    /** Additional CSS class name. */
+    class?: string;
+    /** Label for the field. */
+    label?: string;
+    /** Description text. */
+    description?: string;
+    /** Error message. */
+    errorMessage?: string;
+}
+/**
+ * A time field allows users to enter and edit time values using a keyboard.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <TimeField label="Start time" />
+ *
+ * // With 24-hour format
+ * <TimeField
+ *   label="Meeting time"
+ *   hourCycle={24}
+ * />
+ *
+ * // With seconds
+ * <TimeField
+ *   label="Precise time"
+ *   granularity="second"
+ * />
+ * ```
+ */
+export declare function TimeField<T extends TimeValue = TimeValue>(props: TimeFieldProps<T>): JSX.Element;
+export type { TimeValue };
+//# sourceMappingURL=TimeField.d.ts.map

package/dist/calendar/TimeField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../src/calendar/TimeField.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,GAAG,EAAc,MAAM,UAAU,CAAC;AAChD,OAAO,EAIL,KAAK,cAAc,IAAI,sBAAsB,EAC7C,KAAK,SAAS,EACf,MAAM,wCAAwC,CAAC;AAMhD,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,CAC7D,SAAQ,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;IACvE,2CAA2C;IAC3C,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA+BD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EACvD,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GACvB,GAAG,CAAC,OAAO,CAyGb;AAGD,YAAY,EAAE,SAAS,EAAE,CAAC"}

package/dist/calendar/index.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Calendar component for proyecto-viviana-ui
+ *
+ * Styled calendar component built on top of solidaria-components.
+ * A calendar displays a grid of days and allows users to select dates.
+ */
+import { type JSX } from 'solid-js';
+import { type CalendarDate, type DateValue } from '@proyecto-viviana/solidaria-components';
+import type { CalendarStateProps } from '@proyecto-viviana/solid-stately';
+export type CalendarSize = 'sm' | 'md' | 'lg';
+export interface CalendarProps<T extends DateValue = DateValue> extends Omit<CalendarStateProps<T>, 'locale'> {
+    /** The size of the calendar. @default 'md' */
+    size?: CalendarSize;
+    /** Additional CSS class name. */
+    class?: string;
+    /** Whether to show week numbers. */
+    showWeekNumbers?: boolean;
+    /** The locale to use for formatting. */
+    locale?: string;
+    /** Custom aria label. */
+    'aria-label'?: string;
+}
+/**
+ * A calendar displays a grid of days and allows users to select a date.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Calendar
+ *   aria-label="Event date"
+ *   onChange={(date) => console.log(date)}
+ * />
+ *
+ * // Controlled
+ * const [date, setDate] = createSignal<CalendarDate | null>(null);
+ * <Calendar
+ *   value={date()}
+ *   onChange={setDate}
+ * />
+ *
+ * // With min/max dates
+ * <Calendar
+ *   minValue={today(getLocalTimeZone())}
+ *   maxValue={today(getLocalTimeZone()).add({ months: 3 })}
+ * />
+ * ```
+ */
+export declare function Calendar<T extends DateValue = CalendarDate>(props: CalendarProps<T>): JSX.Element;
+export type { CalendarDate, DateValue };
+//# sourceMappingURL=index.d.ts.map

package/dist/calendar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/calendar/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,KAAK,GAAG,EAAc,MAAM,UAAU,CAAC;AAChD,OAAO,EAML,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,wCAAwC,CAAC;AAChD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAM1E,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,CAC5D,SAAQ,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC;IAC7C,8CAA8C;IAC9C,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA+BD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,SAAS,GAAG,YAAY,EACzD,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GACtB,GAAG,CAAC,OAAO,CA4Hb;AAGD,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC"}

package/dist/checkbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/checkbox/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,KAAK,GAAG,EAAmD,MAAM,UAAU,CAAA;AACpF,OAAO,EAGL,KAAK,aAAa,IAAI,qBAAqB,EAC3C,KAAK,kBAAkB,IAAI,0BAA0B,EAGtD,MAAM,wCAAwC,CAAA;AAM/C,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE7C,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IAChG,gCAAgC;IAChC,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mCAAmC;IACnC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB;AAED,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,0BAA0B,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IAC1G,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACtB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAqED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAsF1D;AAMD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CA0CpE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/checkbox/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,KAAK,GAAG,EAAmD,MAAM,UAAU,CAAA;AACpF,OAAO,EAGL,KAAK,aAAa,IAAI,qBAAqB,EAC3C,KAAK,kBAAkB,IAAI,0BAA0B,EAGtD,MAAM,wCAAwC,CAAA;AAM/C,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE7C,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IAChG,gCAAgC;IAChC,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mCAAmC;IACnC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB;AAED,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,0BAA0B,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IAC1G,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACtB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAqED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAsF1D;AAMD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAyCpE"}