@skalar-saas/design-system 0.1.128 → 0.1.129

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

@@ -1,5 +1,5 @@
 import React, { ComponentPropsWithoutRef } from "react";
-import { Button } from "@/shared/ui/Button";
+import { Button } from "../Button";
 /**
  * Alert type options.
  * @typedef {'success' | 'warning' | 'error' | 'info' | 'default'} AlertType

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type ButtonProps } from '@/shared/ui/Button/Button';
+import { type ButtonProps } from "../Button/Button";
 export interface ChatCollapsibleDialogAction {
     label: string;
     onClick?: () => void;

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

@@ -1,4 +1,4 @@
-import { ChatHistorialItemProps } from '@/shared/ui/ChatHistorialItem/ChatHistorialItem';
+import { ChatHistorialItemProps } from "../ChatHistorialItem/ChatHistorialItem";
 import type { ReactNode } from 'react';
 /**
  * Represents a single item in the chat history with timestamp

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

@@ -1,4 +1,4 @@
-import { DropMenuItemProps } from '@/shared/ui/DropMenu/DropMenu';
+import { DropMenuItemProps } from "../DropMenu/DropMenu";
 /**
  * Defines the public API for the ChatHistorialItem component.
  */

package/dist/shared/ui/ChatPanel/ChatPanel.types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import type { ChatView } from '@/shared/ui/ChatHeader';
-import type { ChatHistorialItem } from '@/shared/ui/ChatHistorial';
+import type { ChatView } from "../ChatHeader";
+import type { ChatHistorialItem } from "../ChatHistorial";
 /**
  * Attachment data structure
  */

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

