@karni/ui 0.0.0-stage → 0.4.0

package/dist/src/schema/zod.d.ts

@@ -0,0 +1,4 @@
+import { ZodObject, ZodRawShape } from 'zod';
+import { ResourceSchema } from './types';
+/** Builds a Zod validator for a resource's create or update payload from its schema. */
+export declare function zodFor(schema: ResourceSchema, mode: "create" | "update"): ZodObject<ZodRawShape>;

package/dist/src/states/ErrorState.d.ts

@@ -0,0 +1,43 @@
+import { KarniErrorContext } from './describe-error';
+import * as React from "react";
+export interface ErrorStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** What failed: a KarniApiError, a fetch failure, anything. */
+    error: unknown;
+    /** What the user was doing, so the message names it ("You can't delete events"). */
+    context?: KarniErrorContext;
+    /** Offered when trying again can succeed. */
+    onRetry?: () => void;
+    /** True while the retry runs: the button shows progress after ~500ms. */
+    retrying?: boolean;
+    /** More actions next to Retry (a sign-in link, "Back to the list"). */
+    actions?: React.ReactNode;
+    /** "panel" (a bordered block, the default) or "inline" (one compact row). */
+    variant?: "panel" | "inline";
+}
+/**
+ * What a component's `Error` slot receives: every Karni component that loads
+ * data takes `slots={{ Error: YourPanel }}` with these props.
+ */
+export type ErrorSlotProps = Pick<ErrorStateProps, "error" | "context" | "onRetry" | "retrying">;
+/**
+ * What failed and what to do, in plain words (see describeError). Never shows
+ * a raw status code, but shows the server's own explanation when it gave one.
+ * Announced to screen readers when it appears.
+ */
+export declare const ErrorState: React.ForwardRefExoticComponent<ErrorStateProps & React.RefAttributes<HTMLDivElement>>;
+export interface PermissionDeniedProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** The action that is not allowed: "create", "delete", "export". */
+    action?: string;
+    /** What it applies to: "events", "this booking". */
+    resource?: string;
+    /** Replaces the default "Ask an administrator" sentence. */
+    description?: React.ReactNode;
+    /** A way forward ("Back to the list"). */
+    actions?: React.ReactNode;
+}
+/**
+ * Says, in plain words, which action the user's role does not allow, both
+ * on screens that know before asking the server (a role check) and after
+ * a 403.
+ */
+export declare const PermissionDenied: React.ForwardRefExoticComponent<PermissionDeniedProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/states/PendingButton.d.ts

@@ -0,0 +1,16 @@
+import { ButtonProps } from '../components/primitives/button';
+import * as React from "react";
+export interface PendingButtonProps extends ButtonProps {
+    /** True while the action runs: the button is disabled and, after ~500ms, shows progress. */
+    pending?: boolean;
+    /** Announced to screen readers while pending ("Saving…"). */
+    pendingLabel?: string;
+}
+/**
+ * A button for work that takes time. While `pending` it is disabled and
+ * `aria-busy`. Once the work is slow (500ms), a spinner covers the label,
+ * which stays in the layout, so the button never changes width or freezes
+ * silently. Renders the registered `button` primitive, so it follows the
+ * project's design system.
+ */
+export declare const PendingButton: React.ForwardRefExoticComponent<PendingButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/src/states/describe-error.d.ts

@@ -0,0 +1,25 @@
+export type KarniErrorKind = "offline" | "network" | "unauthenticated" | "forbidden" | "not-found" | "validation" | "conflict" | "rate-limited" | "timeout" | "server" | "unknown";
+/** What the user was doing, so the message can name it ("You can't delete events."). */
+export interface KarniErrorContext {
+    /** A verb: "view", "create", "edit", "delete", "export", "import", or your own. */
+    action?: string;
+    /** What it was done to, as the sentence needs it: "events", "this event". */
+    resource?: string;
+}
+export interface KarniErrorDescription {
+    kind: KarniErrorKind;
+    /** A short headline in plain words. */
+    title: string;
+    /** What to do next. */
+    description: string;
+    /** Whether the same request can succeed if tried again. */
+    retryable: boolean;
+    /** The server's own explanation, when it gave one worth showing (never for 5xx). */
+    detail?: string;
+    /** The HTTP status, for logs and project code. Never shown to the user. */
+    status?: number;
+}
+/** Classifies `error` and words it for the person using the app. */
+export declare function describeError(error: unknown, context?: KarniErrorContext): KarniErrorDescription;
+/** `describeError(...).title`, capitalised, for one-line contexts (toasts, inline text). */
+export declare function errorSummary(error: unknown, context?: KarniErrorContext): string;

