@epicbagel/saas-kit 1.2.3 → 1.4.0

package/dist/chunk-JTI4244T.js

@@ -0,0 +1,143 @@
+"use client";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger
+} from "./chunk-4HWCNRK4.js";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from "./chunk-3QT5VYZ3.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/responsive-dialog.tsx
+import * as React from "react";
+import { useMediaQuery } from "react-responsive";
+import { jsx } from "react/jsx-runtime";
+var DesktopContext = React.createContext(false);
+var useIsDesktop = () => React.useContext(DesktopContext);
+var DESKTOP_QUERY = { minWidth: 1024 };
+var ResponsiveDialog = ({ children, ...props }) => {
+  const isDesktop = useMediaQuery(DESKTOP_QUERY);
+  const Root = isDesktop ? Dialog : Drawer;
+  return /* @__PURE__ */ jsx(DesktopContext.Provider, { value: isDesktop, children: /* @__PURE__ */ jsx(Root, { ...props, children }) });
+};
+ResponsiveDialog.displayName = "ResponsiveDialog";
+var ResponsiveDialogTrigger = ({
+  children,
+  ...props
+}) => {
+  const Trigger = useIsDesktop() ? DialogTrigger : DrawerTrigger;
+  return /* @__PURE__ */ jsx(Trigger, { ...props, children });
+};
+ResponsiveDialogTrigger.displayName = "ResponsiveDialogTrigger";
+var ResponsiveDialogClose = ({
+  children,
+  ...props
+}) => {
+  const Close = useIsDesktop() ? DialogClose : DrawerClose;
+  return /* @__PURE__ */ jsx(Close, { ...props, children });
+};
+ResponsiveDialogClose.displayName = "ResponsiveDialogClose";
+var ResponsiveDialogContent = React.forwardRef(({ className, children, presentation = "default", ...props }, ref) => {
+  if (useIsDesktop()) {
+    return /* @__PURE__ */ jsx(
+      DialogContent,
+      {
+        ref,
+        className: cn(
+          "flex max-h-[85vh] max-w-md flex-col gap-0 overflow-hidden p-0",
+          presentation === "preview" && "max-w-2xl sm:h-[85vh] [&>button:last-child]:hidden",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    DrawerContent,
+    {
+      ref,
+      className: cn("max-h-[92vh]", className),
+      ...props,
+      children
+    }
+  );
+});
+ResponsiveDialogContent.displayName = "ResponsiveDialogContent";
+var ResponsiveDialogHeader = ({
+  className,
+  visibility = "visible",
+  ...props
+}) => {
+  const Header = useIsDesktop() ? DialogHeader : DrawerHeader;
+  return /* @__PURE__ */ jsx(
+    Header,
+    {
+      className: cn(useIsDesktop() && "p-4", visibility === "screen-reader" && "sr-only", className),
+      ...props
+    }
+  );
+};
+ResponsiveDialogHeader.displayName = "ResponsiveDialogHeader";
+var ResponsiveDialogBody = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("min-h-0 flex-1 overflow-y-auto px-4 pb-6", className), ...props });
+ResponsiveDialogBody.displayName = "ResponsiveDialogBody";
+var ResponsiveDialogFooter = ({
+  className,
+  layout = "auto",
+  ...props
+}) => {
+  const isDesktop = useIsDesktop();
+  const Footer = isDesktop ? DialogFooter : DrawerFooter;
+  return /* @__PURE__ */ jsx(
+    Footer,
+    {
+      className: cn(
+        "mt-0 shrink-0 gap-2 border-t bg-background p-4",
+        layout === "fill" ? "flex-row space-x-0 [&>*]:min-w-0 [&>*]:flex-1" : isDesktop ? "flex-row justify-end space-x-0 [&>*]:flex-none" : "grid grid-cols-2 [&>*]:w-full",
+        className
+      ),
+      ...props
+    }
+  );
+};
+ResponsiveDialogFooter.displayName = "ResponsiveDialogFooter";
+var ResponsiveDialogTitle = React.forwardRef(({ className, visuallyHidden = false, ...props }, ref) => {
+  const Title = useIsDesktop() ? DialogTitle : DrawerTitle;
+  return /* @__PURE__ */ jsx(Title, { ref, className: cn(visuallyHidden && "sr-only", className), ...props });
+});
+ResponsiveDialogTitle.displayName = "ResponsiveDialogTitle";
+var ResponsiveDialogDescription = React.forwardRef(({ className, visuallyHidden = false, ...props }, ref) => {
+  const Description = useIsDesktop() ? DialogDescription : DrawerDescription;
+  return /* @__PURE__ */ jsx(Description, { ref, className: cn(visuallyHidden && "sr-only", className), ...props });
+});
+ResponsiveDialogDescription.displayName = "ResponsiveDialogDescription";
+
+export {
+  ResponsiveDialog,
+  ResponsiveDialogTrigger,
+  ResponsiveDialogClose,
+  ResponsiveDialogContent,
+  ResponsiveDialogHeader,
+  ResponsiveDialogBody,
+  ResponsiveDialogFooter,
+  ResponsiveDialogTitle,
+  ResponsiveDialogDescription
+};

package/dist/chunk-QEJ2STIV.js

@@ -0,0 +1,53 @@
+"use client";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/image.tsx
+import { forwardRef, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var fitStyles = { cover: "object-cover", contain: "object-contain" };
+var radiusStyles = { none: "", sm: "rounded-sm", md: "rounded-md", xl: "rounded-xl", full: "rounded-full" };
+var Image = forwardRef(function Image2({ fit = "cover", frameHeight, radius = "none", width = "auto", align = "start", border = false, shadow = "none", emphasis = "full", loadingIndicator = "none", className, onLoad, onError, src, ...props }, ref) {
+  const [loaded, setLoaded] = useState(loadingIndicator === "none" || !src);
+  useEffect(() => {
+    setLoaded(loadingIndicator === "none" || !src);
+  }, [loadingIndicator, src]);
+  const loading = loadingIndicator === "pulse" && !loaded;
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      ref,
+      className: cn(
+        fitStyles[fit],
+        radiusStyles[radius],
+        frameHeight === "sm" && "h-16",
+        frameHeight === "md" && "h-28",
+        width === "full" && "w-full",
+        width === "preview" && "w-full max-w-[380px]",
+        width === "preview-lg" && "w-full max-w-[440px]",
+        align === "center" && "mx-auto",
+        border && "border",
+        shadow === "subtle" && "shadow-xs",
+        loading && "animate-pulse bg-muted",
+        emphasis === "soft-until-parent-hover" && "transition-opacity duration-200 md:opacity-70 md:group-hover:opacity-100",
+        className
+      ),
+      src,
+      ...props,
+      "aria-busy": loading || void 0,
+      onLoad: (event) => {
+        setLoaded(true);
+        onLoad?.(event);
+      },
+      onError: (event) => {
+        setLoaded(true);
+        onError?.(event);
+      }
+    }
+  );
+});
+
+export {
+  Image
+};

