@epicbagel/saas-kit 0.0.0-stage → 1.1.0

package/dist/primitives/feature-empty-state.d.ts

@@ -0,0 +1,42 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface FeatureEmptyStateStep {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Optional rendered icon. When omitted, the step number is shown. */
+    icon?: ReactNode;
+}
+interface FeatureEmptyStateProps {
+    /** Quiet product or workflow label above the main promise. */
+    eyebrow?: ReactNode;
+    /** Optional rendered icon beside the eyebrow. */
+    icon?: ReactNode;
+    /** The user-facing outcome, not a description of the missing data. */
+    title: ReactNode;
+    /** A concise explanation of why the feature is useful. */
+    description?: ReactNode;
+    /** Primary and secondary kit buttons. */
+    actions?: ReactNode;
+    /** Small reassurance or constraint beneath the actions. */
+    note?: ReactNode;
+    /** Product mock, example record, browser preview, or other visual proof. */
+    preview?: ReactNode;
+    /** Label above the preview, such as “What you’ll get”. */
+    previewLabel?: ReactNode;
+    /** Optional three-step explanation of the first-run workflow. */
+    steps?: FeatureEmptyStateStep[];
+    className?: string;
+}
+/**
+ * A first-run, feature-level empty state for major product areas.
+ *
+ * This is intentionally separate from `EmptyState`: use `EmptyState` for
+ * local absence (no notes, no search results, no history) and this component
+ * when an entire feature needs to explain its value before the user begins.
+ * The slots stay product-agnostic so consumers can compose truthful previews
+ * from BrowserPreview, ResourceCard, FileDropzone, and other primitives.
+ */
+declare function FeatureEmptyState({ eyebrow, icon, title, description, actions, note, preview, previewLabel, steps, className, }: FeatureEmptyStateProps): react_jsx_runtime.JSX.Element;
+
+export { FeatureEmptyState, type FeatureEmptyStateProps, type FeatureEmptyStateStep };

package/dist/primitives/feature-empty-state.js

@@ -0,0 +1,133 @@
+"use client";
+import {
+  Eyebrow
+} from "../chunk-LIE6W3QT.js";
+import {
+  cn
+} from "../chunk-G6SRSWXB.js";
+
+// src/primitives/feature-empty-state.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function FeatureEmptyState({
+  eyebrow,
+  icon,
+  title,
+  description,
+  actions,
+  note,
+  preview,
+  previewLabel,
+  steps,
+  className
+}) {
+  const hasIntroMeta = icon || eyebrow;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-slot": "feature-empty-state",
+      className: cn(
+        "overflow-hidden rounded-xl border border-border bg-card",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "grid",
+              preview && "lg:grid-cols-[minmax(0,0.9fr)_minmax(24rem,1.1fr)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-slot": "feature-empty-state-intro",
+                  className: cn(
+                    "flex flex-col justify-center px-6 py-9 sm:px-9 sm:py-12",
+                    !preview && "mx-auto max-w-3xl text-center sm:px-12"
+                  ),
+                  children: [
+                    hasIntroMeta && /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: cn(
+                          "mb-5 flex items-center gap-3",
+                          !preview && "justify-center"
+                        ),
+                        children: [
+                          icon && /* @__PURE__ */ jsx("span", { className: "flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary [&_svg]:h-5 [&_svg]:w-5", children: icon }),
+                          eyebrow && /* @__PURE__ */ jsx(Eyebrow, { children: eyebrow })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("h2", { className: "text-3xl font-medium leading-tight tracking-tight text-foreground sm:text-4xl", children: title }),
+                    description && /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: cn(
+                          "mt-4 text-base leading-relaxed text-muted-foreground sm:text-lg",
+                          !preview && "mx-auto max-w-2xl"
+                        ),
+                        children: description
+                      }
+                    ),
+                    actions && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        "data-slot": "feature-empty-state-actions",
+                        className: cn(
+                          "mt-7 flex flex-wrap items-center gap-3",
+                          !preview && "justify-center"
+                        ),
+                        children: actions
+                      }
+                    ),
+                    note && /* @__PURE__ */ jsx("p", { className: "mt-4 text-xs leading-relaxed text-muted-foreground", children: note })
+                  ]
+                }
+              ),
+              preview && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-slot": "feature-empty-state-preview",
+                  className: "flex min-w-0 flex-col justify-center border-t border-border bg-muted/30 p-5 sm:p-7 lg:border-l lg:border-t-0",
+                  children: [
+                    previewLabel && /* @__PURE__ */ jsx(Eyebrow, { className: "mb-3 block", children: previewLabel }),
+                    preview
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        steps && steps.length > 0 && /* @__PURE__ */ jsx(
+          "ol",
+          {
+            "data-slot": "feature-empty-state-steps",
+            className: cn(
+              "grid border-t border-border bg-background/40",
+              steps.length === 2 ? "md:grid-cols-2" : "md:grid-cols-3"
+            ),
+            children: steps.map((step, index) => /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: "flex gap-3 border-t border-border px-6 py-5 first:border-t-0 md:border-l md:border-t-0 md:first:border-l-0",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted font-mono text-xs text-muted-foreground [&_svg]:h-4 [&_svg]:w-4", children: step.icon ?? String(index + 1).padStart(2, "0") }),
+                  /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+                    /* @__PURE__ */ jsx("span", { className: "block text-sm font-medium text-foreground", children: step.title }),
+                    step.description && /* @__PURE__ */ jsx("span", { className: "mt-1 block text-xs leading-relaxed text-muted-foreground", children: step.description })
+                  ] })
+                ]
+              },
+              index
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  FeatureEmptyState
+};

