@rokkit/ui 1.0.0-next.124 → 1.0.0-next.127

package/src/types/button.ts

@@ -0,0 +1,83 @@
+/**
+ * Button Component Types
+ *
+ * Provides types for the Button and ButtonGroup components.
+ * Supports variants, styles, sizes, loading state, link buttons, and custom content.
+ */
+
+import type { Snippet } from 'svelte'
+
+// =============================================================================
+// Variant & Style Types
+// =============================================================================
+
+/** Semantic color variant */
+export type ButtonVariant = 'default' | 'primary' | 'secondary' | 'danger'
+
+/** Visual style treatment */
+export type ButtonStyle = 'default' | 'outline' | 'ghost' | 'gradient' | 'link'
+
+// =============================================================================
+// Component Props Types
+// =============================================================================
+
+/**
+ * Props for the Button component
+ */
+export interface ButtonProps {
+	/** Semantic color variant */
+	variant?: ButtonVariant
+
+	/** Visual style treatment */
+	style?: ButtonStyle
+
+	/** Size variant */
+	size?: 'sm' | 'md' | 'lg'
+
+	/** HTML button type */
+	type?: 'button' | 'submit' | 'reset'
+
+	/** Button label text */
+	label?: string
+
+	/** Leading icon class */
+	icon?: string
+
+	/** Trailing icon class */
+	iconRight?: string
+
+	/** Navigates as link instead of button */
+	href?: string
+
+	/** Link target (when href is set) */
+	target?: string
+
+	/** Disabled state */
+	disabled?: boolean
+
+	/** Loading state — shows spinner, disables interaction */
+	loading?: boolean
+
+	/** Additional CSS classes */
+	class?: string
+
+	/** Click handler */
+	onclick?: (event: MouseEvent) => void
+
+	/** Custom content snippet */
+	children?: Snippet
+}
+
+/**
+ * Props for the ButtonGroup component
+ */
+export interface ButtonGroupProps {
+	/** Size applied to all buttons in the group */
+	size?: 'sm' | 'md' | 'lg'
+
+	/** Additional CSS classes */
+	class?: string
+
+	/** Content snippet (buttons) */
+	children?: Snippet
+}

package/src/types/code.ts

@@ -0,0 +1,46 @@
+/**
+ * Code component types
+ */
+
+import { defaultStateIcons } from '@rokkit/core'
+
+/** Supported themes for code highlighting */
+export type CodeTheme = 'light' | 'dark'
+
+/**
+ * Icons configuration for code action states.
+ * Keys match the naming convention in @rokkit/core defaultStateIcons.
+ */
+export interface CodeStateIcons {
+	/** Icon class for copy button */
+	copy?: string
+	/** Icon class for copy success state */
+	copysuccess?: string
+}
+
+/**
+ * Default state icons — uses semantic names from @rokkit/core
+ * that get resolved to actual icon classes via UnoCSS shortcuts.
+ */
+export const defaultCodeStateIcons: CodeStateIcons = {
+	copy: defaultStateIcons.action.copy,
+	copysuccess: defaultStateIcons.action.copysuccess
+}
+
+/** Props for the Code component */
+export interface CodeProps {
+	/** The code string to display and highlight */
+	code: string
+	/** Programming language for syntax highlighting */
+	language?: string
+	/** Color theme for the code block */
+	theme?: CodeTheme
+	/** Whether to show line numbers */
+	showLineNumbers?: boolean
+	/** Whether to show the copy button */
+	showCopyButton?: boolean
+	/** Icons for copy action states */
+	icons?: CodeStateIcons
+	/** Additional CSS class */
+	class?: string
+}

package/src/types/floating-action.ts

