@capsuletech/web-style 0.1.0

package/dist/constants.d.ts

@@ -0,0 +1,2 @@
+export type ComponentStatus = 'idle' | 'success' | 'error' | 'warning';
+export declare const STATUS_VARIABLES: Record<ComponentStatus, Record<string, string>>;

package/dist/createStyle.d.ts

@@ -0,0 +1,4 @@
+export declare function createStyle(cvaFn: any, props: any): {
+    className: import('solid-js').Accessor<string>;
+    style: () => any;
+};

package/dist/editor/ThemeEditor.d.ts

@@ -0,0 +1,17 @@
+import { ITheme } from './types';
+interface IProps {
+    /** Стартовая тема. По умолчанию dark + Blue + radius 0.5rem. */
+    initialTheme?: ITheme;
+    /** Колбэк при каждом изменении (для persist, analytics). */
+    onChange?: (theme: ITheme) => void;
+}
+/**
+ * Главная композиция редактора: левая колонка-Panel + правая Preview.
+ * Тема живёт здесь как signal; каждое изменение applyTheme'ится на
+ * preview-элемент (scoped — не трогает host-app).
+ *
+ * Layout: 380px фиксированный левый стол, оставшееся под preview.
+ * Min-height 100vh, чтобы scroll preview/panel был внутри editor'а.
+ */
+export declare const ThemeEditor: (props: IProps) => import("solid-js").JSX.Element;
+export {};

package/dist/editor/apply.d.ts

@@ -0,0 +1,12 @@
+import { ITheme } from './types';
+/**
+ * Применяет тему к одному элементу как inline CSS-переменные. Так редактор
+ * может быть scoped (только preview-зона) или глобальным (apply на
+ * `document.documentElement`).
+ *
+ * Для `mode` переключает класс `.dark` на элементе — наш `index.css` уже
+ * слушает `.dark` / `[data-theme="dark"]`.
+ */
+export declare const applyTheme: (el: HTMLElement, theme: ITheme) => void;
+/** Полностью убирает все inline-overrides + класс `.dark`. */
+export declare const resetTheme: (el: HTMLElement) => void;

package/dist/editor/export.d.ts

@@ -0,0 +1,9 @@
+import { ITheme } from './types';
+/**
+ * Сериализует текущую тему в CSS-блок, готовый к копипасте в проектный
+ * `globals.css` (или эквивалент). Покрывает только токены, которые реально
+ * редактирует UI — остальные пусть берутся из проектных дефолтов.
+ */
+export declare const exportTheme: (theme: ITheme) => string;
+/** Копирует в clipboard. Возвращает promise (для feedback). */
+export declare const copyTheme: (theme: ITheme) => Promise<void>;

package/dist/editor/index.d.ts

@@ -0,0 +1,7 @@
+export { ThemeEditor } from './ThemeEditor';
+export { applyTheme, resetTheme } from './apply';
+export { exportTheme, copyTheme } from './export';
+export { COLOR_PRESETS, FONT_OPTIONS, DEFAULT_THEME } from './presets';
+export { parseOklch, formatOklch, contrastForeground } from './oklch';
+export type { IOklch } from './oklch';
+export type { IFontOption, IPresetColor, ITheme, ThemeMode } from './types';

package/dist/editor/oklch.d.ts

@@ -0,0 +1,14 @@
+export interface IOklch {
+    l: number;
+    c: number;
+    h: number;
+}
+/** Парсит `'oklch(0.65 0.18 250)'` → `{l, c, h}`. Fallback на black-ish. */
+export declare const parseOklch: (raw: string) => IOklch;
+export declare const formatOklch: (c: IOklch) => string;
+/**
+ * Производит «контрастный» foreground для primary: если primary тёмный
+ * (l < 0.5) → светлый текст, иначе тёмный. Не идеально с точки зрения
+ * WCAG, но достаточно для preview и большинства случаев.
+ */
+export declare const contrastForeground: (primary: string) => string;

package/dist/editor/panel/ExportButton.d.ts

