@civitai/blocks-react 0.11.2 → 0.12.1

package/dist/ui/TextInput.d.ts

@@ -0,0 +1,26 @@
+export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Visible field label, rendered in a `<label>` linked to the input. */
+    label?: React.ReactNode;
+    /** Helper text under the label, linked via `aria-describedby`. */
+    description?: React.ReactNode;
+    /**
+     * Error message. When set, the input gets `aria-invalid="true"`, the message
+     * is announced (`role="alert"`) and linked via `aria-describedby`.
+     */
+    error?: React.ReactNode;
+    /** Mark required: shows an asterisk and sets the native `required`. */
+    required?: boolean;
+    /** Class on the wrapping element (the `<input>` is `inputClassName`). */
+    className?: string;
+    /** Class applied to the native `<input>`. */
+    inputClassName?: string;
+}
+/**
+ * Labeled text input. Wraps a native `<input>` (ref-forwarded). The label,
+ * description and error are wired to the control via `htmlFor` / `id` /
+ * `aria-describedby` / `aria-invalid` so the field is announced correctly.
+ *
+ * Auto-themed via `useBlocksStyles()`.
+ */
+export declare const TextInput: import("react").ForwardRefExoticComponent<TextInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=TextInput.d.ts.map

package/dist/ui/TextInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/ui/TextInput.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACjE,wEAAwE;IACxE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,kEAAkE;IAClE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,6GAmErB,CAAC"}

package/dist/ui/TextInput.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import { useBlocksStyles } from './styles.js';
+/**
+ * Labeled text input. Wraps a native `<input>` (ref-forwarded). The label,
+ * description and error are wired to the control via `htmlFor` / `id` /
+ * `aria-describedby` / `aria-invalid` so the field is announced correctly.
+ *
+ * Auto-themed via `useBlocksStyles()`.
+ */
+export const TextInput = forwardRef(function TextInput({ label, description, error, required, className, inputClassName, id, style, ...rest }, ref) {
+    useBlocksStyles();
+    const reactId = useId();
+    const inputId = id ?? `ci-input-${reactId}`;
+    const descId = `${inputId}-desc`;
+    const errId = `${inputId}-err`;
+    const hasError = error != null && error !== false;
+    const describedBy = [description != null ? descId : null, hasError ? errId : null]
+        .filter(Boolean)
+        .join(' ') || undefined;
+    return (_jsxs("div", { className: className, "data-civitai-ui": "text-input", "data-invalid": hasError ? 'true' : undefined, style: style, children: [label != null ? (_jsxs("label", { htmlFor: inputId, "data-civitai-ui-label": true, children: [label, required ? (_jsx("span", { "data-civitai-ui-required": true, "aria-hidden": "true", children: "*" })) : null] })) : null, description != null ? (_jsx("span", { id: descId, "data-civitai-ui-description": true, children: description })) : null, _jsx("input", { ref: ref, ...rest, id: inputId, className: inputClassName, "data-civitai-ui-control": true, required: required, "aria-invalid": hasError || undefined, "aria-describedby": describedBy, "aria-required": required || undefined }), hasError ? (_jsx("span", { id: errId, "data-civitai-ui-error": true, role: "alert", children: error })) : null] }));
+});
+//# sourceMappingURL=TextInput.js.map

