@vuer-ai/vuer-uikit 0.0.99 → 0.0.101

package/src/dial/DialPanel.tsx

@@ -8,6 +8,7 @@ import {
   DialNumberInput,
   DialSelectInput,
   DialSliderInput,
+  DialTextInput,
   DialVec3Input,
   DialVectorInput,
 } from "./wrapped-inputs";
@@ -153,6 +154,7 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({ schemas, groups:
         );
 
       case "string":
+      case "text":
         // If options are provided, use select
         if (options && options.length > 0) {
           return (
@@ -165,8 +167,16 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({ schemas, groups:
             />
           );
         }
-        // For now, skip pure string inputs (could add text input later)
-        return null;
+        // Use text input for pure string values
+        return (
+          <DialTextInput
+            key={name}
+            name={name}
+            label={label}
+            placeholder={`Enter ${label.toLowerCase()}`}
+            labelPosition={labelPosition}
+          />
+        );
 
       default:
         return null;

package/src/dial/wrapped-inputs/DialInputs.tsx

@@ -11,6 +11,7 @@ import {
   Label,
   QuaternionInput,
   RadInput,
+  TextInput,
   TimeInput,
   Vec3Input,
   VectorInput,
@@ -399,3 +400,38 @@ export const DialTimeInput: React.FC<DialWrapperProps> = ({
     );
   }
 };
+
+// Dial-wrapped TextInput
+export const DialTextInput: React.FC<DialWrapperProps & { placeholder?: string }> = ({
+  name,
+  label,
+  size = "sm",
+  labelPosition,
+  placeholder,
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = (getValue(name) ?? "") as string;
+
+  if (labelPosition === "inline") {
+    return (
+      <TextInput
+        value={value}
+        onChange={(val) => setValue(name, val)}
+        size={size}
+        placeholder={placeholder}
+        prefix={label}
+      />
+    );
+  } else {
+    return (
+      <DialInputWrapper label={label}>
+        <TextInput 
+          value={value} 
+          onChange={(val) => setValue(name, val)} 
+          size={size} 
+          placeholder={placeholder}
+        />
+      </DialInputWrapper>
+    );
+  }
+};

package/src/dial/wrapped-inputs/index.ts

@@ -19,6 +19,7 @@ export {
   DialCmInput,
   DialInchInput,
   DialTimeInput,
+  DialTextInput,
 } from "./DialInputs";
 
 // Variable-dimension vector input

package/src/ui/inputs/index.tsx

@@ -3,3 +3,4 @@ export * from "./input-numbers";
 export * from "./color-input";
 export * from "./presets-input";
 export * from "./number-inputs";
+export * from "./text-input";

package/src/ui/inputs/text-input.tsx

@@ -0,0 +1,43 @@
+import { forwardRef } from "react";
+
+import { InputRoot, InputRootProps, InputSlot } from "./input";
+
+export interface TextInputProps extends Omit<InputRootProps, "type" | "value" | "onChange"> {
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  prefix?: string;
+  suffix?: string;
+  maxLength?: number;
+}
+
+/**
+ * Text input component for string values.
+ * Provides a simple text input with optional prefix/suffix.
+ *
+ * @param value - The current text value
+ * @param onChange - Callback when text changes
+ * @param placeholder - Placeholder text
+ * @param prefix - Optional prefix text/icon
+ * @param suffix - Optional suffix text/icon
+ * @param maxLength - Maximum character length
+ */
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function TextInput(
+  { value = "", onChange, prefix, suffix, placeholder, maxLength, ...props },
+  ref,
+) {
+  return (
+    <InputRoot
+      ref={ref}
+      type="text"
+      value={value}
+      onChange={(e) => onChange?.(e.target.value)}
+      placeholder={placeholder}
+      maxLength={maxLength}
+      {...props}
+    >
+      {prefix && <InputSlot side="left">{prefix}</InputSlot>}
+      {suffix && <InputSlot side="right">{suffix}</InputSlot>}
+    </InputRoot>
+  );
+});

package/dial-cli/README.md

@@ -1,137 +0,0 @@
-# @vuer-ai/dial-cli
-
-A powerful CLI tool for generating dial metadata from TypeScript/React components. This tool parses JSDoc annotations to automatically create UI control schemas.
-
-## Installation
-
-```bash
-npm install -g @vuer-ai/dial-cli
-# or
-pnpm install -g @vuer-ai/dial-cli
-# or
-yarn global add @vuer-ai/dial-cli
-```
-
-## Usage
-
-```bash
-dial-cli [options] <file.tsx> [file2.tsx ...]
-```
-
-### Options
-
-- `-o, --output <dir>` - Output directory for generated metadata files (default: `./metadata`)
-- `-i, --ignore <prop>` - Property names or patterns to exclude from dial schema generation
-- `-h, --help` - Display help message
-- `-v, --version` - Display version information
-- `--verbose` - Enable verbose output with detailed processing information
-- `--quiet` - Suppress all output except errors
-
-### Examples
-
-Generate metadata for a single component:
-```bash
-dial-cli MyComponent.tsx
-```
-
-Specify a custom output directory:
-```bash
-dial-cli -o ./docs/metadata MyComponent.tsx
-```
-
-Process multiple files:
-```bash
-dial-cli Component1.tsx Component2.tsx Component3.tsx
-```
-
-Process all components in a directory:
-```bash
-dial-cli src/components/*.tsx
-```
-
-Exclude specific properties:
-```bash
-dial-cli -i className -i style -i children MyComponent.tsx
-```
-
-## Dial Annotations
-
-The tool recognizes the following `@dial` annotations in JSDoc comments:
-
-### Grouping
-- `@dial <group>` - Group related properties (transform, visibility, etc.)
-
-### Property Configuration
-- `@dial-dtype <type>` - Data type (vector3, euler, boolean, int, etc.)
-- `@dial-min <number>` - Minimum value for numeric inputs
-- `@dial-max <number>` - Maximum value for numeric inputs
-- `@dial-step <number>` - Step increment for numeric inputs
-- `@dial-default <value>` - Default value (overrides component default)
-- `@dial-options [...]` - Array of preset values
-- `@dial-icon <name>` - Lucide icon name for the control
-- `@dial-ignore` - Exclude this property from dial schema generation
-
-### Layout
-- `@dial-col-<n>` - Display in column layout with n columns
-- `@dial-row-<n>` - Display in row layout with n items per row
-- `@dial-label-<pos>` - Label position (left, right, top, bottom, inline)
-- `@dial-no-wrap` - Prevent line wrapping
-
-### Vector Types
-- `@dial-mins <n,n,n>` - Comma-separated min values for vector elements
-- `@dial-maxs <n,n,n>` - Comma-separated max values for vector elements
-- `@dial-steps <n,n,n>` - Comma-separated step values for vector elements
-- `@dial-dtypes <t,t,t>` - Comma-separated data types for vector elements
-
-## Example Component
-
-```typescript
-interface Props {
-  /**
-   * Position in 3D space
-   * @dial transform
-   * @dial-dtype vector3
-   * @dial-mins -10,-10,-10
-   * @dial-maxs 10,10,10
-   * @dial-steps 0.1,0.1,0.1
-   * @dial-icon Move3d
-   */
-  position: [number, number, number];
-
-  /**
-   * Visibility toggle
-   * @dial visibility
-   * @dial-dtype boolean
-   * @dial-icon Eye
-   */
-  visible: boolean;
-
-  /**
-   * Color value
-   * @dial-ignore
-   */
-  color: string;
-}
-```
-
-## Output Files
-
-The tool generates three types of output files for each input:
-
-- `*-raw.json` - Raw output from react-docgen-typescript
-- `*-combined.json` - Enhanced metadata with dial schema information
-- `*-schemas.json` - Just the dial schemas for UI generation
-
-## License
-
-MIT
-
-## Author
-
-Ge Yang
-
-## Links
-
-- [GitHub Repository](https://github.com/vuer-ai/vuer-uikit)
-- [Issue Tracker](https://github.com/vuer-ai/vuer-uikit/issues)
-- [Documentation](https://uikit.vuer.ai/dial)