@quan-erp/shared-ui 1.0.0

package/dist/es/components/ui/field.js

@@ -0,0 +1,226 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+import { Label } from "./label.js";
+import { Separator } from "./separator.js";
+function FieldSet({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "fieldset",
+    {
+      "data-slot": "field-set",
+      className: cn(
+        "shared:flex shared:flex-col shared:gap-6",
+        "shared:has-[>[data-slot=checkbox-group]]:gap-3 shared:has-[>[data-slot=radio-group]]:gap-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "legend",
+    {
+      "data-slot": "field-legend",
+      "data-variant": variant,
+      className: cn(
+        "shared:mb-3 shared:font-medium",
+        "shared:data-[variant=legend]:text-base",
+        "shared:data-[variant=label]:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-group",
+      className: cn(
+        "shared:group/field-group shared:@container/field-group shared:flex shared:w-full shared:flex-col shared:gap-7 shared:data-[slot=checkbox-group]:gap-3 shared:[&>[data-slot=field-group]]:gap-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+const fieldVariants = cva(
+  "shared:group/field shared:data-[invalid=true]:text-destructive shared:flex shared:w-full shared:gap-3",
+  {
+    variants: {
+      orientation: {
+        vertical: ["shared:flex-col shared:[&>*]:w-full shared:[&>.sr-only]:w-auto"],
+        horizontal: [
+          "shared:flex-row shared:items-center",
+          "shared:[&>[data-slot=field-label]]:flex-auto",
+          "shared:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px shared:has-[>[data-slot=field-content]]:items-start"
+        ],
+        responsive: [
+          "shared:@md/field-group:flex-row shared:@md/field-group:items-center shared:@md/field-group:[&>*]:w-auto shared:flex-col shared:[&>*]:w-full shared:[&>.sr-only]:w-auto",
+          "shared:@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "shared:@md/field-group:has-[>[data-slot=field-content]]:items-start shared:@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ]
+      }
+    },
+    defaultVariants: {
+      orientation: "vertical"
+    }
+  }
+);
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "field",
+      "data-orientation": orientation,
+      className: cn(fieldVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function FieldContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-content",
+      className: cn(
+        "shared:group/field-content shared:flex shared:flex-1 shared:flex-col shared:gap-1.5 shared:leading-snug",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      "data-slot": "field-label",
+      className: cn(
+        "shared:group/field-label shared:peer/field-label shared:flex shared:w-fit shared:gap-2 shared:leading-snug shared:group-data-[disabled=true]/field:opacity-50",
+        "has-[>shared:[data-slot=field]]:w-full has-[>shared:[data-slot=field]]:flex-col has-[>shared:[data-slot=field]]:rounded-md has-[>shared:[data-slot=field]]:border shared:[&>[data-slot=field]]:p-4",
+        "shared:has-data-[state=checked]:bg-primary/5 shared:has-data-[state=checked]:border-primary shared:dark:has-data-[state=checked]:bg-primary/10",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-label",
+      className: cn(
+        "shared:flex shared:w-fit shared:items-center shared:gap-2 shared:text-sm shared:font-medium shared:leading-snug shared:group-data-[disabled=true]/field:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "field-description",
+      className: cn(
+        "shared:text-muted-foreground shared:text-sm shared:font-normal shared:leading-normal shared:group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "shared:nth-last-2:-mt-1 shared:last:mt-0 shared:[[data-variant=legend]+&]:-mt-1.5",
+        "shared:[&>a:hover]:text-primary shared:[&>a]:underline shared:[&>a]:underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "field-separator",
+      "data-content": !!children,
+      className: cn(
+        "shared:relative shared:-my-2 shared:h-5 shared:text-sm shared:group-data-[variant=outline]/field-group:-mb-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Separator, { className: "shared:absolute shared:inset-0 shared:top-1/2" }),
+        children && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "shared:bg-background shared:text-muted-foreground shared:relative shared:mx-auto shared:block shared:w-fit shared:px-2",
+            "data-slot": "field-separator-content",
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children;
+    }
+    if (!errors) {
+      return null;
+    }
+    if (errors?.length === 1 && errors[0]?.message) {
+      return errors[0].message;
+    }
+    return /* @__PURE__ */ jsx("ul", { className: "shared:ml-4 shared:flex shared:list-disc shared:flex-col shared:gap-1", children: errors.map(
+      (error, index) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, index)
+    ) });
+  }, [children, errors]);
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "alert",
+      "data-slot": "field-error",
+      className: cn("shared:text-destructive shared:text-sm shared:font-normal", className),
+      ...props,
+      children: content
+    }
+  );
+}
+export {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle
+};

package/dist/es/components/ui/form.js

@@ -0,0 +1,109 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import { useFormContext, FormProvider, Controller } from "react-hook-form";
+import { cn } from "../../lib/utils.js";
+import { Label } from "./label.js";
+const Form = FormProvider;
+const FormFieldContext = React.createContext(null);
+const FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+};
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  if (!itemContext) {
+    throw new Error("useFormField should be used within <FormItem>");
+  }
+  const fieldState = getFieldState(fieldContext.name, formState);
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+};
+const FormItemContext = React.createContext(null);
+const FormItem = React.forwardRef(({ className, ...props }, ref) => {
+  const id = React.useId();
+  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { ref, className: cn("shared:space-y-2", className), ...props }) });
+});
+FormItem.displayName = "FormItem";
+const FormLabel = React.forwardRef(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      ref,
+      className: cn(error && "shared:text-destructive", className),
+      htmlFor: formItemId,
+      ...props
+    }
+  );
+});
+FormLabel.displayName = "FormLabel";
+const FormControl = React.forwardRef(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
+});
+FormControl.displayName = "FormControl";
+const FormDescription = React.forwardRef(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: formDescriptionId,
+      className: cn("shared:text-[0.8rem] shared:text-muted-foreground", className),
+      ...props
+    }
+  );
+});
+FormDescription.displayName = "FormDescription";
+const FormMessage = React.forwardRef(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: formMessageId,
+      className: cn("shared:text-[0.8rem] shared:font-medium shared:text-destructive", className),
+      ...props,
+      children: body
+    }
+  );
+});
+FormMessage.displayName = "FormMessage";
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField
+};