package/dist/ui/TextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../src/ui/TextInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAqB9C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CACjC,SAAS,SAAS,CAChB,EACE,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,SAAS,EACT,cAAc,EACd,EAAE,EACF,KAAK,EACL,GAAG,IAAI,EACR,EACD,GAAG;IAEH,eAAe,EAAE,CAAC;IAClB,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IACxB,MAAM,OAAO,GAAG,EAAE,IAAI,YAAY,OAAO,EAAE,CAAC;IAC5C,MAAM,MAAM,GAAG,GAAG,OAAO,OAAO,CAAC;IACjC,MAAM,KAAK,GAAG,GAAG,OAAO,MAAM,CAAC;IAC/B,MAAM,QAAQ,GAAG,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,KAAK,CAAC;IAClD,MAAM,WAAW,GACf,CAAC,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;SAC3D,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS,CAAC;IAE5B,OAAO,CACL,eACE,SAAS,EAAE,SAAS,qBACJ,YAAY,kBACd,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC3C,KAAK,EAAE,KAAK,aAEX,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,CACf,iBAAO,OAAO,EAAE,OAAO,4CACpB,KAAK,EACL,QAAQ,CAAC,CAAC,CAAC,CACV,gEAA2C,MAAM,kBAE1C,CACR,CAAC,CAAC,CAAC,IAAI,IACF,CACT,CAAC,CAAC,CAAC,IAAI,EACP,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,CACrB,eAAM,EAAE,EAAE,MAAM,iDACb,WAAW,GACP,CACR,CAAC,CAAC,CAAC,IAAI,EACR,gBACE,GAAG,EAAE,GAAG,KACJ,IAAI,EACR,EAAE,EAAE,OAAO,EACX,SAAS,EAAE,cAAc,mCAEzB,QAAQ,EAAE,QAAQ,kBACJ,QAAQ,IAAI,SAAS,sBACjB,WAAW,mBACd,QAAQ,IAAI,SAAS,GACpC,EACD,QAAQ,CAAC,CAAC,CAAC,CACV,eAAM,EAAE,EAAE,KAAK,iCAAwB,IAAI,EAAC,OAAO,YAChD,KAAK,GACD,CACR,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/ui/Textarea.d.ts

@@ -0,0 +1,32 @@
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Visible field label, rendered in a `<label>` linked to the textarea. */
+    label?: React.ReactNode;
+    /** Helper text under the label, linked via `aria-describedby`. */
+    description?: React.ReactNode;
+    /**
+     * Error message. When set, the control gets `aria-invalid="true"`, the
+     * message is announced (`role="alert"`) and linked via `aria-describedby`.
+     */
+    error?: React.ReactNode;
+    /** Mark required: shows an asterisk and sets the native `required`. */
+    required?: boolean;
+    /**
+     * Initial visible rows. Alias of the native `rows`; `minRows` wins if both
+     * are passed (kept for parity with Mantine's `minRows`). This is a static
+     * minimum — v0 does not auto-grow the textarea.
+     */
+    minRows?: number;
+    /** Class on the wrapping element. */
+    className?: string;
+    /** Class applied to the native `<textarea>`. */
+    textareaClassName?: string;
+}
+/**
+ * Labeled multi-line text input. Wraps a native `<textarea>` (ref-forwarded),
+ * same label/description/error wiring as `<TextInput>`. Auto-themed.
+ *
+ * `minRows` is a static minimum-rows hint (maps to the native `rows`); v0 does
+ * not auto-grow — note this limitation in the README.
+ */
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=Textarea.d.ts.map

package/dist/ui/Textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/ui/Textarea.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;IACzD,2EAA2E;IAC3E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,kEAAkE;IAClE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,+GAsEpB,CAAC"}

package/dist/ui/Textarea.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import { useBlocksStyles } from './styles.js';
+/**
+ * Labeled multi-line text input. Wraps a native `<textarea>` (ref-forwarded),
+ * same label/description/error wiring as `<TextInput>`. Auto-themed.
+ *
+ * `minRows` is a static minimum-rows hint (maps to the native `rows`); v0 does
+ * not auto-grow — note this limitation in the README.
+ */
+export const Textarea = forwardRef(function Textarea({ label, description, error, required, minRows, rows, className, textareaClassName, id, style, ...rest }, ref) {
+    useBlocksStyles();
+    const reactId = useId();
+    const inputId = id ?? `ci-textarea-${reactId}`;
+    const descId = `${inputId}-desc`;
+    const errId = `${inputId}-err`;
+    const hasError = error != null && error !== false;
+    const describedBy = [description != null ? descId : null, hasError ? errId : null]
+        .filter(Boolean)
+        .join(' ') || undefined;
+    return (_jsxs("div", { className: className, "data-civitai-ui": "textarea", "data-invalid": hasError ? 'true' : undefined, style: style, children: [label != null ? (_jsxs("label", { htmlFor: inputId, "data-civitai-ui-label": true, children: [label, required ? (_jsx("span", { "data-civitai-ui-required": true, "aria-hidden": "true", children: "*" })) : null] })) : null, description != null ? (_jsx("span", { id: descId, "data-civitai-ui-description": true, children: description })) : null, _jsx("textarea", { ref: ref, ...rest, id: inputId, className: textareaClassName, "data-civitai-ui-control": true, rows: minRows ?? rows ?? 3, required: required, "aria-invalid": hasError || undefined, "aria-describedby": describedBy, "aria-required": required || undefined }), hasError ? (_jsx("span", { id: errId, "data-civitai-ui-error": true, role: "alert", children: error })) : null] }));
+});
+//# sourceMappingURL=Textarea.js.map

