linkedunion-design-kit 1.10.1 → 1.10.3

package/dist/build/types/app/layout.d.ts

@@ -0,0 +1,12 @@
+type SegmentParams<T extends Object = any> = T extends Record<string, any> ? {
+    [K in keyof T]: T[K] extends string ? string | string[] | undefined : never;
+} : T;
+export interface PageProps {
+    params?: Promise<SegmentParams>;
+    searchParams?: Promise<any>;
+}
+export interface LayoutProps {
+    children?: React.ReactNode;
+    params?: Promise<SegmentParams>;
+}
+export {};

package/dist/build/types/app/layout.js

@@ -0,0 +1,22 @@
+// File: /Users/sameersultan/Desktop/linkedunion-design-kit/app/layout.tsx
+import * as entry from '../../../app/layout.js';
+// Check that the entry is a valid entry
+checkFields();
+// Check the prop type of the entry function
+checkFields();
+// Check the arguments and return type of the generateMetadata function
+if ('generateMetadata' in entry) {
+    checkFields();
+    checkFields();
+}
+// Check the arguments and return type of the generateViewport function
+if ('generateViewport' in entry) {
+    checkFields();
+    checkFields();
+}
+// Check the arguments and return type of the generateStaticParams function
+if ('generateStaticParams' in entry) {
+    checkFields();
+    checkFields();
+}
+function checkFields() { }

package/dist/build/types/app/page.d.ts

@@ -0,0 +1,12 @@
+type SegmentParams<T extends Object = any> = T extends Record<string, any> ? {
+    [K in keyof T]: T[K] extends string ? string | string[] | undefined : never;
+} : T;
+export interface PageProps {
+    params?: Promise<SegmentParams>;
+    searchParams?: Promise<any>;
+}
+export interface LayoutProps {
+    children?: React.ReactNode;
+    params?: Promise<SegmentParams>;
+}
+export {};

package/dist/build/types/app/page.js

@@ -0,0 +1,22 @@
+// File: /Users/sameersultan/Desktop/linkedunion-design-kit/app/page.tsx
+import * as entry from '../../../app/page.js';
+// Check that the entry is a valid entry
+checkFields();
+// Check the prop type of the entry function
+checkFields();
+// Check the arguments and return type of the generateMetadata function
+if ('generateMetadata' in entry) {
+    checkFields();
+    checkFields();
+}
+// Check the arguments and return type of the generateViewport function
+if ('generateViewport' in entry) {
+    checkFields();
+    checkFields();
+}
+// Check the arguments and return type of the generateStaticParams function
+if ('generateStaticParams' in entry) {
+    checkFields();
+    checkFields();
+}
+function checkFields() { }

package/dist/build/types/validator.js

@@ -0,0 +1,12 @@
+// This file is generated automatically by Next.js
+// Do not edit this file manually
+// This file validates that all pages and layouts export the correct types
+// Validate ../../app/page.tsx
+{
+    var handler = {};
+}
+// Validate ../../app/layout.tsx
+{
+    var handler = {};
+}
+export {};

package/dist/index.d.ts

@@ -31,3 +31,4 @@ export { default as Combobox } from "./src/components/Dropdown/Combobox/Combobox
 export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, } from "./src/components/Pagination/pagination";
 export { Skeleton } from "./src/components/Skeleton/skeleton";
 export { Tabs as VerticalTabs, TabsContent as VerticalTabsContent, TabsList as VerticalTabsList, tabSizes as verticalTabsSize, TabsTrigger as VerticalTabsTrigger, TabsHeading as VerticalTabsHeading, } from "./src/components/VerticalTabs/VerticalTabs";
+export { DatePicker } from "./src/components/Input/DatePicker";

package/dist/index.js

@@ -31,3 +31,4 @@ export { default as Combobox } from "./src/components/Dropdown/Combobox/Combobox
 export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, } from "./src/components/Pagination/pagination";
 export { Skeleton } from "./src/components/Skeleton/skeleton";
 export { Tabs as VerticalTabs, TabsContent as VerticalTabsContent, TabsList as VerticalTabsList, tabSizes as verticalTabsSize, TabsTrigger as VerticalTabsTrigger, TabsHeading as VerticalTabsHeading, } from "./src/components/VerticalTabs/VerticalTabs";
+export { DatePicker } from "./src/components/Input/DatePicker";

package/dist/src/components/Button/Button/Button.module.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
 .rounded-sm {
   border-radius: var(--radius-sm, 0.25rem);
 }

package/dist/src/components/ColorPicker/ColorPicker.stories.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ColorPicker from "./ColorPicker";
 import { Label } from "../Label/Label";