package/dist/src/states/hooks.d.ts

@@ -0,0 +1,10 @@
+/** How long a request may run before Karni shows progress (ms). */
+export declare const SLOW_AFTER_MS = 500;
+/**
+ * True once `active` has stayed true for `delayMs` (default 500ms), false as
+ * soon as it turns false. Show progress only for slow work, so a fast request
+ * never flashes a spinner.
+ */
+export declare function useDelayedFlag(active: boolean, delayMs?: number): boolean;
+/** Returns whether the browser reports a network connection and re-renders when it changes. */
+export declare function useOnlineStatus(): boolean;

package/dist/src/theme/script.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The theme's pre-paint script, with no React: shared by ThemeProvider and
+ * the `@karni/ui/vite` plugin, which runs in Node at build time.
+ */
+/** The localStorage key ThemeProvider keeps the user's choice under. */
+export declare const THEME_STORAGE_KEY = "karni-theme";
+/**
+ * Inline script for index.html's `<head>`: applies the stored (or system) theme
+ * before the first paint. Uses the default storage key. In a Vite app,
+ * `karniTheme()` from `@karni/ui/vite` puts it there.
+ */
+export declare const KARNI_THEME_SCRIPT = "(function(){try{var t=localStorage.getItem(\"karni-theme\");var d=t===\"dark\"||((t===null||t===\"system\")&&matchMedia(\"(prefers-color-scheme: dark)\").matches);document.documentElement.classList.toggle(\"dark\",d);document.documentElement.style.colorScheme=d?\"dark\":\"light\"}catch(e){}})();";

package/dist/src/theme/theme.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Light, dark or the system's choice, for the whole app.
+ *
+ *   <ThemeProvider>           // follows the system until the user picks
+ *     <App />                 // <ThemeToggle /> anywhere lets them pick
+ *   </ThemeProvider>
+ *
+ * The choice is kept per browser (localStorage) and applied as the `dark`
+ * class on <html>, which is what @karni/ui's tokens switch on. Put
+ * KARNI_THEME_SCRIPT in index.html's <head> (in a Vite app, `karniTheme()`
+ * from `@karni/ui/vite` does) so the first paint already has the right
+ * theme (no light flash before React starts).
+ */
+import * as React from "react";
+export type ThemePreference = "light" | "dark" | "system";
+export type ResolvedTheme = "light" | "dark";
+export { KARNI_THEME_SCRIPT, THEME_STORAGE_KEY } from './script';
+interface ThemeContextValue {
+    /** What the user chose ("system" follows the operating system). */
+    theme: ThemePreference;
+    /** What is applied right now. */
+    resolvedTheme: ResolvedTheme;
+    setTheme: (theme: ThemePreference) => void;
+}
+export interface ThemeProviderProps {
+    /** Used until the user chooses, "system" by default. */
+    defaultTheme?: ThemePreference;
+    /** localStorage key for the user's choice. Change it to keep apps on one origin apart. */
+    storageKey?: string;
+    /** The element that gets the `dark` class, <html> by default. */
+    target?: () => HTMLElement;
+    children?: React.ReactNode;
+}
+/** Rendered once around the app, it applies the user's theme choice and keeps it. */
+export declare function ThemeProvider({ defaultTheme, storageKey, target, children, }: ThemeProviderProps): React.ReactElement;
+/** Returns the theme choice and a setter, and throws a descriptive error outside ThemeProvider. */
+export declare function useTheme(): ThemeContextValue;
+export interface ThemeToggleProps {
+    className?: string;
+}
+/**
+ * One button that cycles Light → Dark → System. Its accessible name says the
+ * current choice and the next one ("Theme: Dark. Switch to System").
+ */
+export declare function ThemeToggle({ className }: ThemeToggleProps): React.ReactElement;

package/dist/styles.css

