@proyecto-viviana/ui 0.1.7 → 0.2.1

package/dist/color/index.d.ts

@@ -0,0 +1,228 @@
+/**
+ * Color components for proyecto-viviana-ui
+ *
+ * Styled color picker components built on top of solidaria-components.
+ * Inspired by Spectrum 2's color picker patterns.
+ */
+import { type JSX } from 'solid-js';
+import { type ColorSliderProps as HeadlessColorSliderProps, type ColorAreaProps as HeadlessColorAreaProps, type ColorWheelProps as HeadlessColorWheelProps, type ColorFieldProps as HeadlessColorFieldProps, type ColorSwatchProps as HeadlessColorSwatchProps } from '@proyecto-viviana/solidaria-components';
+import type { Color, ColorChannel, ColorFormat } from '@proyecto-viviana/solid-stately';
+export type ColorSize = 'sm' | 'md' | 'lg';
+export interface ColorSliderProps extends Omit<HeadlessColorSliderProps, 'class' | 'style' | 'children'> {
+    /** The size of the color slider. */
+    size?: ColorSize;
+    /** Additional CSS class name. */
+    class?: string;
+    /** Show the current value. */
+    showValue?: boolean;
+}
+/**
+ * A color slider allows users to adjust a single color channel.
+ *
+ * @example
+ * ```tsx
+ * const [color, setColor] = createSignal(parseColor('hsl(0, 100%, 50%)'))
+ *
+ * <ColorSlider
+ *   channel="hue"
+ *   value={color()}
+ *   onChange={setColor}
+ *   label="Hue"
+ * />
+ * ```
+ */
+export declare function ColorSlider(props: ColorSliderProps): JSX.Element;
+export declare namespace ColorSlider {
+    var Track: typeof ColorSliderTrack;
+    var Thumb: typeof ColorSliderThumb;
+}
+/**
+ * The track component for a color slider.
+ */
+export declare function ColorSliderTrack(props: {
+    children?: JSX.Element | (() => JSX.Element);
+    class?: string;
+}): JSX.Element;
+/**
+ * The thumb component for a color slider.
+ */
+export declare function ColorSliderThumb(props: {
+    class?: string;
+}): JSX.Element;
+export interface ColorAreaProps extends Omit<HeadlessColorAreaProps, 'class' | 'style' | 'children'> {
+    /** The size of the color area. */
+    size?: ColorSize;
+    /** Additional CSS class name. */
+    class?: string;
+}
+/**
+ * A color area allows users to select a color by dragging in a 2D gradient.
+ *
+ * @example
+ * ```tsx
+ * const [color, setColor] = createSignal(parseColor('hsl(0, 100%, 50%)'))
+ *
+ * <ColorArea
+ *   value={color()}
+ *   onChange={setColor}
+ *   xChannel="saturation"
+ *   yChannel="lightness"
+ * />
+ * ```
+ */
+export declare function ColorArea(props: ColorAreaProps): JSX.Element;
+export declare namespace ColorArea {
+    var Gradient: typeof ColorAreaGradient;
+    var Thumb: typeof ColorAreaThumb;
+}
+/**
+ * The gradient background for a color area.
+ */
+export declare function ColorAreaGradient(props: {
+    class?: string;
+}): JSX.Element;
+/**
+ * The thumb component for a color area.
+ */
+export declare function ColorAreaThumb(props: {
+    class?: string;
+}): JSX.Element;
+export interface ColorWheelProps extends Omit<HeadlessColorWheelProps, 'class' | 'style' | 'children'> {
+    /** The size of the color wheel. */
+    size?: ColorSize;
+    /** Additional CSS class name. */
+    class?: string;
+}
+/**
+ * A color wheel allows users to select a hue by dragging around a circular track.
+ *
+ * @example
+ * ```tsx
+ * const [color, setColor] = createSignal(parseColor('hsl(0, 100%, 50%)'))
+ *
+ * <ColorWheel
+ *   value={color()}
+ *   onChange={setColor}
+ * />
+ * ```
+ */
+export declare function ColorWheel(props: ColorWheelProps): JSX.Element;
+export declare namespace ColorWheel {
+    var Track: typeof ColorWheelTrack;
+    var Thumb: typeof ColorWheelThumb;
+}
+/**
+ * The circular track for a color wheel.
+ */
+export declare function ColorWheelTrack(props: {
+    class?: string;
+}): JSX.Element;
+/**
+ * The thumb component for a color wheel.
+ */
+export declare function ColorWheelThumb(props: {
+    class?: string;
+}): JSX.Element;
+export interface ColorFieldProps extends Omit<HeadlessColorFieldProps, 'class' | 'style' | 'children'> {
+    /** The size of the color field. */
+    size?: ColorSize;
+    /** Additional CSS class name. */
+    class?: string;
+    /** Description text below the input. */
+    description?: string;
+    /** Error message to display. */
+    errorMessage?: string;
+}
+/**
+ * A color field allows users to enter a color value as text.
+ *
+ * @example
+ * ```tsx
+ * const [color, setColor] = createSignal(parseColor('#ff0000'))
+ *
+ * <ColorField
+ *   value={color()}
+ *   onChange={setColor}
+ *   label="Color"
+ * />
+ * ```
+ */
+export declare function ColorField(props: ColorFieldProps): JSX.Element;
+export declare namespace ColorField {
+    var Input: typeof ColorFieldInput;
+}
+/**
+ * The input component for a color field.
+ */
+export declare function ColorFieldInput(props: {
+    class?: string;
+    isInvalid?: boolean;
+}): JSX.Element;
+export interface ColorSwatchProps extends Omit<HeadlessColorSwatchProps, 'class' | 'style'> {
+    /** The size of the color swatch. */
+    size?: ColorSize;
+    /** Additional CSS class name. */
+    class?: string;
+    /** Whether the swatch is selectable. */
+    isSelectable?: boolean;
+    /** Whether the swatch is selected. */
+    isSelected?: boolean;
+    /** Handler called when the swatch is clicked. */
+    onClick?: () => void;
+}
+/**
+ * A color swatch displays a color sample.
+ *
+ * @example
+ * ```tsx
+ * <ColorSwatch color={parseColor('#ff0000')} />
+ *
+ * // Selectable swatch
+ * <ColorSwatch
+ *   color={parseColor('#00ff00')}
+ *   isSelectable
+ *   isSelected={selectedColor === '#00ff00'}
+ *   onClick={() => setSelectedColor('#00ff00')}
+ * />
+ * ```
+ */
+export declare function ColorSwatch(props: ColorSwatchProps): JSX.Element;
+export interface ColorPickerProps {
+    /** The current color value (controlled). */
+    value?: Color | string;
+    /** The default color value (uncontrolled). */
+    defaultValue?: Color | string;
+    /** Handler called when the color changes. */
+    onChange?: (color: Color) => void;
+    /** The size of the picker. */
+    size?: ColorSize;
+    /** Additional CSS class name. */
+    class?: string;
+    /** Whether the picker is disabled. */
+    isDisabled?: boolean;
+    /** A label for the picker. */
+    label?: string;
+    /** Whether to show the hex input field. */
+    showInput?: boolean;
+    /** Whether to show channel sliders. */
+    showSliders?: boolean;
+}
+/**
+ * A complete color picker component with area, sliders, and input.
+ *
+ * @example
+ * ```tsx
+ * const [color, setColor] = createSignal(parseColor('hsl(0, 100%, 50%)'))
+ *
+ * <ColorPicker
+ *   value={color()}
+ *   onChange={setColor}
+ *   label="Pick a color"
+ *   showInput
+ *   showSliders
+ * />
+ * ```
+ */
+export declare function ColorPicker(props: ColorPickerProps): JSX.Element;
+export type { Color, ColorChannel, ColorFormat };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/color/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,KAAK,GAAG,EAA+C,MAAM,UAAU,CAAA;AAChF,OAAO,EAaL,KAAK,gBAAgB,IAAI,wBAAwB,EACjD,KAAK,cAAc,IAAI,sBAAsB,EAC7C,KAAK,eAAe,IAAI,uBAAuB,EAC/C,KAAK,eAAe,IAAI,uBAAuB,EAC/C,KAAK,gBAAgB,IAAI,wBAAwB,EAUlD,MAAM,wCAAwC,CAAA;AAC/C,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAA;AAMvF,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAkF1C,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,wBAAwB,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;IACtG,oCAAoC;IACpC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA2ChE;yBA3Ce,WAAW;;;;AA6C3B;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,CAAC,MAAM,GAAG,CAAC,OAAO,CAAC,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAgBrH;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAcvE;AAMD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,sBAAsB,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;IAClG,kCAAkC;IAClC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CA8B5D;yBA9Be,SAAS;;;;AAgCzB;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAKxE;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAcrE;AAMD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,uBAAuB,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;IACpG,mCAAmC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CA8B9D;yBA9Be,UAAU;;;;AAgC1B;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAQtE;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CActE;AAMD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,uBAAuB,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;IACpG,mCAAmC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gCAAgC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CA6C9D;yBA7Ce,UAAU;;;AA+C1B;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAY3F;AAMD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,wBAAwB,EAAE,OAAO,GAAG,OAAO,CAAC;IACzF,oCAAoC;IACpC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAmChE;AAMD,MAAM,WAAW,gBAAgB;IAC/B,4CAA4C;IAC5C,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IACtB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IAC7B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IACjC,8BAA8B;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA8DhE;AAYD,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,CAAA"}

