@uibit/form 0.1.0

package/dist/frameworks/svelte/index.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import '@uibit/form';
+  import type { Form as HTMLElementClass } from '@uibit/form';
+  
+  let {
+    warnUnsaved = undefined,
+      step = undefined,
+      stepsCount = undefined,
+      dirty = undefined,
+      status = undefined,
+      success = undefined,
+      error = undefined,
+      children
+  } = $props<{
+    children?: any;
+    warnUnsaved?: boolean;
+    step?: number;
+    stepsCount?: number;
+    dirty?: boolean;
+    status?: 'idle' | 'pending' | 'success' | 'error';
+    success?: import('svelte').Snippet;
+    error?: import('svelte').Snippet;
+  }>();
+  
+  let elementRef: HTMLElementClass | null = $state(null);
+  
+  $effect(() => {
+    if (elementRef && warnUnsaved !== undefined) {
+      elementRef.warnUnsaved = warnUnsaved;
+    }
+    if (elementRef && step !== undefined) {
+      elementRef.step = step;
+    }
+    if (elementRef && stepsCount !== undefined) {
+      elementRef.stepsCount = stepsCount;
+    }
+    if (elementRef && dirty !== undefined) {
+      elementRef.dirty = dirty;
+    }
+    if (elementRef && status !== undefined) {
+      elementRef.status = status;
+    }
+  });
+  
+</script>
+
+<uibit-form bind:this={elementRef} {...$$restProps}>
+  {#if success}
+    <div slot="success">
+      {@render success()}
+    </div>
+  {/if}
+  {#if error}
+    <div slot="error">
+      {@render error()}
+    </div>
+  {/if}
+  {#if children}
+    {@render children()}
+  {:else}
+    <slot />
+  {/if}
+</uibit-form>

package/dist/frameworks/vue/index.ts

@@ -0,0 +1,26 @@
+import { defineComponent, h } from 'vue';
+import type { Form as HTMLElementClass } from '@uibit/form';
+import '@uibit/form';
+
+export const Form = defineComponent({
+  name: 'Form',
+  props: {
+    warnUnsaved: { type: [String, Number, Boolean, Array, Object] as any },
+    step: { type: [String, Number, Boolean, Array, Object] as any },
+    stepsCount: { type: [String, Number, Boolean, Array, Object] as any },
+    dirty: { type: [String, Number, Boolean, Array, Object] as any },
+    status: { type: [String, Number, Boolean, Array, Object] as any }
+  },
+  emits: [],
+  setup(props, { slots, emit }) {
+    return () => {
+      const eventListeners: Record<string, any> = {};
+
+
+      return h('uibit-form', {
+        ...props,
+        ...eventListeners
+      }, slots.default?.());
+    };
+  }
+});

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './form';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from './form';
+export * from './types';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC"}

package/dist/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAgIlB,CAAC"}

package/dist/styles.js

@@ -0,0 +1,131 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    position: relative;
+    font-size: var(--uibit-component-font-size, var(--uibit-font-size-base, 1rem));
+    font-weight: var(--uibit-component-font-weight, var(--uibit-font-weight-normal, 400));
+    line-height: var(--uibit-component-line-height, var(--uibit-line-height-relaxed, 1.625));
+    --uibit-form-wizard-margin: var(--uibit-form-wizard-margin-val, 2rem);
+  }
+
+  /* Premium Minimalist Stepper Header (Split Layout) */
+  .wizard-header {
+    margin-bottom: var(--uibit-form-wizard-margin, 2rem);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 1.5rem;
+  }
+
+  .wizard-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .wizard-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .wizard-back-btn,
+  .wizard-next-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    padding: 0.25rem;
+    cursor: pointer;
+    color: #6b7280;
+    border-radius: 999rem;
+    transition: color 150ms ease, background-color 150ms ease, transform 150ms ease, opacity 150ms ease;
+  }
+
+  .wizard-back-btn:hover,
+  .wizard-next-btn:hover {
+    color: #111827;
+    background-color: #f3f4f6;
+  }
+
+  .wizard-back-btn:active,
+  .wizard-next-btn:active {
+    transform: scale(0.95);
+  }
+
+  .wizard-back-btn:focus-visible,
+  .wizard-next-btn:focus-visible {
+    outline: 0.125rem solid #000000;
+  }
+
+  .wizard-step-info {
+    font-size: var(--uibit-font-size-xs, 0.75rem);
+    font-weight: 500;
+    color: #9ca3af;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    user-select: none;
+  }
+
+  .wizard-step-num {
+    color: #111827;
+    font-weight: 600;
+  }
+
+  .wizard-step-sep {
+    opacity: 0.5;
+  }
+
+  .wizard-step-total {
+    opacity: 0.8;
+  }
+
+  ::slotted([slot^="step-title-"]),
+  .wizard-step-title {
+    font-family: var(--uibit-font-family, Inter, sans-serif);
+    font-size: var(--uibit-font-size-sm, 0.875rem);
+    font-weight: 650;
+    color: #111827;
+    letter-spacing: -0.01em;
+    user-select: none;
+  }
+
+  /* Stabilized layout hidden state */
+  .disabled-control {
+    opacity: 0;
+    pointer-events: none;
+    visibility: hidden;
+  }
+
+  /* Premium inline error banner */
+  .error-banner {
+    padding: 1rem 0;
+    font-size: var(--uibit-font-size-sm, 0.875rem);
+    color: #111827;
+    margin-bottom: 0.5rem;
+  }
+
+  /* State content wrappers */
+  .state-content {
+    display: none;
+  }
+
+  :host([status="pending"]) .state-content[data-state="pending"] {
+    display: block;
+  }
+
+  :host([status="success"]) .state-content[data-state="success"] {
+    display: block;
+  }
+
+  /* Correctly hide the slotted form element on success and pending states */
+  :host([status="success"]) ::slotted(form),
+  :host([status="pending"]) ::slotted(form) {
+    display: none !important;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgIxB,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+import type { Form } from './form';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uibit-form': Form;
+    }
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAEnC,OAAO,CAAC,MAAM,CAAC;IACf,UAAU,qBAAqB;QAC3B,YAAY,EAAE,IAAI,CAAC;KACtB;CACA"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@uibit/form",
+  "version": "0.1.0",
+  "description": "A composable, declarative wrapper around native HTML form elements with validation, submit lifecycle states, and wizard navigation support.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./custom-elements.json": "./custom-elements.json",
+    "./react": "./dist/frameworks/react/index.d.ts",
+    "./vue": "./dist/frameworks/vue/index.ts",
+    "./svelte": "./dist/frameworks/svelte/index.svelte",
+    "./angular": "./dist/frameworks/angular/index.ts",
+    "./solid": "./dist/frameworks/solid/index.d.ts",
+    "./astro": "./dist/frameworks/astro/index.astro",
+    "./qwik": "./dist/frameworks/qwik/index.tsx",
+    "./nuxt": "./dist/frameworks/nuxt/index.ts",
+    "./preact": "./dist/frameworks/preact/index.d.ts",
+    "./stencil": "./dist/frameworks/stencil/index.d.ts"
+  },
+  "files": [
+    "dist",
+    "package.json",
+    "README.md",
+    "LICENSE",
+    "custom-elements.json"
+  ],
+  "keywords": [
+    "form",
+    "wizard",
+    "validation",
+    "web-component",
+    "lit"
+  ],
+  "author": "Jonathan Rawlings",
+  "license": "MIT",
+  "dependencies": {
+    "lucide": "^1.24.0",
+    "@uibit/core": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.43",
+    "lit": "^3.3.3",
+    "typescript": "7.0.2",
+    "@uibit/codegen": "0.1.0"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0",
+    "react": ">=18",
+    "vue": ">=3",
+    "svelte": ">=4 || ^5",
+    "@angular/core": ">=14"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    }
+  },
+  "customElements": "custom-elements.json",
+  "uibit": {
+    "id": "form",
+    "title": "Form",
+    "category": "Forms",
+    "tagName": "uibit-form"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Rawlings/uibit",
+    "directory": "packages/components/form"
+  },
+  "scripts": {
+    "build": "cem analyze --globs 'src/**/*.ts' --litelement && uibit-codegen --package . && tsc",
+    "dev": "concurrently \"cem analyze --globs 'src/**/*.ts' --litelement --watch\" \"tsc --watch\"",
+    "analyze": "cem analyze --globs 'src/**/*.ts' --litelement",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run -c ../../../vitest.config.ts --passWithNoTests"
+  }
+}