@@ -0,0 +1,6 @@
+import { ITheme } from '../types';
+interface IProps {
+    theme: ITheme;
+}
+export declare const ExportButton: (props: IProps) => import("solid-js").JSX.Element;
+export {};

package/dist/editor/panel/FontControl.d.ts

@@ -0,0 +1,12 @@
+interface IProps {
+    family: string;
+    size: number;
+    onFamilyChange: (stack: string) => void;
+    onSizeChange: (v: number) => void;
+}
+/**
+ * Два контрола: семейство (горизонтальный selector с превью каждого шрифта
+ * собственным `font-family`) и базовый размер (slider).
+ */
+export declare const FontControl: (props: IProps) => import("solid-js").JSX.Element;
+export {};

package/dist/editor/panel/ModeToggle.d.ts

@@ -0,0 +1,11 @@
+import { ThemeMode } from '../types';
+interface IProps {
+    mode: ThemeMode;
+    onChange: (mode: ThemeMode) => void;
+}
+/**
+ * Сегментный switch light/dark. Выбранный сегмент — primary-фон.
+ * Кнопки покрывают всю секцию, чтобы кликабельная зона была щедрой.
+ */
+export declare const ModeToggle: (props: IProps) => import("solid-js").JSX.Element;
+export {};

package/dist/editor/panel/OklchSliders.d.ts

@@ -0,0 +1,10 @@
+interface IProps {
+    value: string;
+    onChange: (oklch: string) => void;
+}
+/**
+ * Три слайдера L/C/H для пиксельной подстройки primary. После выбора
+ * пресета сразу видно текущие значения и можно сместить hue/lightness.
+ */
+export declare const OklchSliders: (props: IProps) => import("solid-js").JSX.Element;
+export {};

package/dist/editor/panel/Panel.d.ts

@@ -0,0 +1,11 @@
+import { ITheme } from '../types';
+interface IProps {
+    theme: ITheme;
+    onChange: (patch: Partial<ITheme>) => void;
+}
+/**
+ * Левая колонка редактора. shadcn-стиль: заголовок страницы наверху,
+ * секции снизу разделены тонкой границей, sticky-footer с export-кнопкой.
+ */
+export declare const Panel: (props: IProps) => import("solid-js").JSX.Element;
+export {};

package/dist/editor/panel/PresetPicker.d.ts

@@ -0,0 +1,11 @@
+interface IProps {
+    current: string;
+    onPick: (oklch: string) => void;
+}
+/**
+ * Сетка пресет-цветов. Activeное состояние — синий ring + лёгкая шкала.
+ * Сами «капельки» — кружок с заливкой `var(--swatch)`, чтобы не зависеть
+ * от темы.
+ */
+export declare const PresetPicker: (props: IProps) => import("solid-js").JSX.Element;
+export {};

package/dist/editor/panel/RadiusControl.d.ts

@@ -0,0 +1,6 @@
+interface IProps {
+    value: number;
+    onChange: (v: number) => void;
+}
+export declare const RadiusControl: (props: IProps) => import("solid-js").JSX.Element;
+export {};

package/dist/editor/panel/Section.d.ts

@@ -0,0 +1,15 @@
+import { Component, JSX } from 'solid-js';
+interface IProps {
+    icon: Component<{
+        size?: number;
+    }>;
+    title: string;
+    description?: string;
+    children: JSX.Element;
+}
+/**
+ * Один блок настроек: иконка + заголовок + подпись + контент. Используется
+ * в Panel для группировки контролов — чтобы не было «свалки слайдеров».
+ */
+export declare const Section: (props: IProps) => JSX.Element;
+export {};

package/dist/editor/panel/Slider.d.ts