package/dist/combobox/index.d.ts

@@ -0,0 +1,81 @@
+/**
+ * ComboBox component for proyecto-viviana-ui
+ *
+ * Styled combobox component built on top of solidaria-components.
+ * Inspired by Spectrum 2's ComboBox component patterns.
+ */
+import { type JSX } from 'solid-js';
+import { defaultContainsFilter, type ComboBoxProps as HeadlessComboBoxProps, type ComboBoxInputProps as HeadlessComboBoxInputProps, type ComboBoxButtonProps as HeadlessComboBoxButtonProps, type ComboBoxListBoxProps as HeadlessComboBoxListBoxProps, type ComboBoxOptionProps as HeadlessComboBoxOptionProps } from '@proyecto-viviana/solidaria-components';
+import type { Key, FilterFn, MenuTriggerAction } from '@proyecto-viviana/solid-stately';
+export type ComboBoxSize = 'sm' | 'md' | 'lg';
+export interface ComboBoxProps<T> extends Omit<HeadlessComboBoxProps<T>, 'class' | 'style'> {
+    /** The size of the combobox. */
+    size?: ComboBoxSize;
+    /** Additional CSS class name. */
+    class?: string;
+    /** Label for the combobox. */
+    label?: string;
+    /** Description for the combobox. */
+    description?: string;
+    /** Error message when invalid. */
+    errorMessage?: string;
+    /** Whether the combobox is invalid. */
+    isInvalid?: boolean;
+}
+export interface ComboBoxInputProps extends Omit<HeadlessComboBoxInputProps, 'class' | 'style'> {
+    /** Additional CSS class name. */
+    class?: string;
+}
+export interface ComboBoxButtonProps extends Omit<HeadlessComboBoxButtonProps, 'class' | 'style'> {
+    /** Additional CSS class name. */
+    class?: string;
+}
+export interface ComboBoxListBoxProps<T> extends Omit<HeadlessComboBoxListBoxProps<T>, 'class' | 'style'> {
+    /** Additional CSS class name. */
+    class?: string;
+}
+export interface ComboBoxOptionProps<T> extends Omit<HeadlessComboBoxOptionProps<T>, 'class' | 'style'> {
+    /** Additional CSS class name. */
+    class?: string;
+}
+/**
+ * A combobox combines a text input with a listbox, allowing users to filter a list of options.
+ *
+ * Built on solidaria-components ComboBox for full accessibility support.
+ */
+export declare function ComboBox<T>(props: ComboBoxProps<T>): JSX.Element;
+export declare namespace ComboBox {
+    var InputGroup: typeof ComboBoxInputGroup;
+    var Input: typeof ComboBoxInput;
+    var Button: typeof ComboBoxButton;
+    var ListBox: typeof ComboBoxListBox;
+    var Option: typeof ComboBoxOption;
+}
+/**
+ * A wrapper for the input and button that provides proper styling.
+ */
+export declare function ComboBoxInputGroup(props: {
+    children: JSX.Element;
+    class?: string;
+}): JSX.Element;
+/**
+ * The text input for a combobox.
+ */
+export declare function ComboBoxInput(props: ComboBoxInputProps): JSX.Element;
+/**
+ * The trigger button for a combobox.
+ * SSR-compatible - renders children or chevron icon directly without render props.
+ */
+export declare function ComboBoxButton(props: ComboBoxButtonProps): JSX.Element;
+/**
+ * The listbox popup for a combobox.
+ */
+export declare function ComboBoxListBox<T>(props: ComboBoxListBoxProps<T>): JSX.Element;
+/**
+ * An option in a combobox listbox.
+ * SSR-compatible - renders check icon and content directly without render props.
+ */
+export declare function ComboBoxOption<T>(props: ComboBoxOptionProps<T>): JSX.Element;
+export type { Key, FilterFn, MenuTriggerAction };
+export { defaultContainsFilter };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/combobox/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,KAAK,GAAG,EAA+C,MAAM,UAAU,CAAA;AAChF,OAAO,EAML,qBAAqB,EACrB,KAAK,aAAa,IAAI,qBAAqB,EAC3C,KAAK,kBAAkB,IAAI,0BAA0B,EACrD,KAAK,mBAAmB,IAAI,2BAA2B,EACvD,KAAK,oBAAoB,IAAI,4BAA4B,EACzD,KAAK,mBAAmB,IAAI,2BAA2B,EAMxD,MAAM,wCAAwC,CAAA;AAC/C,OAAO,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AAMvF,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAQ7C,MAAM,WAAW,aAAa,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzF,gCAAgC;IAChC,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,0BAA0B,EAAE,OAAO,GAAG,OAAO,CAAC;IAC7F,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;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACvG,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,mBAAmB,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACrG,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAqCD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAwChE;yBAxCe,QAAQ;;;;;;;AA8CxB;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE;IAAE,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAShG;AAMD;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAkCpE;AAMD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAgCtE;AAMD;;GAEG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAgB9E;AAMD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CA8C5E;AA0CD,YAAY,EAAE,GAAG,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAA;AAChD,OAAO,EAAE,qBAAqB,EAAE,CAAA"}

