@webflare/ui 0.0.0-stage → 0.1.1

package/dist/internal/controls/choiceStyles.d.ts

@@ -0,0 +1,64 @@
+/** Checkbox: label wrapper, box, check indicator, text. */
+export declare const checkboxStyles: import("../../../styled-system/types").SvaRuntimeFn<"root" | "indicator" | "label" | "control", {
+    size: {
+        sm: {
+            control: {
+                width: "1rem";
+                height: "1rem";
+            };
+            label: {
+                fontSize: "sm";
+            };
+        };
+        md: {
+            control: {
+                width: "1.125rem";
+                height: "1.125rem";
+            };
+            label: {
+                fontSize: "md";
+            };
+        };
+        lg: {
+            control: {
+                width: "1.375rem";
+                height: "1.375rem";
+            };
+            label: {
+                fontSize: "lg";
+            };
+        };
+    };
+}>;
+/** Radio group: shares the box, label, and size scale with the checkbox. */
+export declare const radioGroupStyles: import("../../../styled-system/types").SvaRuntimeFn<"root" | "item" | "indicator" | "label" | "control", {
+    size: {
+        sm: {
+            control: {
+                width: "1rem";
+                height: "1rem";
+            };
+            label: {
+                fontSize: "sm";
+            };
+        };
+        md: {
+            control: {
+                width: "1.125rem";
+                height: "1.125rem";
+            };
+            label: {
+                fontSize: "md";
+            };
+        };
+        lg: {
+            control: {
+                width: "1.375rem";
+                height: "1.375rem";
+            };
+            label: {
+                fontSize: "lg";
+            };
+        };
+    };
+}>;

package/dist/internal/controls/context.d.ts

@@ -0,0 +1,10 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+export type FieldContext = {
+    fieldId: ComputedRef<string>;
+    errorId: ComputedRef<string | null>;
+    messageId: ComputedRef<string | null>;
+    hasError: ComputedRef<boolean>;
+    errorMessage: ComputedRef<string | null>;
+    message: ComputedRef<string | null>;
+};
+export declare const fieldContextKey: InjectionKey<FieldContext>;

package/dist/internal/controls/controlStyles.d.ts

@@ -0,0 +1,54 @@
+/** Text-like field controls: input, textarea, and the select trigger. */
+export declare const controlStyles: import("../../../styled-system/types").CvaRuntimeFn<{
+    element: {
+        input: {};
+        textarea: {
+            alignItems: "flex-start";
+            resize: "vertical";
+            minHeight: "6rem";
+        };
+        select: {
+            justifyContent: "space-between";
+            gap: "md";
+            cursor: "pointer";
+            textAlign: "left";
+            _disabled: {
+                cursor: "not-allowed";
+            };
+        };
+    };
+    size: {
+        sm: {
+            paddingX: "md";
+            paddingY: "xs";
+            fontSize: "sm";
+        };
+        md: {
+            paddingX: "lg";
+            paddingY: "sm";
+            fontSize: "md";
+        };
+        lg: {
+            paddingX: "xl";
+            paddingY: "md";
+            fontSize: "lg";
+        };
+    };
+    valid: {
+        true: {
+            borderColor: "success.subtle !important";
+            _focus: {
+                borderColor: "success.subtle !important";
+                outlineColor: "success.subtle/50 !important";
+            };
+        };
+        false: {
+            borderColor: "danger.subtle !important";
+            _focus: {
+                borderColor: "danger.subtle !important";
+                outlineColor: "danger.subtle/50 !important";
+            };
+        };
+        none: {};
+    };
+}>;

package/dist/internal/controls/index.d.ts

@@ -0,0 +1,14 @@
+import ControlInput from './ControlInput.vue';
+import ControlTextarea from './ControlTextarea.vue';
+import ControlSelect from './ControlSelect.vue';
+import ControlCheckbox from './ControlCheckbox.vue';
+import ControlRadioGroup from './ControlRadioGroup.vue';
+import ControlSwitch from './ControlSwitch.vue';
+import ControlUrl from './ControlUrl.vue';
+export type { ControlInputType, ControlSize, ControlValid, FieldOption, UrlCss } from './types';
+export type { UrlProtocol } from './urlUtils';
+export { fieldContextKey } from './context';
+export type { FieldContext } from './context';
+export { useFieldControl } from './useFieldControl';
+export { parseUrlValue, sanitizeHostPathInput, joinUrl } from './urlUtils';
+export { ControlInput, ControlTextarea, ControlSelect, ControlCheckbox, ControlRadioGroup, ControlSwitch, ControlUrl, };

package/dist/internal/controls/selectStyles.d.ts