-import { inputVariantConfig } from "../Input/input";
+import { inputVariantConfig } from "../Input";
 export default {
     title: "Components/ColorPicker",
     component: ColorPicker,

package/dist/src/components/ColorPicker/index.d.ts

@@ -1,4 +1,4 @@
-import { inputVariantConfig } from "../Input/input";
+import { inputVariantConfig } from "../Input";
 export declare const getColorPickerSizes: (size: keyof typeof inputVariantConfig.size) => {
     colorBox: string;
     left: string;

package/dist/src/components/Input/DatePicker.d.ts

@@ -0,0 +1,3 @@
+import { DatePickerProps } from "./";
+declare function DatePicker({ className, variant, size, startIcon, endIcon, shape, color, value, onChange, minDate, maxDate, disabled, placeholder, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export { DatePicker };

package/dist/src/components/Input/DatePicker.js

@@ -0,0 +1,255 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { isSameDay as dateFnsIsSameDay, isToday as dateFnsIsToday, startOfDay, isBefore, isAfter, } from "date-fns";
+import { cn } from "../../lib/utils";
+import LUIcon from "../Icons/LUIcon";
+import { Button } from "../Button/Button/Button";
+import { Input } from "./input";
+import { getIconSize, MONTHS, DAYS, datePickerStyles, DEFAULT_INPUT_VARIANT, DEFAULT_INPUT_SIZE, DEFAULT_INPUT_COLOR, DEFAULT_INPUT_SHAPE, } from "./";
+function DatePicker(_a) {
+    var className = _a.className, _b = _a.variant, variant = _b === void 0 ? DEFAULT_INPUT_VARIANT : _b, _c = _a.size, size = _c === void 0 ? DEFAULT_INPUT_SIZE : _c, startIcon = _a.startIcon, endIcon = _a.endIcon, _d = _a.shape, shape = _d === void 0 ? DEFAULT_INPUT_SHAPE : _d, _e = _a.color, color = _e === void 0 ? DEFAULT_INPUT_COLOR : _e, value = _a.value, onChange = _a.onChange, minDate = _a.minDate, maxDate = _a.maxDate, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.placeholder, placeholder = _g === void 0 ? "MM/DD/YYYY" : _g, props = __rest(_a, ["className", "variant", "size", "startIcon", "endIcon", "shape", "color", "value", "onChange", "minDate", "maxDate", "disabled", "placeholder"]);
+    var _h = React.useState(false), isOpen = _h[0], setIsOpen = _h[1];
+    var _j = React.useState(value || null), selectedDate = _j[0], setSelectedDate = _j[1];
+    var _k = React.useState(value || new Date()), viewDate = _k[0], setViewDate = _k[1];
+    var _l = React.useState("days"), viewMode = _l[0], setViewMode = _l[1];
+    var _m = React.useState({ top: 0, left: 0, width: 0 }), dropdownPosition = _m[0], setDropdownPosition = _m[1];
+    var containerRef = React.useRef(null);
+    var inputRef = React.useRef(null);
+    var dropdownRef = React.useRef(null);
+    var iconSizeClass = getIconSize(size);
+    React.useEffect(function () {
+        setSelectedDate(value || null);
+        if (value) {
+            setViewDate(value);
+        }
+    }, [value]);
+    React.useEffect(function () {
+        var handleClickOutside = function (event) {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target) &&
+                dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+                setViewMode("days");
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return function () {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
+    React.useEffect(function () {
+        var updatePosition = function () {
+            var _a;
+            if (isOpen && containerRef.current) {
+                var rect = containerRef.current.getBoundingClientRect();
+                var dropdownHeight = ((_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 400;
+                var spaceBelow = window.innerHeight - rect.bottom;
+                var spaceAbove = rect.top;
+                var top_1 = rect.bottom + 8;
+                if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
+                    top_1 = rect.top - dropdownHeight - 8;
+                }
+                setDropdownPosition({
+                    top: top_1,
+                    left: rect.left,
+                    width: rect.width,
+                });
+            }
+        };
+        if (isOpen) {
+            updatePosition();
+            window.addEventListener("resize", updatePosition);
+            window.addEventListener("scroll", updatePosition, true);
+            return function () {
+                window.removeEventListener("resize", updatePosition);
+                window.removeEventListener("scroll", updatePosition, true);
+            };
+        }
+    }, [isOpen]);
+    var handleDateSelect = function (date) {
+        if (isDateDisabled(date))
+            return;
+        // If clicking on already selected date, clear it
+        if (selectedDate && dateFnsIsSameDay(selectedDate, date)) {
+            setSelectedDate(null);
+            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+            setIsOpen(false);
+            setViewMode("days");
+            return;
+        }
+        setSelectedDate(date);
+        onChange === null || onChange === void 0 ? void 0 : onChange(date);
+        setIsOpen(false);
+        setViewMode("days");
+    };
+    var handleMonthSelect = function (monthIndex) {
+        var newDate = new Date(viewDate.getFullYear(), monthIndex, 1);
+        setViewDate(newDate);
+        setViewMode("days");
+    };
+    var handleYearSelect = function (year) {
+        var newDate = new Date(year, viewDate.getMonth(), 1);
+        setViewDate(newDate);
+        setViewMode("months");
+    };
+    var isDateDisabled = function (date) {
+        if (minDate && isBefore(startOfDay(date), startOfDay(minDate)))
+            return true;
+        if (maxDate && isAfter(startOfDay(date), startOfDay(maxDate)))
+            return true;
+        return false;
+    };
+    var getDaysInMonth = function (year, month) {
+        var firstDay = new Date(year, month, 1);
+        var lastDay = new Date(year, month + 1, 0);
+        var daysInMonth = lastDay.getDate();
+        var startingDayOfWeek = firstDay.getDay();
+        var days = [];
+        for (var i = 0; i < startingDayOfWeek; i++) {
+            var prevMonthDay = new Date(year, month, -startingDayOfWeek + i + 1);
+            days.push(prevMonthDay);
+        }
+        for (var day = 1; day <= daysInMonth; day++) {
+            days.push(new Date(year, month, day));
+        }
+        var remainingDays = 42 - days.length;
+        for (var i = 1; i <= remainingDays; i++) {
+            days.push(new Date(year, month + 1, i));
+        }
+        return days;
+    };
+    var getYearRange = function () {
+        var currentYear = viewDate.getFullYear();
+        var startYear = Math.floor(currentYear / 12) * 12;
+        return Array.from({ length: 12 }, function (_, i) { return startYear + i; });
+    };
+    var navigateMonth = function (direction) {
+        var newDate = new Date(viewDate);
+        newDate.setMonth(viewDate.getMonth() + (direction === "prev" ? -1 : 1));
+        setViewDate(newDate);
+    };
+    var navigateYear = function (direction) {
+        var newDate = new Date(viewDate);
+        newDate.setFullYear(viewDate.getFullYear() + (direction === "prev" ? -1 : 1));
+        setViewDate(newDate);
+    };
+    var navigateYearRange = function (direction) {
+        var newDate = new Date(viewDate);
+        newDate.setFullYear(viewDate.getFullYear() + (direction === "prev" ? -12 : 12));
+        setViewDate(newDate);
+    };
+    var toggleCalendar = function () {
+        if (disabled)
+            return;
+        setIsOpen(function (prev) { return !prev; });
+        if (!isOpen) {
+            setViewMode("days");
+        }
+    };
+    var renderDaysView = function () {
+        var days = getDaysInMonth(viewDate.getFullYear(), viewDate.getMonth());
+        var currentMonth = viewDate.getMonth();
+        var config = datePickerStyles.dayConfig[size];
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "bg-gray-100 rounded-md mb-2", children: _jsx("div", { className: "grid grid-cols-7 gap-1 px-1", children: DAYS.map(function (day) { return (_jsx("div", { className: cn("text-center font-medium text-gray-900 py-2", config.fontSize), children: day }, day)); }) }) }), _jsx("div", { className: "grid grid-cols-7 gap-1", children: days.map(function (day, index) {
+                        var isCurrentMonth = day.getMonth() === currentMonth;
+                        var isSelected = selectedDate
+                            ? dateFnsIsSameDay(selectedDate, day)
+                            : false;
+                        var isTodayDate = dateFnsIsToday(day);
+                        var isDisabled = isDateDisabled(day);
+                        return (_jsx(Button, { onClick: function () { return handleDateSelect(day); }, disabled: isDisabled, variant: "ghost", size: size, className: cn(config.buttonSize, "rounded-md transition-colors", "hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-600", isSelected
+                                ? "!bg-blue-600 text-white hover:bg-blue-700"
+                                : isCurrentMonth
+                                    ? "text-gray-900"
+                                    : "text-gray-400", isTodayDate && !isSelected && "border border-blue-600", isDisabled &&
+                                "opacity-40 cursor-not-allowed hover:bg-transparent"), children: day.getDate() }, index));
+                    }) })] }));
+    };
+    var renderMonthsView = function () {
+        var config = datePickerStyles.monthConfig[size];
+        return (_jsx("div", { className: "grid grid-cols-3 gap-2", children: MONTHS.map(function (month, index) {
+                var isSelected = (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.getMonth()) === index &&
+                    (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.getFullYear()) === viewDate.getFullYear();
+                var isCurrent = new Date().getMonth() === index &&
+                    new Date().getFullYear() === viewDate.getFullYear();
+                return (_jsx(Button, { onClick: function () { return handleMonthSelect(index); }, variant: "ghost", size: size, className: cn(config.buttonSize, "rounded-md transition-colors", "hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-600", isSelected && "bg-blue-600 text-white hover:bg-blue-700", isCurrent && !isSelected && "border border-blue-600"), children: month.slice(0, 3) }, month));
+            }) }));
+    };
+    var renderYearsView = function () {
+        var years = getYearRange();
+        var config = datePickerStyles.yearConfig[size];
+        return (_jsx("div", { className: "grid grid-cols-3 gap-2", children: years.map(function (year) {
+                var isSelected = (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.getFullYear()) === year;
+                var isCurrent = new Date().getFullYear() === year;
+                return (_jsx(Button, { onClick: function () { return handleYearSelect(year); }, variant: "ghost", size: size, className: cn(config.buttonSize, "rounded-md transition-colors", "hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-600", isSelected && "bg-blue-600 text-white hover:bg-blue-700", isCurrent && !isSelected && "border border-blue-600"), children: year }, year));
+            }) }));
+    };
+    var getHeaderTitle = function () {
+        switch (viewMode) {
+            case "days":
+                return "".concat(MONTHS[viewDate.getMonth()], " ").concat(viewDate.getFullYear());
+            case "months":
+                return viewDate.getFullYear().toString();
+            case "years": {
+                var years = getYearRange();
+                return "".concat(years[0], " - ").concat(years[years.length - 1]);
+            }
+        }
+    };
+    var handleHeaderClick = function () {
+        if (viewMode === "days") {
+            setViewMode("months");
+        }
+        else if (viewMode === "months") {
+            setViewMode("years");
+        }
+    };
+    var handleNavigation = function (direction) {
+        switch (viewMode) {
+            case "days":
+                navigateMonth(direction);
+                break;
+            case "months":
+                navigateYear(direction);
+                break;
+            case "years":
+                navigateYearRange(direction);
+                break;
+        }
+    };
+    return (_jsxs("div", { className: "relative", ref: containerRef, children: [_jsx(Input, __assign({ ref: inputRef, type: "text", readOnly: true, variant: variant, size: size, startIcon: startIcon, endIcon: endIcon, shape: shape, color: color, className: cn("cursor-pointer", className), value: selectedDate
+                    ? "".concat(String(selectedDate.getMonth() + 1).padStart(2, "0"), "/").concat(String(selectedDate.getDate()).padStart(2, "0"), "/").concat(selectedDate.getFullYear())
+                    : "", placeholder: placeholder, onClick: toggleCalendar, disabled: disabled }, props)), isOpen &&
+                !disabled &&
+                createPortal(_jsxs("div", { ref: dropdownRef, className: "fixed bg-white border border-gray-200 rounded-sm shadow-xl z-[9999] max-h-[400px] overflow-y-auto p-2", style: {
+                        top: "".concat(dropdownPosition.top, "px"),
+                        left: "".concat(dropdownPosition.left, "px"),
+                    }, children: [_jsxs("div", { className: cn("flex items-center justify-between", "mb-2"), children: [_jsx(Button, { onClick: function () { return handleNavigation("prev"); }, variant: "ghost", size: size, className: "p-2 hover:bg-gray-100 rounded-md h-auto w-auto min-w-0 text-gray-900", children: _jsx(LUIcon, { icon: "arrow-left", size: iconSizeClass }) }), _jsx(Button, { onClick: handleHeaderClick, variant: "ghost", size: size, className: cn("font-semibold hover:bg-gray-100 px-3 py-2 rounded-md h-auto text-gray-900", datePickerStyles.headerText[size]), children: getHeaderTitle() }), _jsx(Button, { onClick: function () { return handleNavigation("next"); }, variant: "ghost", size: size, className: "p-2 hover:bg-gray-100 rounded-md h-auto w-auto min-w-0 text-gray-900", children: _jsx(LUIcon, { icon: "arrow-right", size: iconSizeClass }) })] }), viewMode === "days" && renderDaysView(), viewMode === "months" && renderMonthsView(), viewMode === "years" && renderYearsView()] }), document.body)] }));
+}
+export { DatePicker };

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

@@ -0,0 +1,15 @@
+import { Meta } from "@storybook/react";
+import type { DatePickerProps } from "./type";
+declare const _default: Meta<DatePickerProps>;
+export default _default;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, DatePickerProps>;
+export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
+export declare const Shapes: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithCustomIcons: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithDateRestrictions: () => import("react/jsx-runtime").JSX.Element;
+export declare const ErrorValidation: () => import("react/jsx-runtime").JSX.Element;
+export declare const SuccessValidation: () => import("react/jsx-runtime").JSX.Element;
+export declare const WarningValidation: () => import("react/jsx-runtime").JSX.Element;
+export declare const AllSizesAndShapes: () => import("react/jsx-runtime").JSX.Element;
+export declare const DisabledState: () => import("react/jsx-runtime").JSX.Element;
+export declare const AllVariantsAllColors: () => import("react/jsx-runtime").JSX.Element;