package/dist/ui/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/ui/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AA2B9C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,SAAS,QAAQ,CACf,EACE,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,SAAS,EACT,iBAAiB,EACjB,EAAE,EACF,KAAK,EACL,GAAG,IAAI,EACR,EACD,GAAG;IAEH,eAAe,EAAE,CAAC;IAClB,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IACxB,MAAM,OAAO,GAAG,EAAE,IAAI,eAAe,OAAO,EAAE,CAAC;IAC/C,MAAM,MAAM,GAAG,GAAG,OAAO,OAAO,CAAC;IACjC,MAAM,KAAK,GAAG,GAAG,OAAO,MAAM,CAAC;IAC/B,MAAM,QAAQ,GAAG,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,KAAK,CAAC;IAClD,MAAM,WAAW,GACf,CAAC,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;SAC3D,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS,CAAC;IAE5B,OAAO,CACL,eACE,SAAS,EAAE,SAAS,qBACJ,UAAU,kBACZ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC3C,KAAK,EAAE,KAAK,aAEX,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,CACf,iBAAO,OAAO,EAAE,OAAO,4CACpB,KAAK,EACL,QAAQ,CAAC,CAAC,CAAC,CACV,gEAA2C,MAAM,kBAE1C,CACR,CAAC,CAAC,CAAC,IAAI,IACF,CACT,CAAC,CAAC,CAAC,IAAI,EACP,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,CACrB,eAAM,EAAE,EAAE,MAAM,iDACb,WAAW,GACP,CACR,CAAC,CAAC,CAAC,IAAI,EACR,mBACE,GAAG,EAAE,GAAG,KACJ,IAAI,EACR,EAAE,EAAE,OAAO,EACX,SAAS,EAAE,iBAAiB,mCAE5B,IAAI,EAAE,OAAO,IAAI,IAAI,IAAI,CAAC,EAC1B,QAAQ,EAAE,QAAQ,kBACJ,QAAQ,IAAI,SAAS,sBACjB,WAAW,mBACd,QAAQ,IAAI,SAAS,GACpC,EACD,QAAQ,CAAC,CAAC,CAAC,CACV,eAAM,EAAE,EAAE,KAAK,iCAAwB,IAAI,EAAC,OAAO,YAChD,KAAK,GACD,CACR,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/ui/index.d.ts

@@ -1,11 +1,40 @@
 /**
  * `@civitai/blocks-react/ui` — opinionated UI components for App Block authoring.
  *
- * v0 scope: just the generic, manifest-driven `SettingsForm`. The W6
- * component pack (Button, Input, Card, Modal, …) will land here too as
- * separate exports; importing from `/ui` (not the root) keeps the
- * transport-only consumer's bundle lean.
+ * Two surfaces:
+ *
+ * 1. The headless, manifest-driven `SettingsForm` (W3 — host-themed native
+ *    controls; its contract is intentionally unstyled).
+ * 2. The W6 component pack — a small, Civitai-looking, self-styled component
+ *    set (Button, TextInput, Textarea, Card, Stack, Group, Alert, Loader,
+ *    Badge, Modal). Zero setup: rendering any of them runs `useBlocksStyles()`
+ *    which injects the pack's CSS into the block document's `<head>` once.
+ *    Theme via your block's `data-theme` root (gotcha #60).
+ *
+ * Importing from `/ui` (not the package root) keeps a transport-only block's
+ * bundle lean.
  */
 export { SettingsForm, SettingsFormError, isFieldVisible } from './SettingsForm.js';
 export type { SettingsFormProps } from './SettingsForm.js';
