npm - linkedunion-design-kit - Versions diffs - 1.9.2 → 1.9.3 - Mend

linkedunion-design-kit 1.9.2 → 1.9.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (141) hide show

package/dist/app/layout.jsx ADDED Viewed

@@ -0,0 +1,13 @@
+import { Inter } from "next/font/google";
+import "@/styles/globals.css";
+var inter = Inter({ subsets: ["latin"] });
+export var metadata = {
+    title: "Create Next App",
+    description: "Generated by create next app",
+};
+export default function RootLayout(_a) {
+    var children = _a.children;
+    return (<html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>);
+}

package/dist/app/page.jsx ADDED Viewed

@@ -0,0 +1,25 @@
+"use client";
+import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, } from "../src/components/Pagination/pagination";
+var range = function (start, end) {
+    return Array.from({ length: end - start + 1 }, function (_, i) { return start + i; });
+};
+export default function Home() {
+    return (<div className="text-center flex flex-col items-center justify-center min-h-screen p-24 gap-5">
+      <h1> Welcome to Linkedunion Design kit</h1>
+      <Pagination>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious href="#"/>
+          </PaginationItem>
+          {range(1, 5).map(function (page) { return (<PaginationItem key={page}>
+              <PaginationLink href="#" isActive={page === 1}>
+                {page}
+              </PaginationLink>
+            </PaginationItem>); })}
+          <PaginationItem>
+            <PaginationNext href="#"/>
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </div>);
+}

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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/index.d.ts CHANGED Viewed

@@ -24,3 +24,6 @@ export { Tabs, TabsList, TabsTrigger, TabsContent, } from "./src/components/Tabs
 export { Select, SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator, SelectValue, } from "./src/components/Dropdown/select";
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "./src/components/Alerts/AlertDialog";
 export { Avatar, AvatarImage, AvatarFallback, } from "./src/components/Avatar/Avatar/Avatar";
+export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption, } from "./src/components/Table/Table";
+export { Badge } from "./src/components/Badge/Badge";
+export { default as Combobox } from "./src/components/Dropdown/Combobox/Combobox";

package/dist/index.js CHANGED Viewed

@@ -24,3 +24,6 @@ export { Tabs, TabsList, TabsTrigger, TabsContent, } from "./src/components/Tabs
 export { Select, SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator, SelectValue, } from "./src/components/Dropdown/select";
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "./src/components/Alerts/AlertDialog";
 export { Avatar, AvatarImage, AvatarFallback, } from "./src/components/Avatar/Avatar/Avatar";
+export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption, } from "./src/components/Table/Table";
+export { Badge } from "./src/components/Badge/Badge";
+export { default as Combobox } from "./src/components/Dropdown/Combobox/Combobox";

package/dist/src/components/Accordion/Accordion.stories.jsx ADDED Viewed

@@ -0,0 +1,33 @@
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "../../components/Accordion/accordion";
+import ColorPicker from "../ColorPicker/ColorPicker";
+export default {
+    title: "Components/Accordion",
+    component: Accordion,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return (<Accordion type="single" collapsible defaultValue="menus" {...args}></Accordion>); };
+export var _Accordion = Template.bind({});
+_Accordion.args = {
+    children: (<>
+      <AccordionItem value="menus">
+        <AccordionTrigger>Menus</AccordionTrigger>
+        <AccordionContent>
+          <ColorPicker value="#000000" onChange={function () { return console.log("color"); }}/>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="second">
+        <AccordionTrigger>Menus</AccordionTrigger>
+        <AccordionContent>
+          <ColorPicker value="#000000" onChange={function () { return console.log("color"); }}/>
+        </AccordionContent>
+      </AccordionItem>
+    </>),
+};
+_Accordion.argTypes = {
+    children: {
+        description: "Pass `AccordionItem` components as children. Each item includes an `AccordionTrigger` (the clickable label) and `AccordionContent` (collapsible body). You can customize both with any valid React nodes \n\nFor more details and usage examples, refer to the [ShadCN Accordion documentation](https://ui.shadcn.com/docs/components/accordion).",
+        table: {
+            type: { summary: "React.ReactNode" },
+        },
+    },
+};

package/dist/src/components/Accordion/accordion.jsx ADDED Viewed

