lapikit 0.7.2 → 0.7.4

package/dist/components/field/field.svelte

@@ -0,0 +1,474 @@
+<script lang="ts">
+	import { useComponentAttrs, useElevation } from '../../utils';
+	import type { FieldControlProps, FieldProps } from './field.types.js';
+
+	let {
+		ref = $bindable(),
+		children,
+		class: className,
+		style: styleAttr,
+		's-class': sClass,
+		's-style': sStyle,
+		id,
+		variant = 'filled',
+		size = 'md',
+		density = 'default',
+		rounded = 'md',
+		color,
+		elevation,
+		disabled = false,
+		readonly = false,
+		error = false,
+		errorMessage,
+		message,
+		messagePrefix,
+		messageSuffix,
+		persistentMessage = false,
+		counter,
+		clearable = false,
+		persistentClear = false,
+		dirty = false,
+		onclear,
+		prefix,
+		suffix,
+		prepend,
+		append,
+		prependInner,
+		appendInner,
+		...rest
+	}: FieldProps = $props();
+
+	const generatedId = $props.id();
+
+	let attrs = $derived(
+		useComponentAttrs('kit-field', { className, sClass, styleAttr, sStyle, color }, rest)
+	);
+	let elevationState = $derived(useElevation(elevation));
+	let hasOutline = $derived(variant === 'outline' || variant === 'surface');
+
+	let focused = $state(false);
+	let controlId = $derived(id || generatedId);
+	let messageValue = $derived(error ? errorMessage || message : message);
+	let hasMessage = $derived(!!(messageValue || messagePrefix || messageSuffix || counter));
+	let messageId = $derived(hasMessage ? `${controlId}-message` : undefined);
+	let showMessage = $derived(error || persistentMessage || focused);
+	let showClear = $derived(persistentClear || dirty);
+
+	let control: FieldControlProps = $derived({
+		id: controlId,
+		'aria-describedby': messageId,
+		'aria-invalid': error || undefined,
+		disabled,
+		readonly
+	});
+</script>
+
+<div
+	bind:this={ref}
+	class={attrs.class}
+	style={attrs.style}
+	data-variant={variant}
+	data-size={size}
+	data-density={density}
+	data-rounded={rounded}
+	data-disabled={disabled}
+	data-readonly={readonly}
+	data-error={error}
+	data-focused={focused}
+	data-with-message={hasMessage}
+	onfocusin={() => (focused = true)}
+	onfocusout={() => (focused = false)}
+	{...attrs.rest}
+>
+	{#if prepend}
+		<div class="kit-field__prepend">{@render prepend()}</div>
+	{/if}
+
+	<div
+		class="kit-field__box"
+		data-elevation={elevationState.base}
+		data-elevation-hover={elevationState.hover}
+		data-elevation-active={elevationState.active}
+	>
+		{#if hasOutline}
+			<span class="outline"></span>
+		{:else if variant === 'text'}
+			<span class="kit-field__line"></span>
+		{/if}
+
+		{#if prependInner}
+			<div class="kit-field__prepend-inner">{@render prependInner()}</div>
+		{/if}
+
+		<div class="kit-field__control">
+			{#if prefix}
+				<span class="kit-field__prefix">{prefix}</span>
+			{/if}
+
+			{@render children?.(control)}
+
+			{#if suffix}
+				<span class="kit-field__suffix">{suffix}</span>
+			{/if}
+		</div>
+
+		{#if clearable}
+			<button
+				type="button"
+				class="kit-field__clear"
+				data-visible={showClear}
+				aria-label="Clear"
+				tabindex={showClear ? undefined : -1}
+				{disabled}
+				onclick={() => onclear?.()}
+			>
+				<svg viewBox="0 0 24 24" aria-hidden="true">
+					<path
+						d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm4.3 12.9-1.4 1.4L12 13.4l-2.9 2.9-1.4-1.4 2.9-2.9-2.9-2.9 1.4-1.4 2.9 2.9 2.9-2.9 1.4 1.4-2.9 2.9z"
+						fill="currentColor"
+					></path>
+				</svg>
+			</button>
+		{/if}
+
+		{#if appendInner}
+			<div class="kit-field__append-inner">{@render appendInner()}</div>
+		{/if}
+	</div>
+
+	{#if append}
+		<div class="kit-field__append">{@render append()}</div>
+	{/if}
+
+	{#if hasMessage}
+		<div class="kit-field__message" id={messageId} data-visible={showMessage}>
+			{#if messagePrefix}
+				<span class="kit-field__message-prefix">{messagePrefix}</span>
+			{/if}
+			<span class="kit-field__message-text">{messageValue ?? ''}</span>
+			{#if counter || messageSuffix}
+				<span class="kit-field__message-suffix">{counter ?? messageSuffix}</span>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>:where(.kit-field) {
+  --kit-field-color: initial;
+  --kit-field-on-color: initial;
+  --kit-field-active-fg: initial;
+  --kit-field-active-shade: initial;
+  --kit-field-hover-fg: initial;
+  --kit-field-pressed-fg: initial;
+  --kit-field-bg: var(--kit-field-color, var(--kit-color-surface-2));
+  --kit-field-fg: var(--kit-field-on-color, var(--kit-field-contrast, var(--kit-color-text)));
+  --kit-field-ink: var(--kit-field-color, var(--kit-color-text));
+  --kit-field-hover: color-mix(in oklab, var(--kit-field-bg), var(--kit-field-fg) 8%);
+  --kit-field-pressed: color-mix(in oklab, var(--kit-field-bg), var(--kit-field-fg) 14%);
+  --kit-field-soft: color-mix(in oklab, var(--kit-field-bg) 16%, transparent);
+  --kit-field-border: color-mix(in oklab, var(--kit-field-bg), var(--kit-field-fg) 20%);
+  --kit-field-active: color-mix(
+  	in oklab,
+  	var(--kit-field-color),
+  	var(--kit-field-fg) var(--kit-field-active-shade, 14%)
+  );
+}
+@supports (color: color(from red srgb-linear r g b)) {
+  :where(.kit-field) {
+    --kit-field-contrast: color(from var(--kit-field-color) srgb-linear clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1) clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1) clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * 100000, 1)/1);
+  }
+}
+:where(.kit-field) {
+  --kit-field-padding: calc(var(--kit-field-p) + var(--kit-field-density-offset) / 2);
+}
+
+.kit-field {
+  display: grid;
+  grid-template-areas: "prepend box append";
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: start;
+  column-gap: var(--kit-field-gap);
+  width: 100%;
+  font-size: var(--kit-field-font);
+}
+.kit-field[data-with-message=true] {
+  grid-template-areas: "prepend box append" ". message .";
+}
+.kit-field[data-disabled=true] {
+  opacity: var(--kit-disabled-opacity, 0.55);
+  pointer-events: none;
+}
+.kit-field__prepend, .kit-field__append {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.kit-field__prepend {
+  grid-area: prepend;
+}
+.kit-field__append {
+  grid-area: append;
+}
+.kit-field__box {
+  position: relative;
+  grid-area: box;
+  display: flex;
+  align-items: center;
+  gap: var(--kit-field-gap);
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: calc(var(--kit-field-h) + var(--kit-field-density-offset) / 2);
+  padding-inline: var(--kit-field-padding);
+  border-radius: var(--kit-field-radius);
+  background-color: var(--kit-field-bg);
+  color: var(--kit-field-fg);
+  transition-property: background-color, color, box-shadow;
+  transition-duration: var(--kit-animation-component);
+  transition-timing-function: ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .kit-field__box {
+    transition: none;
+  }
+}
+.kit-field[data-focused=true] .kit-field__box {
+  outline: 2px solid var(--kit-color-focus);
+  outline-offset: 2px;
+}
+.kit-field__prepend-inner, .kit-field__append-inner, .kit-field__clear {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+.kit-field__control {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: 0.375rem;
+  min-width: 0;
+}
+.kit-field__prefix, .kit-field__suffix {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  color: color-mix(in oklab, currentColor, transparent 20%);
+}
+.kit-field__clear {
+  appearance: none;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+}
+.kit-field__clear[data-visible=true] {
+  opacity: 1;
+  pointer-events: auto;
+}
+.kit-field__clear svg {
+  display: block;
+  width: var(--kit-field-icon);
+  height: var(--kit-field-icon);
+}
+.kit-field__line {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: var(--kit-outline-weight);
+  background-color: var(--kit-field-border);
+  pointer-events: none;
+}
+.kit-field[data-error=true] {
+  --kit-field-border: var(--kit-color-error);
+}
+.kit-field__message {
+  grid-area: message;
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr) max-content;
+  gap: var(--kit-field-gap);
+  align-items: start;
+  min-height: 0.875rem;
+  padding-inline: var(--kit-field-padding);
+  font-size: 0.75rem;
+  line-height: 1.2;
+  opacity: 0;
+}
+.kit-field__message[data-visible=true] {
+  opacity: 1;
+}
+.kit-field[data-error=true] .kit-field__message {
+  color: var(--kit-color-error);
+}
+.kit-field__message-text {
+  word-break: break-word;
+}
+.kit-field__message-suffix {
+  text-align: end;
+}
+
+:where(.kit-field .outline) {
+  --outline-color: var(--kit-field-border);
+}
+
+/**
+ * size
+ * @link https://lapikit.dev/docs/components/field#size
+ */
+:where(.kit-field[data-size=xs]) {
+  --kit-field-h: 1.5rem;
+  --kit-field-p: 0.5rem;
+  --kit-field-gap: 0.125rem;
+  --kit-field-font: var(--kit-font-xs);
+  --kit-field-icon: 0.875rem;
+}
+:where(.kit-field[data-size=xs]) :global(.kit-icon[data-size='default']) {
+  --kit-icon-current-size: var(--kit-field-icon);
+}
+
+:where(.kit-field[data-size=sm]) {
+  --kit-field-h: 2rem;
+  --kit-field-p: 0.625rem;
+  --kit-field-gap: 0.25rem;
+  --kit-field-font: var(--kit-font-sm);
+  --kit-field-icon: 1rem;
+}
+:where(.kit-field[data-size=sm]) :global(.kit-icon[data-size='default']) {
+  --kit-icon-current-size: var(--kit-field-icon);
+}
+
+:where(.kit-field[data-size=md]) {
+  --kit-field-h: 2.5rem;
+  --kit-field-p: 0.75rem;
+  --kit-field-gap: 0.25rem;
+  --kit-field-font: var(--kit-font-lg);
+  --kit-field-icon: 1.125rem;
+}
+:where(.kit-field[data-size=md]) :global(.kit-icon[data-size='default']) {
+  --kit-icon-current-size: var(--kit-field-icon);
+}
+
+:where(.kit-field[data-size=lg]) {
+  --kit-field-h: 3rem;
+  --kit-field-p: 0.875rem;
+  --kit-field-gap: 0.25rem;
+  --kit-field-font: var(--kit-font-lg);
+  --kit-field-icon: 1.25rem;
+}
+:where(.kit-field[data-size=lg]) :global(.kit-icon[data-size='default']) {
+  --kit-icon-current-size: var(--kit-field-icon);
+}
+
+:where(.kit-field[data-size=xl]) {
+  --kit-field-h: 3.5rem;
+  --kit-field-p: 1rem;
+  --kit-field-gap: 0.375rem;
+  --kit-field-font: var(--kit-font-xl);
+  --kit-field-icon: 1.375rem;
+}
+:where(.kit-field[data-size=xl]) :global(.kit-icon[data-size='default']) {
+  --kit-icon-current-size: var(--kit-field-icon);
+}
+
+/**
+ * variant
+ * @link https://lapikit.dev/docs/components/field#variants
+ */
+:where(.kit-field[data-variant=tonal]) {
+  --kit-field-bg: color-mix(in oklab, var(--kit-field-ink) 16%, transparent);
+  --kit-field-fg: var(--kit-field-ink);
+  --kit-field-border: transparent;
+  --kit-field-active: color-mix(in oklab, var(--kit-field-ink) 28%, transparent);
+  --kit-field-active-fg: var(--kit-field-ink);
+}
+
+:where(.kit-field[data-variant=outline]) {
+  --kit-field-bg: transparent;
+  --kit-field-fg: var(--kit-field-ink);
+  --kit-field-border: var(--kit-field-color, var(--kit-color-border));
+  --kit-field-active: color-mix(in oklab, var(--kit-field-ink) 14%, transparent);
+  --kit-field-active-fg: var(--kit-field-ink);
+}
+
+:where(.kit-field[data-variant=surface]) {
+  --kit-field-bg: color-mix(in oklab, var(--kit-field-ink) 8%, transparent);
+  --kit-field-fg: var(--kit-field-ink);
+  --kit-field-border: color-mix(in oklab, var(--kit-field-ink) 35%, transparent);
+  --kit-field-active: color-mix(in oklab, var(--kit-field-ink) 18%, transparent);
+  --kit-field-active-fg: var(--kit-field-ink);
+}
+
+:where(.kit-field[data-variant=text]) {
+  --kit-field-bg: transparent;
+  --kit-field-fg: var(--kit-field-ink);
+  --kit-field-border: transparent;
+  --kit-field-active: color-mix(in oklab, var(--kit-field-ink) 14%, transparent);
+  --kit-field-active-fg: var(--kit-field-ink);
+}
+
+:where(.kit-field[data-variant=text]) {
+  --kit-field-border: var(--kit-field-color, var(--kit-color-border));
+}
+
+/**
+ * rounded
+ * @link https://lapikit.dev/docs/customize
+ */
+:where(.kit-field[data-rounded="0"]) {
+  --kit-field-radius: var(--kit-shape-none);
+}
+
+:where(.kit-field[data-rounded=xs]) {
+  --kit-field-radius: var(--kit-shape-xs);
+}
+
+:where(.kit-field[data-rounded=sm]) {
+  --kit-field-radius: var(--kit-shape-sm);
+}
+
+:where(.kit-field[data-rounded=md]) {
+  --kit-field-radius: var(--kit-shape-md);
+}
+
+:where(.kit-field[data-rounded=lg]) {
+  --kit-field-radius: var(--kit-shape-lg);
+}
+
+:where(.kit-field[data-rounded=xl]) {
+  --kit-field-radius: var(--kit-shape-xl);
+}
+
+:where(.kit-field[data-rounded=full]) {
+  --kit-field-radius: var(--kit-shape-full);
+}
+
+/**
+ * density
+ * @link https://lapikit.dev/docs/components/field#density
+ */
+:where(.kit-field[data-density=dense]) {
+  --kit-field-density-offset: var(--kit-density-dense);
+}
+
+:where(.kit-field[data-density=compact]) {
+  --kit-field-density-offset: var(--kit-density-compact);
+}
+
+:where(.kit-field[data-density=default]) {
+  --kit-field-density-offset: var(--kit-density-default);
+}
+
+:where(.kit-field[data-density=comfortable]) {
+  --kit-field-density-offset: var(--kit-density-comfortable);
+}
+
+:where(.kit-field[data-density=spacious]) {
+  --kit-field-density-offset: var(--kit-density-spacious);
+}</style>

package/dist/components/field/field.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FieldProps } from './field.types.ts';
+declare const Field: import("svelte").Component<FieldProps, {}, "ref">;
+type Field = ReturnType<typeof Field>;
+export default Field;

package/dist/components/field/field.types.d.ts

@@ -0,0 +1,46 @@
+import type { Snippet } from 'svelte';
+import type { ColorProps, Component, ElevationProps, RoundedType, SizeType } from '../../@types';
+export type FieldVariant = 'filled' | 'tonal' | 'outline' | 'surface' | 'text';
+/** The attributes to spread on the control (input, textarea, select...) */
+export interface FieldControlProps {
+    id: string;
+    'aria-describedby': string | undefined;
+    'aria-invalid': true | undefined;
+    disabled: boolean;
+    readonly: boolean;
+}
+export interface FieldBaseProps {
+    variant?: FieldVariant;
+    size?: SizeType;
+    density?: 'dense' | 'compact' | 'default' | 'comfortable' | 'spacious';
+    rounded?: RoundedType | 'full';
+    color?: ColorProps;
+    elevation?: ElevationProps;
+    disabled?: boolean;
+    readonly?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    message?: string;
+    messagePrefix?: string;
+    messageSuffix?: string;
+    persistentMessage?: boolean;
+    clearable?: boolean;
+    persistentClear?: boolean;
+    prefix?: string;
+    suffix?: string;
+    append?: Snippet;
+    prepend?: Snippet;
+    prependInner?: Snippet;
+    appendInner?: Snippet;
+}
+export interface FieldProps extends Omit<Component, 'children'>, FieldBaseProps {
+    ref?: HTMLElement | null;
+    /** id of the control, generated when empty */
+    id?: string;
+    /** the field holds a value: shows the clear button */
+    dirty?: boolean;
+    /** text at the end of the message line, the counter of a textfield */
+    counter?: string;
+    onclear?: () => void;
+    children?: Snippet<[FieldControlProps]>;
+}

package/dist/components/field/field.types.js

@@ -0,0 +1 @@
+export {};