@@ -0,0 +1,2 @@
+/** Select menu. The trigger uses `controlStyles` with `element: 'select'`. */
+export declare const selectStyles: import("../../../styled-system/types").SvaRuntimeFn<"item" | "content" | "viewport" | "itemIndicator", import("../../../styled-system/types").SlotRecipeVariantRecord<"item" | "content" | "viewport" | "itemIndicator">>;

package/dist/internal/controls/switchStyles.d.ts

@@ -0,0 +1,46 @@
+export declare const switchStyles: import("../../../styled-system/types").SvaRuntimeFn<"root" | "label" | "track" | "thumb", {
+    size: {
+        sm: {
+            track: {
+                width: "32px";
+            };
+            thumb: {
+                width: "12px";
+                '[data-state="checked"] &': {
+                    translateX: "14px";
+                };
+            };
+            label: {
+                fontSize: "sm";
+            };
+        };
+        md: {
+            track: {
+                width: "40px";
+            };
+            thumb: {
+                width: "16px";
+                '[data-state="checked"] &': {
+                    translateX: "18px";
+                };
+            };
+            label: {
+                fontSize: "md";
+            };
+        };
+        lg: {
+            track: {
+                width: "48px";
+            };
+            thumb: {
+                width: "20px";
+                '[data-state="checked"] &': {
+                    translateX: "22px";
+                };
+            };
+            label: {
+                fontSize: "lg";
+            };
+        };
+    };
+}>;

package/dist/internal/controls/types.d.ts

@@ -0,0 +1,10 @@
+import type { CssMap } from '../css';
+export type ControlSize = 'sm' | 'md' | 'lg';
+export type ControlValid = true | false | 'none';
+export type ControlInputType = 'text' | 'email' | 'url' | 'tel' | 'search' | 'password' | 'number' | 'date';
+export type FieldOption = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+export type UrlCss = CssMap<'root' | 'protocol' | 'input'>;

package/dist/internal/controls/urlStyles.d.ts

@@ -0,0 +1,84 @@
+/** URL field: clickable protocol prefix plus host/path input. */
+export declare const urlStyles: import("../../../styled-system/types").SvaRuntimeFn<"root" | "input" | "protocol", {
+    size: {
+        sm: {
+            root: {
+                fontSize: "sm";
+            };
+            protocol: {
+                paddingInline: "sm";
+                paddingBlock: "xs";
+            };
+            input: {
+                paddingInlineStart: "sm";
+                paddingInlineEnd: "md";
+                paddingBlock: "xs";
+            };
+        };
+        md: {
+            root: {
+                fontSize: "md";
+            };
+            protocol: {
+                paddingInline: "sm";
+                paddingBlock: "sm";
+            };
+            input: {
+                paddingInlineStart: "sm";
+                paddingInlineEnd: "lg";
+                paddingBlock: "sm";
+            };
+        };
+        lg: {
+            root: {
+                fontSize: "lg";
+            };
+            protocol: {
+                paddingInline: "md";
+                paddingBlock: "md";
+            };
+            input: {
+                paddingInlineStart: "md";
+                paddingInlineEnd: "xl";
+                paddingBlock: "md";
+            };
+        };
+    };
+    valid: {
+        true: {
+            root: {
+                borderColor: "success.subtle !important";
+                _focusWithin: {
+                    borderColor: "success.subtle !important";
+                    outlineColor: "success.subtle/50 !important";
+                };
+            };
+        };
+        false: {
+            root: {
+                borderColor: "danger.subtle !important";
+                _focusWithin: {
+                    borderColor: "danger.subtle !important";
+                    outlineColor: "danger.subtle/50 !important";
+                };
+            };
+        };
+        none: {};
+    };
+    secure: {
+        true: {
+            protocol: {
+                '& .icon': {
+                    color: "success.subtle";
+                };
+            };
+        };
+        false: {
+            protocol: {
+                '& .icon': {
+                    color: "text.placeholder";
+                };
+            };
+        };
+    };
+}>;

package/dist/internal/controls/urlUtils.d.ts

@@ -0,0 +1,14 @@
+export type UrlProtocol = 'http' | 'https';
+export declare function parseUrlValue(value: string | null | undefined, defaultProtocol?: UrlProtocol): {
+    protocol: UrlProtocol;
+    hostPath: string;
+};
+/**
+ * Strip a leading http(s):// (or //) from user input/paste and capture the protocol.
+ * Input without a scheme is returned unchanged, so typing is not disturbed.
+ */
+export declare function sanitizeHostPathInput(input: string): {
+    protocol?: UrlProtocol;
+    hostPath: string;
+};
+export declare function joinUrl(protocol: UrlProtocol, hostPath: string): string;

package/dist/internal/controls/useFieldControl.d.ts

