initial: mirror of @fn_library from fn_registry

75 components + DESIGN_SYSTEM.md + sync script.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

components/simple_select.tsx

@@ -0,0 +1,74 @@
+import { NativeSelect } from '@mantine/core'
+
+export interface SimpleSelectOption {
+  value: string
+  label: string
+  disabled?: boolean
+}
+
+export interface SimpleSelectGroup {
+  group: string
+  items: SimpleSelectOption[]
+}
+
+export type SimpleSelectOptions = SimpleSelectOption[] | SimpleSelectGroup[]
+
+interface SimpleSelectProps {
+  value: string
+  onValueChange: (value: string) => void
+  options: SimpleSelectOptions
+  placeholder?: string
+  disabled?: boolean
+  size?: 'sm' | 'default'
+  className?: string
+}
+
+function isGrouped(
+  options: SimpleSelectOptions,
+): options is SimpleSelectGroup[] {
+  return options.length > 0 && options[0] != null && 'group' in options[0]
+}
+
+function toMantineData(options: SimpleSelectOptions, placeholder?: string) {
+  const data: Array<{ value: string; label: string; disabled?: boolean } | { group: string; items: Array<{ value: string; label: string; disabled?: boolean }> }> = []
+
+  if (placeholder) {
+    data.push({ value: '', label: placeholder, disabled: true })
+  }
+
+  if (isGrouped(options)) {
+    for (const g of options) {
+      data.push({ group: g.group, items: g.items })
+    }
+  } else {
+    for (const item of options) {
+      data.push(item)
+    }
+  }
+
+  return data
+}
+
+function SimpleSelect({
+  value,
+  onValueChange,
+  options,
+  placeholder = 'Select...',
+  disabled = false,
+  size = 'default',
+  className,
+}: SimpleSelectProps) {
+  return (
+    <NativeSelect
+      value={value}
+      onChange={(e) => onValueChange(e.currentTarget.value)}
+      data={toMantineData(options, !value ? placeholder : undefined)}
+      disabled={disabled}
+      size={size === 'sm' ? 'xs' : 'sm'}
+      className={className}
+      styles={{ input: { cursor: 'pointer' } }}
+    />
+  )
+}
+
+export { SimpleSelect }