@@ -0,0 +1,248 @@
+/**
+ * @karni/ui design tokens.
+ *
+ * Every visual value a component uses resolves from a custom property in one
+ * of these families:
+ *
+ *   --karni-color-*   colours (any CSS colour: hsl(), oklch(), hex, var())
+ *   --karni-space-*   the spacing scale: --karni-space-unit (0.25rem), and any
+ *                     step --karni-space-<n> (4 = 1rem) to override that step
+ *   --karni-radius-*  corner radii (sm, md, lg, xl, full)
+ *   --karni-font-*    families, sizes, line heights, weights, letter spacing
+ *   --karni-shadow-*  elevation (sm, DEFAULT, md, lg)
+ *   --karni-z-*, --karni-opacity-*, --karni-duration, --karni-ease,
+ *   --karni-border-width*, --karni-ring-*   stacking, opacity, motion, lines
+ *
+ * The Tailwind preset maps its classes to these properties, so `bg-primary`
+ * or `p-4` in a component (or in your own code) reads them. Override any of
+ * them in your own stylesheet to retheme every component; `karni ui detect`
+ * writes karni-theme.css for you from the project's shadcn/ui, Tailwind,
+ * Material UI, Chakra UI or Mantine theme.
+ * Add the `dark` class to <html> (or any ancestor) for the dark palette.
+ *
+ * Both palettes meet WCAG 2.2 AA for every pair the components use (4.5:1
+ * text, 3:1 field boundaries, focus rings, icons and chart series);
+ * tests/contrast.test.ts computes the ratios from the values below. Check
+ * your own overrides against the same pairs.
+ *
+ * The 0.3 HSL-triplet names (--karni-primary, --karni-border, ...) still
+ * work as inputs: each --karni-color-* defaults to its triplet. They are
+ * deprecated in 0.4 and removed in 1.0; set --karni-color-* instead.
+ *
+ * The Django side (the admin, the welcome page) uses this same file: the
+ * karni package ships a byte-for-byte copy as the static file
+ * karni/tokens.css, and a karni test fails until a change here is copied.
+ */
+:root {
+  color-scheme: light;
+
+  --karni-background: 0 0% 100%;
+  --karni-foreground: 224 71.4% 4.1%;
+
+  --karni-card: 0 0% 100%;
+  --karni-card-foreground: 224 71.4% 4.1%;
+
+  --karni-popover: 0 0% 100%;
+  --karni-popover-foreground: 224 71.4% 4.1%;
+
+  --karni-primary: 220.9 39.3% 11%;
+  --karni-primary-foreground: 210 20% 98%;
+
+  --karni-secondary: 220 14.3% 95.9%;
+  --karni-secondary-foreground: 220.9 39.3% 11%;
+
+  --karni-muted: 220 14.3% 95.9%;
+  --karni-muted-foreground: 220 8.9% 43%;
+
+  --karni-accent: 220 14.3% 95.9%;
+  --karni-accent-foreground: 220.9 39.3% 11%;
+
+  --karni-destructive: 0 72% 46%;
+  --karni-destructive-foreground: 210 20% 98%;
+
+  --karni-border: 220 13% 91%;
+  --karni-input: 220 9% 56%;
+  --karni-ring: 224 71.4% 4.1%;
+
+  --karni-radius: 0.5rem;
+
+  /* DataChart series colors (chart-1 .. chart-5). */
+  --karni-chart-1: 220 70% 50%;
+  --karni-chart-2: 160 60% 36%;
+  --karni-chart-3: 30 80% 42%;
+  --karni-chart-4: 280 65% 60%;
+  --karni-chart-5: 340 75% 55%;
+}
+
+.dark {
+  color-scheme: dark;
+
+  --karni-background: 224 71.4% 4.1%;
+  --karni-foreground: 210 20% 98%;
+
+  --karni-card: 224 71.4% 4.1%;
+  --karni-card-foreground: 210 20% 98%;
+
+  --karni-popover: 224 71.4% 4.1%;
+  --karni-popover-foreground: 210 20% 98%;
+
+  --karni-primary: 210 20% 98%;
+  --karni-primary-foreground: 220.9 39.3% 11%;
+
+  --karni-secondary: 215 27.9% 16.9%;
+  --karni-secondary-foreground: 210 20% 98%;
+
+  --karni-muted: 215 27.9% 16.9%;
+  --karni-muted-foreground: 217.9 10.6% 64.9%;
+
+  --karni-accent: 215 27.9% 16.9%;
+  --karni-accent-foreground: 210 20% 98%;
+
+  --karni-destructive: 0 84% 67%;
+  --karni-destructive-foreground: 224 71.4% 4.1%;
+
+  --karni-border: 215 27.9% 16.9%;
+  --karni-input: 215 14% 42%;
+  --karni-ring: 216 12.2% 83.9%;
+
+  --karni-chart-1: 217 91% 60%;
+  --karni-chart-2: 160 60% 45%;
+  --karni-chart-3: 30 80% 55%;
+  --karni-chart-4: 280 65% 60%;
+  --karni-chart-5: 340 75% 55%;
+}
+
+/* The colour layer components read. Declared on .dark as well so a dark
+   subtree recomputes them from its own values. */
+:root,
+.dark {
+  --karni-color-background: hsl(var(--karni-background));
+  --karni-color-foreground: hsl(var(--karni-foreground));
+  --karni-color-card: hsl(var(--karni-card));
+  --karni-color-card-foreground: hsl(var(--karni-card-foreground));
+  --karni-color-popover: hsl(var(--karni-popover));
+  --karni-color-popover-foreground: hsl(var(--karni-popover-foreground));
+  --karni-color-primary: hsl(var(--karni-primary));
+  --karni-color-primary-foreground: hsl(var(--karni-primary-foreground));
+  --karni-color-primary-hover: color-mix(in srgb, var(--karni-color-primary) 90%, transparent);
+  --karni-color-secondary: hsl(var(--karni-secondary));
+  --karni-color-secondary-foreground: hsl(var(--karni-secondary-foreground));
+  --karni-color-secondary-hover: color-mix(in srgb, var(--karni-color-secondary) 80%, transparent);
+  --karni-color-muted: hsl(var(--karni-muted));
+  --karni-color-muted-foreground: hsl(var(--karni-muted-foreground));
+  --karni-color-muted-subtle: color-mix(in srgb, var(--karni-color-muted) 50%, transparent);
+  --karni-color-accent: hsl(var(--karni-accent));
+  --karni-color-accent-foreground: hsl(var(--karni-accent-foreground));
+  --karni-color-destructive: hsl(var(--karni-destructive));
+  --karni-color-destructive-foreground: hsl(var(--karni-destructive-foreground));
+  --karni-color-destructive-hover: color-mix(
+    in srgb,
+    var(--karni-color-destructive) 90%,
+    transparent
+  );
+  --karni-color-destructive-subtle: color-mix(
+    in srgb,
+    var(--karni-color-destructive) 10%,
+    transparent
+  );
+  --karni-color-destructive-border: color-mix(
+    in srgb,
+    var(--karni-color-destructive) 50%,
+    transparent
+  );
+  --karni-color-border: hsl(var(--karni-border));
+  --karni-color-input: hsl(var(--karni-input));
+  --karni-color-ring: hsl(var(--karni-ring));
+  --karni-color-overlay: color-mix(in srgb, var(--karni-color-foreground) 40%, transparent);
+  --karni-color-chart-1: hsl(var(--karni-chart-1));
+  --karni-color-chart-2: hsl(var(--karni-chart-2));
+  --karni-color-chart-3: hsl(var(--karni-chart-3));
+  --karni-color-chart-4: hsl(var(--karni-chart-4));
+  --karni-color-chart-5: hsl(var(--karni-chart-5));
+}
+
+/* The scrim behind a modal or the mobile drawer dims the page in both
+   themes: the dark theme's foreground is light, so its scrim is the
+   background colour instead. */
+.dark {
+  --karni-color-overlay: color-mix(in srgb, var(--karni-color-background) 80%, transparent);
+}
+
+/* Size, type, elevation, stacking and motion. The preset falls back to the
+   same values when a property is unset. */
+:root {
+  --karni-space-unit: 0.25rem;
+
+  --karni-radius-sm: calc(var(--karni-radius) - 4px);
+  --karni-radius-md: calc(var(--karni-radius) - 2px);
+  --karni-radius-lg: var(--karni-radius);
+  --karni-radius-xl: calc(var(--karni-radius) + 4px);
+  --karni-radius-full: 9999px;
+
+  --karni-font-sans:
+    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
+  --karni-font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
+  --karni-font-size-xs: 0.75rem;
+  --karni-font-size-sm: 0.875rem;
+  --karni-font-size-base: 1rem;
+  --karni-font-size-lg: 1.125rem;
+  --karni-font-size-xl: 1.25rem;
+  --karni-font-size-2xl: 1.5rem;
+  --karni-font-leading-xs: 1rem;
+  --karni-font-leading-sm: 1.25rem;
+  --karni-font-leading-base: 1.5rem;
+  --karni-font-leading-lg: 1.75rem;
+  --karni-font-leading-xl: 1.75rem;
+  --karni-font-leading-2xl: 2rem;
+  --karni-font-leading-none: 1;
+  --karni-font-weight-normal: 400;
+  --karni-font-weight-medium: 500;
+  --karni-font-weight-semibold: 600;
+  --karni-font-weight-bold: 700;
+  --karni-font-tracking-tight: -0.025em;
+  --karni-font-tracking-wide: 0.025em;
+  --karni-font-underline-offset: 4px;
+
+  /* Tailwind 4's scale (its shadow-sm is Tailwind 3's bare shadow). */
+  --karni-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --karni-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --karni-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --karni-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+  --karni-border-width: 1px;
+  --karni-border-width-2: 2px;
+  --karni-ring-width: 2px;
+  --karni-ring-width-1: 1px;
+  --karni-ring-offset-width: 2px;
+
+  /* ResourceTable scrolls inside a box this tall (its header sticks); `none`
+     lets the page scroll instead. */
+  --karni-table-max-height: 70vh;
+
+  --karni-z-raised: 10;
+  --karni-z-drawer: 40;
+  --karni-z-popover: 50;
+  --karni-z-modal: 50;
+  --karni-z-toast: 100;
+
+  --karni-opacity-50: 0.5;
+  --karni-opacity-60: 0.6;
+  --karni-opacity-70: 0.7;
+  --karni-opacity-90: 0.9;
+
+  --karni-duration: 150ms;
+  --karni-duration-pulse: 2s;
+  --karni-duration-spin: 1s;
+  --karni-ease: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --karni-duration: 0ms;
+    --karni-duration-pulse: 0s;
+    --karni-duration-spin: 0s;
+  }
+}