package/dist/components.css

@@ -39,6 +39,7 @@
 
 /* ===== BUTTON COMPONENT ===== */
 .vui-button {
+  position: relative;
   font-family: 'Jost', sans-serif;
   display: inline-flex;
   align-items: center;
@@ -48,15 +49,37 @@
   font-weight: 500;
   text-transform: uppercase;
   border-radius: 0.5rem;
-  transition: all 0.2s ease;
+  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
   cursor: pointer;
   border: none;
   outline: none;
+  overflow: hidden;
+}
+
+/* Shimmer overlay for hover effect */
+.vui-button::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    transparent 100%
+  );
+  transform: translateX(-100%);
+  transition: transform 0.5s ease;
+}
+
+.vui-button:hover::before {
+  transform: translateX(100%);
 }
 
 .vui-button:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px var(--color-bg-400), 0 0 0 4px var(--color-accent-300);
+  box-shadow: 0 0 0 2px var(--color-bg-400),
+              0 0 0 4px var(--color-accent-300),
+              0 0 20px rgba(223, 92, 154, 0.3);
 }
 
 .vui-button:disabled {
@@ -64,8 +87,12 @@
   cursor: not-allowed;
 }
 
+.vui-button:disabled::before {
+  display: none;
+}
+
 .vui-button.is-pressed {
-  transform: scale(0.98);
+  transform: scale(0.97);
 }
 
 /* Size variants */