package/dist/es/components/ui/hover-card.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { cn } from "../../lib/utils.js";
+const HoverCard = HoverCardPrimitive.Root;
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+const HoverCardContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+  HoverCardPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "shared:z-50 shared:w-64 shared:rounded-md shared:border shared:bg-popover shared:p-4 shared:text-popover-foreground shared:shadow-md shared:outline-none shared:data-[state=open]:animate-in shared:data-[state=closed]:animate-out shared:data-[state=closed]:fade-out-0 shared:data-[state=open]:fade-in-0 shared:data-[state=closed]:zoom-out-95 shared:data-[state=open]:zoom-in-95 shared:data-[side=bottom]:slide-in-from-top-2 shared:data-[side=left]:slide-in-from-right-2 shared:data-[side=right]:slide-in-from-left-2 shared:data-[side=top]:slide-in-from-bottom-2 shared:origin-[--radix-hover-card-content-transform-origin]",
+      className
+    ),
+    ...props
+  }
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+export {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger
+};

package/dist/es/components/ui/input-group.js

@@ -0,0 +1,155 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Textarea } from "./textarea.js";
+function InputGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "input-group",
+      role: "group",
+      className: cn(
+        "shared:group/input-group shared:border-input shared:dark:bg-input/30 shared:shadow-xs shared:relative shared:flex shared:w-full shared:items-center shared:rounded-md shared:border shared:outline-none shared:transition-[color,box-shadow]",
+        "shared:h-9 has-[>shared:textarea]:h-auto",
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>shared:input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>shared:input]:pr-2",
+        "has-[>shared:[data-align=block-start]]:h-auto has-[>shared:[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>shared:input]:pb-3",
+        "has-[>shared:[data-align=block-end]]:h-auto has-[>shared:[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>shared:input]:pt-3",
+        // Focus state.
+        "shared:has-[[data-slot=input-group-control]:focus-visible]:ring-ring shared:has-[[data-slot=input-group-control]:focus-visible]:ring-1",
+        // Error state.
+        "shared:has-[[data-slot][aria-invalid=true]]:ring-destructive/20 shared:has-[[data-slot][aria-invalid=true]]:border-destructive shared:dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+const inputGroupAddonVariants = cva(
+  "shared:text-muted-foreground shared:flex shared:h-auto shared:cursor-text shared:select-none shared:items-center shared:justify-center shared:gap-2 shared:py-1.5 shared:text-sm shared:font-medium shared:group-data-[disabled=true]/input-group:opacity-50 shared:[&>kbd]:rounded-[calc(var(--radius)-5px)] shared:[&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start": "shared:order-first shared:pl-3 has-[>shared:button]:ml-[-0.45rem] has-[>shared:kbd]:ml-[-0.35rem]",
+        "inline-end": "shared:order-last shared:pr-3 has-[>shared:button]:mr-[-0.4rem] has-[>shared:kbd]:mr-[-0.35rem]",
+        "block-start": "[.shared:border-b]:pb-3 shared:order-first shared:w-full shared:justify-start shared:px-3 shared:pt-3 group-has-[>shared:input]/input-group:pt-2.5",
+        "block-end": "[.shared:border-t]:pt-3 shared:order-last shared:w-full shared:justify-start shared:px-3 shared:pb-3 group-has-[>shared:input]/input-group:pb-2.5"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+);
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": align,
+      className: cn(inputGroupAddonVariants({ align }), className),
+      onClick: (e) => {
+        if (e.target.closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      },
+      ...props
+    }
+  );
+}
+const inputGroupButtonVariants = cva(
+  "shared:flex shared:items-center shared:gap-2 shared:text-sm shared:shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "shared:h-6 shared:gap-1 shared:rounded-[calc(var(--radius)-5px)] shared:px-2 shared:has-[>svg]:px-2 shared:[&>svg:not([class*='size-'])]:size-3.5",
+        sm: "shared:h-8 shared:gap-1.5 shared:rounded-md shared:px-2.5 has-[>shared:svg]:px-2.5",
+        "icon-xs": "shared:size-6 shared:rounded-[calc(var(--radius)-5px)] shared:p-0 has-[>shared:svg]:p-0",
+        "icon-sm": "shared:size-8 shared:p-0 has-[>shared:svg]:p-0"
+      }
+    },
+    defaultVariants: {
+      size: "xs"
+    }
+  }
+);
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type,
+      "data-size": size,
+      variant,
+      className: cn(inputGroupButtonVariants({ size }), className),
+      ...props
+    }
+  );
+}
+function InputGroupText({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "shared:text-muted-foreground shared:flex shared:items-center shared:gap-2 shared:text-sm shared:[&_svg:not([class*='size-'])]:size-4 shared:[&_svg]:pointer-events-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      "data-slot": "input-group-control",
+      className: cn(
+        "shared:flex-1 shared:rounded-none shared:border-0 shared:bg-transparent shared:shadow-none shared:focus-visible:ring-0 shared:dark:bg-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroupTextarea({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      "data-slot": "input-group-control",
+      className: cn(
+        "shared:flex-1 shared:resize-none shared:rounded-none shared:border-0 shared:bg-transparent shared:py-3 shared:shadow-none shared:focus-visible:ring-0 shared:dark:bg-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea
+};

package/dist/es/components/ui/input-otp.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { Minus } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+const InputOTP = React.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
+  OTPInput,
+  {
+    ref,
+    containerClassName: cn(
+      "shared:flex shared:items-center shared:gap-2 shared:has-[:disabled]:opacity-50",
+      containerClassName
+    ),
+    className: cn("shared:disabled:cursor-not-allowed", className),
+    ...props
+  }
+));
+InputOTP.displayName = "InputOTP";
+const InputOTPGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("shared:flex shared:items-center", className), ...props }));
+InputOTPGroup.displayName = "InputOTPGroup";
+const InputOTPSlot = React.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "shared:relative shared:flex shared:h-9 shared:w-9 shared:items-center shared:justify-center shared:border-y shared:border-r shared:border-input shared:text-sm shared:shadow-sm shared:transition-all shared:first:rounded-l-md shared:first:border-l shared:last:rounded-r-md",
+        isActive && "shared:z-10 shared:ring-1 shared:ring-ring",
+        className
+      ),
+      ...props,
+      children: [
+        char,
+        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "shared:pointer-events-none shared:absolute shared:inset-0 shared:flex shared:items-center shared:justify-center", children: /* @__PURE__ */ jsx("div", { className: "shared:h-4 shared:w-px shared:animate-caret-blink shared:bg-foreground shared:duration-1000" }) })
+      ]
+    }
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+const InputOTPSeparator = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx(Minus, {}) }));
+InputOTPSeparator.displayName = "InputOTPSeparator";
+export {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot
+};

