Bump version to 0.12.78

Author: edadma

packages/asterui/CHANGELOG.md

@@ -7,6 +7,19 @@ description: All notable changes to AsterUI
 
 All notable changes to AsterUI are documented here.
 
+## v0.12.78 (2025-12-28)
+
+### Components
+
+- **Select**: Added `options` prop for array-based options with better performance
+- **Select**: Added `SelectOption` interface with `label`, `value`, and `disabled` properties
+
+### Documentation
+
+- Added "Options Array" example to Select documentation
+- Updated Select API documentation to include `options` prop and `SelectOption` interface
+- Updated AI-readable Select documentation
+
 ## v0.12.77 (2025-12-28)
 
 ### Components

packages/asterui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asterui",
-  "version": "0.12.77",
+  "version": "0.12.78",
   "description": "React UI component library with DaisyUI",
   "homepage": "https://asterui.com",
   "repository": {

packages/asterui/src/components/Select.tsx

@@ -20,6 +20,12 @@ const dSelectWarning = 'select-warning'
 const dSelectError = 'select-error'
 const dFloatingLabel = 'floating-label'
 
+export interface SelectOption {
+  label: React.ReactNode
+  value: string | number
+  disabled?: boolean
+}
+
 export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
   color?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
@@ -33,6 +39,8 @@ export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectE
   addonBefore?: React.ReactNode
   /** Text/element after select (outside, using DaisyUI label) */
   addonAfter?: React.ReactNode
+  /** Select options array (recommended for better performance) */
+  options?: SelectOption[]
   className?: string
   children?: React.ReactNode
   'data-testid'?: string
@@ -49,6 +57,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
       floatingLabel,
       addonBefore,
       addonAfter,
+      options,
       className = '',
       children,
       'data-testid': testId,
@@ -59,6 +68,18 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
     const { componentSize } = useConfig()
     const effectiveSize = size ?? componentSize ?? 'md'
 
+    // Render options from array or use children
+    const renderOptions = () => {
+      if (options) {
+        return options.map((option) => (
+          <option key={option.value} value={option.value} disabled={option.disabled}>
+            {option.label}
+          </option>
+        ))
+      }
+      return children
+    }
+
     const innerRef = useRef<HTMLSelectElement>(null)
     const selectRef = (ref as React.RefObject<HTMLSelectElement>) || innerRef
 
@@ -110,7 +131,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
     // Build the core select element
     const selectElement = (
       <select ref={selectRef} className={selectClasses} data-testid={selectTestId} {...props}>
-        {children}
+        {renderOptions()}
       </select>
     )
 
@@ -129,7 +150,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
             data-testid={selectTestId}
             {...props}
           >
-            {children}
+            {renderOptions()}
           </select>
           <span>{floatingLabel}</span>
         </label>

packages/asterui/src/index.ts

@@ -247,7 +247,7 @@ export { Result } from './components/Result'
 export type { ResultProps, ResultStatus } from './components/Result'
 
 export { Select } from './components/Select'
-export type { SelectProps } from './components/Select'
+export type { SelectProps, SelectOption } from './components/Select'
 
 export { Segmented } from './components/Segmented'
 export type { SegmentedProps, SegmentedItemProps, SegmentedValue } from './components/Segmented'

packages/docs/public/docs/select.md

@@ -43,6 +43,29 @@ const App: React.FC = () => (
 export default App
 ```
 
+### Options Array
+
+Use the `options` prop for better performance compared to JSX children.
+
+```tsx
+import React from 'react'
+import { Select, SelectOption } from 'asterui'
+
+const App: React.FC = () => {
+  const options: SelectOption[] = [
+    { label: 'Apple', value: 'apple' },
+    { label: 'Orange', value: 'orange' },
+    { label: 'Banana', value: 'banana' },
+    { label: 'Grape', value: 'grape' },
+    { label: 'Mango (disabled)', value: 'mango', disabled: true },
+  ]
+
+  return <Select options={options} defaultValue="orange" />
+}
+
+export default App
+```
+
 ### Sizes
 
 ```tsx
@@ -275,8 +298,11 @@ export default App
 
 ## API
 
+### Select
+
 | Property | Description | Type | Default |
 |----------|-------------|------|---------|
+| `options` | Select options array (recommended for better performance) | `SelectOption[]` | `-` |
 | `size` | Select size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `-` |
 | `color` | Select color variant | `'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error'` | `-` |
 | `status` | Validation status (takes precedence over color) | `'error' \| 'warning'` | `-` |
@@ -291,3 +317,11 @@ export default App
 | `onChange` | Change event handler | `(e: React.ChangeEvent<HTMLSelectElement>) => void` | `-` |
 | `className` | Additional CSS classes | `string` | `-` |
 | `data-testid` | Test ID for testing | `string` | - |
+
+### SelectOption
+
+| Property | Description | Type | Default |
+|----------|-------------|------|---------|
+| `label` | Display label for the option | `React.ReactNode` | `-` |
+| `value` | Value of the option | `string \| number` | `-` |
+| `disabled` | Whether option is disabled | `boolean` | `false` |

packages/docs/src/components/SelectDemo.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Select, Space, Form, Button } from '@aster-ui/prefixed';
+import type { SelectOption } from '@aster-ui/prefixed';
 import { Demo } from './Demo';
 
 // @example-imports: { Select } from 'asterui'
@@ -37,6 +38,27 @@ export function DefaultValueDemo() {
   );
 }
 