@@ -0,0 +1,18 @@
+interface IProps {
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    onChange: (v: number) => void;
+    /** Сколько знаков после точки отображать справа. */
+    precision?: number;
+    /** Единица после числа в подписи (`rem`, `px`...). */
+    unit?: string;
+}
+/**
+ * Тёмный slider в стиле shadcn — толстый track, primary-fill, белый thumb.
+ * Считается через `<input type=range>` чтобы не возиться с pointer-обработкой
+ * самим — а кастомные стили накатываем CSS-классами.
+ */
+export declare const Slider: (props: IProps) => import("solid-js").JSX.Element;
+export {};

package/dist/editor/panel/SpacingControl.d.ts

@@ -0,0 +1,6 @@
+interface IProps {
+    value: number;
+    onChange: (v: number) => void;
+}
+export declare const SpacingControl: (props: IProps) => import("solid-js").JSX.Element;
+export {};

package/dist/editor/presets.d.ts

@@ -0,0 +1,10 @@
+import { IFontOption, IPresetColor, ITheme } from './types';
+/**
+ * Цветовые пресеты primary. Значения подсмотрены у shadcn (OKLCH) и
+ * дают узнаваемые «бренд-настроения». Один OKLCH применяется и в light,
+ * и в dark — shadcn делает так же, тонкая разница компенсируется
+ * остальными токенами темы.
+ */
+export declare const COLOR_PRESETS: IPresetColor[];
+export declare const FONT_OPTIONS: IFontOption[];
+export declare const DEFAULT_THEME: ITheme;

package/dist/editor/preview/Preview.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Превью-сетка. 12-колоночный grid в стиле shadcn'овской «showcase» страницы:
+ * Auth (левая колонка, 5/12), правая часть — metrics + pricing + buttons.
+ *
+ * Все sample-компоненты пишут только в semantic-токены (`bg-card`,
+ * `text-foreground`, `bg-primary`, ...), поэтому редактирование темы
+ * прозрачно меняет всё разом.
+ */
+export declare const Preview: () => import("solid-js").JSX.Element;

package/dist/editor/preview/SampleAuth.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Auth-form sample. Использует только семантические токены — `bg-card`,
+ * `text-foreground`, `border-border`, `bg-primary` — поэтому полностью
+ * реагирует на смену темы в редакторе.
+ */
+export declare const SampleAuth: () => import("solid-js").JSX.Element;

package/dist/editor/preview/SampleButtons.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Гамма кнопок: primary, secondary, ghost, destructive — чтобы видеть,
+ * как тема расходится по разным вариантам разом.
+ */
+export declare const SampleButtons: () => import("solid-js").JSX.Element;

package/dist/editor/preview/SampleMetrics.d.ts

@@ -0,0 +1 @@
+export declare const SampleMetrics: () => import("solid-js").JSX.Element;

package/dist/editor/preview/SamplePricing.d.ts

@@ -0,0 +1 @@
+export declare const SamplePricing: () => import("solid-js").JSX.Element;

package/dist/editor/types.d.ts

@@ -0,0 +1,31 @@
+export type ThemeMode = 'light' | 'dark';
+/**
+ * Один прокручиваемый «дизайн» — то, что меняется в редакторе. Покрывает
+ * shadcn-набор токенов + наши `spacing-base`/`text-base-size`.
+ *
+ * Намеренно flat: проще apply'ить в `style.setProperty` без обхода вложений.
+ */
+export interface ITheme {
+    mode: ThemeMode;
+    /** Primary акцент. OKLCH-строка вида `'oklch(0.65 0.18 250)'`. */
+    primary: string;
+    /** Border-radius в rem. Применяется к `--radius`; sm/md/lg деривированы. */
+    radius: number;
+    /** Базовый отступ в rem. `--spacing-base`. */
+    spacingBase: number;
+    /** Базовый размер шрифта в rem. `--text-base-size`. */
+    fontBaseSize: number;
+    /** font-family. Применяется к scope-элементу. */
+    fontFamily: string;
+}
+export interface IPresetColor {
+    id: string;
+    label: string;
+    /** OKLCH primary для обоих режимов. shadcn держит одинаковый — мы тоже. */
+    primary: string;
+}
+export interface IFontOption {
+    id: string;
+    label: string;
+    stack: string;
+}