@@ -0,0 +1,17 @@
+import type { ControlValid } from './types';
+/**
+ * Wiring every control shares with `FieldBase`: the element id, ARIA links to
+ * the message and error, and the validity state.
+ *
+ * `valid` on the control wins. Otherwise an error on the surrounding field
+ * marks the control invalid.
+ */
+export declare function useFieldControl(props: {
+    id?: string;
+    valid?: ControlValid;
+}): {
+    id: import("vue").ComputedRef<string | undefined>;
+    describedBy: import("vue").ComputedRef<string | undefined>;
+    valid: import("vue").ComputedRef<ControlValid>;
+    invalid: import("vue").ComputedRef<boolean>;
+};

package/dist/internal/css.d.ts

@@ -0,0 +1,24 @@
+import type { SystemStyleObject } from 'styled-system/types';
+/**
+ * Per-component `css` prop: style objects keyed by the component's slot names.
+ * `root` is always the outermost element.
+ *
+ * Panda only generates CSS for objects it can see at build time, so pass each
+ * slot through `css.raw()` from the app's own `styled-system/css`:
+ *
+ * ```vue
+ * <WfAlertRoot :css="{ root: css.raw({ maxWidth: 'md' }) }" />
+ * ```
+ */
+export type CssMap<K extends string> = Partial<Record<K, SystemStyleObject>>;
+/**
+ * Class for one slot: the component's style object merged with the consumer's
+ * override.
+ *
+ * Component styles are atomic classes, so appending an override class would
+ * leave both `bg_x` and `bg_y` on the element and let stylesheet order decide.
+ * Merging the objects first gives one class per property, and the override wins.
+ *
+ * Pass `styles.raw(…)` (or a slot of it), not the class string from `styles(…)`.
+ */
+export declare function withCss(style: SystemStyleObject | undefined, override?: SystemStyleObject | null): string;

package/dist/nuxt/module.d.mts

@@ -0,0 +1,21 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    /**
+     * Prefix for auto-registered components.
+     * `Button` becomes `WfButton` when prefix is `Wf`.
+     * @default 'Wf'
+     */
+    prefix?: string;
+    /**
+     * Inject the icon stylesheet from `@webflare/ui`.
+     * Component styles are generated by Panda CSS in the consuming app
+     * via `designSystem: '@webflare/ui'`.
+     * @default true
+     */
+    icons?: boolean;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/nuxt/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "@webflare/ui",
+  "configKey": "wfUi",
+  "version": "0.1.1",
+  "builder": {
+    "@nuxt/module-builder": "1.0.3",
+    "unbuild": "unknown"
+  }
+}

package/dist/nuxt/module.mjs

