pf-common-components 1.0.0

package/src/ui/select.tsx

@@ -0,0 +1,343 @@
+"use client";
+
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import * as React from "react";
+
+import { useRef } from "react";
+import { cn } from "../lib/utils";
+import { Input } from "./input";
+import { InputProps } from "react-day-picker";
+/**
+ * Select Context interface
+ */
+interface ISelectContext {
+  /**
+   * value of a select component
+   * undefined | null | or empty string means the user has not selected any value
+   * any other than above value means it has value
+   */
+  value?: string | undefined | null | object;
+}
+
+const SelectContext = React.createContext({});
+
+/**
+ * Select is a wrapper component around the `@radix-ui/react-select` package.
+ * It provides a unified API for working with select components and hides
+ * implementation details specific to the `radix-ui/react-select` package.
+ *
+ * The component is designed to be highly customizable and can be used in
+ * different contexts. This is achieved by omitting the `value` and
+ * `onValueChange` props from the underlying `radix-ui/react-select` component.
+ * These props are managed internally within the `Select` component to provide
+ * a consistent API for all select components.
+ *
+ * This component also handles the conversion of the value to and from a
+ * JSON string. This ensures that the value passed to and from the `onValueChange`
+ * callback is always a valid JSON object or string. This is important for
+ * consistency and to avoid any potential issues with data manipulation.
+ */
+type SelectProps = Omit<
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>,
+  "value" | "onValueChange" | "defaultValue"
+> & {
+  value?: unknown;
+  onValueChange?: (value: unknown) => void;
+  defaultValue?: unknown;
+};
+
+const Select: React.FC<SelectProps> = ({
+  children,
+  value,
+  onValueChange,
+  defaultValue,
+  ...props
+}) => {
+  // Convert the value to a JSON string to ensure it can be safely stored and
+  // manipulated.
+  value = typeof value !== "string" ? JSON.stringify(value) : value;
+  defaultValue =
+    typeof defaultValue !== "string"
+      ? JSON.stringify(defaultValue)
+      : defaultValue;
+
+  return (
+    <SelectContext.Provider value={{ value }}>
+      <SelectPrimitive.Root
+        // Set the internal value of the select component.
+        value={value as string}
+        defaultValue={defaultValue as string}
+        // Handle the onValueChange event and convert the value back to its
+        // original type before passing it to the consumer.
+        onValueChange={(e) => {
+          // there are total three possible values for e
+          // 1. e can be pure string ex: e="IN" | "CA" | "ng"
+          // 2. e can be pure object ex: e={label:"IN", value:"IN"} | {label:"CA", value:"CA"} | {label:"ng", value:"ng"}
+          // 3. e can be number ex: e=1 | 2 | 3
+          // Explanation: JSON.parse will throw error for pure string for point 1.
+          // so for that we can pass as it is
+          try {
+            onValueChange?.(JSON.parse(e));
+          } catch (error) {
+            onValueChange?.(e);
+          }
+        }}
+        // Pass all other props to the underlying select component.
+        {...props}
+      >
+        {children}
+      </SelectPrimitive.Root>
+    </SelectContext.Provider>
+  );
+};
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
+    error?: boolean;
+  }
+>(({ className, children, error, ...props }, ref) => {
+  const { value }: ISelectContext = React.useContext(SelectContext);
+
+  return (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex h-10 w-full items-center justify-between rounded-[12px] border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+        className,
+        `${error ? "!border-[#FF6D6D]" : ""}`,
+        // Requirement: We have to display light color placeholder if user has not selcted the value
+        // Implementation: We have taken one context to access the value of select inside children compound components
+        // Condition: when value is null or undefined or empty string then display light color
+        (value === "" || value === undefined || value === null) &&
+          "font-normal text-[#999999]"
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild className="">
+        <ChevronDown className="h-5 w-5 text-black" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+});
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectItems = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Viewport> & {
+    onBottomReached?: () => void;
+  }
+>(({ children, className, onBottomReached, ...props }, ref) => {
+  const scrollRef = React.useRef<HTMLDivElement>(null);
+
+  /**
+   * Calculate the position of the bottom of the last child element
+   *
+   * @return {void}
+   */
+  const handleScroll = () => {
+    const element: any = scrollRef.current;
+    if (!element) return;
+
+    // Calculate the position of the bottom of the last child element
+    const lastChildPosition =
+      element.children[element.children.length - 1].offsetTop +
+      element.children[element.children.length - 1].offsetHeight;
+
+    // Calculate the scroll position of the bottom of the element
+    const scrollPosition = element.scrollTop + element.clientHeight;
+    // If the user has scrolled to the bottom, call the onBottomReached function
+    if (scrollPosition >= lastChildPosition - 5) {
+      onBottomReached?.();
+    }
+  };
+
+  React.useEffect(() => {
+    const element = scrollRef.current;
+    if (!element) return undefined;
+
+    element.addEventListener("scroll", handleScroll);
+    return () => {
+      element.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  return (
+    <SelectPrimitive.Viewport
+      className={cn(
+        "p-1",
+        "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+      )}
+      {...props}
+    >
+      <div
+        className={cn("max-h-[200px] overflow-y-auto", className)}
+        ref={scrollRef}
+      >
+        {children}
+      </div>
+    </SelectPrimitive.Viewport>
+  );
+});
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 min-w-[8rem] overflow-hidden rounded-[12px] border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      {/* <SelectScrollUpButton /> */}
+      {/* <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      > */}
+      {children}
+      {/* </SelectPrimitive.Viewport> */}
+      {/* <SelectScrollDownButton /> */}
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+type SelectItemProps = Omit<
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>,
+  "value"
+>;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  SelectItemProps & { value: unknown }
+>(({ className, children, value, ...props }, ref) => {
+  value = typeof value !== "string" ? JSON.stringify(value) : value;
+  return (
+    <>
+      <SelectPrimitive.Item
+        ref={ref}
+        className={cn(
+          "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-3 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+          className
+        )}
+        value={value as string}
+        {...props}
+      >
+        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+      </SelectPrimitive.Item>
+      {/* <hr className="border-[#D6D7D8]" /> */}
+    </>
+  );
+});
+
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+/**
+ * Requirement : dropdowns are loosing focus everwhere so to gain focus, we are using
+ * SelectInput Component, designed to be used as a wrapper around an Input component
+ *
+ * Bug no : 1149
+ *
+ * Implementation : Initially created functional component named SelectInput that accepts props of type InputProps,
+ *  and used useRef hook to create a reference to the input element, and initially set to null, and added
+ *  onBlur event handler to the Input component, and Return an Input component with the ref attribute set to the
+ * inputRef which triggers a function to focus on the input element when it looses focus.
+ *
+ * @returns
+ */
+const SelectInput = (props: InputProps) => {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  return (
+    <Input ref={inputRef} onBlur={() => inputRef.current?.focus()} {...props} />
+  );
+};
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectInput,
+  SelectItem,
+  SelectItems,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

package/src/ui/separator.js

@@ -0,0 +1,22 @@
+"use client";
+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 } from "react/jsx-runtime";
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn } from "../lib/utils";
+const Separator = React.forwardRef((_a, ref) => {
+    var { className, orientation = "horizontal", decorative = true } = _a, props = __rest(_a, ["className", "orientation", "decorative"]);
+    return (_jsx(SeparatorPrimitive.Root, Object.assign({ ref: ref, decorative: decorative, orientation: orientation, className: cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className) }, props)));
+});
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+export { Separator };

package/src/ui/separator.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "../lib/utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

package/src/ui/sheet.js

@@ -0,0 +1,65 @@
+"use client";
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../lib/utils";
+const Sheet = SheetPrimitive.Root;
+const SheetTrigger = SheetPrimitive.Trigger;
+const SheetClose = SheetPrimitive.Close;
+const SheetPortal = SheetPrimitive.Portal;
+const SheetOverlay = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(SheetPrimitive.Overlay, Object.assign({ className: cn("fixed inset-0 z-50 bg-black/30 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className) }, props, { ref: ref })));
+});
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+const sheetVariants = cva("fixed z-50 gap-4 bg-white p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500", {
+    variants: {
+        side: {
+            top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+            bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+            left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+            right: "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+        },
+    },
+    defaultVariants: {
+        side: "right",
+    },
+});
+const SheetContent = React.forwardRef((_a, ref) => {
+    var { side = "right", className, children } = _a, props = __rest(_a, ["side", "className", "children"]);
+    return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Content, Object.assign({ ref: ref, className: cn(sheetVariants({ side }), className) }, props, { children: [children, _jsx(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary" })] }))] }));
+});
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+const SheetHeader = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ className: cn("flex flex-col space-y-2 text-center sm:text-left", className) }, props)));
+};
+SheetHeader.displayName = "SheetHeader";
+const SheetFooter = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className) }, props)));
+};
+SheetFooter.displayName = "SheetFooter";
+const SheetTitle = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(SheetPrimitive.Title, Object.assign({ ref: ref, className: cn("text-lg font-semibold text-foreground", className) }, props)));
+});
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+const SheetDescription = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(SheetPrimitive.Description, Object.assign({ ref: ref, className: cn("text-sm text-muted-foreground", className) }, props)));
+});
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, };