@@ -0,0 +1,118 @@
+import type { Snippet } from 'svelte'
+import type { ItemFields } from './item-proxy.js'
+
+/**
+ * Field mapping for FloatingAction items
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface FloatingActionFields extends ItemFields {}
+
+/**
+ * Default field mappings
+ */
+export const defaultFloatingActionFields: Required<
+	Pick<FloatingActionFields, 'text' | 'value' | 'icon' | 'label' | 'disabled'>
+> = {
+	text: 'text',
+	value: 'value',
+	icon: 'icon',
+	label: 'label',
+	disabled: 'disabled'
+}
+
+/**
+ * A single action item
+ */
+export type FloatingActionItem = Record<string, unknown>
+
+/**
+ * Event handlers passed to custom snippets
+ */
+export interface FloatingActionItemHandlers {
+	onclick: () => void
+	onkeydown: (event: KeyboardEvent) => void
+}
+
+/**
+ * Custom snippet for rendering an action item
+ */
+export type FloatingActionItemSnippet = Snippet<
+	[item: FloatingActionItem, fields: FloatingActionFields, handlers: FloatingActionItemHandlers]
+>
+
+/**
+ * Position options for the FAB
+ */
+export type FloatingActionPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
+
+/**
+ * Expansion direction for action items
+ */
+export type FloatingActionExpand = 'radial' | 'vertical' | 'horizontal'
+
+/**
+ * Alignment for action items in the menu
+ */
+export type FloatingActionItemAlign = 'start' | 'center' | 'end'
+
+/**
+ * Props for the FloatingAction component
+ */
+export interface FloatingActionProps {
+	/** Array of action items */
+	items?: FloatingActionItem[]
+
+	/** Field mapping configuration */
+	fields?: FloatingActionFields
+
+	/** Icon for the main trigger button */
+	icon?: string
+
+	/** Icon shown when menu is open (defaults to close icon) */
+	closeIcon?: string
+
+	/** Accessible label for the trigger */
+	label?: string
+
+	/** Size variant */
+	size?: 'sm' | 'md' | 'lg'
+
+	/** Position on screen */
+	position?: FloatingActionPosition
+
+	/** How items expand when opened */
+	expand?: FloatingActionExpand
+
+	/** Alignment of items in the menu (start/center/end) */
+	itemAlign?: FloatingActionItemAlign
+
+	/** Disable the FAB */
+	disabled?: boolean
+
+	/** Whether the menu is open (bindable) */
+	open?: boolean
+
+	/** Show backdrop overlay when open */
+	backdrop?: boolean
+
+	/** Position relative to nearest positioned ancestor instead of viewport */
+	contained?: boolean
+
+	/** Called when an action is selected */
+	onselect?: (value: unknown, item: FloatingActionItem) => void
+
+	/** Called when menu opens */
+	onopen?: () => void
+
+	/** Called when menu closes */
+	onclose?: () => void
+
+	/** Additional CSS classes */
+	class?: string
+
+	/** Custom snippet for rendering action items */
+	item?: FloatingActionItemSnippet
+}
+
+// Re-export getSnippet for convenience
+export { getSnippet } from './menu.js'

package/src/types/floating-navigation.ts

@@ -0,0 +1,68 @@
+import type { Snippet } from 'svelte'
+import type { ItemFields } from './item-proxy.js'
+
+/**
+ * Position on the screen edge
+ */
+export type FloatingNavigationPosition = 'left' | 'right' | 'top' | 'bottom'
+
+/**
+ * Size variant
+ */
+export type FloatingNavigationSize = 'sm' | 'md' | 'lg'
+
+/**
+ * A single navigation item
+ */
+export type FloatingNavigationItem = Record<string, unknown>
+
+/**
+ * Custom snippet for rendering a navigation item
+ */
+export type FloatingNavigationItemSnippet = Snippet<
+	[item: FloatingNavigationItem, proxy: { text: string; icon: string; active: boolean }]
+>
+
+/**
+ * Props for the FloatingNavigation component
+ */
+export interface FloatingNavigationProps {
+	/** Navigation items (data-driven) */
+	items?: FloatingNavigationItem[]
+
+	/** Field mapping configuration */
+	fields?: Partial<ItemFields>
+
+	/** Active item value (bindable) */
+	value?: unknown
+
+	/** Screen edge to anchor to */
+	position?: FloatingNavigationPosition
+
+	/** Whether nav is pinned open (bindable) */
+	pinned?: boolean
+
+	/** Auto-track active section via IntersectionObserver */
+	observe?: boolean
+
+	/** IntersectionObserver config */
+	observerOptions?: IntersectionObserverInit
+
+	/** Size variant */
+	size?: FloatingNavigationSize
+
+	/** Accessible label */
+	label?: string
+
+	/** Called when an item is selected */
+	onselect?: (value: unknown, item: FloatingNavigationItem) => void
+
+	/** Called when pin state changes */
+	onpinchange?: (pinned: boolean) => void
+
+	/** Custom snippet for rendering items */
+	item?: FloatingNavigationItemSnippet
+
+	/** Additional CSS classes */
+	class?: string
+}

package/src/types/index.ts

@@ -0,0 +1,53 @@
+// Button Types
+export * from './button.js'
+
+// Code Types
+export * from './code.js'
+
+// Menu Types
+export * from './menu.js'
+
+// Select Types
+export * from './select.js'
+
+// Toolbar Types
+export * from './toolbar.js'
+
+// Tabs Types
+export * from './tabs.js'
+
+// Toggle Types
+export * from './toggle.js'
+
+// Switch Types
+export * from './switch.js'
+
+// List Types
+export * from './list.js'
+
+// Tree Types
+export * from './tree.js'
+
+// Item Proxy
+export * from './item-proxy.js'
+
+// Floating Action Types
+export * from './floating-action.js'
+
+// Palette Types
+export * from './palette.js'
+
+// Table Types
+export * from './table.js'
+
+// SearchFilter Types
+export * from './search-filter.js'
+
+// Range Types
+export * from './range.js'
+
+// Timeline Types
+export * from './timeline.js'
+
+// FloatingNavigation Types
+export * from './floating-navigation.js'