@epicbagel/saas-kit 1.3.0 → 1.4.0

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
+};

package/dist/chunk-U3YFP6ZV.cjs

@@ -0,0 +1,273 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+// src/lib/neutral-theme.ts
+var SEMANTIC_TOKENS = [
+  "background",
+  "foreground",
+  "card",
+  "card-foreground",
+  "popover",
+  "popover-foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "muted",
+  "muted-foreground",
+  "accent",
+  "accent-foreground",
+  "destructive",
+  "destructive-foreground",
+  "border",
+  "input",
+  "ring",
+  "chart-1",
+  "chart-2",
+  "chart-3",
+  "chart-4",
+  "chart-5",
+  "sidebar-background",
+  "sidebar-foreground",
+  "sidebar-primary",
+  "sidebar-primary-foreground",
+  "sidebar-accent",
+  "sidebar-accent-foreground",
+  "sidebar-border",
+  "sidebar-ring"
+];
+function hexToRgb(hex) {
+  const h = hex.replace("#", "").trim();
+  const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+  if (!/^[0-9a-fA-F]{6}$/.test(full)) {
+    throw new Error(`Not a hex colour: ${hex}`);
+  }
+  return [
+    parseInt(full.slice(0, 2), 16),
+    parseInt(full.slice(2, 4), 16),
+    parseInt(full.slice(4, 6), 16)
+  ];
+}
+function hexToHsl(hex) {
+  const [r255, g255, b255] = hexToRgb(hex);
+  const r = r255 / 255;
+  const g = g255 / 255;
+  const b = b255 / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  const d = max - min;
+  let h = 0;
+  let s = 0;
+  if (d !== 0) {
+    s = d / (1 - Math.abs(2 * l - 1));
+    if (max === r) h = (g - b) / d % 6;
+    else if (max === g) h = (b - r) / d + 2;
+    else h = (r - g) / d + 4;
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+  const round = (n) => Math.round(n * 10) / 10;
+  return `${round(h)} ${round(s * 100)}% ${round(l * 100)}%`;
+}
+function luminance(hex) {
+  const [r, g, b] = hexToRgb(hex).map((v) => {
+    const c = v / 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function contrastRatio(a, b) {
+  const la = luminance(a);
+  const lb = luminance(b);
+  const [hi, lo] = la > lb ? [la, lb] : [lb, la];
+  return (hi + 0.05) / (lo + 0.05);
+}
+function bestForeground(bg, candidates) {
+  let best = candidates[0];
+  let bestRatio = 0;
+  for (const c of candidates) {
+    const ratio = contrastRatio(bg, c);
+    if (ratio > bestRatio) {
+      best = c;
+      bestRatio = ratio;
+    }
+  }
+  return best;
+}
+var NEUTRAL_RADIUS = "0rem";
+function neutral(mode) {
+  const light = mode === "light";
+  const danger = "#d71921";
+  const mono = light ? {
+    bg: "#ffffff",
+    fg: "#000000",
+    surface: "#f5f5f5",
+    subtle: "#666666",
+    border: "#e5e5e5",
+    sidebar: "#fafafa",
+    strong: "#333333"
+  } : {
+    bg: "#000000",
+    fg: "#ffffff",
+    surface: "#1a1a1a",
+    subtle: "#999999",
+    border: "#333333",
+    sidebar: "#0d0d0d",
+    strong: "#cccccc"
+  };
+  return {
+    background: mono.bg,
+    foreground: mono.fg,
+    card: mono.bg,
+    "card-foreground": mono.fg,
+    popover: mono.bg,
+    "popover-foreground": mono.fg,
+    primary: mono.fg,
+    "primary-foreground": mono.bg,
+    secondary: mono.surface,
+    "secondary-foreground": mono.fg,
+    muted: mono.surface,
+    "muted-foreground": mono.subtle,
+    accent: mono.surface,
+    "accent-foreground": mono.fg,
+    destructive: danger,
+    "destructive-foreground": bestForeground(danger, ["#ffffff", "#000000"]),
+    border: mono.border,
+    input: mono.border,
+    ring: mono.fg,
+    "chart-1": light ? "#333333" : "#cccccc",
+    "chart-2": light ? "#4d4d4d" : "#b3b3b3",
+    "chart-3": light ? "#666666" : "#999999",
+    "chart-4": light ? "#808080" : "#808080",
+    "chart-5": light ? "#999999" : "#666666",
+    "sidebar-background": mono.sidebar,
+    "sidebar-foreground": mono.fg,
+    "sidebar-primary": mono.fg,
+    "sidebar-primary-foreground": mono.bg,
+    "sidebar-accent": mono.surface,
+    "sidebar-accent-foreground": mono.fg,
+    "sidebar-border": mono.border,
+    "sidebar-ring": mono.border
+  };
+}
+var NEUTRAL = {
+  light: neutral("light"),
+  dark: neutral("dark")
+};
+var NEUTRAL_THEME_ID = "minimal";
+var NEUTRAL_PALETTE = {
+  id: NEUTRAL_THEME_ID,
+  label: "Neutral",
+  description: "Black and white, square corners.",
+  radius: NEUTRAL_RADIUS,
+  light: NEUTRAL.light,
+  dark: NEUTRAL.dark
+};
+function colorAlias(token) {
+  if (token.startsWith("chart-")) return null;
+  if (token === "sidebar-background") return "--color-sidebar";
+  return `--color-${token}`;
+}
+var RADIUS_SCALE = [
+  ["--radius-sm", "calc(var(--radius) - 4px)"],
+  ["--radius-md", "calc(var(--radius) - 2px)"],
+  ["--radius-lg", "var(--radius)"],
+  ["--radius-xl", "calc(var(--radius) + 4px)"],
+  ["--radius-2xl", "calc(var(--radius) + 8px)"]
+];
+function paletteDeclarations(tokens, names, radius, { indent = "  ", aliasSource = "neutral-theme.ts" } = {}) {
+  const value = (token) => {
+    const hex = tokens[token];
+    if (hex === void 0) throw new Error(`Missing token: ${token}`);
+    return hexToHsl(hex);
+  };
+  const lines = [`${indent}--radius: ${radius};`];
+  for (const token of names) {
+    lines.push(`${indent}--${token}: ${value(token)};`);
+  }
+  lines.push(`${indent}--sidebar: ${value("sidebar-background")};`);
+  lines.push(`${indent}/* Tailwind-facing aliases \u2014 see ${aliasSource} */`);
+  for (const token of names) {
+    const alias = colorAlias(token);
+    if (alias) lines.push(`${indent}${alias}: hsl(var(--${token}));`);
+  }
+  for (const [name, scale] of RADIUS_SCALE) {
+    lines.push(`${indent}${name}: ${scale};`);
+  }
+  return lines.join("\n");
+}
+function paletteStyle(tokens, radius, names = SEMANTIC_TOKENS) {
+  const value = (token) => {
+    const hex = tokens[token];
+    if (hex === void 0) throw new Error(`Missing token: ${token}`);
+    return hexToHsl(hex);
+  };
+  const style = {};
+  if (radius !== void 0) style["--radius"] = radius;
+  for (const token of names) style[`--${token}`] = value(token);
+  style["--sidebar"] = value("sidebar-background");
+  for (const token of names) {
+    const alias = colorAlias(token);
+    if (alias) style[alias] = `hsl(var(--${token}))`;
+  }
+  for (const [name, scale] of RADIUS_SCALE) style[name] = scale;
+  return style;
+}
+function paletteBlock(selector, declarations, indent = "") {
+  const head = selector.split("\n").map((line) => indent + line).join("\n");
+  return `${head} {
+${declarations}
+${indent}}
+`;
+}
+function layerBlock(name, rules) {
+  return `@layer ${name} {
+${rules.join("\n")}}
+`;
+}
+var DARK_ROOT_SELECTOR = ":root:where(.dark)";
+function baseLayerPalette(light, dark, indent = "  ") {
+  return layerBlock("base", [
+    paletteBlock(":root", light, indent),
+    paletteBlock(DARK_ROOT_SELECTOR, dark, indent)
+  ]);
+}
+var PALETTE_GENERATED_HEADER = `/* GENERATED FILE \u2014 do not edit.
+ * Source: src/lib/neutral-theme.ts \xB7 Regenerate: pnpm gen:themes
+ *
+ * The neutral palette: light on :root, dark when the root carries the
+ * \`.dark\` class. It sits in \`@layer base\`, so any unlayered palette rule
+ * or a host's own :root overrides wins on layer order alone. Imported by
+ * tokens.css; every --color-* alias and the radius scale are re-declared
+ * alongside the tokens they read.
+ */`;
+function renderPaletteCss() {
+  const declarations = (mode) => paletteDeclarations(NEUTRAL[mode], SEMANTIC_TOKENS, NEUTRAL_RADIUS, {
+    indent: "    "
+  });
+  return [
+    PALETTE_GENERATED_HEADER,
+    baseLayerPalette(declarations("light"), declarations("dark"))
+  ].join("\n");
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.SEMANTIC_TOKENS = SEMANTIC_TOKENS; exports.hexToRgb = hexToRgb; exports.hexToHsl = hexToHsl; exports.luminance = luminance; exports.contrastRatio = contrastRatio; exports.bestForeground = bestForeground; exports.NEUTRAL_RADIUS = NEUTRAL_RADIUS; exports.NEUTRAL = NEUTRAL; exports.NEUTRAL_THEME_ID = NEUTRAL_THEME_ID; exports.NEUTRAL_PALETTE = NEUTRAL_PALETTE; exports.colorAlias = colorAlias; exports.paletteDeclarations = paletteDeclarations; exports.paletteStyle = paletteStyle; exports.paletteBlock = paletteBlock; exports.layerBlock = layerBlock; exports.baseLayerPalette = baseLayerPalette; exports.PALETTE_GENERATED_HEADER = PALETTE_GENERATED_HEADER; exports.renderPaletteCss = renderPaletteCss;

package/dist/chunk-X3PRMR5G.js

@@ -0,0 +1,52 @@
+"use client";
+import {
+  toggleVariants
+} from "./chunk-FJLINIC6.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/toggle-group.tsx
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { jsx } from "react/jsx-runtime";
+var ToggleGroupContext = React.createContext({
+  size: "default",
+  variant: "default"
+});
+var ToggleGroup = React.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToggleGroupPrimitive.Root,
+  {
+    ref,
+    className: cn("flex items-center justify-center gap-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+  }
+));
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+var ToggleGroupItem = React.forwardRef(({ className, children, variant, size, grow = false, textSize = "inherit", ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        grow && "flex-1",
+        textSize === "xs" && "text-xs",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export {
+  ToggleGroup,
+  ToggleGroupItem
+};