@skalar-saas/design-system 0.1.67

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

@@ -0,0 +1,44 @@
+import React from "react";
+/**
+ * Props interface for the TypesPanelHeaderSearch component.
+ */
+export interface TypesPanelHeaderSearchProps {
+    /**
+     * Optional custom CSS classes
+     */
+    className?: string;
+    /**
+     * Search query value (controlled)
+     */
+    searchQuery?: string;
+    /**
+     * Callback when search query changes
+     */
+    onSearchChange?: (query: string) => void;
+    /**
+     * Search bar placeholder text
+     * @default 'Search...'
+     */
+    searchPlaceholder?: string;
+    /**
+     * Selected view mode (list/grid)
+     */
+    selectedView?: string | number;
+    /**
+     * Callback when view mode changes
+     */
+    onViewChange?: (view: string | number) => void;
+    /**
+     * Button group options for view toggle
+     */
+    viewOptions?: Array<{
+        value: string | number;
+        icon: React.ReactNode;
+    }>;
+    /**
+     * ButtonGroup size
+     * @default 'sm'
+     */
+    buttonGroupSize?: "sm" | "md" | "lg";
+}
+export declare const TypesPanelHeaderSearch: React.FC<TypesPanelHeaderSearchProps>;

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

@@ -0,0 +1 @@
+export { TypesPanelHeaderSearch, type TypesPanelHeaderSearchProps, } from "./TypesPanelHeaderSearch";

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import { type AvatarProps } from '../Avatar/Avatar';
+import { type BadgeTheme } from '../Badge/Badge';
+/**
+ * Represents a single menu item in the user menu.
+ */
+export interface UserMenuItem {
+    /** Unique identifier for the menu item */
+    id: string;
+    /** Display label for the menu item */
+    label: string;
+    /** Optional icon component to display before the label */
+    icon?: React.ReactNode;
+    /** Callback fired when the menu item is clicked */
+    onClick?: () => void;
+    /** Optional badge to display on the right side */
+    badge?: {
+        label: string;
+        theme?: BadgeTheme;
+    };
+    /** Optional toggle switch to display on the right side */
+    switch?: {
+        checked: boolean;
+        onChange: (checked: boolean) => void;
+    };
+    /** Optional custom trailing content (overrides badge and switch) */
+    trailing?: React.ReactNode;
+    /** Whether this is a destructive action (renders in red) */
+    destructive?: boolean;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+}
+/**
+ * User data for the avatar trigger
+ */
+export interface UserMenuUser {
+    /** User's full name */
+    name: string;
+    /** User's email (optional subtitle) */
+    email?: string;
+    /** User's avatar image URL */
+    avatar?: string;
+    /** User's initials (fallback if no avatar) */
+    initials?: string;
+    /** Optional status badge on avatar */
+    statusBadge?: AvatarProps['statusBadge'];
+}
+/**
+ * Defines the public API for the UserMenu component.
+ */
+export interface UserMenuProps {
+    /** User data for the avatar trigger */
+    user: UserMenuUser;
+    /** Array of menu item sections (each section is an array of items) */
+    sections: UserMenuItem[][];
+    /** Alignment of the menu relative to the trigger */
+    align?: 'left' | 'right';
+    /** Offset from the trigger in pixels */
+    offset?: number;
+    /** Optional custom CSS classes for the container */
+    className?: string;
+    /** Avatar size */
+    avatarSize?: AvatarProps['size'];
+}
+/**
+ * @file A user menu component that combines an avatar trigger with a contextual menu.
+ * @description This component renders a user avatar that opens a dropdown menu when clicked.
+ * It supports sectioned items, badges, toggle switches, icons, and destructive actions.
+ *
+ * @param {UserMenuUser} user - User data for the avatar trigger
+ * @param {UserMenuItem[][]} sections - Array of menu item sections
+ * @param {'left' | 'right'} [align='right'] - Menu alignment relative to trigger
+ * @param {number} [offset=8] - Distance from trigger in pixels
+ * @param {string} [className] - Optional CSS classes for the container
+ * @param {AvatarProps['size']} [avatarSize='md'] - Size of the avatar
+ * @returns {JSX.Element} The rendered UserMenu component
+ */
+export declare const UserMenu: ({ user, sections, align, offset, className, avatarSize, }: UserMenuProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export { UserMenu, type UserMenuProps, type UserMenuItem, type UserMenuUser } from './UserMenu';

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

@@ -0,0 +1,36 @@
+import React from "react";
+type GridLayout = "1" | "2" | "3" | "2-1" | "1-2" | "1-1";
+export interface WidgetData {
+    id: string;
+    title: string;
+    description: string;
+    icon?: React.ReactNode;
+    position: number;
+    onMaximize?: () => void;
+    onEdit?: () => void;
+    onCopy?: () => void;
+    onTrash?: () => void;
+}
+export interface ColumnData {
+    id: string;
+    widgets: WidgetData[];
+}
+export interface SectionData {
+    id: string;
+    layout: GridLayout;
+    position: number;
+    columns: ColumnData[];
+    onAction?: (action: "maximize" | "grid" | "add" | "copy" | "trash" | "addWidget") => void;
+}
+export interface VisualComposerData {
+    sections: SectionData[];
+}
+export interface VisualComposerProps extends React.HTMLAttributes<HTMLDivElement> {
+    data?: VisualComposerData;
+    onAction?: (action: "add" | "grid" | "copy" | "trash") => void;
+    onWidgetReorder?: (widgetId: string, newPosition: number, newColumnId: string, newSectionId: string) => void;
+    onSectionReorder?: (sectionId: string, newPosition: number) => void;
+    onDataChange?: (data: VisualComposerData) => void;
+}
+export declare const VisualComposer: ({ className, data, onAction, onWidgetReorder, onSectionReorder, onDataChange, ...props }: VisualComposerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+export { VisualComposer } from './VisualComposer';
+export type { VisualComposerProps, VisualComposerData, SectionData, ColumnData, WidgetData, } from './VisualComposer';

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

@@ -0,0 +1,15 @@
+import React from "react";
+export interface WidgetBuilderItemHoverActionProps extends React.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    description: string;
+    icon: React.ReactNode;
+    onMaximize?: () => void;
+    onEdit?: () => void;
+    onCopy?: () => void;
+    onTrash?: () => void;
+}
+/**
+ * A component for displaying widget builder item hover action with an icon, title, and description.
+ * Includes a button group with predefined actions.
+ */
+export declare const WidgetBuilderItemHoverAction: ({ className, title, description, icon, onMaximize, onEdit, onCopy, onTrash, ...props }: WidgetBuilderItemHoverActionProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { WidgetBuilderItemHoverAction } from './WidgetBuilderItemHoverAction';
+export type { WidgetBuilderItemHoverActionProps } from './WidgetBuilderItemHoverAction';

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

@@ -0,0 +1,23 @@
+import React from "react";
+export type WidgetSize = "1" | "2h" | "2w" | "4";
+export interface WidgetContainerProps {
+    /** Size of the widget */
+    size?: WidgetSize;
+    /** Title displayed in the header */
+    title?: string;
+    /** Actions displayed in the header */
+    actions?: React.ReactNode;
+    /** Content of the widget body */
+    children?: React.ReactNode;
+    /** Optional className for the container */
+    className?: string;
+    /** Optional className for the header */
+    classNameHeader?: string;
+    /** Optional className for the body */
+    classNameBody?: string;
+}
+/**
+ * A flexible widget container component with header and body sections.
+ * Supports 4 predefined sizes based on a 400px base with 25px grid spacing.
+ */
+export declare const WidgetContainer: ({ size, title, actions, children, className, classNameHeader, classNameBody, }: WidgetContainerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { WidgetContainer } from './WidgetContainer';
+export type { WidgetContainerProps, WidgetSize } from './WidgetContainer';

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

@@ -0,0 +1,70 @@
+import React from "react";
+/**
+ * Represents a widget item in the sidebar
+ */
+export interface WidgetSidebarItem {
+    /** Unique identifier for the item */
+    id: string;
+    /** Display title for the item */
+    title: string;
+    /** Optional description for the item */
+    description?: string;
+    /** Optional icon for the item */
+    icon?: React.ReactNode;
+    /** Position number on canvas (displayed as trailing text) */
+    position?: number;
+    /** Whether the item is selected */
+    isSelected?: boolean;
+    /** Whether the item is visible */
+    isVisible?: boolean;
+    /** Whether the item is disabled */
+    isDisabled?: boolean;
+    /** Optional custom data for the item */
+    data?: Record<string, unknown>;
+}
+/**
+ * Props for the WidgetSidebar component
+ */
+export interface WidgetSidebarProps {
+    /** Array of widget items to display */
+    items: WidgetSidebarItem[];
+    /** Placeholder text for the search input */
+    searchPlaceholder?: string;
+    /** Show/hide search bar */
+    showSearch?: boolean;
+    /** Icon to display in header (right side) */
+    headerIcon?: React.ReactNode;
+    /** Tooltip content for the header icon */
+    headerTooltip?: React.ReactNode;
+    /** Callback when an item is clicked */
+    onItemClick?: (item: WidgetSidebarItem) => void;
+    /** Custom className for the container */
+    className?: string;
+    /** Custom background color */
+    backgroundColor?: string;
+    /** Custom border style */
+    borderStyle?: string;
+}
+/**
+ * @file A sidebar component for displaying widgets
+ * @description This component displays a list of widgets that can be clicked.
+ * Each widget shows its title, optional description, icon, and position number on canvas.
+ *
+ * Features:
+ * - Search functionality to filter widgets
+ * - Customizable list item sizes
+ * - Uses ListItem component for consistent styling
+ * - Shows widget position on canvas as trailing text
+ * - Fully controlled via props (data-driven)
+ *
+ * @param {WidgetSidebarItem[]} items - Array of widget items
+ * @param {string} [searchPlaceholder='Search'] - Placeholder for search input
+ * @param {boolean} [showSearch=true] - Show/hide the search bar
+ * @param {React.ReactNode} [headerIcon] - Icon to display in header
+ * @param {Function} [onItemClick] - Callback when an item is clicked
+ * @param {string} [className] - Custom CSS classes for the container
+ * @param {string} [backgroundColor='bg-white'] - Custom background color
+ * @param {string} [borderStyle='border border-surface-3'] - Custom border style
+ * @returns {JSX.Element} The rendered WidgetSidebar component
+ */
+export declare const WidgetSidebar: ({ items, searchPlaceholder, showSearch, headerIcon, headerTooltip, onItemClick, className, backgroundColor, borderStyle, }: WidgetSidebarProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { WidgetSidebar } from './WidgetSidebar';
+export type { WidgetSidebarProps, WidgetSidebarItem, } from './WidgetSidebar';

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

@@ -0,0 +1,22 @@
+import React from "react";
+export interface WorkspaceSettingsItem {
+    icon: React.ReactNode;
+    label: string;
+    description?: string;
+    buttonLabel?: string;
+    buttonIcon?: React.ReactNode;
+    buttonOnClick?: () => void;
+}
+export interface WorkspaceSettingsProps extends React.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    subtitle: string;
+    actionButtonLabel?: string;
+    actionButtonLabelOnClick?: () => void;
+    extraComponent?: React.ReactNode;
+    items: WorkspaceSettingsItem[];
+}
+/**
+ * A component for displaying workspace settings with a title, subtitle, and a list of items.
+ * Each item includes an icon, label, description, and an action button.
+ */
+export declare const WorkspaceSettings: ({ className, title, subtitle, actionButtonLabel, actionButtonLabelOnClick, extraComponent, items, ...props }: WorkspaceSettingsProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { WorkspaceSettings } from './WorkspaceSettings';
+export type { WorkspaceSettingsProps, WorkspaceSettingsItem } from './WorkspaceSettings';

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

@@ -0,0 +1 @@
+export * from '../../index';

package/dist/shared/ui/slider/Slider.d.ts

@@ -0,0 +1,96 @@
+import React from "react";
+/**
+ * Tipo de variante visual del Slider
+ * @typedef {("default" | "percentage" | "labelTop" | "labelBottom")} SliderVariant
+ */
+export type SliderVariant = "default" | "percentage" | "labelTop" | "labelBottom";
+/**
+ * Propiedades del componente Slider
+ * @interface SliderProps
+ */
+export interface SliderProps {
+    /**
+     * Valor mínimo del slider
+     * @type {number}
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Valor máximo del slider
+     * @type {number}
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Valor inicial del primer control
+     * @type {number}
+     * @default 0
+     */
+    defaultValue?: number;
+    /**
+     * Valor inicial del segundo control. Si se proporciona, el slider funciona en modo rango
+     * @type {number | undefined}
+     * @default undefined
+     */
+    defaultValueEnd?: number;
+    /**
+     * Incremento del slider al mover los controles
+     * @type {number}
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Variante visual del slider
+     * - default: Sin indicadores
+     * - percentage: Solo texto de porcentaje (sin caja de fondo)
+     * - labelTop: Etiquetas arriba con caja de fondo y pointer apuntando hacia el control
+     * - labelBottom: Etiquetas abajo con caja de fondo y pointer apuntando hacia el control
+     * @type {SliderVariant}
+     * @default "default"
+     */
+    variant?: SliderVariant;
+    /**
+     * Etiquetas personalizadas para las variantes labelTop y labelBottom
+     * @type {string[]}
+     * @default []
+     */
+    labels?: string[];
+    /**
+     * Callback ejecutado cuando cambia el valor del slider
+     * @type {(value: number | [number, number]) => void}
+     */
+    onChange?: (value: number | [number, number]) => void;
+    /**
+     * Clases CSS adicionales para el contenedor
+     * @type {string}
+     */
+    className?: string;
+    /**
+     * Si es true, el slider está deshabilitado
+     * @type {boolean}
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * Componente Slider para seleccionar un valor o rango de valores.
+ *
+ * @component
+ * @example
+ * // Slider simple
+ * <Slider min={0} max={100} defaultValue={50} />
+ *
+ * @example
+ * // Slider de rango con porcentajes
+ * <Slider
+ *   min={0}
+ *   max={100}
+ *   defaultValue={25}
+ *   defaultValueEnd={75}
+ *   variant="percentage"
+ * />
+ *
+ * @param {SliderProps} props - Propiedades del componente
+ * @returns {JSX.Element} Componente Slider renderizado
+ */
+export declare const Slider: React.FC<SliderProps>;

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

@@ -0,0 +1,2 @@
+export { Slider } from "./Slider";
+export type { SliderProps, SliderVariant } from "./Slider";

package/dist/shared/utils/index.d.ts

@@ -0,0 +1 @@
+export * from "./tailwind";

package/dist/shared/utils/tailwind.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Tailwind CSS utility functions for consistent class generation
+ */
+/**
+ * Maps gap values to Tailwind gap classes
+ * @param gap - Gap value from 0-8
+ * @returns Tailwind gap class string
+ */
+export declare const getGapClass: (gap?: number) => string;

package/package.json

@@ -0,0 +1,112 @@
+{
+  "name": "@skalar-saas/design-system",
+  "version": "0.1.67",
+  "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",
+    "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",
+    "./preset": "./tailwind.preset.js"
+  },
+  "files": [
+    "dist",
+    "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",
+    "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",
+    "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",
+    "vitest": "^3.2.4"
+  },
+  "dependencies": {
+    "react-markdown": "^10.1.0"
+  }
+}