+// @example-imports: { Select, SelectOption } from 'asterui'
+export function OptionsDemo() {
+  // @example-include
+  const options: SelectOption[] = [
+    { label: 'Apple', value: 'apple' },
+    { label: 'Orange', value: 'orange' },
+    { label: 'Banana', value: 'banana' },
+    { label: 'Grape', value: 'grape' },
+    { label: 'Mango (disabled)', value: 'mango', disabled: true },
+  ];
+  // @example-include-end
+
+  return (
+    <Demo>
+      {/* @example-return */}
+      <Select options={options} defaultValue="orange" />
+      {/* @example-return-end */}
+    </Demo>
+  );
+}
+
 // @example-imports: { Select, Space } from 'asterui'
 export function SizesDemo() {
   return (

packages/docs/src/content/docs/changelog.md

@@ -7,6 +7,19 @@ description: All notable changes to AsterUI
 
 All notable changes to AsterUI are documented here.
 
+## v0.12.78 (2025-12-28)
+
+### Components
+
+- **Select**: Added `options` prop for array-based options with better performance
+- **Select**: Added `SelectOption` interface with `label`, `value`, and `disabled` properties
+
+### Documentation
+
+- Added "Options Array" example to Select documentation
+- Updated Select API documentation to include `options` prop and `SelectOption` interface
+- Updated AI-readable Select documentation
+
 ## v0.12.77 (2025-12-28)
 
 ### Components

packages/docs/src/content/docs/components/select.mdx

@@ -7,6 +7,7 @@ tableOfContents: false
 import {
   BasicDemo,
   DefaultValueDemo,
+  OptionsDemo,
   SizesDemo,
   ColorsDemo,
   GhostDemo,
@@ -36,6 +37,10 @@ import { Select } from 'asterui'
   <DefaultValueDemo client:load slot="demo" />
 </Example>
 
+<Example title="Options Array" description="Use options prop for better performance." source={SelectDemoSource} fn="OptionsDemo">
+  <OptionsDemo client:load slot="demo" />
+</Example>
+
 <Example title="Sizes" description="Five sizes: xs, sm, md, lg, and xl." source={SelectDemoSource} fn="SizesDemo">
   <SizesDemo client:load slot="demo" />
 </Example>
@@ -64,6 +69,7 @@ import { Select } from 'asterui'
 
 | Property | Description | Type | Default |
 |----------|-------------|------|---------|
+| `options` | Select options array (recommended for better performance) | `SelectOption[]` | - |
 | `size` | Select size | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | - |
 | `color` | Select color theme | `'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error'` | - |
 | `ghost` | Ghost style variant | `boolean` | `false` |
@@ -73,6 +79,14 @@ import { Select } from 'asterui'
 | `children` | Option elements | `React.ReactNode` | - |
 | `data-testid` | Test ID for testing | `string` | - |
 
+### `SelectOption`
+
+| Property | Description | Type | Default |
+|----------|-------------|------|---------|
+| `label` | Display label for the option | `React.ReactNode` | - |
+| `value` | Value of the option | `string \| number` | - |
+| `disabled` | Whether option is disabled | `boolean` | `false` |
+
 ## Accessibility
 
 - Uses native `<select>` for full accessibility

packages/prefixed/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aster-ui/prefixed",
-  "version": "0.12.77",
+  "version": "0.12.78",
   "description": "React UI component library with DaisyUI (prefixed classes)",
   "homepage": "https://asterui.com",
   "repository": {

packages/prefixed/src/components/Select.tsx

@@ -20,6 +20,12 @@ const dSelectWarning = 'd-select-warning'
 const dSelectError = 'd-select-error'
 const dFloatingLabel = 'd-floating-label'
 
+export interface SelectOption {
+  label: React.ReactNode
+  value: string | number
+  disabled?: boolean
+}
+
 export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
   color?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
@@ -33,6 +39,8 @@ export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectE
   addonBefore?: React.ReactNode
   /** Text/element after select (outside, using DaisyUI label) */
   addonAfter?: React.ReactNode
+  /** Select options array (recommended for better performance) */
+  options?: SelectOption[]
   className?: string
   children?: React.ReactNode
   'data-testid'?: string
@@ -49,6 +57,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
       floatingLabel,
       addonBefore,
       addonAfter,
+      options,
       className = '',
       children,
       'data-testid': testId,
@@ -59,6 +68,18 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
     const { componentSize } = useConfig()
     const effectiveSize = size ?? componentSize ?? 'md'
 
+    // Render options from array or use children
+    const renderOptions = () => {
+      if (options) {
+        return options.map((option) => (
+          <option key={option.value} value={option.value} disabled={option.disabled}>
+            {option.label}
+          </option>
+        ))
+      }
+      return children
+    }
+
     const innerRef = useRef<HTMLSelectElement>(null)
     const selectRef = (ref as React.RefObject<HTMLSelectElement>) || innerRef
 
@@ -110,7 +131,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
     // Build the core select element
     const selectElement = (
       <select ref={selectRef} className={selectClasses} data-testid={selectTestId} {...props}>
-        {children}
+        {renderOptions()}
       </select>
     )
 
@@ -129,7 +150,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
             data-testid={selectTestId}
             {...props}
           >
-            {children}
+            {renderOptions()}
           </select>
           <span>{floatingLabel}</span>
         </label>