@bagelink/vue 1.14.15 → 1.15.0

package/src/components/layout/TabsNav.vue

@@ -17,7 +17,7 @@ const props = defineProps<{
 	iconSize?: number | string
 	iconMobileSize?: number | string
 	thin?: boolean
-	size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large'
+	size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 	fullWidth?: boolean
 	fullWidthMobile?: boolean
 	alignTxt?: 'center' | 'start' | 'end'
@@ -146,10 +146,10 @@ onBeforeUnmount(() => {
 			{ active: isActive(tab) },
 			{	
 				'bgl_tab-thin': thin,
-				'bgl_tab-xs': size === 'xs' || size === 'extra-small',
-				'bgl_tab-s': size === 's' || size === 'small',
-				'bgl_tab-l': size === 'l' || size === 'large',
-				'bgl_tab-xl': size === 'xl' || size === 'extra-large',
+				'bgl_tab-xs': size === 'xs',
+				'bgl_tab-s': size === 'sm',
+				'bgl_tab-l': size === 'lg',
+				'bgl_tab-xl': size === 'xl',
 				'w-100p justify-center': fullWidth,
 				'w-auto m_w-100p': fullWidthMobile,
 				'bgl_tab-align-center': alignTxt === 'center',

package/src/components/layout/appLayoutContext.ts

@@ -0,0 +1,44 @@
+import type { InjectionKey, Ref } from 'vue'
+import { inject, ref } from 'vue'
+
+export const SIDEBAR_COLLAPSED_WIDTH = '66px'
+export const SIDEBAR_COLLAPSED_WIDTH_CARD = '82px'
+
+export interface AppLayoutContext {
+	/** Sidebar open (expanded) state */
+	isOpen: Ref<boolean>
+	/** Viewport is below MOBILE_BREAKPOINT */
+	isMobile: Ref<boolean>
+	toggleMenu: () => void
+	/** Close the sidebar when on mobile (e.g. after navigating) */
+	closeOnMobile: () => void
+	sidebarWidth: string
+	sidebarCollapsedWidth: string
+	/** Sidebar rendered as a floating card */
+	sidebarCardStyle: boolean
+}
+
+export const AppLayoutKey: InjectionKey<AppLayoutContext> = Symbol('AppLayout')
+
+/**
+ * Access the AppLayout context (sidebar open state, mobile flag, toggle).
+ * Works inside AppLayout's slots — including custom header buttons.
+ * Outside an AppLayout it warns (dev) and returns an inert fallback.
+ */
+export function useAppLayout(): AppLayoutContext {
+	const ctx = inject(AppLayoutKey, null)
+	if (ctx) { return ctx }
+
+	if (import.meta.env?.DEV) {
+		console.warn('[bagelink] useAppLayout() called outside <AppLayout>. AppSidebar/AppContent are designed to be used inside it.')
+	}
+	return {
+		isOpen: ref(true),
+		isMobile: ref(false),
+		toggleMenu: () => {},
+		closeOnMobile: () => {},
+		sidebarWidth: '260px',
+		sidebarCollapsedWidth: SIDEBAR_COLLAPSED_WIDTH,
+		sidebarCardStyle: false,
+	}
+}

package/src/components/layout/index.ts

@@ -1,6 +1,8 @@
 export { default as AppContent } from './AppContent.vue'
 export { default as AppLayout } from './AppLayout.vue'
 export { default as AppSidebar } from './AppSidebar.vue'
+export { useAppLayout } from './appLayoutContext'
+export type { AppLayoutContext } from './appLayoutContext'
 export { default as BottomMenu } from './BottomMenu.vue'
 export { default as Layout } from './Layout.vue'
 export { default as Panel } from './Panel.vue'

package/src/components/lightbox/Lightbox.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { LightboxItem } from './lightbox.types'
 
-import { BglVideo, Btn, Icon, Zoomer, Image, normalizeURL, Swiper, downloadFile } from '@bagelink/vue'
+import { BglVideo, Btn, Icon, Zoomer, Image, normalizeURL, Swiper, downloadFile, useEscapeKey } from '@bagelink/vue'
 import { computed, ref, watch } from 'vue'
 
 const isOpen = ref(false)
@@ -31,14 +31,14 @@ function open(item: LightboxItem, groupItems?: LightboxItem[]) {
 	})
 	if (currentIndex.value === -1) currentIndex.value = 0
 	zoom.value = 1
-	document.addEventListener('keydown', handleKeydown)
 }
 
 function close() {
 	isOpen.value = false
-	document.removeEventListener('keydown', handleKeydown)
 }
 
+useEscapeKey(close, isOpen)
+
 function selectItem(index: number) {
 	currentIndex.value = index
 	zoom.value = 1
@@ -58,12 +58,6 @@ watch(() => currentIndex.value, () => {
 	zoom.value = 1
 })
 
-function handleKeydown(event: KeyboardEvent) {
-	if (event.key === 'Escape') {
-		close()
-	}
-}
-
 defineExpose({ open, close })
 </script>
 

package/src/composables/index.ts

@@ -6,6 +6,7 @@ import { computed, toValue } from 'vue'
 
 export { useAddToCalendar } from './useAddToCalendar'
 export { useDevice } from './useDevice'
+export { useEscapeKey } from './useEscapeKey'
 export { useExcel } from './useExcel'
 export { useLocalStore } from './useLocalStore'
 export { usePolling } from './usePolling'

package/src/composables/useDevice.ts

@@ -1,4 +1,5 @@
 import { onMounted, onUnmounted, ref } from 'vue'
+import { MOBILE_BREAKPOINT } from '../utils/constants'
 
 export function useDevice() {
 	const innerWidth = ref(0)
@@ -20,7 +21,7 @@ export function useDevice() {
 
 		// Update current values
 		innerWidth.value = window.innerWidth
-		isMobile.value = window.innerWidth < 768
+		isMobile.value = window.innerWidth <= MOBILE_BREAKPOINT
 		scrollY.value = window.scrollY
 		scrollX.value = window.scrollX
 		innerHeight.value = window.innerHeight

package/src/composables/useEscapeKey.ts

@@ -0,0 +1,56 @@
+import type { MaybeRefOrGetter } from 'vue'
+import { onBeforeUnmount, onMounted, toValue } from 'vue'
+
+interface EscapeEntry {
+	handler: (e: KeyboardEvent) => void
+	enabled: () => boolean
+}
+
+const stack: EscapeEntry[] = []
+let listening = false
+
+function onDocumentKeydown(e: KeyboardEvent) {
+	if (e.key !== 'Escape') { return }
+	// LIFO: the most recently mounted (topmost) active layer handles Escape
+	for (let i = stack.length - 1; i >= 0; i--) {
+		if (stack[i].enabled()) {
+			stack[i].handler(e)
+			return
+		}
+	}
+}
+
+function syncListener() {
+	if (typeof document === 'undefined') { return }
+	if (stack.length > 0 && !listening) {
+		document.addEventListener('keydown', onDocumentKeydown)
+		listening = true
+	} else if (stack.length === 0 && listening) {
+		document.removeEventListener('keydown', onDocumentKeydown)
+		listening = false
+	}
+}
+
+/**
+ * Run a handler when Escape is pressed, while `enabled` is truthy.
+ * - One shared document listener for the whole app
+ * - LIFO: the most recently mounted active layer wins (dropdown inside a lightbox closes first)
+ * - Automatically cleaned up on unmount
+ *
+ * @example
+ * useEscapeKey(() => close(), () => isOpen.value)
+ */
+export function useEscapeKey(handler: (e: KeyboardEvent) => void, enabled: MaybeRefOrGetter<boolean> = true) {
+	const entry: EscapeEntry = { handler, enabled: () => !!toValue(enabled) }
+
+	onMounted(() => {
+		stack.push(entry)
+		syncListener()
+	})
+
+	onBeforeUnmount(() => {
+		const i = stack.indexOf(entry)
+		if (i !== -1) { stack.splice(i, 1) }
+		syncListener()
+	})
+}

package/src/composables/useSchemaField.ts

@@ -4,7 +4,6 @@ import type { Field, Attributes, Path, SchemaChild, BaseBagelField, VNodeFn } fr
 import {
 	TextInput,
 	NumberInput,
-	FieldArray,
 	SelectInput,
 	ToggleInput,
 	CheckInput,
@@ -12,7 +11,6 @@ import {
 	UploadInput,
 	DateInput,
 	TabsNav,
-	BglForm,
 	bindAttrs,
 	classify,
 	keyToLabel,
@@ -74,7 +72,7 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 			text: TextInput,
 			textarea: TextInput,
 			number: NumberInput,
-			array: FieldArray,
+			array: 'div',
 			color: ColorInput,
 			tel: TelInput,
 			select: SelectInput,
@@ -85,7 +83,7 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 			file: UploadInput,
 			date: DateInput,
 			tabs: TabsNav,
-			form: BglForm,
+			form: 'div',
 			range: RangeInput,
 			email: EmailInput
 		}
@@ -195,19 +193,6 @@ export function useSchemaField<T extends { [key: string]: any }>(optns: UseSchem
 			defaultValue,
 		}
 
-		// Special handling for FieldArray component to pass attrs.schema as schema prop
-		if (Component === FieldArray && field.attrs?.schema) {
-			props.schema = field.attrs.schema
-		}
-		// Special handling for FieldArray component to pass attrs.type as type prop
-		if (Component === FieldArray && field.attrs?.type) {
-			props.type = field.attrs.type
-		}
-		// Special handling for FieldArray component to pass collapsed prop
-		if (Component === FieldArray && 'collapsed' in field) {
-			props.collapsed = (field as any).collapsed
-		}
-
 		// Wire top-level onClick with conditional args
 		if (typeof (field as any).onClick === 'function') {
 			const original = (field as any).onClick as (val?: any, row?: T) => void

package/src/composables/useTheme.ts

@@ -1,5 +1,5 @@
 // composables/useTheme.ts
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, watch } from 'vue'
 
 export interface ThemeOption {
 	value: string
@@ -118,33 +118,37 @@ function addTheme(theme: ThemeOption) {
  * setTheme('ocean')
  */
 
-export function useTheme() {
-	onMounted(() => {
-		const saved = window.localStorage.getItem(STORAGE_KEY)
-		const validTheme = themeOptions.value.find(t => t.value === saved)
+// Module-level one-time init: a single matchMedia listener and a single
+// colorMode watcher, no matter how many components call useTheme().
+let initialized = false
 
-		if (validTheme) {
-			colorMode.value = saved!
-		}
+function initTheme() {
+	if (initialized || !isBrowser) { return }
+	initialized = true
+
+	const saved = window.localStorage.getItem(STORAGE_KEY)
+	if (themeOptions.value.some(t => t.value === saved)) {
+		colorMode.value = saved!
+	}
 
-		// Apply initial theme
-		applyTheme(colorMode.value)
+	applyTheme(colorMode.value)
 
-		// React to system changes when in "system" mode
-		const mq = window.matchMedia('(prefers-color-scheme: dark)')
-		const handler = (e: MediaQueryListEvent) => {
-			if (colorMode.value === 'system') {
-				applyTheme('system')
-			}
+	// React to system changes when in "system" mode
+	window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+		if (colorMode.value === 'system') {
+			applyTheme('system')
 		}
-		mq.addEventListener('change', handler)
 	})
 
-	// Watch for mode changes
+	// Persist + apply on mode changes
 	watch(colorMode, (newMode) => {
-		if (isBrowser) localStorage.setItem(STORAGE_KEY, newMode)
+		localStorage.setItem(STORAGE_KEY, newMode)
 		applyTheme(newMode)
 	})
+}
+
+export function useTheme() {
+	initTheme()
 
 	const theme = computed(() => colorMode.value)
 

package/src/form-flow/FormFlow.vue

@@ -10,6 +10,7 @@ import EmailInput from '../components/form/inputs/EmailInput.vue'
 import NumberInput from '../components/form/inputs/NumberInput.vue'
 import PasswordInput from '../components/form/inputs/PasswordInput.vue'
 import RadioGroup from '../components/form/inputs/RadioGroup.vue'
+import RangeInput from '../components/form/inputs/RangeInput.vue'
 import RichText from '../components/form/inputs/RichText/index.vue'
 import SelectBtn from '../components/form/inputs/SelectBtn.vue'
 import SelectInput from '../components/form/inputs/SelectInput.vue'
@@ -223,6 +224,7 @@ function getFieldComponent(fieldOrType: FieldBuilder | string) {
 		array: ArrayInput,
 		upload: UploadInput,
 		color: ColorInput,
+		range: RangeInput,
 	}
 
 	return (componentMap[type] as typeof TextInput | undefined) ?? TextInput

package/src/form-flow/form-flow.ts

@@ -358,6 +358,13 @@ export const $ = {
 		return new Field('color', parseArgs(labelOrConfig, config))
 	},
 
+	range(
+		labelOrConfig?: string | (BaseFieldConfig & { min?: number, max?: number, step?: number, multiRange?: boolean }),
+		config?: BaseFieldConfig & { min?: number, max?: number, step?: number, multiRange?: boolean }
+	): FieldBuilder<number | [number, number]> {
+		return new Field('range', parseArgs(labelOrConfig, config))
+	},
+
 	upload(
 		labelOrConfig?: string | (BaseFieldConfig & {
 			multiple?: boolean

package/src/index.ts

@@ -1,7 +1,6 @@
 import './styles/bagel.css'
 
 export * from './components'
-export * from './components/form/useBagelFormState'
 export * from './composables'
 // Dialog (native <dialog> based)
 export * from './dialog'
@@ -29,7 +28,6 @@ export { type BagelToastOptions, type ToastApi, ToastPlugin, useToast } from './
 export * from './types'
 export * from './utils'
 export * from './utils/allCountries'
-export * from './utils/BagelFormUtils'
 export * from './utils/calendar/dateUtils'
 
 export * from './utils/constants'

package/src/styles/inputs.css

@@ -524,7 +524,7 @@ select {
 }
 
 .error-message {
-    color: var(--bgl-red, #dc3545);
+    color: var(--bgl-red);
     font-size: 10px;
     position: absolute;
     inset-inline-end: 0;

package/src/types/BagelForm.ts

@@ -1,83 +1,30 @@
-// Local type definitions for internal use only
-import type { Paths, Get, IterableElement, OmitIndexSignature } from 'type-fest'
+/**
+ * Schema field types used by DataTable, DataPreview, useSchemaField and elementUtils.
+ * (The BagelForm form-rendering system was removed — use FormFlow with defineSchema.)
+ */
+import type { Paths, Get, OmitIndexSignature } from 'type-fest'
 import type { ToString } from 'type-fest/source/internal'
 import type { LiteralStringUnion } from 'type-fest/source/literal-union'
 import type { PathsOptions, DefaultPathsOptions } from 'type-fest/source/paths'
 import type { VNode } from 'vue'
 
-type ArrayAttrs = any
-interface Option { label: string, value: any }
-
 // BagelInputShellProps is exported from components/form/inputs/bagelInputShell.ts
 // Do not re-export here to avoid duplicate export in src/index.ts
 import type { BagelInputShellProps } from '../components/form/inputs/bagelInputShell'
 
-export type AttributeValue
-	= | string
-		| number
-		| boolean
-		| undefined
-		| { [key: string]: any }
-
-export type AttributeFn<T, P extends Path<T>> = (
-	field: SmartFieldVal<T, P>,
-	row?: T
-) => AttributeValue
-
-export interface Attributes<T, P extends Path<T>> {
-	[key: string]: AttributeValue | AttributeFn<T, P>
-}
-
-export type BagelFieldOptions<T, P extends Path<T>>
-	= | string
-		| (
-			| {
-				label?: string
-				value: string | number
-			}
-			| string
-			| number
-			| boolean
-			| { [key: string]: any }
-		)[]
-		| ((val?: SmartFieldVal<T, P>, rowData?: T) => Option[] | ((query: string) => Promise<Option[]>))
-		| ((query: string, val?: SmartFieldVal<T, P>, rowData?: T) => Promise<Option[]>)
-
-export type VIfType<T, P extends Path<T>>
-	= | string
-		| boolean
-		| ((val?: SmartFieldVal<T, P>, rowData?: T) => boolean)
-
-export type ValidationFn<T, P extends Path<T>> = (
-	val?: SmartFieldVal<T, P>,
-	rowData?: T
-) => string | undefined
+interface Option { label: string, value: any }
 
-export interface ShallowPathsOptions extends PathsOptions {
-	maxRecursionDepth: 0
-}
+// ---------- Path resolution ----------
 
 export type _Path<
 	T,
 	PO extends PathsOptions = DefaultPathsOptions,
 > = ToString<Paths<OmitIndexSignature<T>, PO>>
 
-// Utility type for open-ended object paths
-export type OpenEndedPath<T>
-	= keyof T extends infer K
-		? K extends keyof T
-			? T[K] extends { [key: string]: any }
-				? `${K & string}.${string}`
-				: never
-			: never
-		: never
-
 // Helper type to get paths for index signature properties
 type IndexSignaturePaths<T> = {
 	[K in keyof T]: T[K] extends { [key: string]: any }
-		? T[K] extends { [key: string]: infer V }
-			? `${K & string}.${string}`
-			: never
+		? `${K & string}.${string}`
 		: never
 }[keyof T]
 
@@ -87,7 +34,11 @@ export type Path<T, PO extends PathsOptions = DefaultPathsOptions>
 		? LiteralStringUnion<_Path<T, PO>>
 		: _Path<T, PO> | IndexSignaturePaths<T> | `${keyof T & string}.more_info.${string}`
 
-// Smart field value type that preserves type information when possible
+/** The value type at path P in object T. Falls back to unknown if resolution fails. */
+export type FieldVal<T, P extends Path<T>>
+	= unknown extends Get<T, P> ? unknown : Get<T, P>
+
+/** Field value type that preserves type information when possible. */
 export type SmartFieldVal<T, P extends Path<T>>
 	= P extends string
 		? P extends keyof T
@@ -95,8 +46,25 @@ export type SmartFieldVal<T, P extends Path<T>>
 			: any
 		: FieldVal<T, P>
 
-// Smart bagel field options that preserve type information
-export type SmartBagelFieldOptions<T, P extends Path<T>>
+// ---------- Field callbacks & attributes ----------
+
+export type AttributeValue
+	= | string
+		| number
+		| boolean
+		| undefined
+		| { [key: string]: any }
+
+export type AttributeFn<T, P extends Path<T>> = (
+	field: SmartFieldVal<T, P>,
+	row?: T
+) => AttributeValue
+
+export interface Attributes<T, P extends Path<T>> {
+	[key: string]: AttributeValue | AttributeFn<T, P>
+}
+
+export type FieldOptions<T, P extends Path<T>>
 	= | string
 		| (
 			| {
@@ -111,43 +79,27 @@ export type SmartBagelFieldOptions<T, P extends Path<T>>
 		| ((val?: SmartFieldVal<T, P>, rowData?: T) => Option[] | ((query: string) => Promise<Option[]>))
 		| ((query: string, val?: SmartFieldVal<T, P>, rowData?: T) => Promise<Option[]>)
 
-// Smart VIf type that preserves type information
-export type SmartVIfType<T, P extends Path<T>>
+export type VIfType<T, P extends Path<T>>
 	= | string
 		| boolean
 		| ((val?: SmartFieldVal<T, P>, rowData?: T) => boolean)
 
-// Smart validation function that preserves type information
-export type SmartValidationFn<T, P extends Path<T>> = (
+export type ValidationFn<T, P extends Path<T>> = (
 	val?: SmartFieldVal<T, P>,
 	rowData?: T
 ) => string | undefined
 
-// Smart attribute function that preserves type information
-export type SmartAttributeFn<T, P extends Path<T>> = (
-	field: SmartFieldVal<T, P>,
-	row?: T
-) => AttributeValue
-
-// Smart transform function that preserves type information
-export type SmartTransformFn<T, P extends Path<T>> = (
+export type TransformFn<T, P extends Path<T>> = (
 	val?: SmartFieldVal<T, P>,
 	rowData?: T
 ) => any
 
-// Smart update function that preserves type information
-export type SmartUpdateFn<T, P extends Path<T>> = (
+export type UpdateFn<T, P extends Path<T>> = (
 	val?: SmartFieldVal<T, P>,
 	rowData?: T
 ) => unknown
 
-/** The value type at path P in object T. */
-// Fall back to unknown if type resolution fails
-export type FieldVal<T, P extends Path<T>>
-	= unknown extends Get<T, P> ? unknown : Get<T, P>
-
-/** If path P in T is an array, this gives the array's element type. */
-export type ArrayFieldVal<T, P extends Path<T>> = IterableElement<Get<T, P>>
+// ---------- Schema fields ----------
 
 export type VNodeFn<T, P extends Path<T>> = (props: {
 	row?: T
@@ -189,50 +141,26 @@ export interface BaseBagelField<
 	'id'?: P
 	'label'?: string
 	'placeholder'?: string
-	'class'?: AttributeValue | SmartAttributeFn<T, P>
+	'class'?: AttributeValue | AttributeFn<T, P>
 	'attrs'?: Attributes<T, P>
 	'required'?: boolean
 	'disabled'?: boolean
 	'helptext'?: string
-	'options'?: SmartBagelFieldOptions<T, P>
+	'options'?: FieldOptions<T, P>
 	'children'?: SchemaChild<T, Path<T, PO>, PO>[]
 	'slots'?: { [key: string]: SchemaChild<T, Path<T, PO>, PO>[] }
 	'defaultValue'?: any
-	'vIf'?: SmartVIfType<T, P>
-	'v-if'?: SmartVIfType<T, P>
-	'transform'?: SmartTransformFn<T, P>
-	'onUpdate'?: SmartUpdateFn<T, P>
-	'validate'?: SmartValidationFn<T, P>
+	'vIf'?: VIfType<T, P>
+	'v-if'?: VIfType<T, P>
+	'transform'?: TransformFn<T, P>
+	'onUpdate'?: UpdateFn<T, P>
+	'validate'?: ValidationFn<T, P>
 }
 
-export type _MappedBaseBagelField<
-	T,
-	PO extends PathsOptions = DefaultPathsOptions,
-> = {
-	[P in Path<T, PO>]: BaseBagelField<T, P, PO>
-}
-
-export type MappedBaseBagelFieldP<
-	T,
-	P extends Path<T, PO>,
-	PO extends PathsOptions = DefaultPathsOptions,
-> = _MappedBaseBagelField<T, PO>[P]
-
-export type FieldByP<
-	T,
-	P extends Path<T, PO>,
-	PO extends PathsOptions = DefaultPathsOptions,
-> = MappedBaseBagelFieldP<T, P, PO>
-
 export type Field<
 	T,
 	PO extends PathsOptions = DefaultPathsOptions,
-> = MappedBaseBagelFieldP<T, Path<T, PO>, PO>
-
-export type BglFieldT<
-	T,
-	PO extends PathsOptions = DefaultPathsOptions,
-> = Field<T, PO>
+> = ValidBaseBagelField<T, PO>
 
 export type SchemaField<
 	T,
@@ -244,40 +172,7 @@ export type BglFormSchemaT<
 	PO extends PathsOptions = DefaultPathsOptions,
 > = (SchemaField<T, PO> | BaseBagelField<T, Path<T, PO>, PO>)[]
 
-export type ShallowBglFormSchemaT<
-	T,
-	PO extends PathsOptions = ShallowPathsOptions,
-> = (SchemaField<T, PO> | BaseBagelField<T, Path<T, PO>, PO>)[]
-
-export interface InputBagelField<
-	T,
-	P extends Path<T, PO>,
-	PO extends PathsOptions = DefaultPathsOptions
->
-	extends BaseBagelField<T, P, PO> {
-	$el: 'text' | any
-	type?: string
-}
-
-export interface SelectBagelField<
-	T,
-	P extends Path<T, PO>,
-	PO extends PathsOptions = DefaultPathsOptions,
->
-	extends BaseBagelField<T, P, PO> {
-	$el: 'select' | any
-	type?: string
-}
-
-export interface ArrayBagelField<
-	T,
-	P extends Path<T, PO>,
-	PO extends PathsOptions = DefaultPathsOptions,
->
-	extends BaseBagelField<T, P, PO> {
-	$el: 'array' | any
-	attrs?: ArrayAttrs
-}
+// ---------- Input component contracts ----------
 
 export interface ValidateInputBaseT {
 	validate?: ValidationFn<{ [key: string]: unknown }, string>

package/src/types/BtnOptions.ts

@@ -3,18 +3,20 @@ import type { IconType, ThemeType } from '.'
 export interface BtnOptions {
 	onClick?: () => void
 	color?: ThemeType
-	theme?: ThemeType
 	disabled?: boolean
 	icon?: IconType
+	variant?: 'solid' | 'flat' | 'outline'
 	flat?: boolean
+	outline?: boolean
+	/** @deprecated Use `outline` */
+	border?: boolean
 	thin?: boolean
 	type?: 'button' | 'submit' | 'reset'
 	loading?: boolean
 	role?: string
 	value?: string
-	border?: boolean
 }
 
 export type UnitSize = 'px' | 'rem' | 'vh' | 'vw'
-export type SizeType = 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge'
+export type SizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 export type SizeUnit = `${number}` | number | `${number}${UnitSize}`