package/dist/tailwind-preset.cjs

@@ -0,0 +1,2 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});function e(e){return`color-mix(in srgb, var(--karni-color-${e}) calc(<alpha-value> * 100%), transparent)`}var t=[.5,1,1.5,2,2.5,3,3.5,4,5,6,7,8,9,10,11,12,14,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96,128];function n(){let e={0:`0px`,px:`var(--karni-space-px, 1px)`};for(let n of t){let t=String(n).replace(`.`,`-`);e[String(n)]=`var(--karni-space-${t}, calc(var(--karni-space-unit, 0.25rem) * ${n}))`}return e}var r={xs:[`0.75rem`,`1rem`],sm:[`0.875rem`,`1.25rem`],base:[`1rem`,`1.5rem`],lg:[`1.125rem`,`1.75rem`],xl:[`1.25rem`,`1.75rem`],"2xl":[`1.5rem`,`2rem`]};function i(){return Object.fromEntries(Object.entries(r).map(([e,[t,n]])=>[e,[`var(--karni-font-size-${e}, ${t})`,{lineHeight:`var(--karni-font-leading-${e}, ${n})`}]]))}var a={darkMode:`class`,theme:{extend:{colors:{background:e(`background`),foreground:e(`foreground`),card:{DEFAULT:e(`card`),foreground:e(`card-foreground`)},popover:{DEFAULT:e(`popover`),foreground:e(`popover-foreground`)},primary:{DEFAULT:e(`primary`),foreground:e(`primary-foreground`),hover:e(`primary-hover`)},secondary:{DEFAULT:e(`secondary`),foreground:e(`secondary-foreground`),hover:e(`secondary-hover`)},muted:{DEFAULT:e(`muted`),foreground:e(`muted-foreground`),subtle:e(`muted-subtle`)},accent:{DEFAULT:e(`accent`),foreground:e(`accent-foreground`)},destructive:{DEFAULT:e(`destructive`),foreground:e(`destructive-foreground`),hover:e(`destructive-hover`),subtle:e(`destructive-subtle`),border:e(`destructive-border`)},border:e(`border`),input:e(`input`),ring:e(`ring`),overlay:e(`overlay`),chart:{1:e(`chart-1`),2:e(`chart-2`),3:e(`chart-3`),4:e(`chart-4`),5:e(`chart-5`)}},borderColor:{DEFAULT:e(`border`)},spacing:n(),borderRadius:{DEFAULT:`var(--karni-radius-sm, 0.25rem)`,sm:`var(--karni-radius-sm, 0.25rem)`,md:`var(--karni-radius-md, 0.375rem)`,lg:`var(--karni-radius-lg, 0.5rem)`,xl:`var(--karni-radius-xl, 0.75rem)`,full:`var(--karni-radius-full, 9999px)`},fontFamily:{sans:`var(--karni-font-sans, ui-sans-serif, system-ui, sans-serif)`,mono:`var(--karni-font-mono, ui-monospace, monospace)`},fontSize:i(),fontWeight:{normal:`var(--karni-font-weight-normal, 400)`,medium:`var(--karni-font-weight-medium, 500)`,semibold:`var(--karni-font-weight-semibold, 600)`,bold:`var(--karni-font-weight-bold, 700)`},lineHeight:{none:`var(--karni-font-leading-none, 1)`},textUnderlineOffset:{4:`var(--karni-font-underline-offset, 4px)`},letterSpacing:{tight:`var(--karni-font-tracking-tight, -0.025em)`,wide:`var(--karni-font-tracking-wide, 0.025em)`},boxShadow:{sm:`var(--karni-shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1))`,DEFAULT:`var(--karni-shadow, 0 1px 3px 0 rgb(0 0 0 / 0.1))`,md:`var(--karni-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1))`,lg:`var(--karni-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1))`},borderWidth:{DEFAULT:`var(--karni-border-width, 1px)`,2:`var(--karni-border-width-2, 2px)`},divideWidth:{DEFAULT:`var(--karni-border-width, 1px)`},outlineWidth:{DEFAULT:`var(--karni-border-width, 1px)`},ringWidth:{1:`var(--karni-ring-width-1, 1px)`,2:`var(--karni-ring-width, 2px)`},ringOffsetWidth:{2:`var(--karni-ring-offset-width, 2px)`},zIndex:{raised:`var(--karni-z-raised, 10)`,drawer:`var(--karni-z-drawer, 40)`,popover:`var(--karni-z-popover, 50)`,modal:`var(--karni-z-modal, 50)`,toast:`var(--karni-z-toast, 100)`},opacity:{50:`var(--karni-opacity-50, 0.5)`,60:`var(--karni-opacity-60, 0.6)`,70:`var(--karni-opacity-70, 0.7)`,90:`var(--karni-opacity-90, 0.9)`},transitionDuration:{DEFAULT:`var(--karni-duration, 150ms)`},transitionTimingFunction:{DEFAULT:`var(--karni-ease, cubic-bezier(0.4, 0, 0.2, 1))`},animation:{pulse:`pulse var(--karni-duration-pulse, 2s) cubic-bezier(0.4, 0, 0.6, 1) infinite`,spin:`spin var(--karni-duration-spin, 1s) linear infinite`}}}};exports.SPACE_STEPS=t,exports.default=a;
+//# sourceMappingURL=tailwind-preset.cjs.map

