sy-ui-lib 1.0.14 → 1.0.16

package/dist/components/DatePicker/DatePicker.component.d.ts

@@ -1,3 +1,61 @@
 import { DatePickerProps } from './DatePicker.types';
+/**
+ * DatePicker Component
+ *
+ * A flexible and reusable date picker component that supports both single date
+ * selection and date range selection. It provides built-in constraints, default
+ * selections, and responsive sizing for different UI needs.
+ *
+ * Props:
+ * @param {string} [title="Date"] Label or placeholder text displayed when no date is selected.
+ * @param {"single" | "range"} [variant="single"]  Determines the mode of the date picker.
+ *        Use `"single"` for selecting one date or `"range"` for selecting a start and end date.
+ * @param {Date} [value]  Selected date value (used in single mode).
+ * @param {(date: Date | undefined) => void} [onChange] Callback triggered when a single date is selected.
+ * @param {Date} [fromDate] Start date (used in range mode).
+ * @param {Date} [toDate] - End date (used in range mode).
+ * @param {(date: Date | undefined) => void} [onFromChange] Callback triggered when the "from" date changes.
+ * @param {(date: Date | undefined) => void} [onToChange] Callback triggered when the "to" date changes.
+ * @param {"sm" | "lg" | "full"} [size="sm"] - Controls the width of the date picker.
+ *        `"sm"` for compact, `"lg"` for wider input, and `"full"` for full width.
+ * @param {"sm" | "lg"} [height="lg"] - Controls the height of the input field.
+ * @param {number} [maxPastDays] - Restricts selection to only the last N days from today.
+ * @param {number} [maxRangeDays] - Limits the maximum selectable range between "from" and "to" dates.
+ * @param {boolean} [currentSelected=false] - If true, automatically selects today's date
+ *        (or default range if range mode is enabled).
+ * @param {number} [rangeDays=0] - Defines the default range in days (used when `currentSelected` is true).
+ *        Example: If `rangeDays = 4`, then range will be from (today - 4 days) to today.
+ * @returns A responsive date picker component supporting both single and range selection modes.
+ * @example
+ * Single Date:
+ * <DatePicker
+ *   title="Select Date"
+ *   variant="single"
+ *   value={date}
+ *   onChange={(d) => setDate(d)}
+ * />
+ *
+ * Date Range:
+ * <DatePicker
+ *   variant="range"
+ *   fromDate={from}
+ *   toDate={to}
+ *   onFromChange={setFrom}
+ *   onToChange={setTo}
+ * />
+ *
+ * Default Today:
+ * <DatePicker
+ *   variant="single"
+ *   currentSelected
+ * />
+ *
+ * Last N Days Range:
+ * <DatePicker
+ *   variant="range"
+ *   currentSelected
+ *   rangeDays={7}
+ * />
+ */
 declare const DatePicker: React.FC<DatePickerProps>;
 export default DatePicker;

package/dist/components/DatePicker/DatePicker.stories.d.ts

@@ -5,5 +5,8 @@ export default meta;
 type Story = StoryObj<DatePickerProps>;
 export declare const Default: Story;
 export declare const CustomTitle: Story;
+export declare const Sizes: Story;
+export declare const Heights: Story;
 export declare const MaxPastDays: Story;
 export declare const Range: Story;
+export declare const RangeFull: Story;

package/dist/components/DatePicker/DatePicker.types.d.ts

@@ -1,30 +1,29 @@
-import { ButtonSize } from '../Button';
-/** "single": For selecting a single date. "range": For selecting a date range*/
 export type DatePickerMode = "single" | "range";