+export { injectBlocksStyles, useBlocksStyles, BLOCKS_UI_STYLES, } from './styles.js';
+export { Button } from './Button.js';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button.js';
+export { TextInput } from './TextInput.js';
+export type { TextInputProps } from './TextInput.js';
+export { Textarea } from './Textarea.js';
+export type { TextareaProps } from './Textarea.js';
+export { Card } from './Card.js';
+export type { CardProps, CardPadding } from './Card.js';
+export { Stack } from './Stack.js';
+export type { StackProps } from './Stack.js';
+export { Group } from './Group.js';
+export type { GroupProps } from './Group.js';
+export { Alert } from './Alert.js';
+export type { AlertProps, AlertColor } from './Alert.js';
+export { Loader } from './Loader.js';
+export type { LoaderProps, LoaderSize } from './Loader.js';
+export { Badge } from './Badge.js';
+export type { BadgeProps, BadgeVariant, BadgeSize } from './Badge.js';
+export { Modal } from './Modal.js';
+export type { ModalProps, ModalSize } from './Modal.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACpF,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACpF,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAG3D,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,gBAAgB,GACjB,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE1E,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE3D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEtE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC"}

package/dist/ui/index.js

@@ -1,10 +1,32 @@
 /**
  * `@civitai/blocks-react/ui` — opinionated UI components for App Block authoring.
  *
- * v0 scope: just the generic, manifest-driven `SettingsForm`. The W6
- * component pack (Button, Input, Card, Modal, …) will land here too as
- * separate exports; importing from `/ui` (not the root) keeps the
- * transport-only consumer's bundle lean.
+ * Two surfaces:
+ *
+ * 1. The headless, manifest-driven `SettingsForm` (W3 — host-themed native
+ *    controls; its contract is intentionally unstyled).
+ * 2. The W6 component pack — a small, Civitai-looking, self-styled component
+ *    set (Button, TextInput, Textarea, Card, Stack, Group, Alert, Loader,
+ *    Badge, Modal). Zero setup: rendering any of them runs `useBlocksStyles()`
+ *    which injects the pack's CSS into the block document's `<head>` once.
+ *    Theme via your block's `data-theme` root (gotcha #60).
+ *
+ * Importing from `/ui` (not the package root) keeps a transport-only block's
+ * bundle lean.
  */
+// W3 — manifest-driven settings form (host-themed native controls).
 export { SettingsForm, SettingsFormError, isFieldVisible } from './SettingsForm.js';
+// W6 — runtime style injection.
+export { injectBlocksStyles, useBlocksStyles, BLOCKS_UI_STYLES, } from './styles.js';
+// W6 — component pack.
+export { Button } from './Button.js';
+export { TextInput } from './TextInput.js';
+export { Textarea } from './Textarea.js';
+export { Card } from './Card.js';
+export { Stack } from './Stack.js';
+export { Group } from './Group.js';
+export { Alert } from './Alert.js';
+export { Loader } from './Loader.js';
+export { Badge } from './Badge.js';
+export { Modal } from './Modal.js';
 //# sourceMappingURL=index.js.map

package/dist/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,oEAAoE;AACpE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGpF,gCAAgC;AAChC,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,gBAAgB,GACjB,MAAM,aAAa,CAAC;AAErB,uBAAuB;AACvB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG3C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAGjC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAGnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAGnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAGnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAGnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC"}

package/dist/ui/styles.d.ts