package/dist/tailwind-preset.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind-preset.cjs","names":["color","name","SPACE_STEPS","spacing","scale","step","FONT_SIZES","fontSize","size","leading","karniPreset"],"sources":["../tailwind-preset.ts"],"sourcesContent":["/**\n * Tailwind preset for @karni/ui consumers (Tailwind 3, and 4 through @config).\n *\n * Usage (tailwind.config.ts of the consuming app):\n *\n * ```ts\n * import karniPreset from \"@karni/ui/tailwind-preset\";\n *\n * export default {\n *   presets: [karniPreset],\n *   content: [\n *     \"./src/**\\/*.{ts,tsx}\",\n *     \"./node_modules/@karni/ui/dist/**\\/*.js\",\n *   ],\n * };\n * ```\n *\n * Also import \"@karni/ui/styles.css\" once (it defines the --karni-* tokens).\n * Tailwind v4 loads the same config through `@config` in CSS, next to\n * `@import \"@karni/ui/tailwind-v4.css\"` (see the README).\n */\nimport type { Config } from \"tailwindcss\";\n\n/**\n * A colour token as a Tailwind colour. Wrapping it in color-mix with\n * `<alpha-value>` keeps opacity modifiers (`bg-primary/50`) working in\n * Tailwind 3 as well as 4, for any colour format the token holds.\n */\nfunction color(name: string): string {\n  return `color-mix(in srgb, var(--karni-color-${name}) calc(<alpha-value> * 100%), transparent)`;\n}\n\n/** The spacing scale: each step reads --karni-space-<n>, else n × --karni-space-unit. */\nexport const SPACE_STEPS = [\n  0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48,\n  52, 56, 60, 64, 72, 80, 96, 128,\n] as const;\n\nfunction spacing(): Record<string, string> {\n  const scale: Record<string, string> = {\n    0: \"0px\",\n    px: \"var(--karni-space-px, 1px)\",\n  };\n  for (const step of SPACE_STEPS) {\n    const name = String(step).replace(\".\", \"-\");\n    scale[String(step)] =\n      `var(--karni-space-${name}, calc(var(--karni-space-unit, 0.25rem) * ${step}))`;\n  }\n  return scale;\n}\n\nconst FONT_SIZES = {\n  xs: [\"0.75rem\", \"1rem\"],\n  sm: [\"0.875rem\", \"1.25rem\"],\n  base: [\"1rem\", \"1.5rem\"],\n  lg: [\"1.125rem\", \"1.75rem\"],\n  xl: [\"1.25rem\", \"1.75rem\"],\n  \"2xl\": [\"1.5rem\", \"2rem\"],\n} as const;\n\nfunction fontSize(): Record<string, [string, { lineHeight: string }]> {\n  return Object.fromEntries(\n    Object.entries(FONT_SIZES).map(([name, [size, leading]]) => [\n      name,\n      [\n        `var(--karni-font-size-${name}, ${size})`,\n        { lineHeight: `var(--karni-font-leading-${name}, ${leading})` },\n      ],\n    ]),\n  );\n}\n\nconst karniPreset = {\n  // `as const` keeps the literal type so the preset stays assignable to\n  // Config[\"presets\"] when consumers spread it into their own config.\n  darkMode: \"class\" as const,\n  theme: {\n    extend: {\n      colors: {\n        background: color(\"background\"),\n        foreground: color(\"foreground\"),\n        card: { DEFAULT: color(\"card\"), foreground: color(\"card-foreground\") },\n        popover: { DEFAULT: color(\"popover\"), foreground: color(\"popover-foreground\") },\n        primary: {\n          DEFAULT: color(\"primary\"),\n          foreground: color(\"primary-foreground\"),\n          hover: color(\"primary-hover\"),\n        },\n        secondary: {\n          DEFAULT: color(\"secondary\"),\n          foreground: color(\"secondary-foreground\"),\n          hover: color(\"secondary-hover\"),\n        },\n        muted: {\n          DEFAULT: color(\"muted\"),\n          foreground: color(\"muted-foreground\"),\n          subtle: color(\"muted-subtle\"),\n        },\n        accent: { DEFAULT: color(\"accent\"), foreground: color(\"accent-foreground\") },\n        destructive: {\n          DEFAULT: color(\"destructive\"),\n          foreground: color(\"destructive-foreground\"),\n          hover: color(\"destructive-hover\"),\n          subtle: color(\"destructive-subtle\"),\n          border: color(\"destructive-border\"),\n        },\n        border: color(\"border\"),\n        input: color(\"input\"),\n        ring: color(\"ring\"),\n        overlay: color(\"overlay\"),\n        chart: {\n          \"1\": color(\"chart-1\"),\n          \"2\": color(\"chart-2\"),\n          \"3\": color(\"chart-3\"),\n          \"4\": color(\"chart-4\"),\n          \"5\": color(\"chart-5\"),\n        },\n      },\n      borderColor: {\n        // A bare `border` class uses the token, never Tailwind's default gray.\n        DEFAULT: color(\"border\"),\n      },\n      spacing: spacing(),\n      borderRadius: {\n        DEFAULT: \"var(--karni-radius-sm, 0.25rem)\",\n        sm: \"var(--karni-radius-sm, 0.25rem)\",\n        md: \"var(--karni-radius-md, 0.375rem)\",\n        lg: \"var(--karni-radius-lg, 0.5rem)\",\n        xl: \"var(--karni-radius-xl, 0.75rem)\",\n        full: \"var(--karni-radius-full, 9999px)\",\n      },\n      fontFamily: {\n        sans: \"var(--karni-font-sans, ui-sans-serif, system-ui, sans-serif)\",\n        mono: \"var(--karni-font-mono, ui-monospace, monospace)\",\n      },\n      fontSize: fontSize(),\n      fontWeight: {\n        normal: \"var(--karni-font-weight-normal, 400)\",\n        medium: \"var(--karni-font-weight-medium, 500)\",\n        semibold: \"var(--karni-font-weight-semibold, 600)\",\n        bold: \"var(--karni-font-weight-bold, 700)\",\n      },\n      lineHeight: { none: \"var(--karni-font-leading-none, 1)\" },\n      textUnderlineOffset: { \"4\": \"var(--karni-font-underline-offset, 4px)\" },\n      letterSpacing: {\n        tight: \"var(--karni-font-tracking-tight, -0.025em)\",\n        wide: \"var(--karni-font-tracking-wide, 0.025em)\",\n      },\n      boxShadow: {\n        sm: \"var(--karni-shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1))\",\n        DEFAULT: \"var(--karni-shadow, 0 1px 3px 0 rgb(0 0 0 / 0.1))\",\n        md: \"var(--karni-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1))\",\n        lg: \"var(--karni-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1))\",\n      },\n      borderWidth: {\n        DEFAULT: \"var(--karni-border-width, 1px)\",\n        \"2\": \"var(--karni-border-width-2, 2px)\",\n      },\n      divideWidth: { DEFAULT: \"var(--karni-border-width, 1px)\" },\n      outlineWidth: { DEFAULT: \"var(--karni-border-width, 1px)\" },\n      ringWidth: {\n        \"1\": \"var(--karni-ring-width-1, 1px)\",\n        \"2\": \"var(--karni-ring-width, 2px)\",\n      },\n      ringOffsetWidth: { \"2\": \"var(--karni-ring-offset-width, 2px)\" },\n      zIndex: {\n        raised: \"var(--karni-z-raised, 10)\",\n        drawer: \"var(--karni-z-drawer, 40)\",\n        popover: \"var(--karni-z-popover, 50)\",\n        modal: \"var(--karni-z-modal, 50)\",\n        toast: \"var(--karni-z-toast, 100)\",\n      },\n      opacity: {\n        \"50\": \"var(--karni-opacity-50, 0.5)\",\n        \"60\": \"var(--karni-opacity-60, 0.6)\",\n        \"70\": \"var(--karni-opacity-70, 0.7)\",\n        \"90\": \"var(--karni-opacity-90, 0.9)\",\n      },\n      transitionDuration: { DEFAULT: \"var(--karni-duration, 150ms)\" },\n      transitionTimingFunction: { DEFAULT: \"var(--karni-ease, cubic-bezier(0.4, 0, 0.2, 1))\" },\n      animation: {\n        pulse: \"pulse var(--karni-duration-pulse, 2s) cubic-bezier(0.4, 0, 0.6, 1) infinite\",\n        spin: \"spin var(--karni-duration-spin, 1s) linear infinite\",\n      },\n    },\n  },\n} satisfies Omit<Config, \"content\">;\n\nexport default karniPreset;\n"],"mappings":"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"}