-/** Props for the reusable DatePicker component. */
+export type DatePickerSize = "sm" | "lg" | "full";
 export interface DatePickerProps {
-    /** Optional title/label to show above the date picker, default value "Select Date"  */
+    /** Label / placeholder */
     title?: string;
-    /** Defines picker behavior */
+    /** Mode */
     variant?: DatePickerMode;
-    /** Selected date (controlled) */
+    /** Single date */
     value?: Date;
-    /** Callback when single date changes */
+    /** Single change */
     onChange?: (date: Date | undefined) => void;
-    /** Selected "from" date */
+    /** Range: from */
     fromDate?: Date;
-    /** Selected "to" date */
+    /** Range: to */
     toDate?: Date;
-    /** Callback when "from" date changes */
+    /** Range handlers */
     onFromChange?: (date: Date | undefined) => void;
-    /** Callback when "to" date changes */
     onToChange?: (date: Date | undefined) => void;
-    /** Size of the picker */
-    size?: ButtonSize;
-    /** Maximum selectable past days */
+    size?: DatePickerSize;
+    /** height controlled from parent */
+    height?: "sm" | "lg";
+    /** Constraints */
     maxPastDays?: number;
-    /** Maximum selectable past days */
     maxRangeDays?: number;
-    /** If true, today is pre-selected on mount. */
+    /** Default select */
     currentSelected?: boolean;
+    /** Default select range */
+    rangeDays?: number;
 }

package/dist/components/Dropdown/Dropdown.stories.d.ts

@@ -6,5 +6,5 @@ type Story = StoryObj<DropdownProps>;
 export declare const SmallDropdown: Story;
 export declare const LargeDropdown: Story;
 export declare const SelectedOption: Story;
-/** Stateless dropdown for downloads (doesn’t store selected)*/
 export declare const StatelessDropdown: Story;
+export declare const FullWidthDropdown: Story;

package/dist/components/Dropdown/Dropdown.types.d.ts

@@ -1,4 +1,3 @@
-import { ButtonSize } from '../Button';
 /**
  * Represents an individual option in the dropdown.
  */
@@ -10,10 +9,11 @@ export interface DropdownOptionValues {
 }
 /** Props associated with Dropdown component*/
 export interface DropdownProps {
+    variant?: "small" | "large";
     /** The fallback label to display when no option is selected. */
     label: string;
     /** Defines the size of the dropdown button and options. default value is "sm" */
-    size?: ButtonSize;
+    size?: "sm" | "lg" | "full";
     /** List of dropdown options available for selection. */
     options: DropdownOptionValues[];
     /** Currently selected option. Must be one of the items from `options`. */

package/dist/components/MultiSelectDropdown/MultiSelectDropdown.component.d.ts

@@ -18,5 +18,5 @@ import { MultiSelectDropdownProps } from './MultiSelectDropdown.types';
  *   onSelect={(items) => console.log(items)}
  * />
  */
-declare const MultiSelectDropdown: ({ label, size, options, selected, onSelect, }: MultiSelectDropdownProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelectDropdown: ({ label, size, variant, options, selected, onSelect, }: MultiSelectDropdownProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelectDropdown;

package/dist/components/MultiSelectDropdown/MultiSelectDropdown.stories.d.ts

@@ -1,10 +1,13 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { default as MultiSelectDropdown } from './MultiSelectDropdown.component';
-declare const meta: Meta<typeof MultiSelectDropdown>;
+import { MultiSelectDropdownProps } from './MultiSelectDropdown.types';
+declare const meta: Meta<MultiSelectDropdownProps>;
 export default meta;
-/** Type alias for a story object of Multiselect Dropdown.*/
-type Story = StoryObj<typeof MultiSelectDropdown>;
-/** Default story for the MultiSelectDropdown component.*/
+type Story = StoryObj<MultiSelectDropdownProps>;
+/** Default */
 export declare const Default: Story;
-/** Story example to showing a default selected value.*/
+/** With Pre-selected */
 export declare const Selected: Story;
+/** Small Variant */
+export declare const SmallVariant: Story;
+/** Full Width */
+export declare const FullWidth: Story;

package/dist/components/MultiSelectDropdown/MultiSelectDropdown.types.d.ts

@@ -1,4 +1,3 @@
-import { ButtonSize } from '../Button';
 export interface MultiSelectOptionValues {
     /** The visible label shown in the dropdown list and selected state */
     label: string;
@@ -7,10 +6,11 @@ export interface MultiSelectOptionValues {
 }
 /** Props associated with Dropdown component*/
 export interface MultiSelectDropdownProps {
+    variant?: "small" | "large";
     /** The fallback label to display when no option is selected. */
     label: string;
     /** Defines the size of the dropdown button and options. default value is "sm" */
-    size?: ButtonSize;
+    size?: "sm" | "lg" | "full";
     /** List of dropdown options available for selection. */
     options: MultiSelectOptionValues[];
     /** Currently selected option. Must be one of the items from `options`. */