@@ -110,6 +137,11 @@
   color: white;
 }
 
+.vui-button--fill.vui-button--accent:hover:not(:disabled) {
+  box-shadow: 0 0 20px rgba(223, 92, 154, 0.4),
+              0 4px 12px rgba(223, 92, 154, 0.3);
+}
+
 /* Positive = bg-success-600, text-success-100, border-success-400 */
 .vui-button--fill.vui-button--positive {
   background: var(--color-success-600);
@@ -441,22 +473,48 @@
 
 /* ===== SIDEBAR ===== */
 .sidebar-link {
+  position: relative;
   display: block;
   padding: 0.5rem 1rem;
-  border-radius: 0.375rem;
-  color: var(--color-primary-300);
-  transition: all 0.15s;
+  border-radius: 0.5rem;
+  color: var(--color-primary-400);
+  font-size: 0.875rem;
+  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.sidebar-link::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 0;
+  background: var(--color-accent);
+  border-radius: 0 2px 2px 0;
+  transition: height 0.2s ease;
 }
 
 .sidebar-link:hover {
-  background: var(--color-bg-300);
-  color: var(--color-primary-100);
+  background: rgba(117, 171, 199, 0.08);
+  color: var(--color-primary-200);
+  padding-left: 1.25rem;
+}
+
+.sidebar-link:hover::before {
+  height: 60%;
 }
 
 .sidebar-link.active {
-  background: var(--color-primary-700);
-  color: var(--color-primary-100);
+  background: rgba(223, 92, 154, 0.1);
+  color: var(--color-accent-200);
   font-weight: 500;
+  padding-left: 1.25rem;
+}
+
+.sidebar-link.active::before {
+  height: 70%;
+  box-shadow: 0 0 8px rgba(223, 92, 154, 0.5);
 }
 
 /* ===== LOGO COMPONENT ===== */
@@ -517,6 +575,46 @@
   text-shadow: 6px 5px 0 var(--color-accent);
 }
 
+/* Inverted variant - first word gets the 3D effect, second word is muted */
+.vui-logo.vui-logo--inverted .vui-logo__first {
+  position: relative;
+  color: var(--color-primary-500);
+  font-weight: 900;
+  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.9);
+  paint-order: stroke fill;
+}
+
+.vui-logo.vui-logo--inverted .vui-logo__first::before {
+  content: attr(data-text);
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: -1;
+  color: transparent;
+  -webkit-text-stroke: 0;
+  text-shadow: 4px 3px 0 var(--color-accent);
+}
+
+.vui-logo.vui-logo--inverted .vui-logo__second {
+  position: static;
+  color: var(--color-primary-800);
+  font-weight: 300;
+  -webkit-text-stroke: 0;
+  paint-order: normal;
+}
+
+.vui-logo.vui-logo--inverted .vui-logo__second::before {
+  content: none;
+}
+
+.vui-logo.vui-logo--inverted.vui-logo--lg .vui-logo__first::before {
+  text-shadow: 5px 4px 0 var(--color-accent);
+}
+
+.vui-logo.vui-logo--inverted.vui-logo--xl .vui-logo__first::before {
+  text-shadow: 6px 5px 0 var(--color-accent);
+}
+
 /* ===== HEADER COMPONENT ===== */
 .vui-header {
   position: fixed;
@@ -524,17 +622,16 @@
   left: 0;
   right: 0;
   z-index: 50;
-  border-bottom: 3px solid var(--color-accent);
+  border-bottom: 4px solid var(--color-accent);
   background: color-mix(in srgb, var(--color-bg-400) 80%, transparent);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
 }
 
 .vui-header__container {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 72rem;
   height: 70px;
+  padding-left: 32px;
+  padding-right: 32px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -575,6 +672,11 @@
   font-family: 'Sen', sans-serif;
 }
 
+/* Use this modifier for pages with fixed header where content shouldn't go behind it */
+.vui-page--with-header {
+  padding-top: 4rem; /* 64px - matches h-16 header */
+}
+
 .vui-page h1,
 .vui-page h2,
 .vui-page h3,

package/dist/custom/chip/index.d.ts

@@ -1,10 +1,15 @@
-import type { JSX } from 'solid-js';
+import { type JSX } from 'solid-js';
 export type ChipVariant = 'primary' | 'secondary' | 'accent' | 'outline';
 export interface ChipProps {
     text: string;
     variant?: ChipVariant;
     onClick?: () => void;
-    icon?: JSX.Element;
+    /**
+     * Icon to display before the text.
+     * Use a function returning JSX for SSR compatibility: `icon={() => <MyIcon />}`
+     * Or pass a simple string for text-based icons: `icon="★"`
+     */
+    icon?: string | (() => JSX.Element);
     class?: string;
 }
 export declare function Chip(props: ChipProps): JSX.Element;

package/dist/custom/chip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom/chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAEnC,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAA;AAExE,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AASD,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,eAYpC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom/chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAQ,MAAM,UAAU,CAAA;AAEzC,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAA;AAExE,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,GAAG,CAAC,OAAO,CAAC,CAAA;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AASD,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,eAqBpC"}

package/dist/custom/event-card/index.d.ts

@@ -11,7 +11,11 @@ export interface EventCardProps {
     }[];
     attendeeCount?: number;
     decorationImage?: string;
-    actions?: JSX.Element;
+    /**
+     * Actions to display below the event.
+     * Use a function returning JSX for SSR compatibility: `actions={() => <Button>...</Button>}`
+     */
+    actions?: JSX.Element | (() => JSX.Element);
     class?: string;
 }
 export declare function EventCard(props: EventCardProps): JSX.Element;

package/dist/custom/event-card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom/event-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAInC,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eA2E9C;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAuBtD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom/event-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAInC,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,CAAC,MAAM,GAAG,CAAC,OAAO,CAAC,CAAA;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eA6E9C;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAuBtD"}

package/dist/custom/header/index.d.ts

@@ -0,0 +1,16 @@
+import type { JSX } from 'solid-js';
+import { type LogoProps } from '../logo';
+export interface HeaderProps {
+    /** Image element to show to the left of the text logo */
+    logoImage?: JSX.Element;
+    /** Props to pass to the Logo component (firstWord, secondWord, size, inverted). Pass null to hide the text logo. */
+    logoProps?: LogoProps | null;
+    /** Custom logo element - replaces the default Logo component entirely */
+    logo?: JSX.Element;
+    /** Navigation items to display on the right side */
+    children?: JSX.Element;
+    /** Additional CSS classes */
+    class?: string;
+}
+export declare function Header(props: HeaderProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/custom/header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom/header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AACnC,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAA;AAE9C,MAAM,WAAW,WAAW;IAC1B,yDAAyD;IACzD,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACvB,oHAAoH;IACpH,SAAS,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IAC5B,yEAAyE;IACzE,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IAClB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACtB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,eAgBxC"}

package/dist/custom/logo/index.d.ts

@@ -7,6 +7,8 @@ export interface LogoProps {
     secondWord?: string;
     /** Size variant of the logo */
     size?: LogoSize;
+    /** Invert the styles (first word gets 3D effect, second word is muted) */
+    inverted?: boolean;
     /** Additional CSS classes */
     class?: string;
 }

package/dist/custom/logo/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom/logo/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,MAAM,WAAW,SAAS;IACxB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CA0BlD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom/logo/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,MAAM,WAAW,SAAS;IACxB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CA4BlD"}

package/dist/custom/page-layout/index.d.ts

@@ -2,6 +2,8 @@ import { JSX } from 'solid-js';
 export interface PageLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {
     /** Content of the page */
     children: JSX.Element;
+    /** Add padding-top to account for fixed header (use for non-landing pages) */
+    withHeader?: boolean;
 }
 /**
  * PageLayout provides consistent page structure with proper background and font styling.

package/dist/custom/page-layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom/page-layout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAc,MAAM,UAAU,CAAA;AAE1C,MAAM,WAAW,eAAgB,SAAQ,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,0BAA0B;IAC1B,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CACtB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAQhD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom/page-layout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAc,MAAM,UAAU,CAAA;AAE1C,MAAM,WAAW,eAAgB,SAAQ,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,0BAA0B;IAC1B,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;IACrB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAehD"}

package/dist/custom/profile-card/index.d.ts

@@ -5,7 +5,11 @@ export interface ProfileCardProps {
     bio?: string;
     followers?: number;
     following?: number;
-    actions?: JSX.Element;
+    /**
+     * Actions to display below the profile.
+     * Use a function returning JSX for SSR compatibility: `actions={() => <Button>...</Button>}`
+     */
+    actions?: JSX.Element | (() => JSX.Element);
     class?: string;
 }
 export declare function ProfileCard(props: ProfileCardProps): JSX.Element;

package/dist/custom/profile-card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom/profile-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAInC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eA2ClD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom/profile-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAInC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,CAAC,MAAM,GAAG,CAAC,OAAO,CAAC,CAAA;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eA6ClD"}

package/dist/custom/timeline-item/index.d.ts

@@ -2,7 +2,12 @@ import type { JSX } from 'solid-js';
 export type TimelineEventType = 'follow' | 'like' | 'comment' | 'event' | 'custom';
 export interface TimelineItemProps {
     type?: TimelineEventType;
-    icon?: JSX.Element;
+    /**
+     * Icon to display between the two avatars.
+     * Use a function returning JSX for SSR compatibility: `icon={() => <MyIcon />}`
+     * Or pass a simple string for text-based icons: `icon="👋"`
+     */
+    icon?: string | (() => JSX.Element);
     leftUser?: {
         name: string;
         avatar?: string;
@@ -11,7 +16,12 @@ export interface TimelineItemProps {
         name: string;
         avatar?: string;
     };
-    message?: JSX.Element;
+    /**
+     * Custom message content.
+     * Use a function returning JSX for SSR compatibility: `message={() => <span>...</span>}`
+     * Or pass a simple string.
+     */
+    message?: string | (() => JSX.Element);
     class?: string;
 }
 export declare function TimelineItem(props: TimelineItemProps): JSX.Element;