alus-ui 0.1.0

package/dist/utils/form/ids.d.ts

@@ -0,0 +1,46 @@
+/**
+ * ID generation utilities for form fields
+ * @module form/ids
+ */
+/**
+ * IDs for form field accessibility associations
+ */
+export interface FieldIds {
+    label: string;
+    input: string;
+    description: string;
+    error: string;
+}
+/**
+ * Generate consistent IDs for form labels and descriptions
+ * @param fieldName - Name of the field (used as prefix for IDs)
+ * @returns Object with label, input, description, and error IDs
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createFieldIds } from 'alus-ui/utils/form';
+ *
+ *   const ids = createFieldIds('email');
+ * </script>
+ *
+ * <label for={ids.label}>Email</label>
+ * <Input id={ids.input} aria-describedby={ids.description} />
+ * <p id={ids.description}>Enter your email</p>
+ * ```
+ */
+export declare function createFieldIds(fieldName: string): FieldIds;
+/**
+ * Generate IDs for a form field group
+ * @param groupName - Name of the field group
+ * @returns Object with group and field IDs
+ *
+ * @example
+ * ```svelte
+ * const ids = createFieldGroupIds('password');
+ * // { group: 'alus-ui-password-xyz-group', field: 'alus-ui-password-xyz-field', ... }
+ * ```
+ */
+export declare function createFieldGroupIds(groupName: string): FieldIds & {
+    group: string;
+};

package/dist/utils/form/ids.js

@@ -0,0 +1,53 @@
+/**
+ * ID generation utilities for form fields
+ * @module form/ids
+ */
+import { generateId } from '../a11y/index.js';
+/**
+ * Generate consistent IDs for form labels and descriptions
+ * @param fieldName - Name of the field (used as prefix for IDs)
+ * @returns Object with label, input, description, and error IDs
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createFieldIds } from 'alus-ui/utils/form';
+ *
+ *   const ids = createFieldIds('email');
+ * </script>
+ *
+ * <label for={ids.label}>Email</label>
+ * <Input id={ids.input} aria-describedby={ids.description} />
+ * <p id={ids.description}>Enter your email</p>
+ * ```
+ */
+export function createFieldIds(fieldName) {
+    const base = generateId(fieldName);
+    return {
+        label: `${base}-label`,
+        input: `${base}-input`,
+        description: `${base}-description`,
+        error: `${base}-error`
+    };
+}
+/**
+ * Generate IDs for a form field group
+ * @param groupName - Name of the field group
+ * @returns Object with group and field IDs
+ *
+ * @example
+ * ```svelte
+ * const ids = createFieldGroupIds('password');
+ * // { group: 'alus-ui-password-xyz-group', field: 'alus-ui-password-xyz-field', ... }
+ * ```
+ */
+export function createFieldGroupIds(groupName) {
+    const base = generateId(groupName);
+    return {
+        group: `${base}-group`,
+        label: `${base}-label`,
+        input: `${base}-input`,
+        description: `${base}-description`,
+        error: `${base}-error`
+    };
+}

package/dist/utils/form/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Form utilities for common UI patterns
+ * @module utils/form
+ */
+export * from './ids.js';
+export * from './aria.js';
+export * from './state.js';

package/dist/utils/form/index.js

@@ -0,0 +1,8 @@
+/**
+ * Form utilities for common UI patterns
+ * @module utils/form
+ */
+// Export all form utilities
+export * from './ids.js';
+export * from './aria.js';
+export * from './state.js';

package/dist/utils/form/state.d.ts

@@ -0,0 +1,87 @@
+/**
+ * Form field state management
+ * @module form/state
+ */
+/**
+ * Form field state interface
+ */
+export interface FormFieldState<T = string> {
+    value: T;
+    error: string | undefined;
+    touched: boolean;
+    dirty: boolean;
+}
+/**
+ * Create a reactive form field state
+ * @param initialValue - Initial value for the field
+ * @returns Form field state object
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createFormField } from 'alus-ui/utils/form';
+ *
+ *   let email = createFormField('');
+ * </script>
+ *
+ * <Input
+ *   bind:value={email.value}
+ *   aria-invalid={email.error !== undefined}
+ *   onblur={() => email.touched = true}
+ * />
+ *
+ * {#if email.error && email.touched}
+ *   <p class="error">{email.error}</p>
+ * {/if}
+ * ```
+ */
+export declare function createFormField<T = string>(initialValue: T): FormFieldState<T>;
+/**
+ * Form state manager for multiple fields
+ */
+export interface FormState<T extends Record<string, unknown>> {
+    values: T;
+    errors: Record<keyof T, string | undefined>;
+    touched: Record<keyof T, boolean>;
+    dirty: Record<keyof T, boolean>;
+}
+/**
+ * Create a form state manager
+ * @param initialValues - Initial values for all fields
+ * @returns Form state object
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createFormState } from 'alus-ui/utils/form';
+ *
+ *   let form = createFormState({
+ *     email: '',
+ *     password: '',
+ *     terms: false
+ *   });
+ * </script>
+ *
+ * <Input bind:value={form.values.email} />
+ * <Input bind:value={form.values.password} />
+ * ```
+ */
+export declare function createFormState<T extends Record<string, unknown>>(initialValues: T): FormState<T>;
+/**
+ * Check if form has any errors
+ * @param form - Form state object
+ * @returns Whether any field has an error
+ */
+export declare function hasFormErrors<T extends Record<string, unknown>>(form: FormState<T>): boolean;
+/**
+ * Check if form is valid (no errors and all required fields touched)
+ * @param form - Form state object
+ * @returns Whether form is valid
+ */
+export declare function isFormValid<T extends Record<string, unknown>>(form: FormState<T>): boolean;
+/**
+ * Reset form to initial state
+ * @param form - Form state object
+ * @param initialValues - Initial values to reset to
+ */
+export declare function resetForm<T extends Record<string, unknown>>(form: FormState<T>, initialValues: T): void;

