storyloco 1.9.3 → 1.10.0

package/README.md

@@ -11,6 +11,7 @@ A collection of slick Storyblok field plugins built with Svelte 5, TypeScript, a
 - **🎨 Theme** - Color theme selector with visual previews
 - **🔗 Link** - Link editor with support for internal, external, email, and asset links
 - **🏗️ Plans** - Floor plan manager with drag-and-drop sorting for types, floors, dimensions, and rooms
+- **📝 Input** - Comprehensive form input field with support for all HTML input types, checkboxes, radio buttons, selects, and textareas
 
 ### Vite Plugins
 
@@ -40,9 +41,10 @@ bun add storyloco
 import type { Video } from 'storyloco/mux'
 import type { Heading } from 'storyloco/heading'
 import type { Link } from 'storyloco/link'
+import type { Input } from 'storyloco/input'
 
 // Or import everything
-import type { Video, Heading, Link } from 'storyloco'
+import type { Video, Heading, Link, Input } from 'storyloco'
 ```
 
 ### Use Shared Components
@@ -117,6 +119,7 @@ storyloco/
 │   ├── heading/      # Heading editor plugin
 │   ├── theme/        # Theme selector plugin
 │   ├── link/         # Link editor plugin
+│   ├── input/        # Form input field plugin
 │   └── shared/       # UI component library
 ├── src/
 │   └── index.ts      # Type exports

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "storyloco",
-   "version": "1.9.3",
+   "version": "1.10.0",
    "description": "A collection of slick Storyblok field plugins built with Svelte 5, TypeScript, and Tailwind CSS",
    "keywords": [
       "storyblok",
@@ -27,7 +27,8 @@
       "packages/theme/types.ts",
       "packages/shared/dist",
       "packages/vite/dist",
-      "packages/ticketsource/types.ts"
+      "packages/ticketsource/types.ts",
+      "packages/input/types.ts"
    ],
    "exports": {
       ".": {
@@ -47,6 +48,10 @@
          "types": "./packages/ticketsource/types.ts",
          "svelte": "./packages/ticketsource/src/app.svelte.ts"
       },
+      "./input": {
+         "types": "./packages/input/types.ts",
+         "svelte": "./packages/input/src/app.svelte.ts"
+      },
       "./shared": {
          "types": "./packages/shared/dist/index.d.ts",
          "svelte": "./packages/shared/dist/index.js"

package/packages/input/types.ts

@@ -0,0 +1,144 @@
+const types = [
+	'text',
+	'email',
+	'number',
+	'tel',
+	'url',
+	'date',
+	'time',
+	'datetime-local',
+	'month',
+	'week',
+	'checkbox',
+	'radio',
+	'select',
+	'textarea',
+	'file',
+	'hidden',
+] as const
+
+namespace Input {
+	export type Type = (typeof types)[number]
+
+	export type Base = {
+		name: string
+		type: Type
+		required: boolean
+		disabled: boolean
+		value?: string
+	}
+
+	export type Placeholderable = Base & {
+		placeholder?: string
+	}
+
+	export type File = Base & {
+		type: 'file'
+		multiple: boolean
+		accept?: string
+	}
+
+	export type Select = Placeholderable & {
+		type: 'select'
+		options: Array<{ value: string; disabled: boolean; selected: boolean }>
+		multiple: boolean
+	}
+
+	export type Checkbox = Omit<Base, 'required' | 'disabled'> & {
+		type: 'checkbox'
+		options: Array<{ value: string; required: boolean; disabled: boolean; checked: boolean }>
+	}
+
+	export type Radio = Base & {
+		type: 'radio'
+		options: Array<{ value: string; disabled: boolean; checked: boolean }>
+	}
+
+	export type Text = Placeholderable & {
+		type: 'text'
+	}
+
+	export type Email = Placeholderable & {
+		type: 'email'
+	}
+
+	export type Number = Placeholderable & {
+		type: 'number'
+	}
+
+	export type Tel = Placeholderable & {
+		type: 'tel'
+	}
+
+	export type URL = Placeholderable & {
+		type: 'url'
+	}
+
+	export type Date = Placeholderable & {
+		type: 'date'
+	}
+
+	export type Time = Placeholderable & {
+		type: 'time'
+	}
+
+	export type DatetimeLocal = Placeholderable & {
+		type: 'datetime-local'
+	}
+
+	export type Month = Placeholderable & {
+		type: 'month'
+	}
+
+	export type Week = Placeholderable & {
+		type: 'week'
+	}
+
+	export type Textarea = Placeholderable & {
+		type: 'textarea'
+	}
+
+	export type Hidden = Base & {
+		type: 'hidden'
+	}
+
+	export type Input =
+		| File
+		| Select
+		| Checkbox
+		| Radio
+		| Text
+		| Email
+		| Number
+		| Tel
+		| URL
+		| Date
+		| Time
+		| DatetimeLocal
+		| Month
+		| Week
+		| Textarea
+		| Hidden
+}
+
+export const types_map = new Map<Input.Type, string>([
+	['text', 'Text'],
+	['email', 'Email'],
+	['number', 'Number'],
+	['tel', 'Telephone'],
+	['url', 'URL'],
+	['date', 'Date'],
+	['time', 'Time'],
+	['datetime-local', 'Datetime Local'],
+	['month', 'Month'],
+	['week', 'Week'],
+	['checkbox', 'Checkbox'],
+	['radio', 'Radio'],
+	['select', 'Select'],
+	['textarea', 'Textarea'],
+	['file', 'File'],
+	['hidden', 'Hidden'],
+] as const)
+
+// convenient re-export to keep existing imports working
+export type Input = Input.Input

package/packages/shared/dist/components/ui/checkbox/checkbox.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import MinusIcon from "@lucide/svelte/icons/minus";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+</script>
+
+<CheckboxPrimitive.Root
+	bind:ref
+	data-slot="checkbox"
+	class={cn(
+		"border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shadow-xs peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:checked
+	bind:indeterminate
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<div data-slot="checkbox-indicator" class="text-current transition-none">
+			{#if checked}
+				<CheckIcon class="size-3.5" />
+			{:else if indeterminate}
+				<MinusIcon class="size-3.5" />
+			{/if}
+		</div>
+	{/snippet}
+</CheckboxPrimitive.Root>

package/packages/shared/dist/components/ui/checkbox/checkbox.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Checkbox as CheckboxPrimitive } from "bits-ui";
+declare const Checkbox: import("svelte").Component<Omit<Omit<CheckboxPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked" | "indeterminate">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/packages/shared/dist/components/ui/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+import Root from "./checkbox.svelte";
+export { Root, Root as Checkbox, };

package/packages/shared/dist/components/ui/checkbox/index.js

@@ -0,0 +1,4 @@
+import Root from "./checkbox.svelte";
+export { Root, 
+//
+Root as Checkbox, };

package/packages/shared/dist/components/ui/radio-group/index.d.ts

@@ -0,0 +1,3 @@
+import Root from "./radio-group.svelte";
+import Item from "./radio-group-item.svelte";
+export { Root, Item, Root as RadioGroup, Item as RadioGroupItem, };

package/packages/shared/dist/components/ui/radio-group/index.js

@@ -0,0 +1,5 @@
+import Root from "./radio-group.svelte";
+import Item from "./radio-group-item.svelte";
+export { Root, Item, 
+//
+Root as RadioGroup, Item as RadioGroupItem, };

package/packages/shared/dist/components/ui/radio-group/radio-group-item.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+	import CircleIcon from "@lucide/svelte/icons/circle";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<RadioGroupPrimitive.ItemProps> = $props();
+</script>
+
+<RadioGroupPrimitive.Item
+	bind:ref
+	data-slot="radio-group-item"
+	class={cn(
+		"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 shadow-xs aspect-square size-4 shrink-0 rounded-full border outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<div data-slot="radio-group-indicator" class="relative flex items-center justify-center">
+			{#if checked}
+				<CircleIcon
+					class="fill-primary absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2"
+				/>
+			{/if}
+		</div>
+	{/snippet}
+</RadioGroupPrimitive.Item>

package/packages/shared/dist/components/ui/radio-group/radio-group-item.svelte.d.ts

@@ -0,0 +1,4 @@
+import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+declare const RadioGroupItem: import("svelte").Component<Omit<Omit<RadioGroupPrimitive.ItemProps, "child">, "children">, {}, "ref">;
+type RadioGroupItem = ReturnType<typeof RadioGroupItem>;
+export default RadioGroupItem;

package/packages/shared/dist/components/ui/radio-group/radio-group.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value = $bindable(""),
+		...restProps
+	}: RadioGroupPrimitive.RootProps = $props();
+</script>
+
+<RadioGroupPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="radio-group"
+	class={cn("grid gap-3", className)}
+	{...restProps}
+/>

package/packages/shared/dist/components/ui/radio-group/radio-group.svelte.d.ts

@@ -0,0 +1,4 @@
+import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+declare const RadioGroup: import("svelte").Component<RadioGroupPrimitive.RootProps, {}, "value" | "ref">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

package/packages/shared/dist/components/ui/textarea/index.d.ts

@@ -0,0 +1,2 @@
+import Root from "./textarea.svelte";
+export { Root, Root as Textarea, };

package/packages/shared/dist/components/ui/textarea/index.js

@@ -0,0 +1,4 @@
+import Root from "./textarea.svelte";
+export { Root, 
+//
+Root as Textarea, };

package/packages/shared/dist/components/ui/textarea/textarea.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from '../../../utils.js'
+	import type { HTMLTextareaAttributes } from 'svelte/elements'
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props()
+</script>
+
+<textarea
+	bind:this={ref}
+	data-slot="textarea"
+	class={cn(
+		'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input-background field-sizing-content shadow-xs flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+		className
+	)}
+	bind:value
+	{...restProps}
+></textarea>

package/packages/shared/dist/components/ui/textarea/textarea.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+declare const Textarea: import("svelte").Component<Omit<WithElementRef<HTMLTextareaAttributes>, "children">, {}, "value" | "ref">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/packages/shared/dist/index.d.ts

@@ -1,11 +1,14 @@
 export * as Accordion from './components/ui/accordion/index.js';
 export { Button } from './components/ui/button/index.js';
 export * as Card from './components/ui/card/index.js';
+export { Checkbox } from './components/ui/checkbox/index.js';
 export { Input } from './components/ui/input/index.js';
 export { Label } from './components/ui/label/index.js';
+export * as RadioGroup from './components/ui/radio-group/index.js';
 export * as Select from './components/ui/select/index.js';
 export { Separator } from './components/ui/separator/index.js';
 export { Skeleton } from './components/ui/skeleton/index.js';
 export { Switch } from './components/ui/switch/index.js';
+export { Textarea } from './components/ui/textarea/index.js';
 export * as Tabs from './components/ui/tabs/index.js';
 export { setup } from './setup.js';

package/packages/shared/dist/index.js

@@ -2,12 +2,15 @@
 export * as Accordion from './components/ui/accordion/index.js';
 export { Button } from './components/ui/button/index.js';
 export * as Card from './components/ui/card/index.js';
+export { Checkbox } from './components/ui/checkbox/index.js';
 export { Input } from './components/ui/input/index.js';
 export { Label } from './components/ui/label/index.js';
+export * as RadioGroup from './components/ui/radio-group/index.js';
 export * as Select from './components/ui/select/index.js';
 export { Separator } from './components/ui/separator/index.js';
 export { Skeleton } from './components/ui/skeleton/index.js';
 export { Switch } from './components/ui/switch/index.js';
+export { Textarea } from './components/ui/textarea/index.js';
 export * as Tabs from './components/ui/tabs/index.js';
 // Global
 export { setup } from './setup.js';

package/packages/shared/dist/utils.js

@@ -1,6 +1,5 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { format_date, format_elapse } from 'kitto';
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }