@skalar-saas/design-system 0.1.160 → 0.2.0

package/dist/shared/ui/ActivityFeed/ActivityFeed.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import type { StepperColorVariant } from '../Stepper/Stepper';
+export type ActivityStatus = 'success' | 'warning' | 'error' | 'info';
+export interface ActivityEntry {
+    id: string;
+    description: string;
+    timestamp: string;
+    status: ActivityStatus;
+}
+export interface ActivityFilterItem {
+    id: string;
+    label: string;
+}
+export interface ActivityFeedProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Entries to display, newest first. */
+    entries: ActivityEntry[];
+    /** Shows the top filter (Switcher). Default `true`. */
+    showSwitcher?: boolean;
+    /** Available filters. Defaults to All / Success / Warnings / Errors. */
+    filterItems?: ActivityFilterItem[];
+    /** Switcher size. Default `'sm'`. */
+    switcherSize?: 'xs' | 'sm' | 'md' | 'lg' | 'ai-chat';
+    /** Switcher visual variant. Default `'surface'`. */
+    switcherVariant?: 'default' | 'surface';
+    /** Override the gap between Switcher items. Tailwind `gap-x-*` class. */
+    switcherItemGap?: string;
+    /** Indicator shape of the feed. Default `'dot'`. */
+    variant?: 'numbered' | 'dot';
+    /** Connector line style. Default `'dashed'`. */
+    lineStyle?: 'solid' | 'dashed';
+    /** Color theme of the indicator and line. */
+    colorVariant?: StepperColorVariant;
+    /** Override the bottom spacing between steps. Tailwind `pb-*` class. */
+    stepGap?: string;
+    /** Override the gap between the indicator and the text. Tailwind `gap-*` class. */
+    indicatorGap?: string;
+    /** Override the vertical padding of each item. Tailwind `py-*` class. */
+    itemPadding?: string;
+    /** Index (0-based) of the highlighted step. Defaults to the last entry. */
+    current?: number;
+    /** Override the body padding. Tailwind `p-*` class. */
+    bodyPadding?: string;
+}
+export declare const ActivityFeed: React.ForwardRefExoticComponent<ActivityFeedProps & React.RefAttributes<HTMLDivElement>>;

package/dist/shared/ui/ActivityFeed/index.d.ts

@@ -0,0 +1,2 @@
+export { ActivityFeed } from './ActivityFeed';
+export type { ActivityFeedProps, ActivityEntry, ActivityFilterItem, ActivityStatus } from './ActivityFeed';

package/dist/shared/ui/AlertCallout/AlertCallout.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { type ButtonVariant, type ButtonHierarchy, type ButtonSize } from '../Button/Button';
+export type AlertCalloutVariant = 'danger' | 'warning' | 'info' | 'success';
+export type AlertCalloutSize = 'sm' | 'md' | 'lg';
+export interface AlertCalloutProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Main heading of the callout. */
+    alertTitle: string;
+    /** Bold lead-in shown before the description. */
+    descriptionHighlight?: string;
+    /** Supporting body text under the title. */
+    description?: string;
+    /** Semantic color of the icon box. Default `'danger'`. */
+    variant?: AlertCalloutVariant;
+    /** Overall size preset (icon, title and subtitle). Default `'md'`. */
+    size?: AlertCalloutSize;
+    /** Custom icon node — replaces the default Warning2. You control its size/color. */
+    icon?: React.ReactNode;
+    /** Override default icon size (only applies when using the default Warning2 icon). */
+    iconSize?: number;
+    /** Override icon container size class (e.g. 'size-16'). */
+    iconBoxSize?: string;
+    /** Override title text size (e.g. 'text-2xl'). Takes precedence over size config. */
+    titleSize?: string;
+    /** Override subtitle text size (e.g. 'text-sm'). Takes precedence over size config. */
+    subtitleSize?: string;
+    /** Text of the action button. When empty, the button is not rendered. */
+    actionLabel?: string;
+    /** Click handler for the action button. */
+    onAction?: () => void;
+    /** Visual variant of the action button. Default `'brand'`. */
+    buttonVariant?: ButtonVariant;
+    /** Hierarchy of the action button. Default `'primary'`. */
+    buttonHierarchy?: ButtonHierarchy;
+    /** Size of the action button. Default `'md'`. */
+    buttonSize?: ButtonSize;
+}
+export declare const AlertCallout: React.ForwardRefExoticComponent<AlertCalloutProps & React.RefAttributes<HTMLDivElement>>;