package/dist/utils/form/state.js

@@ -0,0 +1,103 @@
+/**
+ * Form field state management
+ * @module form/state
+ */
+/**
+ * Create a reactive form field state
+ * @param initialValue - Initial value for the field
+ * @returns Form field state object
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createFormField } from 'alus-ui/utils/form';
+ *
+ *   let email = createFormField('');
+ * </script>
+ *
+ * <Input
+ *   bind:value={email.value}
+ *   aria-invalid={email.error !== undefined}
+ *   onblur={() => email.touched = true}
+ * />
+ *
+ * {#if email.error && email.touched}
+ *   <p class="error">{email.error}</p>
+ * {/if}
+ * ```
+ */
+export function createFormField(initialValue) {
+    return {
+        value: initialValue,
+        error: undefined,
+        touched: false,
+        dirty: false
+    };
+}
+/**
+ * Create a form state manager
+ * @param initialValues - Initial values for all fields
+ * @returns Form state object
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createFormState } from 'alus-ui/utils/form';
+ *
+ *   let form = createFormState({
+ *     email: '',
+ *     password: '',
+ *     terms: false
+ *   });
+ * </script>
+ *
+ * <Input bind:value={form.values.email} />
+ * <Input bind:value={form.values.password} />
+ * ```
+ */
+export function createFormState(initialValues) {
+    const keys = Object.keys(initialValues);
+    const touched = {};
+    const dirty = {};
+    const errors = {};
+    for (const key of keys) {
+        touched[key] = false;
+        dirty[key] = false;
+        errors[key] = undefined;
+    }
+    return {
+        values: initialValues,
+        errors,
+        touched,
+        dirty
+    };
+}
+/**
+ * Check if form has any errors
+ * @param form - Form state object
+ * @returns Whether any field has an error
+ */
+export function hasFormErrors(form) {
+    return Object.values(form.errors).some((error) => error !== undefined);
+}
+/**
+ * Check if form is valid (no errors and all required fields touched)
+ * @param form - Form state object
+ * @returns Whether form is valid
+ */
+export function isFormValid(form) {
+    return !hasFormErrors(form) && Object.values(form.touched).every((t) => t);
+}
+/**
+ * Reset form to initial state
+ * @param form - Form state object
+ * @param initialValues - Initial values to reset to
+ */
+export function resetForm(form, initialValues) {
+    for (const key of Object.keys(initialValues)) {
+        form.values[key] = initialValues[key];
+        form.errors[key] = undefined;
+        form.touched[key] = false;
+        form.dirty[key] = false;
+    }
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Utility functions and helpers
+ * @module utils
+ */
+export * from './a11y/index.js';
+export * from './form/index.js';

package/dist/utils/index.js

@@ -0,0 +1,8 @@
+/**
+ * Utility functions and helpers
+ * @module utils
+ */
+// Export all accessibility utilities
+export * from './a11y/index.js';
+// Export all form utilities
+export * from './form/index.js';

package/package.json

@@ -0,0 +1,98 @@
+{
+	"name": "alus-ui",
+	"version": "0.1.0",
+	"description": "Unstyled, accessible Svelte 5 components with full keyboard navigation and WCAG 2.1 AA compliance",
+	"license": "MIT",
+	"type": "module",
+	"author": {
+		"name": "Hanivan Rizky",
+		"email": "hanivan20@gmail.com"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Hanivan/alus.git"
+	},
+	"homepage": "https://github.com/Hanivan/alus#readme",
+	"bugs": {
+		"url": "https://github.com/Hanivan/alus/issues"
+	},
+	"keywords": [
+		"svelte",
+		"svelte5",
+		"svelte-components",
+		"ui-components",
+		"accessible",
+		"accessibility",
+		"a11y",
+		"wcag",
+		"wcag-2.1",
+		"keyboard-navigation",
+		"unstyled",
+		"components",
+		"tailwindcss",
+		"runes",
+		"typescript"
+	],
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"scripts": {
+		"dev": "svelte-kit sync && svelte-package --watch",
+		"build": "svelte-kit sync && svelte-package && publint",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "npm run build",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "publint",
+		"test": "npm run check",
+		"prepublishOnly": "npm run build && npm run test",
+		"release": "release-it",
+		"release:dry": "release-it --dry-run",
+		"release:minor": "release-it minor",
+		"release:patch": "release-it patch",
+		"release:major": "release-it major"
+	},
+	"peerDependencies": {
+		"@floating-ui/dom": "^1.7.6",
+		"svelte": "^5.0.0"
+	},
+	"dependencies": {
+		"@floating-ui/dom": "^1.7.6",
+		"@internationalized/date": "^3.12.1",
+		"runed": "^0.37.1"
+	},
+	"devDependencies": {
+		"@release-it/conventional-changelog": "^11.0.0",
+		"@sveltejs/adapter-auto": "^7.0.1",
+		"@sveltejs/kit": "^2.57.0",
+		"@sveltejs/package": "^2.5.7",
+		"@sveltejs/vite-plugin-svelte": "^7.0.0",
+		"publint": "^0.3.18",
+		"release-it": "^20.0.1",
+		"svelte": "^5.55.2",
+		"svelte-check": "^4.4.6",
+		"typescript": "^6.0.2",
+		"vite": "^8.0.7"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"engines": {
+		"node": ">=18.0.0",
+		"pnpm": ">=8.0.0"
+	}
+}