package/dist/primitives/field.cjs

@@ -0,0 +1,260 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+"use client";
+
+
+var _chunkNQK5ZWC7cjs = require('../chunk-NQK5ZWC7.cjs');
+
+
+var _chunkIQZLUT2Ycjs = require('../chunk-IQZLUT2Y.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
+
+// src/primitives/field.tsx
+var _react = require('react');
+var _classvarianceauthority = require('class-variance-authority');
+var _jsxruntime = require('react/jsx-runtime');
+function FieldSet({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "fieldset",
+    {
+      "data-slot": "field-set",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "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__ */ _jsxruntime.jsx.call(void 0, 
+    "legend",
+    {
+      "data-slot": "field-legend",
+      "data-variant": variant,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldGroup({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "field-group",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "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 = _classvarianceauthority.cva.call(void 0, 
+  "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__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      role: "group",
+      "data-slot": "field",
+      "data-orientation": orientation,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, fieldVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function FieldContent({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "field-content",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLabel({ className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkIQZLUT2Ycjs.Label,
+    {
+      "data-slot": "field-label",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "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__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "field-label",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "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__ */ _jsxruntime.jsx.call(void 0, 
+    "p",
+    {
+      "data-slot": "field-description",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "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__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      "data-slot": "field-separator",
+      "data-content": !!children,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNQK5ZWC7cjs.Separator, { className: "absolute inset-0 top-1/2" }),
+        children && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "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 = _react.useMemo.call(void 0, () => {
+    if (children) return children;
+    if (!_optionalChain([errors, 'optionalAccess', _ => _.length])) return null;
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [_optionalChain([error, 'optionalAccess', _2 => _2.message]), error])).values()
+    ];
+    if (uniqueErrors.length === 1) return _optionalChain([uniqueErrors, 'access', _3 => _3[0], 'optionalAccess', _4 => _4.message]);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map(
+      (error, index) => _optionalChain([error, 'optionalAccess', _5 => _5.message]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { children: error.message }, index)
+    ) });
+  }, [children, errors]);
+  if (!content) return null;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      role: "alert",
+      "data-slot": "field-error",
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, "text-sm font-normal text-destructive", className),
+      ...props,
+      children: content
+    }
+  );
+}
+function FormField({
+  label,
+  htmlFor,
+  actions,
+  description,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "space-y-1.5", className), ...props, children: [
+    (label || actions) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-between gap-2", children: [
+      typeof label === "string" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkIQZLUT2Ycjs.Label, { htmlFor, children: label }) : label,
+      actions && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center gap-1", children: actions })
+    ] }),
+    children,
+    description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, "grid", gap === "default" ? "gap-4" : "gap-8", columnStyles[columns], className),
+      ...props
+    }
+  );
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.Field = Field; exports.FieldContent = FieldContent; exports.FieldDescription = FieldDescription; exports.FieldError = FieldError; exports.FieldGrid = FieldGrid; exports.FieldGroup = FieldGroup; exports.FieldLabel = FieldLabel; exports.FieldLegend = FieldLegend; exports.FieldSeparator = FieldSeparator; exports.FieldSet = FieldSet; exports.FieldTitle = FieldTitle; exports.FormField = FormField;