package/dist/shared/ui/AlertCallout/index.d.ts

@@ -0,0 +1,2 @@
+export { AlertCallout } from './AlertCallout';
+export type { AlertCalloutProps, AlertCalloutVariant, AlertCalloutSize } from './AlertCallout';

package/dist/shared/ui/DateRangePicker/DateRangePicker.d.ts

@@ -27,6 +27,8 @@ export interface DateRangePickerProps {
     cancelLabel?: string;
     /** Label for the accept button */
     acceptLabel?: string;
+    /** If false, hides the Cancel/Accept footer row */
+    showFooter?: boolean;
 }
 /**
  * DateRangePicker - A simple calendar UI component for date selection
@@ -44,4 +46,4 @@ export interface DateRangePickerProps {
  *   pickType="range"
  * />
  */
-export declare const DateRangePicker: ({ selected: selectedProp, onSelect, disabled, onCancel, onAccept, extraMonth, pickType, className, cancelLabel, acceptLabel, }: DateRangePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateRangePicker: ({ selected: selectedProp, onSelect, disabled, onCancel, onAccept, extraMonth, pickType, className, cancelLabel, acceptLabel, showFooter, }: DateRangePickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/ui/DateRangePicker/DateRangePicker.stories.d.ts

@@ -24,7 +24,7 @@ import { StoryObj } from '@storybook/nextjs-vite';
  *
  * The main **Interactive** story serves as a playground to test all prop combinations.
  */
-declare const meta: Meta<({ selected: selectedProp, onSelect, disabled, onCancel, onAccept, extraMonth, pickType, className, cancelLabel, acceptLabel, }: import('./DateRangePicker').DateRangePickerProps) => import("react/jsx-runtime").JSX.Element>;
+declare const meta: Meta<({ selected: selectedProp, onSelect, disabled, onCancel, onAccept, extraMonth, pickType, className, cancelLabel, acceptLabel, showFooter, }: import('./DateRangePicker').DateRangePickerProps) => import("react/jsx-runtime").JSX.Element>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 /**

package/dist/shared/ui/OptionsEditor/OptionsEditor.d.ts

@@ -0,0 +1,32 @@
+/** Una opción editable: `value` es la clave almacenada, `label` el texto que se muestra. */
+export interface OptionItem {
+    value: string;
+    label: string;
+}
+export interface OptionsEditorProps {
+    /** Lista actual de opciones. */
+    options: OptionItem[];
+    /** Se emite la lista completa actualizada en cualquier alta/baja/edición. */
+    onChange: (options: OptionItem[]) => void;
+    /** Encabezado opcional sobre la lista. */
+    label?: string;
+    /** Texto del botón de añadir. */
+    addLabel?: string;
+    labelPlaceholder?: string;
+    valuePlaceholder?: string;
+    /** Texto cuando no hay opciones. */
+    emptyHint?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Editor de una lista de opciones (`value`/`label`): añadir, editar y quitar filas. Compone
+ * `InputField` + `Button` del propio DS. Pensado para campos de selección (enum/multi-enum):
+ * el `value` es lo que se persiste/valida y el `label` lo que ve el usuario. Al salir del
+ * campo de etiqueta, si el `value` quedó vacío se rellena con la etiqueta (preserva valores
+ * existentes que difieran de su label).
+ */
+export declare const OptionsEditor: {
+    ({ options, onChange, label, addLabel, labelPlaceholder, valuePlaceholder, emptyHint, disabled, className, }: OptionsEditorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/shared/ui/OptionsEditor/index.d.ts

@@ -0,0 +1 @@
+export { OptionsEditor, type OptionsEditorProps, type OptionItem } from "./OptionsEditor";

package/dist/shared/ui/Planner/Planner.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import { type AppointmentDetailProps } from "../AppointmentDetail";
+import { type DateRange } from "../DateRangePicker";
 import type { AppointmentStatus } from "../AppointmentRow";
 export type { AppointmentStatus };
 export type { AppointmentDetailProps };
+export type { DateRange };
 export interface PlannerAppointment {
     id: string;
     time: string;
@@ -16,8 +18,16 @@ export interface PlannerProps extends React.HTMLAttributes<HTMLDivElement> {
     detail?: AppointmentDetailProps;
     onSelectAppointment?: (id: string) => void;
     showDetail?: boolean;
+    /** Shows the date picker above the appointment list for filtering. Default `false`. */
+    showDatePicker?: boolean;
+    /** Currently selected date or range used to filter appointments (controlled). */
+    selectedDate?: DateRange;
+    /** Called when the user picks a date/range in the date picker. */
+    onDateChange?: (range: DateRange | undefined) => void;
+    /** Selection mode of the date picker: single day or a range. Default `'single'`. */
+    datePickerType?: 'single' | 'range';
 }
 export declare const Planner: {
-    ({ appointments, selectedId, detail, onSelectAppointment, showDetail, className, ...props }: PlannerProps): import("react/jsx-runtime").JSX.Element;
+    ({ appointments, selectedId, detail, onSelectAppointment, showDetail, showDatePicker, selectedDate, onDateChange, datePickerType, className, ...props }: PlannerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/shared/ui/Planner/index.d.ts

@@ -1,2 +1,2 @@
 export { Planner } from './Planner';
-export type { PlannerProps, PlannerAppointment, AppointmentStatus } from './Planner';
+export type { PlannerProps, PlannerAppointment, AppointmentStatus, AppointmentDetailProps, DateRange } from './Planner';

package/dist/shared/ui/Stepper/Stepper.d.ts

@@ -1,28 +1,38 @@
 import React from 'react';
 export interface StepperStep {
-    /** Título del paso. */
+    /** Step title. */
     title: string;
-    /** Texto secundario opcional, bajo el título. */
+    /** Optional secondary text, shown under the title. */
     caption?: string;
+    /** Semantic status of the step; sets the dot color in the `dot` variant. */
+    status?: 'success' | 'warning' | 'error' | 'info';
 }
+export type StepperColorVariant = 'brand' | 'success' | 'warning';
 export interface StepperProps {
-    /** Pasos a mostrar, en orden. */
+    /** Steps to render, in order. */
     steps: StepperStep[];
-    /** Índice (0-based) del paso actual. */
+    /** Index (0-based) of the current step. */
     current: number;
-    /** Clases adicionales para el contenedor. */
+    /** Indicator shape: numbered circle or dot. Default `'numbered'`. */
+    variant?: 'numbered' | 'dot';
+    /** Connector line style. Default `'solid'`. */
+    lineStyle?: 'solid' | 'dashed';
+    /** Color theme of the indicator and line. */
+    colorVariant?: StepperColorVariant;
+    /** Override the gap between the indicator and the text. Tailwind `gap-*` class. */
+    indicatorGap?: string;
+    /** Override the bottom spacing between steps. Tailwind `pb-*` class. */
+    stepGap?: string;
+    /** Extra classes for each item (`<li>`). */
+    itemClassName?: string;
+    /** Additional classes for the container. */
     className?: string;
 }
 /**
- * @file Stepper vertical para flujos multi-paso (wizards).
- * @description Muestra una lista de pasos como círculos numerados ("01", "02"…)
- * unidos por una línea vertical, con título y caption opcional. Los pasos previos
- * a `current` aparecen como completados, el actual resaltado y los siguientes como
- * pendientes.
- *
- * @param {StepperStep[]} steps - Los pasos a mostrar, en orden.
- * @param {number} current - Índice (0-based) del paso actual.
- * @param {string} [className] - Clases adicionales para el contenedor.
- * @returns {JSX.Element} El stepper renderizado.
+ * @file Vertical stepper for multi-step flows and activity feeds.
+ * @description Renders a list of steps in two variants: `numbered` (circles
+ * "01", "02"… for wizards) or `dot` (status-colored dots for timelines). Steps
+ * before `current` show as completed, the current one is highlighted and the
+ * rest as pending. The connector line can be `solid` or `dashed`.
  */
 export declare const Stepper: React.FC<StepperProps>;

package/dist/shared/ui/Switcher/Switcher.d.ts

@@ -18,6 +18,10 @@ export interface SwitcherProps {
     onChange: (id: string | number) => void;
     /** The size of the switcher. */
     size?: SwitcherSize;
+    /** 'default': bg-surface-2 wrapper, bg-surface-bg active. 'surface': bg-surface-bg wrapper, bg-surface-2 active. */
+    variant?: 'default' | 'surface';
+    /** Override the gap between items. Tailwind gap-x-* class. */
+    itemGap?: string;
     /** If true, the switcher will have a border around its container. */
     withBorder?: boolean;
     /** Optional custom classes for the container. */
@@ -37,5 +41,5 @@ export interface SwitcherProps {
  * @param {boolean} [withBorder=false] - If true, adds a border to the component's container.
  * @returns {JSX.Element} The rendered Switcher element.
  */
-export declare const Switcher: ({ items, value, onChange, size, withBorder, className, }: SwitcherProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Switcher: ({ items, value, onChange, size, variant, itemGap, withBorder, className, }: SwitcherProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/package.json

@@ -1,117 +1,116 @@
-{
-  "name": "@skalar-saas/design-system",
-  "version": "0.1.160",
-  "type": "module",
-  "description": "Skalar Design System - UI component library",
-  "author": "Skalar Team",
-  "license": "UNLICENSED",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/skalar-saas/skalar-design-system.git"
-  },
-  "scripts": {
-    "build": "vite build && tsc --project tsconfig.build.json --skipLibCheck && node scripts/fix-dts-imports.cjs",
-    "lint": "eslint",
-    "test:storybook": "vitest run --project=storybook",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "chromatic": "npx chromatic --project-token=chpt_29fd0416e5da6c0"
-  },
-  "packageManager": "pnpm@10.20.0",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    },
-    "./styles": "./dist/design-system.css",
-    "./theme": "./src/styles/theme.css",
-    "./preset": "./tailwind.preset.js"
-  },
-  "files": [
-    "dist",
-    "src/styles/theme.css",
-    "tailwind.preset.js",
-    "README.md"
-  ],
-  "sideEffects": [
-    "*.css"
-  ],
-  "peerDependencies": {
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@headlessui/react": "^2.2.8",
-    "@radix-ui/react-toast": "^1.2.15",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.13.12",
-    "clsx": "^2.1.1",
-    "framer-motion": "^12.23.22",
-    "iconsax-react": "^0.0.8",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-day-picker": "^9.11.1",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "recharts": "^2.15.4",
-    "tailwind-merge": "^3.3.1"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.1",
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@eslint/eslintrc": "^3",
-    "@eslint/js": "^9.39.1",
-    "@headlessui/react": "^2.2.8",
-    "@radix-ui/react-toast": "^1.2.15",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@storybook/addon-a11y": "^9.1.15",
-    "@storybook/addon-docs": "^9.1.15",
-    "@storybook/addon-onboarding": "^9.1.15",
-    "@storybook/addon-vitest": "^9.1.15",
-    "@storybook/react-vite": "^9.1.15",
-    "@tailwindcss/postcss": "^4",
-    "@tanstack/react-table": "^8.21.3",
-    "@tanstack/react-virtual": "^3.13.12",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/jsdom": "^27.0.0",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "@vitejs/plugin-react": "^5.1.0",
-    "@vitest/browser": "^3.2.4",
-    "@vitest/coverage-v8": "^3.2.4",
-    "chromatic": "^13.3.4",
-    "clsx": "^2.1.1",
-    "eslint": "^9",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-storybook": "^9.1.15",
-    "framer-motion": "^12.23.22",
-    "glob": "^11.0.3",
-    "iconsax-react": "^0.0.8",
-    "jsdom": "^27.0.1",
-    "playwright": "^1.55.1",
-    "react": "19.1.0",
-    "react-day-picker": "^9.11.1",
-    "react-dom": "19.1.0",
-    "recharts": "^2.15.4",
-    "rollup-plugin-preserve-directives": "^0.4.0",
-    "storybook": "^9.1.15",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4",
-    "typescript": "^5",
-    "typescript-eslint": "^8.46.3",
-    "vite": "^7.2.1",
-    "vite-plugin-dts": "^5.0.2",
-    "vitest": "^3.2.4"
-  },
-  "dependencies": {
-    "react-markdown": "^10.1.0"
-  }
-}
+{
+  "name": "@skalar-saas/design-system",
+  "version": "0.2.0",
+  "type": "module",
+  "description": "Skalar Design System - UI component library",
+  "author": "Skalar Team",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/skalar-saas/skalar-design-system.git"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles": "./dist/design-system.css",
+    "./theme": "./src/styles/theme.css",
+    "./preset": "./tailwind.preset.js"
+  },
+  "files": [
+    "dist",
+    "src/styles/theme.css",
+    "tailwind.preset.js",
+    "README.md"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "peerDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@headlessui/react": "^2.2.8",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.12",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.23.22",
+    "iconsax-react": "^0.0.8",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-day-picker": "^9.11.1",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "recharts": "^2.15.4",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.1",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@eslint/eslintrc": "^3",
+    "@eslint/js": "^9.39.1",
+    "@headlessui/react": "^2.2.8",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@storybook/addon-a11y": "^9.1.15",
+    "@storybook/addon-docs": "^9.1.15",
+    "@storybook/addon-onboarding": "^9.1.15",
+    "@storybook/addon-vitest": "^9.1.15",
+    "@storybook/react-vite": "^9.1.15",
+    "@tailwindcss/postcss": "^4",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.12",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jsdom": "^27.0.0",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^5.1.0",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "chromatic": "^13.3.4",
+    "clsx": "^2.1.1",
+    "eslint": "^9",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-storybook": "^9.1.15",
+    "framer-motion": "^12.23.22",
+    "glob": "^11.0.3",
+    "iconsax-react": "^0.0.8",
+    "jsdom": "^27.0.1",
+    "playwright": "^1.55.1",
+    "react": "19.1.0",
+    "react-day-picker": "^9.11.1",
+    "react-dom": "19.1.0",
+    "recharts": "^2.15.4",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "storybook": "^9.1.15",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4",
+    "typescript": "^5",
+    "typescript-eslint": "^8.46.3",
+    "vite": "^7.2.1",
+    "vite-plugin-dts": "^5.0.2",
+    "vitest": "^3.2.4"
+  },
+  "dependencies": {
+    "react-markdown": "^10.1.0"
+  },
+  "scripts": {
+    "build": "vite build && tsc --project tsconfig.build.json --skipLibCheck && node scripts/fix-dts-imports.cjs",
+    "lint": "eslint",
+    "test:storybook": "vitest run --project=storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=chpt_29fd0416e5da6c0"
+  }
+}