package/src/ui/sheet.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/30 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-white p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"></SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+};

package/src/ui/switch.js

@@ -0,0 +1,47 @@
+"use client";
+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 } from "react/jsx-runtime";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../lib/utils";
+const switchVariants = cva("peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus:outline-keyboardTab disabled:cursor-not-allowed disabled:opacity-50", {
+    variants: {
+        size: {
+            default: "h-6 w-14 data-[state=checked]:bg-primary data-[state=unchecked]:bg-grey1-light-active",
+            sm: "h-6 w-12 data-[state=checked]:bg-primary data-[state=unchecked]:bg-grey1-light-active",
+            md: "h-8 w-16 data-[state=checked]:bg-primary data-[state=unchecked]:bg-grey1-light-active",
+        },
+    },
+    defaultVariants: {
+        size: "default", // Your current style as the default
+    },
+});
+const thumbVariants = cva("pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform", {
+    variants: {
+        size: {
+            default: "h-4 w-4 data-[state=checked]:translate-x-8 data-[state=unchecked]:translate-x-1",
+            sm: "h-4 w-4 data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-1",
+            md: "h-6 w-6 data-[state=checked]:translate-x-8 data-[state=unchecked]:translate-x-1",
+        },
+    },
+    defaultVariants: {
+        size: "default", // Your current style as the default
+    },
+});
+const Switch = React.forwardRef((_a, ref) => {
+    var { className, size } = _a, props = __rest(_a, ["className", "size"]);
+    return (_jsx(SwitchPrimitives.Root, Object.assign({ className: cn(switchVariants({ size, className })), ref: ref }, props, { children: _jsx(SwitchPrimitives.Thumb, { className: cn(thumbVariants({ size })) }) })));
+});
+Switch.displayName = SwitchPrimitives.Root.displayName;
+export { Switch };