@@ -0,0 +1,59 @@
+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 * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { cn } from "../../lib/utils";
+import LUIcon from "../Icons/LUIcon";
+function Accordion(_a) {
+    var props = __rest(_a, []);
+    return <AccordionPrimitive.Root data-slot="accordion" {...props}/>;
+}
+function AccordionItem(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<AccordionPrimitive.Item data-slot="accordion-item" className={cn("!py-5 !border-b last:!border-b !border-gray-100", className)} {...props}/>);
+}
+function AccordionTrigger(_a) {
+    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
+    var ref = React.useRef(null);
+    var _b = React.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    React.useEffect(function () {
+        var updateOpenState = function () {
+            if (ref.current) {
+                var state = ref.current.getAttribute("data-state");
+                setIsOpen(state === "open");
+            }
+        };
+        updateOpenState();
+        // Create a mutation observer to watch for attribute changes
+        var observer = new MutationObserver(updateOpenState);
+        if (ref.current) {
+            observer.observe(ref.current, {
+                attributes: true,
+                attributeFilter: ["data-state"],
+            });
+        }
+        return function () { return observer.disconnect(); };
+    }, []);
+    return (<AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger ref={ref} data-slot="accordion-trigger" className={cn("flex items-center gap-2 cursor-pointer !text-sm !font-normal !leading-normal grow m-0", className)} {...props}>
+        <LUIcon color="light-gray" icon={isOpen ? "minus" : "plus"} size="md" className="pointer-events-none shrink-0"/>
+        {children}
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>);
+}
+function AccordionContent(_a) {
+    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
+    return (<AccordionPrimitive.Content data-slot="accordion-content" className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down !overflow-visible !text-sm !py-2" {...props}>
+      <div className={cn(className)}>{children}</div>
+    </AccordionPrimitive.Content>);
+}
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/src/components/Alerts/Alert/alert.jsx ADDED Viewed