@@ -0,0 +1,69 @@
+import { StoryObj } from '@storybook/nextjs-vite';
+/**
+ * The `DateRangePicker` component is a calendar UI for date selection in the design system.
+ * It provides a clean interface for both single date and date range selection.
+ *
+ * ### Core Concepts
+ *
+ * The component's behavior is controlled by combining props:
+ * - **`pickType`**: Determines selection mode ('range' for date ranges, 'single' for single dates).
+ * - **`extraMonth`**: When true, displays two months side by side for easier range selection.
+ * - **`selected`**: The currently selected DateRange object (`{ from: Date, to?: Date }`).
+ *
+ * ### Built-in Actions
+ *
+ * The component includes Cancel and Accept buttons at the bottom:
+ * - Cancel resets the selection and fires `onCancel` callback
+ * - Accept confirms the selection and fires `onAccept` callback with the current range
+ * - Both buttons can be customized via `cancelLabel` and `acceptLabel` props for internationalization
+ *
+ * ### Calendar Customization
+ *
+ * The component uses custom Chevron icons from the design system and shows outside days
+ * for better month navigation context.
+ *
+ * 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>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * ## Interactive Playground
+ *
+ * This story provides a fully interactive playground to test all DateRangePicker configurations.
+ * Use the Storybook controls panel to experiment with different prop combinations.
+ *
+ * Try changing:
+ * - `pickType` to switch between range and single date selection
+ * - `extraMonth` to toggle dual-month display
+ * - `disabled` to see the disabled state
+ * - `cancelLabel` and `acceptLabel` for internationalization
+ */
+export declare const Interactive: Story;
+/**
+ * ## Date Range Selection
+ *
+ * A date range picker showing two months side by side for easy range selection.
+ * Users can select a start date and an end date, making it ideal for filtering data
+ * or booking multi-day experiences.
+ *
+ * **Use cases:**
+ * - Hotel booking systems (check-in to check-out)
+ * - Report date filters (start to end period)
+ * - Event scheduling (multi-day events)
+ * - Analytics dashboards (time range selection)
+ */
+export declare const RangeSelection: Story;
+/**
+ * ## Single Date Selection
+ *
+ * A calendar picker for selecting a single date. Displays one month at a time
+ * for a more compact layout, perfect for forms and single-point-in-time selection.
+ *
+ * **Use cases:**
+ * - Birth date selection in forms
+ * - Appointment booking (single day)
+ * - Deadline picker (due date)
+ * - Event date selection (single-day events)
+ */
+export declare const SingleDateSelection: Story;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '@/shared/ui/Button/Button';
+import { Button } from "../Button/Button";
 export type DropModalSize = 'sm' | 'md' | 'lg';
 declare const DropModal: {
     ({ children, size, padding, open: controlledOpen, onClose, triggerRef: externalTriggerRef, }: {

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { type LayoutValue } from "@/shared/ui/DropLayoutPicker/DropLayoutPicker";
+import { type LayoutValue } from "../DropLayoutPicker/DropLayoutPicker";
 export type { LayoutValue };
 export interface FormFieldGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     bodyClassName?: string;

package/dist/shared/ui/KPI/KPIAutomationTrigger/KPIAutomationTrigger.d.ts

@@ -1,4 +1,4 @@
-import type { KPIValueBreakdownSize } from "@/shared/ui/KPI/KPIValueBreakdown";
+import type { KPIValueBreakdownSize } from "../KPIValueBreakdown";
 export type KPIAutomationTriggerSize = KPIValueBreakdownSize;
 export interface KPIAutomationTriggerItem {
     name: string;

package/dist/shared/ui/KPI/KPIProgress/KPIProgress.d.ts

@@ -1,4 +1,4 @@
-import type { KPISingleValueContentProps } from "@/shared/ui/KPI/KPISingleValue";
+import type { KPISingleValueContentProps } from "../KPISingleValue";
 export type KPIProgressVariant = "none" | "inline" | "below" | "tooltip";
 export interface KPIProgressBarProps extends KPISingleValueContentProps {
     /** Label shown above the progress bar. */

package/dist/shared/ui/KPI/KPIQuickActionList/KPIQuickActionList.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ListItemSize } from "@/shared/ui/ListItem/ListItem";
+import type { ListItemSize } from "../../ListItem/ListItem";
 export interface KPIQuickActionListItem {
     title: string;
     description?: string;

package/dist/shared/ui/KPI/KPISlider/KPISlider.d.ts

@@ -1,4 +1,4 @@
-import type { KPISingleValueContentProps } from "@/shared/ui/KPI/KPISingleValue";
+import type { KPISingleValueContentProps } from "../KPISingleValue";
 export interface KPISliderProps extends KPISingleValueContentProps {
     /** Minimum slider value. Defaults to 0. */
     min?: number;

package/dist/shared/ui/KPI/KPIValueBreakdown/KPIValueBreakdown.d.ts

@@ -1,4 +1,4 @@
-import type { ListItemSize } from "@/shared/ui/ListItem/ListItem";
+import type { ListItemSize } from "../../ListItem/ListItem";
 export type KPIValueBreakdownSize = ListItemSize;
 export interface KPIValueBreakdownItem {
     name: string;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { type KanbanColumnStatusColor } from '@/shared/ui/KanbanColumn';
-import { type KanbanUser, type KanbanCardVariant } from '@/shared/ui/KanbanCard';
+import { type KanbanColumnStatusColor } from "../KanbanColumn";
+import { type KanbanUser, type KanbanCardVariant } from "../KanbanCard";
 export type { KanbanColumnStatusColor };
 export type { KanbanUser };
 export type { KanbanCardVariant };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type BadgeTheme } from '@/shared/ui/Badge';
+import { type BadgeTheme } from "../Badge";
 export interface KanbanUser {
     imageUrl?: string;
     initials?: string;

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

@@ -1,4 +1,4 @@
-import { type KanbanUser, type KanbanCardVariant } from '@/shared/ui/KanbanCard';
+import { type KanbanUser, type KanbanCardVariant } from "../KanbanCard";
 export type KanbanColumnStatusColor = 'red' | 'orange' | 'green' | 'gray';
 export interface KanbanColumnCardData {
     id: string;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconSize } from '@/shared/ui/Icon/Icon';
+import { IconSize } from "../Icon/Icon";
 export type LabelSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl';
 export interface LabelIconProps extends React.HTMLAttributes<HTMLDivElement> {
     /** The icon component or element to display */

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '@/shared/ui/Button/Button';
+import { Button } from "../Button/Button";
 /**
  * Modal size options.
  * @typedef {'sm' | 'md' | 'lg'} ModalSize

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { type AppointmentDetailProps } from '@/shared/ui/AppointmentDetail';
-import type { AppointmentStatus } from '@/shared/ui/AppointmentRow';
+import { type AppointmentDetailProps } from "../AppointmentDetail";
+import type { AppointmentStatus } from "../AppointmentRow";
 export type { AppointmentStatus };
 export type { AppointmentDetailProps };
 export interface PlannerAppointment {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StatusState } from '@/shared/ui/Badge/Badge';
+import { StatusState } from "../Badge/Badge";
 /**
  * Defines the public API for the ProjectCard component, extending standard div attributes.
  */

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { BadgeProps } from "@/shared/ui/Badge/Badge";
+import { BadgeProps } from "../Badge/Badge";
 export type ProjectCardTimeLabel = "month" | "week" | "year" | "day";
 export interface ProjectCardPlanItem {
     icon: React.ReactNode;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { ButtonVariant, ButtonHierarchy } from "@/shared/ui/Button/Button";
+import { ButtonVariant, ButtonHierarchy } from "../Button/Button";
 export interface SupportCardButtonItem {
     icon?: React.ReactNode;
     label: string;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { type LayoutValue } from "@/shared/ui/FormFieldGroup/FormFieldGroup";
+import { type LayoutValue } from "../FormFieldGroup/FormFieldGroup";
 export type SectionAction = "maximize" | "grid" | "add" | "copy" | "trash" | "addWidget";
 export type ColumnAction = "drag" | "duplicate" | "delete";
 export type WidgetAction = "maximize" | "text-block" | "edit" | "copy" | "trash";

package/dist/shared/ui/WidgetBuilderEdit/Header.d.ts

@@ -1,4 +1,4 @@
-import { ContextMenuItem } from "@/shared/ui/WidgetEditor";
+import { ContextMenuItem } from "../WidgetEditor";
 interface HeaderProps {
     title: string;
     contextMenu?: ContextMenuItem[];

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

@@ -1,4 +1,4 @@
-import { WidgetConfig } from "@/shared/ui/WidgetEditor";
+import { WidgetConfig } from "../WidgetEditor";
 export interface WidgetBuilderEditProps {
     config: WidgetConfig;
     onChange: (config: WidgetConfig) => void;

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

@@ -1,3 +1,3 @@
 export { WidgetBuilderEdit } from "./WidgetBuilderEdit";
 export type { WidgetBuilderEditProps } from "./WidgetBuilderEdit";
-export type { WidgetConfig, Section, Field, FieldType, ContextMenuItem, DropdownOption, ListItem, DraggableItem, MultiDropdownConfig, } from "@/shared/ui/WidgetEditor";
+export type { WidgetConfig, Section, Field, FieldType, ContextMenuItem, DropdownOption, ListItem, DraggableItem, MultiDropdownConfig, } from "../WidgetEditor";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skalar-saas/design-system",
-  "version": "0.1.128",
+  "version": "0.1.129",
   "type": "module",
   "description": "Skalar Design System - UI component library",
   "author": "Skalar Team",
@@ -10,7 +10,7 @@
     "url": "https://github.com/skalar-saas/skalar-design-system.git"
   },
   "scripts": {
-    "build": "vite build && tsc --project tsconfig.build.json --skipLibCheck",
+    "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",
@@ -104,6 +104,7 @@
     "typescript": "^5",
     "typescript-eslint": "^8.46.3",
     "vite": "^7.2.1",
+    "vite-plugin-dts": "^5.0.2",
     "vitest": "^3.2.4"
   },
   "dependencies": {