@@ -0,0 +1,19 @@
+/** The full stylesheet shipped by the pack. Exported for SSR/manual use. */
+export declare const BLOCKS_UI_STYLES = "\n:root {\n  --ci-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  --ci-radius: 8px;\n  --ci-color-text: #1a1a1a;\n  --ci-color-text-dimmed: #6b7280;\n  --ci-color-surface: #ffffff;\n  --ci-color-surface-2: #f4f4f5;\n  --ci-color-border: #e0e0e3;\n  --ci-color-primary: #228be6;\n  --ci-color-primary-hover: #1c7ed6;\n  --ci-color-primary-fg: #ffffff;\n  --ci-color-error: #e03131;\n  --ci-color-success: #2f9e44;\n  --ci-color-warning: #f08c00;\n  --ci-color-info: #1971c2;\n}\n\n[data-theme='light'] {\n  --ci-color-text: #1a1a1a;\n  --ci-color-text-dimmed: #6b7280;\n  --ci-color-surface: #ffffff;\n  --ci-color-surface-2: #f4f4f5;\n  --ci-color-border: #e0e0e3;\n}\n\n[data-theme='dark'] {\n  --ci-color-text: #e6e6e6;\n  --ci-color-text-dimmed: #909296;\n  --ci-color-surface: #1a1b1e;\n  --ci-color-surface-2: #25262b;\n  --ci-color-border: #2c2e33;\n  --ci-color-primary: #228be6;\n  --ci-color-primary-hover: #339af0;\n  --ci-color-primary-fg: #ffffff;\n  --ci-color-error: #ff6b6b;\n  --ci-color-success: #51cf66;\n  --ci-color-warning: #ffa94d;\n  --ci-color-info: #4dabf7;\n}\n\n\n[data-civitai-ui] {\n  box-sizing: border-box;\n  font-family: var(--ci-font);\n}\n[data-civitai-ui] *,\n[data-civitai-ui] *::before,\n[data-civitai-ui] *::after {\n  box-sizing: border-box;\n}\n\n/* ----- Button ----- */\n[data-civitai-ui='button'] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  border: 1px solid transparent;\n  border-radius: var(--ci-radius);\n  font-family: var(--ci-font);\n  font-weight: 600;\n  line-height: 1;\n  cursor: pointer;\n  user-select: none;\n  text-decoration: none;\n  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;\n  background: var(--ci-color-primary);\n  color: var(--ci-color-primary-fg);\n}\n[data-civitai-ui='button'][data-size='sm'] { height: 30px; padding: 0 14px; font-size: 13px; }\n[data-civitai-ui='button'][data-size='md'] { height: 36px; padding: 0 18px; font-size: 14px; }\n[data-civitai-ui='button'][data-size='lg'] { height: 44px; padding: 0 22px; font-size: 16px; }\n[data-civitai-ui='button'][data-full-width='true'] { width: 100%; }\n[data-civitai-ui='button'][data-variant='filled'] {\n  background: var(--ci-color-primary);\n  color: var(--ci-color-primary-fg);\n  border-color: var(--ci-color-primary);\n}\n[data-civitai-ui='button'][data-variant='filled']:hover:not(:disabled) {\n  background: var(--ci-color-primary-hover);\n  border-color: var(--ci-color-primary-hover);\n}\n[data-civitai-ui='button'][data-variant='light'] {\n  background: color-mix(in srgb, var(--ci-color-primary) 12%, transparent);\n  color: var(--ci-color-primary);\n  border-color: transparent;\n}\n[data-civitai-ui='button'][data-variant='light']:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--ci-color-primary) 22%, transparent);\n}\n[data-civitai-ui='button'][data-variant='outline'] {\n  background: transparent;\n  color: var(--ci-color-primary);\n  border-color: var(--ci-color-primary);\n}\n[data-civitai-ui='button'][data-variant='outline']:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--ci-color-primary) 10%, transparent);\n}\n[data-civitai-ui='button'][data-variant='subtle'] {\n  background: transparent;\n  color: var(--ci-color-primary);\n  border-color: transparent;\n}\n[data-civitai-ui='button'][data-variant='subtle']:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--ci-color-primary) 10%, transparent);\n}\n[data-civitai-ui='button']:disabled,\n[data-civitai-ui='button'][aria-busy='true'] {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n[data-civitai-ui='button'] [data-civitai-ui-section] {\n  display: inline-flex;\n  align-items: center;\n}\n\n/* ----- TextInput / Textarea ----- */\n[data-civitai-ui='text-input'],\n[data-civitai-ui='textarea'] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n[data-civitai-ui-label] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--ci-color-text);\n}\n[data-civitai-ui-required] {\n  color: var(--ci-color-error);\n  margin-left: 2px;\n}\n[data-civitai-ui-description] {\n  font-size: 12px;\n  color: var(--ci-color-text-dimmed);\n}\n[data-civitai-ui-error] {\n  font-size: 12px;\n  color: var(--ci-color-error);\n}\n[data-civitai-ui-control] {\n  width: 100%;\n  font-family: var(--ci-font);\n  font-size: 14px;\n  color: var(--ci-color-text);\n  background: var(--ci-color-surface);\n  border: 1px solid var(--ci-color-border);\n  border-radius: var(--ci-radius);\n  padding: 8px 12px;\n  transition: border-color 120ms ease;\n}\n[data-civitai-ui-control]:focus {\n  outline: none;\n  border-color: var(--ci-color-primary);\n}\n[data-civitai-ui-control][aria-invalid='true'] {\n  border-color: var(--ci-color-error);\n}\n[data-civitai-ui-control]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\ntextarea[data-civitai-ui-control] {\n  resize: vertical;\n  line-height: 1.5;\n}\n\n/* ----- Card ----- */\n[data-civitai-ui='card'] {\n  background: var(--ci-color-surface);\n  border-radius: var(--ci-radius);\n  color: var(--ci-color-text);\n}\n[data-civitai-ui='card'][data-with-border='true'] {\n  border: 1px solid var(--ci-color-border);\n}\n[data-civitai-ui='card'][data-padding='sm'] { padding: 10px; }\n[data-civitai-ui='card'][data-padding='md'] { padding: 16px; }\n[data-civitai-ui='card'][data-padding='lg'] { padding: 24px; }\n\n/* ----- Stack / Group ----- */\n[data-civitai-ui='stack'] {\n  display: flex;\n  flex-direction: column;\n}\n[data-civitai-ui='group'] {\n  display: flex;\n  flex-direction: row;\n}\n\n/* ----- Alert ----- */\n[data-civitai-ui='alert'] {\n  display: flex;\n  gap: 10px;\n  align-items: flex-start;\n  padding: 12px 14px;\n  border-radius: var(--ci-radius);\n  border: 1px solid transparent;\n  font-size: 14px;\n  color: var(--ci-color-text);\n}\n[data-civitai-ui='alert'][data-color='info'] {\n  background: color-mix(in srgb, var(--ci-color-info) 12%, transparent);\n  border-color: color-mix(in srgb, var(--ci-color-info) 35%, transparent);\n}\n[data-civitai-ui='alert'][data-color='success'] {\n  background: color-mix(in srgb, var(--ci-color-success) 12%, transparent);\n  border-color: color-mix(in srgb, var(--ci-color-success) 35%, transparent);\n}\n[data-civitai-ui='alert'][data-color='warning'] {\n  background: color-mix(in srgb, var(--ci-color-warning) 14%, transparent);\n  border-color: color-mix(in srgb, var(--ci-color-warning) 35%, transparent);\n}\n[data-civitai-ui='alert'][data-color='error'] {\n  background: color-mix(in srgb, var(--ci-color-error) 12%, transparent);\n  border-color: color-mix(in srgb, var(--ci-color-error) 35%, transparent);\n}\n[data-civitai-ui='alert'] [data-civitai-ui-alert-body] {\n  flex: 1;\n  min-width: 0;\n}\n[data-civitai-ui='alert'] [data-civitai-ui-alert-title] {\n  font-weight: 600;\n  margin-bottom: 2px;\n}\n[data-civitai-ui='alert'] [data-civitai-ui-alert-close] {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  color: inherit;\n  font-size: 16px;\n  line-height: 1;\n  padding: 0;\n  opacity: 0.7;\n}\n[data-civitai-ui='alert'] [data-civitai-ui-alert-close]:hover {\n  opacity: 1;\n}\n\n/* ----- Loader ----- */\n[data-civitai-ui='loader'] {\n  display: inline-block;\n  border-radius: 50%;\n  border-style: solid;\n  border-color: color-mix(in srgb, currentColor 25%, transparent);\n  border-top-color: currentColor;\n  color: var(--ci-color-primary);\n  animation: civitai-ui-spin 0.7s linear infinite;\n}\n[data-civitai-ui='loader'][data-size='sm'] { width: 16px; height: 16px; border-width: 2px; }\n[data-civitai-ui='loader'][data-size='md'] { width: 22px; height: 22px; border-width: 3px; }\n[data-civitai-ui='loader'][data-size='lg'] { width: 32px; height: 32px; border-width: 4px; }\n@keyframes civitai-ui-spin {\n  to { transform: rotate(360deg); }\n}\n[data-civitai-ui='button'] [data-civitai-ui='loader'] {\n  color: currentColor;\n}\n\n/* ----- Badge ----- */\n[data-civitai-ui='badge'] {\n  display: inline-flex;\n  align-items: center;\n  border: 1px solid transparent;\n  border-radius: 999px;\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  text-transform: uppercase;\n  letter-spacing: 0.02em;\n}\n[data-civitai-ui='badge'][data-size='sm'] { height: 18px; padding: 0 8px; font-size: 10px; }\n[data-civitai-ui='badge'][data-size='md'] { height: 22px; padding: 0 10px; font-size: 11px; }\n[data-civitai-ui='badge'][data-size='lg'] { height: 26px; padding: 0 12px; font-size: 13px; }\n[data-civitai-ui='badge'][data-variant='filled'] {\n  background: var(--ci-color-primary);\n  color: var(--ci-color-primary-fg);\n  border-color: var(--ci-color-primary);\n}\n[data-civitai-ui='badge'][data-variant='light'] {\n  background: color-mix(in srgb, var(--ci-color-primary) 14%, transparent);\n  color: var(--ci-color-primary);\n}\n[data-civitai-ui='badge'][data-variant='outline'] {\n  background: transparent;\n  color: var(--ci-color-primary);\n  border-color: var(--ci-color-primary);\n}\n\n/* ----- Modal ----- */\n[data-civitai-ui='modal-overlay'] {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.55);\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 32px 16px;\n  overflow-y: auto;\n  z-index: 1000;\n}\n[data-civitai-ui='modal'] {\n  background: var(--ci-color-surface);\n  color: var(--ci-color-text);\n  border: 1px solid var(--ci-color-border);\n  border-radius: var(--ci-radius);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);\n  width: 100%;\n  max-width: 440px;\n  outline: none;\n}\n[data-civitai-ui='modal'][data-size='sm'] { max-width: 340px; }\n[data-civitai-ui='modal'][data-size='md'] { max-width: 440px; }\n[data-civitai-ui='modal'][data-size='lg'] { max-width: 620px; }\n[data-civitai-ui='modal'] [data-civitai-ui-modal-header] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 16px 18px;\n  border-bottom: 1px solid var(--ci-color-border);\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-title] {\n  font-size: 16px;\n  font-weight: 700;\n  margin: 0;\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-close] {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  color: var(--ci-color-text-dimmed);\n  font-size: 20px;\n  line-height: 1;\n  padding: 0;\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-close]:hover {\n  color: var(--ci-color-text);\n}\n[data-civitai-ui='modal'] [data-civitai-ui-modal-body] {\n  padding: 18px;\n}\n";
+/**
+ * Inject the pack's stylesheet into a document's `<head>` exactly once.
+ * Idempotent: subsequent calls (including from other components) detect the
+ * marker `<style>` and no-op. Safe to call from any component's effect.
+ *
+ * @param doc Target document. Defaults to the ambient `document`. No-op when
+ *   no document is available (e.g. SSR) — callers in the browser get styling,
+ *   server renders fall back to the unstyled-but-functional markup.
+ */
+export declare function injectBlocksStyles(doc?: Document): void;
+/**
+ * Hook that injects the pack's styles once on mount. Every `/ui` component
+ * calls this so rendering any of them is enough to get the styling — the
+ * author never imports CSS or runs a setup step.
+ */
+export declare function useBlocksStyles(): void;
+//# sourceMappingURL=styles.d.ts.map

package/dist/ui/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AA4XA,4EAA4E;AAC5E,eAAO,MAAM,gBAAgB,uzUAAgC,CAAC;AAE9D;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,CAgBvD;AAED;;;;GAIG;AACH,wBAAgB,eAAe,IAAI,IAAI,CAItC"}