@@ -0,0 +1,126 @@
+import { readFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import { dirname } from 'node:path';
+import { useLogger, defineNuxtModule, addComponent, addImports } from '@nuxt/kit';
+
+const require$1 = createRequire(import.meta.url);
+const logger = useLogger("@webflare/ui");
+function resolveFromPackage(specifier) {
+  try {
+    return require$1.resolve(specifier);
+  } catch {
+    return void 0;
+  }
+}
+function resolveIconCss() {
+  return resolveFromPackage("@webflare/ui/style.css");
+}
+function readModuleVersion() {
+  try {
+    const pkgPath = require$1.resolve("@webflare/ui/package.json");
+    const pkg = JSON.parse(readFileSync(pkgPath, "utf8"));
+    return pkg.version ?? "0.0.0";
+  } catch {
+    return "0.0.0";
+  }
+}
+function loadNuxtEntries() {
+  const entriesPath = resolveFromPackage("@webflare/ui/nuxt-entries.json");
+  if (!entriesPath) {
+    return { components: {}, composables: [] };
+  }
+  return JSON.parse(readFileSync(entriesPath, "utf8"));
+}
+function resolveComponentsDist() {
+  const entriesPath = resolveFromPackage("@webflare/ui/nuxt-entries.json");
+  return entriesPath ? dirname(entriesPath) : void 0;
+}
+function hasPandaPostcssPlugin(postcss) {
+  const plugins = postcss?.plugins;
+  if (!plugins) {
+    return false;
+  }
+  return Object.prototype.hasOwnProperty.call(plugins, "@pandacss/dev/postcss");
+}
+function warnIfPandaSetupLooksMissing(nuxt) {
+  if (!resolveFromPackage("@webflare/ui/panda/lib.json")) {
+    logger.warn("Could not resolve @webflare/ui/panda/lib.json. Set designSystem: '@webflare/ui' in panda.config.ts so component styles generate.");
+  }
+  if (nuxt.options.dev && !hasPandaPostcssPlugin(nuxt.options.postcss)) {
+    logger.warn("Panda PostCSS is not configured. Set postcss.plugins['@pandacss/dev/postcss'] in nuxt.config and keep @layer reset, base, tokens, recipes, utilities in your CSS.");
+  }
+}
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function allowLinkedFsDir(vite, dir) {
+  if (!dir) {
+    return;
+  }
+  vite.server ??= {};
+  vite.server.fs ??= {};
+  vite.server.fs.allow ??= [];
+  if (!vite.server.fs.allow.includes(dir)) {
+    vite.server.fs.allow.push(dir);
+  }
+}
+function excludeLinkedVueDist(imports, dir) {
+  if (!dir) {
+    return;
+  }
+  imports.transform ??= {};
+  imports.transform.exclude ??= [];
+  const pattern = new RegExp(escapeRegExp(dir));
+  if (!imports.transform.exclude.some((existing) => existing.source === pattern.source)) {
+    imports.transform.exclude.push(pattern);
+  }
+}
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@webflare/ui",
+    configKey: "wfUi",
+    version: readModuleVersion()
+  },
+  defaults: {
+    prefix: "Wf",
+    icons: true
+  },
+  setup(options, nuxt) {
+    const prefix = options.prefix ?? "Wf";
+    const { components, composables } = loadNuxtEntries();
+    nuxt.options.build.transpile.push("reka-ui");
+    const componentsDist = resolveComponentsDist();
+    allowLinkedFsDir(nuxt.options.vite, componentsDist);
+    excludeLinkedVueDist(nuxt.options.imports, componentsDist);
+    warnIfPandaSetupLooksMissing(nuxt);
+    if (options.icons !== false) {
+      const cssPath = resolveIconCss();
+      if (cssPath) {
+        if (!nuxt.options.css.includes(cssPath)) {
+          nuxt.options.css.push(cssPath);
+        }
+        allowLinkedFsDir(nuxt.options.vite, dirname(cssPath));
+      } else {
+        logger.warn("Could not resolve @webflare/ui/style.css. Iconify icons will be missing.");
+      }
+    }
+    if (Object.keys(components).length === 0) {
+      logger.warn("Could not resolve @webflare/ui/nuxt-entries.json. Auto-imports are skipped.");
+    }
+    for (const name of Object.keys(components)) {
+      addComponent({
+        name: `${prefix}${name}`,
+        export: name,
+        filePath: "@webflare/ui"
+      });
+    }
+    for (const name of composables) {
+      addImports({
+        name,
+        from: "@webflare/ui"
+      });
+    }
+  }
+});
+
+export { module$1 as default };

package/dist/nuxt/types.d.mts

@@ -0,0 +1,3 @@
+export { default } from './module.mjs'
+
+export { type ModuleOptions } from './module.mjs'

package/dist/nuxt-entries.json

@@ -0,0 +1,49 @@
+{
+  "components": {
+    "AccordionRoot": "AccordionRoot",
+    "AlertRoot": "AlertRoot",
+    "BadgeRoot": "BadgeRoot",
+    "Button": "Button",
+    "CardRoot": "CardRoot",
+    "CardBody": "CardBody",
+    "CardHeader": "CardHeader",
+    "CarouselRoot": "CarouselRoot",
+    "CarouselItem": "CarouselItem",
+    "CarouselNavigation": "CarouselNavigation",
+    "DialogRoot": "DialogRoot",
+    "FieldInput": "FieldInput",
+    "FieldTextarea": "FieldTextarea",
+    "FieldSelect": "FieldSelect",
+    "FieldCheckbox": "FieldCheckbox",
+    "FieldRadioGroup": "FieldRadioGroup",
+    "FieldSwitch": "FieldSwitch",
+    "FieldUrl": "FieldUrl",
+    "FieldBase": "FieldBase",
+    "FieldLabel": "FieldLabel",
+    "FieldError": "FieldError",
+    "FieldMessage": "FieldMessage",
+    "FieldRequired": "FieldRequired",
+    "FlyoutRoot": "FlyoutRoot",
+    "FlyoutDropdown": "FlyoutDropdown",
+    "FormPrompt": "FormPrompt",
+    "FormPromptFooter": "FormPromptFooter",
+    "HeroLead": "HeroLead",
+    "ListRoot": "ListRoot",
+    "ListItem": "ListItem",
+    "Loader": "Loader",
+    "PricingCardRoot": "PricingCardRoot",
+    "PricingCardHeader": "PricingCardHeader",
+    "PricingCardPricing": "PricingCardPricing",
+    "PricingCardBody": "PricingCardBody",
+    "PricingCardBadge": "PricingCardBadge",
+    "ProgressRoot": "ProgressRoot",
+    "SwitchRoot": "SwitchRoot",
+    "TabRoot": "TabRoot",
+    "TabItem": "TabItem"
+  },
+  "composables": [
+    "useCarousel",
+    "useFlyout",
+    "useFormData"
+  ]
+}