@nucleux/structured-input 0.4.0 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.tsx"],"names":["React","jsxs","cn","jsx","Check"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/index.tsx"],"names":["React","jsxs","cn","jsx","Check"],"mappings":"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","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@nucleux/utils\";\nimport { Check } from \"lucide-react\";\n\nexport interface StructuredOption {\n /** Stable value. */\n value: string;\n /** Display label. */\n label: React.ReactNode;\n}\n\nexport interface StructuredInputProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\" | \"onSubmit\"> {\n /** The clarifying question the agent is asking. */\n question: React.ReactNode;\n /** The selectable answers. */\n options: StructuredOption[];\n /** Allow selecting more than one option. */\n multiple?: boolean;\n /** Selected values (controlled). */\n value?: string[];\n /** Initial selection (uncontrolled). */\n defaultValue?: string[];\n /** Called when the selection changes. */\n onValueChange?: (values: string[]) => void;\n /** Show a free-text \"something else\" escape. */\n allowOther?: boolean;\n /** Label for the other escape. Defaults to `\"Something else…\"`. */\n otherPlaceholder?: string;\n /** Called when the answer is submitted. */\n onSubmit?: (values: string[], other?: string) => void;\n /** Called when the user skips the question. Renders the skip control when set. */\n onSkip?: () => void;\n /** Label for the submit button. */\n submitLabel?: React.ReactNode;\n /** Label for the skip button. */\n skipLabel?: React.ReactNode;\n}\n\n/**\n * An agent-generated clarifying question rendered as a structured choice —\n * single or multi-select options, a free-text escape, and a skip.\n * Source: Figma \"Expressive Input / Structured Input\".\n */\nexport const StructuredInput = React.forwardRef<HTMLDivElement, StructuredInputProps>(\n (\n {\n question,\n options,\n multiple = false,\n value,\n defaultValue = [],\n onValueChange,\n allowOther = false,\n otherPlaceholder = \"Something else…\",\n onSubmit,\n onSkip,\n submitLabel = \"Continue\",\n skipLabel = \"Skip\",\n className,\n ...props\n },\n ref,\n ) => {\n const [internal, setInternal] = React.useState<string[]>(defaultValue);\n const [other, setOther] = React.useState(\"\");\n const selected = value !== undefined ? value : internal;\n\n const setSelected = (next: string[]) => {\n if (value === undefined) setInternal(next);\n onValueChange?.(next);\n };\n const toggle = (val: string) => {\n if (multiple) {\n setSelected(selected.includes(val) ? selected.filter((v) => v !== val) : [...selected, val]);\n } else {\n setSelected([val]);\n }\n };\n\n return (\n <div\n ref={ref}\n className={cn(\"flex flex-col gap-4 rounded-xl border border-border bg-background p-5\", className)}\n {...props}\n >\n <p className=\"text-base font-medium text-foreground\">{question}</p>\n <div\n role={multiple ? \"group\" : \"radiogroup\"}\n aria-label={typeof question === \"string\" ? question : \"Options\"}\n className=\"flex flex-col gap-2\"\n >\n {options.map((option) => {\n const active = selected.includes(option.value);\n return (\n <button\n key={option.value}\n type=\"button\"\n role={multiple ? \"checkbox\" : \"radio\"}\n aria-checked={active}\n onClick={() => toggle(option.value)}\n className={cn(\n \"flex items-center gap-3 rounded-lg border px-3 py-2.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n active\n ? \"border-brand bg-brand-muted/50 text-foreground\"\n : \"border-border bg-background text-foreground hover:bg-accent\",\n )}\n >\n <span\n className={cn(\n \"inline-flex size-5 shrink-0 items-center justify-center border transition-colors [&_svg]:size-3.5\",\n multiple ? \"rounded-md\" : \"rounded-full\",\n active ? \"border-brand bg-brand text-brand-foreground\" : \"border-border\",\n )}\n >\n {active && <Check aria-hidden=\"true\" />}\n </span>\n <span className=\"flex-1\">{option.label}</span>\n </button>\n );\n })}\n </div>\n {allowOther && (\n <input\n type=\"text\"\n value={other}\n onChange={(e) => setOther(e.target.value)}\n placeholder={otherPlaceholder}\n aria-label={otherPlaceholder}\n className=\"rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n />\n )}\n <div className=\"flex items-center justify-end gap-2\">\n {onSkip && (\n <button\n type=\"button\"\n onClick={onSkip}\n className=\"inline-flex items-center rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n >\n {skipLabel}\n </button>\n )}\n {onSubmit && (\n <button\n type=\"button\"\n onClick={() => onSubmit(selected, allowOther ? other : undefined)}\n disabled={selected.length === 0 && !(allowOther && other.trim())}\n className=\"inline-flex items-center rounded-lg bg-info px-3 py-2 text-sm font-medium text-info-foreground transition-colors hover:bg-info/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\"\n >\n {submitLabel}\n </button>\n )}\n </div>\n </div>\n );\n },\n);\nStructuredInput.displayName = \"StructuredInput\";\n"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -27,7 +27,9 @@ interface StructuredInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>
|
|
|
27
27
|
onSubmit?: (values: string[], other?: string) => void;
|
|
28
28
|
/** Called when the user skips the question. Renders the skip control when set. */
|
|
29
29
|
onSkip?: () => void;
|
|
30
|
+
/** Label for the submit button. */
|
|
30
31
|
submitLabel?: React.ReactNode;
|
|
32
|
+
/** Label for the skip button. */
|
|
31
33
|
skipLabel?: React.ReactNode;
|
|
32
34
|
}
|
|
33
35
|
/**
|
package/dist/index.d.ts
CHANGED
|
@@ -27,7 +27,9 @@ interface StructuredInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>
|
|
|
27
27
|
onSubmit?: (values: string[], other?: string) => void;
|
|
28
28
|
/** Called when the user skips the question. Renders the skip control when set. */
|
|
29
29
|
onSkip?: () => void;
|
|
30
|
+
/** Label for the submit button. */
|
|
30
31
|
submitLabel?: React.ReactNode;
|
|
32
|
+
/** Label for the skip button. */
|
|
31
33
|
skipLabel?: React.ReactNode;
|
|
32
34
|
}
|
|
33
35
|
/**
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@nucleux/utils\";\nimport { Check } from \"lucide-react\";\n\nexport interface StructuredOption {\n /** Stable value. */\n value: string;\n /** Display label. */\n label: React.ReactNode;\n}\n\nexport interface StructuredInputProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\" | \"onSubmit\"> {\n /** The clarifying question the agent is asking. */\n question: React.ReactNode;\n /** The selectable answers. */\n options: StructuredOption[];\n /** Allow selecting more than one option. */\n multiple?: boolean;\n /** Selected values (controlled). */\n value?: string[];\n /** Initial selection (uncontrolled). */\n defaultValue?: string[];\n /** Called when the selection changes. */\n onValueChange?: (values: string[]) => void;\n /** Show a free-text \"something else\" escape. */\n allowOther?: boolean;\n /** Label for the other escape. Defaults to `\"Something else…\"`. */\n otherPlaceholder?: string;\n /** Called when the answer is submitted. */\n onSubmit?: (values: string[], other?: string) => void;\n /** Called when the user skips the question. Renders the skip control when set. */\n onSkip?: () => void;\n /** Label for the submit button. */\n submitLabel?: React.ReactNode;\n /** Label for the skip button. */\n skipLabel?: React.ReactNode;\n}\n\n/**\n * An agent-generated clarifying question rendered as a structured choice —\n * single or multi-select options, a free-text escape, and a skip.\n * Source: Figma \"Expressive Input / Structured Input\".\n */\nexport const StructuredInput = React.forwardRef<HTMLDivElement, StructuredInputProps>(\n (\n {\n question,\n options,\n multiple = false,\n value,\n defaultValue = [],\n onValueChange,\n allowOther = false,\n otherPlaceholder = \"Something else…\",\n onSubmit,\n onSkip,\n submitLabel = \"Continue\",\n skipLabel = \"Skip\",\n className,\n ...props\n },\n ref,\n ) => {\n const [internal, setInternal] = React.useState<string[]>(defaultValue);\n const [other, setOther] = React.useState(\"\");\n const selected = value !== undefined ? value : internal;\n\n const setSelected = (next: string[]) => {\n if (value === undefined) setInternal(next);\n onValueChange?.(next);\n };\n const toggle = (val: string) => {\n if (multiple) {\n setSelected(selected.includes(val) ? selected.filter((v) => v !== val) : [...selected, val]);\n } else {\n setSelected([val]);\n }\n };\n\n return (\n <div\n ref={ref}\n className={cn(\"flex flex-col gap-4 rounded-xl border border-border bg-background p-5\", className)}\n {...props}\n >\n <p className=\"text-base font-medium text-foreground\">{question}</p>\n <div\n role={multiple ? \"group\" : \"radiogroup\"}\n aria-label={typeof question === \"string\" ? question : \"Options\"}\n className=\"flex flex-col gap-2\"\n >\n {options.map((option) => {\n const active = selected.includes(option.value);\n return (\n <button\n key={option.value}\n type=\"button\"\n role={multiple ? \"checkbox\" : \"radio\"}\n aria-checked={active}\n onClick={() => toggle(option.value)}\n className={cn(\n \"flex items-center gap-3 rounded-lg border px-3 py-2.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n active\n ? \"border-brand bg-brand-muted/50 text-foreground\"\n : \"border-border bg-background text-foreground hover:bg-accent\",\n )}\n >\n <span\n className={cn(\n \"inline-flex size-5 shrink-0 items-center justify-center border transition-colors [&_svg]:size-3.5\",\n multiple ? \"rounded-md\" : \"rounded-full\",\n active ? \"border-brand bg-brand text-brand-foreground\" : \"border-border\",\n )}\n >\n {active && <Check aria-hidden=\"true\" />}\n </span>\n <span className=\"flex-1\">{option.label}</span>\n </button>\n );\n })}\n </div>\n {allowOther && (\n <input\n type=\"text\"\n value={other}\n onChange={(e) => setOther(e.target.value)}\n placeholder={otherPlaceholder}\n aria-label={otherPlaceholder}\n className=\"rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n />\n )}\n <div className=\"flex items-center justify-end gap-2\">\n {onSkip && (\n <button\n type=\"button\"\n onClick={onSkip}\n className=\"inline-flex items-center rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n >\n {skipLabel}\n </button>\n )}\n {onSubmit && (\n <button\n type=\"button\"\n onClick={() => onSubmit(selected, allowOther ? other : undefined)}\n disabled={selected.length === 0 && !(allowOther && other.trim())}\n className=\"inline-flex items-center rounded-lg bg-info px-3 py-2 text-sm font-medium text-info-foreground transition-colors hover:bg-info/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\"\n >\n {submitLabel}\n </button>\n )}\n </div>\n </div>\n );\n },\n);\nStructuredInput.displayName = \"StructuredInput\";\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nucleux/structured-input",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"description": "StructuredInput — an agent's structured clarifying question — Nucleux agentic UI for React.",
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
"react-dom": ">=18"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"
|
|
37
|
-
"
|
|
36
|
+
"@nucleux/utils": "0.5.0",
|
|
37
|
+
"lucide-react": "^0.469.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"tsup": "^8.3.5",
|