export const styleProps = [ { label: "Size", name: "size", type: { kind: "select" }, options: [ { label: "2xs", value: "2xs", selector: '[data-size="2xs"]', styles: { "": { "font-size": "var(--theme-fontSizes-xs)", "line-height": "1rem", height: "28px", "padding-left": "8px", "padding-right": "8px", }, }, }, { label: "xs", value: "xs", selector: '[data-size="xs"]', styles: { "": { "font-size": "var(--theme-fontSizes-xs)", height: "32px", "line-height": "1rem", "padding-left": "8px", "padding-right": "8px", }, }, }, { label: "sm", value: "sm", selector: '[data-size="sm"]', styles: { "": { "font-size": "var(--theme-fontSizes-sm)", "line-height": "1.25rem", height: "36px", "padding-left": "10px", "padding-right": "10px", }, }, }, { label: "md", value: "md", selector: '[data-size="md"]', styles: { "": { "font-size": "var(--theme-fontSizes-sm)", "line-height": "1.25rem", height: "40px", "padding-left": "12px", "padding-right": "12px", }, }, }, { label: "lg", value: "lg", selector: '[data-size="lg"]', styles: { "": { "font-size": "var(--theme-fontSizes-md)", "line-height": "1.5rem", height: "44px", "padding-left": "16px", "padding-right": "16px", }, }, }, { label: "xl", value: "xl", selector: '[data-size="xl"]', styles: { "": { "font-size": "var(--theme-fontSizes-md)", "line-height": "1.5rem", height: "48px", "padding-left": "18px", "padding-right": "18px", }, }, }, { label: "2xl", value: "2xl", selector: '[data-size="2xl"]', styles: { "": { "font-size": "var(--theme-fontSizes-lg)", "line-height": "1.75rem", height: "64px", "padding-left": "20px", "padding-right": "20px", }, }, }, ], default: "md", help: 'The size of the avatr. "md" is the default size', }, { label: "Variant", name: "variant", type: { kind: "select" }, options: [ { label: "Outline", value: "outline", selector: '[data-variant="outline"]', styles: { "": { "background-color": "transparent", "border-width": "1px", "border-color": "var(--theme-border-default)", }, }, }, { label: "Subtle", value: "subtle", selector: '[data-variant="subtle"]', styles: { "": { "border-width": "1px", "border-color": "transparent", "background-color": "var(--theme-bg-muted)", }, }, }, { label: "Flushed", value: "flushed", selector: '[data-variant="flushed"]', styles: { "": { "background-color": "transparent", "border-bottom-width": "1px", "border-color": "var(--theme-border-default)", "border-radius": "var(--theme-radii-none)", "padding-left": "0px", "padding-right": "0px", }, ":focus-visible": { outline: "none", "border-color": "var(--palette-ring)", "box-shadow": "0px 1px 0px 0px var(--palette-ring)", }, }, }, { label: "Elevated", value: "elevated", selector: '[data-variant="elevated"]', styles: { "": { "border-width": "1px", "border-color": "var(--palette-muted)", "background-color": "transparent", "box-shadow": "var(--theme-shadows-sm)", }, }, }, ], default: "outline", }, { label: "Color Palette", name: "data-palette", type: { kind: "palette" }, default: "brand", help: "The color scheme of the button", }, ]; export default { name: "Input", acceptsChildren: false, category: "Input", styleProps: styleProps, props: [ { label: "Initial Value", name: "defaultValue", type: { kind: "text", isDynamic: true }, default: "", isDefault: true, placeholder: "Enter some text...", help: "The input's default value", }, { label: "Placeholder", name: "placeholder", type: { kind: "text", isDynamic: true }, default: "Enter some text...", isDefault: true, placeholder: "Enter some text...", help: "The placeholder text to display", }, { label: "Format", name: "type", type: { kind: "select" }, isDefault: true, default: "text", options: [ { label: "Text", value: "text" }, { label: "Email", value: "email" }, { label: "Password", value: "password" }, { label: "Phone", value: "tel" }, { label: "Search", value: "search" }, { label: "URL", value: "url" }, { label: "Hidden", value: "hidden" }, { label: "Verification Code", value: "otp" }, ], placeholder: "", help: "The type of input to use", }, { label: "Required", name: "required", type: { kind: "boolean" }, default: false, isDefault: true, placeholder: "", help: "The is this value required by a form?", }, { label: "Minimum Length", name: "minlength", type: { kind: "number", isDynamic: true }, default: null, placeholder: "Enter a number...", help: "The minimum length allowed", }, { label: "Maximum Length", name: "maxlength", type: { kind: "number", isDynamic: true }, default: null, placeholder: "Enter a number...", help: "The maximum length allowed", }, { label: "Is disabled", name: "disabled", type: { kind: "boolean", isDynamic: true }, default: false, placeholder: "", help: "Whether the input is disabled", }, ], events: [ { label: "When changed", name: "onChange", offerDebounce: true, help: "Select an action to run when input's value has changed", additionalSources: [ { id: "bzanwdrLLhVTUxpfjTPEJ", name: "New Value", instanceTemplate: "New Value", description: "The new value of the select", template: "$$payload?.target?.value", outputType: { kind: "text" }, }, ], }, { label: "When focused", name: "onFocus", help: "Select an action to run when input's has focused", additionalSources: [ { id: "bzanwdrLLhVTUxpfjTPEJ", name: "New Value", instanceTemplate: "New Value", description: "The new value of the select", template: "$$payload?.target?.value", outputType: { kind: "text" }, }, ], }, { label: "When blurred", name: "onBlur", help: "Select an action to run when input's has blurred", isDefault: true, additionalSources: [ { id: "bzanwdrLLhVTUxpfjTPEJ", name: "New Value", instanceTemplate: "New Value", description: "The new value of the select", template: "$$payload?.target?.value", outputType: { kind: "text" }, }, ], }, ], defaultStyles: { ":focus-visible": { "outline-width": "1px", "outline-style": "solid", "outline-color": "var(--palette-ring)", }, ":user-invalid": { "border-color": "var(--theme-border-error)", }, ":disabled": { opacity: 0.5, cursor: "not-allowed", }, "": { width: "100%", "min-width": "0", outline: "var(--theme-sizes-zero)", position: "relative", "text-align": "left", "border-radius": "var(--theme-radii-md)", "font-family": "var(--theme-fonts-body)", display: "inline-flex", }, }, sources: [ { id: "value", name: "{{= it.component.name }}'s current value", provider: "StateProvider", description: "The current value of the input", template: "$get('{{= it.component.id}}', { value: {{= it.stringify(it.component.props.defaultValue) }} ?? '' }).value", instanceTemplate: `{{= it.component.name }}'s current value`, outputType: { kind: "text" }, }, { id: "isValid", provider: "StateProvider", name: "{{= it.component.name }}'s value is valid", description: "Returns true if input value is valid", template: `document.querySelector('[data-id|="{{= it.component.id}}"]')?.checkValidity()`, instanceTemplate: `is {{= it.component.name }}'s value valid`, outputType: { kind: "boolean" }, }, ], actions: [ { id: "set", name: `Set "{{= it.component.name }}"'s value`, provider: "StateProvider", description: "Set the value of the input", async: false, template: // eslint-disable-next-line no-template-curly-in-string "$set('{{= it.component.id }}', { value: {{= it.stringify(it.data.value) }} });", instanceTemplate: `{{= it.stringify(it.data.value) }}`, props: [ { label: "Value", name: "value", type: { kind: "text", isDynamic: true }, placeholder: "Choose a value", required: true, default: null, help: "The value to set the state variable to", }, ], }, { id: "focus", name: `Focus "{{= it.component.name }}" input`, description: "Focus the input", async: false, template: // eslint-disable-next-line no-template-curly-in-string 'document.querySelector(`[data-id="${$$getKey({{= it.stringify(it.component.id) }})}"]`)?.focus();', instanceTemplate: ``, props: [], }, { id: "blur", name: `Blur "{{= it.component.name }}" input`, description: "Blur the input", async: false, template: // eslint-disable-next-line no-template-curly-in-string 'document.querySelector(`[data-id="${$$getKey({{= it.stringify(it.component.id) }})}"]`)?.blur();', instanceTemplate: ``, props: [], }, ], } as const;