package/dist/chunk-TWCJMFST.js

@@ -0,0 +1,260 @@
+"use client";
+import {
+  Separator
+} from "./chunk-HYTILYE5.js";
+import {
+  Label
+} from "./chunk-E2TQMDO7.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/field.tsx
+import { useMemo } from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FieldSet({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "fieldset",
+    {
+      "data-slot": "field-set",
+      className: cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 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(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-group",
+      className: cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ],
+        responsive: [
+          "flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @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(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      "data-slot": "field-label",
+      className: cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+        "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-label",
+      className: cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "field-description",
+      className: cn(
+        "text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "field-separator",
+      "data-content": !!children,
+      className: cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Separator, { className: "absolute inset-0 top-1/2" }),
+        children && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground",
+            "data-slot": "field-separator-content",
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}) {
+  const content = useMemo(() => {
+    if (children) return children;
+    if (!errors?.length) return null;
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values()
+    ];
+    if (uniqueErrors.length === 1) return uniqueErrors[0]?.message;
+    return /* @__PURE__ */ jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.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("text-sm font-normal text-destructive", className),
+      ...props,
+      children: content
+    }
+  );
+}
+function FormField({
+  label,
+  htmlFor,
+  actions,
+  description,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1.5", className), ...props, children: [
+    (label || actions) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+      typeof label === "string" ? /* @__PURE__ */ jsx(Label, { htmlFor, children: label }) : label,
+      actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: actions })
+    ] }),
+    children,
+    description && /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: description })
+  ] });
+}
+var columnStyles = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-3"
+};
+function FieldGrid({ columns = 2, gap = "default", className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("grid", gap === "default" ? "gap-4" : "gap-8", columnStyles[columns], className),
+      ...props
+    }
+  );
+}
+
+export {
+  FieldSet,
+  FieldLegend,
+  FieldGroup,
+  Field,
+  FieldContent,
+  FieldLabel,
+  FieldTitle,
+  FieldDescription,
+  FieldSeparator,
+  FieldError,
+  FormField,
+  FieldGrid
+};