package/dist/es/components/ui/input.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+const inputVariants = cva(
+  "shared:file:text-foreground shared:placeholder:text-muted-foreground shared:selection:bg-primary shared:selection:text-primary-foreground shared:dark:bg-input/30 shared:border-input shared:w-full shared:min-w-0 shared:rounded-full shared:cupertino-corner shared:border shared:bg-transparent shared:text-base shared:shadow-xs shared:transition-[color,box-shadow] shared:outline-none shared:file:inline-flex shared:file:h-7 shared:file:border-0 shared:file:bg-transparent shared:file:text-sm shared:file:font-medium shared:disabled:pointer-events-none shared:disabled:cursor-not-allowed shared:disabled:opacity-50 shared:md:text-sm shared:focus-visible:border-ring shared:focus-visible:ring-ring/50 shared:focus-visible:ring-[3px] shared:aria-invalid:ring-destructive/20 shared:dark:aria-invalid:ring-destructive/40 shared:aria-invalid:border-destructive",
+  {
+    variants: {
+      inputSize: {
+        default: "shared:h-12 shared:md:h-9 shared:px-4 shared:md:px-2 shared:md:py-1",
+        sm: "shared:h-10 shared:md:h-8 shared:px-3 shared:md:px-2 shared:text-sm",
+        lg: "shared:h-14 shared:md:h-11 shared:px-5 shared:md:px-4 shared:text-lg shared:md:text-base"
+      }
+    },
+    defaultVariants: {
+      inputSize: "default"
+    }
+  }
+);
+const Input = React.forwardRef(
+  ({ className, type, inputSize, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type,
+        "data-slot": "input",
+        className: cn(inputVariants({ inputSize, className })),
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+export {
+  Input
+};