package/dist/tailwind-preset.d.ts

@@ -0,0 +1,140 @@
+/** The spacing scale: each step reads --karni-space-<n>, else n × --karni-space-unit. */
+export declare const SPACE_STEPS: readonly [0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96, 128];
+declare const karniPreset: {
+    darkMode: "class";
+    theme: {
+        extend: {
+            colors: {
+                background: string;
+                foreground: string;
+                card: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                popover: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                primary: {
+                    DEFAULT: string;
+                    foreground: string;
+                    hover: string;
+                };
+                secondary: {
+                    DEFAULT: string;
+                    foreground: string;
+                    hover: string;
+                };
+                muted: {
+                    DEFAULT: string;
+                    foreground: string;
+                    subtle: string;
+                };
+                accent: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                destructive: {
+                    DEFAULT: string;
+                    foreground: string;
+                    hover: string;
+                    subtle: string;
+                    border: string;
+                };
+                border: string;
+                input: string;
+                ring: string;
+                overlay: string;
+                chart: {
+                    "1": string;
+                    "2": string;
+                    "3": string;
+                    "4": string;
+                    "5": string;
+                };
+            };
+            borderColor: {
+                DEFAULT: string;
+            };
+            spacing: Record<string, string>;
+            borderRadius: {
+                DEFAULT: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+                full: string;
+            };
+            fontFamily: {
+                sans: string;
+                mono: string;
+            };
+            fontSize: Record<string, [string, {
+                lineHeight: string;
+            }]>;
+            fontWeight: {
+                normal: string;
+                medium: string;
+                semibold: string;
+                bold: string;
+            };
+            lineHeight: {
+                none: string;
+            };
+            textUnderlineOffset: {
+                "4": string;
+            };
+            letterSpacing: {
+                tight: string;
+                wide: string;
+            };
+            boxShadow: {
+                sm: string;
+                DEFAULT: string;
+                md: string;
+                lg: string;
+            };
+            borderWidth: {
+                DEFAULT: string;
+                "2": string;
+            };
+            divideWidth: {
+                DEFAULT: string;
+            };
+            outlineWidth: {
+                DEFAULT: string;
+            };
+            ringWidth: {
+                "1": string;
+                "2": string;
+            };
+            ringOffsetWidth: {
+                "2": string;
+            };
+            zIndex: {
+                raised: string;
+                drawer: string;
+                popover: string;
+                modal: string;
+                toast: string;
+            };
+            opacity: {
+                "50": string;
+                "60": string;
+                "70": string;
+                "90": string;
+            };
+            transitionDuration: {
+                DEFAULT: string;
+            };
+            transitionTimingFunction: {
+                DEFAULT: string;
+            };
+            animation: {
+                pulse: string;
+                spin: string;
+            };
+        };
+    };
+};
+export default karniPreset;