@@ -0,0 +1,152 @@
+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 * as React from "react";
+import { createContext, useContext, Children, isValidElement, cloneElement, } from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../lib/utils";
+import LUIcon from "../../Icons/LUIcon";
+import { Button } from "../../Button/Button/Button";
+var alertVariants = cva("grid w-full gap-4 rounded-lg border-l-4 p-4", {
+    variants: {
+        size: {
+            lg: "[&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-size)]:size-9 gap-4 [&_h2[data-slot='alert-dialog-title']]:text-2xl [&_h2[data-slot='alert-dialog-title']]:font-medium [&_p[data-slot='alert-dialog-description']]:text-lg [&_p[data-slot='alert-dialog-description']]:font-normal",
+            md: "[&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-size)]:size-8 gap-3 [&_h2[data-slot='alert-dialog-title']]:text-xl [&_h2[data-slot='alert-dialog-title']]:font-medium [&_p[data-slot='alert-dialog-description']]:text-base [&_p[data-slot='alert-dialog-description']]:font-normal",
+            sm: "[&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-size)]:size-7 gap-2 [&_h2[data-slot='alert-dialog-title']]:text-lg [&_h2[data-slot='alert-dialog-title']]:font-medium [&_p[data-slot='alert-dialog-description']]:text-sm [&_p[data-slot='alert-dialog-description']]:font-normal",
+        },
+        shadow: {
+            none: "",
+            lg: "shadow-lg",
+        },
+        color: {
+            blue: "bg-gray-50 text-blue-900 border-blue-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-blue-600 [&_h2[data-slot='alert-dialog-title']]:text-blue-600",
+            red: "bg-gray-50 text-red-900 border-red-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-red-600 [&_h2[data-slot='alert-dialog-title']]:text-red-600",
+            indigo: "bg-gray-50 text-indigo-900 border-indigo-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-indigo-600 [&_h2[data-slot='alert-dialog-title']]:text-indigo-600",
+            yellow: "bg-gray-50 text-yellow-900 border-yellow-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-yellow-600 [&_h2[data-slot='alert-dialog-title']]:text-yellow-600",
+            green: "bg-gray-50 text-green-900 border-green-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-green-600 [&_h2[data-slot='alert-dialog-title']]:text-green-600",
+            gray: "bg-gray-50 text-gray-900 border-gray-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-gray-600 [&_h2[data-slot='alert-dialog-title']]:text-gray-600",
+        },
+        variant: {
+            outline: "",
+            fill: "",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+        shadow: "none",
+        color: "blue",
+        variant: "outline",
+    },
+    compoundVariants: [
+        {
+            color: "blue",
+            variant: "fill",
+            class: "bg-blue-100 text-blue-900 border-blue-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-blue-600 [&_h2[data-slot='alert-dialog-title']]:text-blue-600",
+        },
+        {
+            color: "red",
+            variant: "fill",
+            class: "bg-red-100 text-red-900 border-red-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-red-600 [&_h2[data-slot='alert-dialog-title']]:text-red-600",
+        },
+        {
+            color: "indigo",
+            variant: "fill",
+            class: "bg-indigo-100 text-indigo-900 border-indigo-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-indigo-600 [&_h2[data-slot='alert-dialog-title']]:text-indigo-600",
+        },
+        {
+            color: "yellow",
+            variant: "fill",
+            class: "bg-yellow-100 text-yellow-900 border-yellow-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-yellow-600 [&_h2[data-slot='alert-dialog-title']]:text-yellow-600",
+        },
+        {
+            color: "green",
+            variant: "fill",
+            class: "bg-green-100 text-green-900 border-green-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-green-600 [&_h2[data-slot='alert-dialog-title']]:text-green-600",
+        },
+        {
+            color: "gray",
+            variant: "fill",
+            class: "bg-gray-100 text-gray-900 border-gray-600 [&_[data-slot='alert-dialog-header']_svg:not(.lu-icon-custom-color)]:text-gray-600 [&_h2[data-slot='alert-dialog-title']]:text-gray-600",
+        },
+    ],
+});
+// Create context for Alert color
+var AlertContext = createContext({});
+var useAlertContext = function () { return useContext(AlertContext); };
+export function Alert(_a) {
+    var className = _a.className, size = _a.size, shadow = _a.shadow, color = _a.color, variant = _a.variant, props = __rest(_a, ["className", "size", "shadow", "color", "variant"]);
+    return (<AlertContext.Provider value={{ color: color || undefined }}>
+      <div data-slot="inline-alert" className={cn(alertVariants({
+            size: size,
+            shadow: shadow,
+            color: color,
+            variant: variant,
+        }), className)} {...props}/>
+    </AlertContext.Provider>);
+}
+export function AlertHeader(_a) {
+    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
+    // Check if children contains LUIcon
+    var childrenArray = Children.toArray(children);
+    var hasIcon = childrenArray.some(function (child) { return isValidElement(child) && child.type === LUIcon; });
+    if (hasIcon) {
+        var iconWithClass_1 = null;
+        var otherChildren_1 = [];
+        childrenArray.forEach(function (child) {
+            if (isValidElement(child) && child.type === LUIcon) {
+                var iconElement = child;
+                // If LUIcon has a size prop, add .lu-icon-custom-size to className
+                var hasSizeProp = !!iconElement.props.size;
+                // If LUIcon has a color prop, add .lu-icon-custom-color to className
+                var hasColorProp = !!iconElement.props.color;
+                iconWithClass_1 = cloneElement(iconElement, {
+                    className: cn(iconElement.props.className, hasSizeProp && "lu-icon-custom-size", hasColorProp && "lu-icon-custom-color"),
+                });
+            }
+            else {
+                otherChildren_1.push(child);
+            }
+        });
+        return (<div data-slot="alert-dialog-header" className={cn("flex flex-row gap-3 items-start text-left", className)} {...props}>
+        {iconWithClass_1}
+        <div>{otherChildren_1}</div>
+      </div>);
+    }
+    return (<div data-slot="alert-dialog-header" className={cn("flex flex-col gap-2 text-center sm:text-left", className)} {...props}>
+      {children}
+    </div>);
+}
+export function AlertTitle(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<h2 data-slot="alert-dialog-title" className={cn("text-lg font-semibold", className)} {...props}/>);
+}
+export function AlertDescription(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<p data-slot="alert-dialog-description" className={cn("text-black text-sm", className)} {...props}/>);
+}
+export function AlertFooter(_a) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<div data-slot="alert-dialog-footer" className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)} {...props}/>);
+}
+// Also create a simple button component that matches the style of AlertDialogAction
+export var AlertAction = function (_a) {
+    var className = _a.className, colorProp = _a.color, props = __rest(_a, ["className", "color"]);
+    var contextColor = useAlertContext().color;
+    var color = colorProp || contextColor || undefined;
+    return (<Button variant="link" color={color} data-slot="alert-dialog-action" className={cn("h-auto p-0", className)} {...props}/>);
+};
+// And a cancel button that matches AlertDialogCancel
+export var AlertCancel = function (_a) {
+    var className = _a.className, colorProp = _a.color, props = __rest(_a, ["className", "color"]);
+    var contextColor = useAlertContext().color;
+    var color = colorProp || contextColor || undefined;
+    return (<Button variant="link" color={color} data-slot="alert-dialog-cancel" className={cn("h-auto p-0", className)} {...props}/>);
+};