package/dist/primitives/field.d.cts

@@ -0,0 +1,43 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { Label } from './label.cjs';
+import '@radix-ui/react-label';
+
+declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): react_jsx_runtime.JSX.Element;
+declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
+    variant?: "legend" | "label";
+}): react_jsx_runtime.JSX.Element;
+declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare const fieldVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): react_jsx_runtime.JSX.Element;
+declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): react_jsx_runtime.JSX.Element;
+declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): react_jsx_runtime.JSX.Element;
+declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
+    children?: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
+    errors?: Array<{
+        message?: string;
+    } | undefined>;
+}): react_jsx_runtime.JSX.Element | null;
+interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
+    label?: React.ReactNode;
+    htmlFor?: string;
+    actions?: React.ReactNode;
+    description?: React.ReactNode;
+}
+/** Legacy standalone form-field stack. Prefer the shadcn Field composition. */
+declare function FormField({ label, htmlFor, actions, description, children, className, ...props }: FormFieldProps): react_jsx_runtime.JSX.Element;
+interface FieldGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    columns?: 1 | 2 | 3;
+    gap?: "default" | "lg";
+}
+declare function FieldGrid({ columns, gap, className, ...props }: FieldGridProps): react_jsx_runtime.JSX.Element;
+
+export { Field, FieldContent, FieldDescription, FieldError, FieldGrid, type FieldGridProps, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FormField, type FormFieldProps };

package/dist/primitives/field.d.ts

@@ -0,0 +1,43 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { Label } from './label.js';
+import '@radix-ui/react-label';
+
+declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): react_jsx_runtime.JSX.Element;
+declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
+    variant?: "legend" | "label";
+}): react_jsx_runtime.JSX.Element;
+declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare const fieldVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): react_jsx_runtime.JSX.Element;
+declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): react_jsx_runtime.JSX.Element;
+declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): react_jsx_runtime.JSX.Element;
+declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
+    children?: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
+    errors?: Array<{
+        message?: string;
+    } | undefined>;
+}): react_jsx_runtime.JSX.Element | null;
+interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
+    label?: React.ReactNode;
+    htmlFor?: string;
+    actions?: React.ReactNode;
+    description?: React.ReactNode;
+}
+/** Legacy standalone form-field stack. Prefer the shadcn Field composition. */
+declare function FormField({ label, htmlFor, actions, description, children, className, ...props }: FormFieldProps): react_jsx_runtime.JSX.Element;
+interface FieldGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    columns?: 1 | 2 | 3;
+    gap?: "default" | "lg";
+}
+declare function FieldGrid({ columns, gap, className, ...props }: FieldGridProps): react_jsx_runtime.JSX.Element;
+
+export { Field, FieldContent, FieldDescription, FieldError, FieldGrid, type FieldGridProps, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FormField, type FormFieldProps };