@seedgrid/fe-components 2026.4.11 → 2026.4.13

package/dist/inputs/SgInputCPFCNPJ.meta.js

@@ -0,0 +1,80 @@
+export const sgMeta = {
+    version: "0.1",
+    componentId: "form.input.cpfCnpj",
+    package: "@seedgrid/fe-components",
+    exportName: "SgInputCPFCNPJ",
+    slug: "sg-input-cpf-cnpj",
+    displayName: "SgInputCPFCNPJ",
+    category: "input",
+    subcategory: "document",
+    description: "Campo hibrido para CPF ou CNPJ com mascara e validacao automatica conforme o documento informado.",
+    tags: ["form", "document", "cpf", "cnpj", "hybrid", "rhf"],
+    capabilities: ["rhf", "mask", "validation", "cpf-cnpj", "clearable"],
+    fieldSemantics: ["cpfOrCnpj", "personOrCompanyDocument", "hybridDocument", "brazilianDocument"],
+    props: [
+        { name: "id", type: "string", required: true, description: "Identificador unico do campo.", semanticRole: "data", bindable: false },
+        { name: "name", type: "string", description: "Nome do campo em formularios.", semanticRole: "data", bindable: true },
+        { name: "label", type: "string", description: "Rotulo exibido ao usuario.", semanticRole: "label", bindable: true },
+        { name: "required", type: "boolean", default: false, description: "Marca o campo como obrigatorio.", semanticRole: "validation", bindable: true },
+        { name: "lengthMessage", type: "string", description: "Mensagem para comprimento invalido.", semanticRole: "validation", bindable: true },
+        { name: "invalidMessage", type: "string", description: "Mensagem para documento invalido.", semanticRole: "validation", bindable: true },
+        { name: "validateOnBlur", type: "boolean", default: true, description: "Executa validacao no blur.", semanticRole: "behavior", bindable: true },
+        { name: "validation", type: "(value: string) => string | null", description: "Validacao customizada adicional.", semanticRole: "validation", bindable: false },
+        { name: "onValidation", type: "(message: string | null) => void", description: "Callback para estado de validacao.", semanticRole: "event", bindable: false }
+    ],
+    states: ["default", "focused", "disabled", "readOnly", "error"],
+    examples: [
+        {
+            id: "basic",
+            title: "Basico",
+            file: "apps/showcase/src/app/components/sg-input-cpf-cnpj/samples/basico.tsx.sample",
+            kind: "sample"
+        },
+        {
+            id: "playground",
+            title: "Playground",
+            file: "apps/showcase/src/app/components/sg-input-cpf-cnpj/sg-input-cpf-cnpj.tsx.playground",
+            kind: "playground"
+        }
+    ],
+    showcase: {
+        route: "/components/sg-input-cpf-cnpj",
+        hasPlayground: true,
+        hasPropsTable: true
+    },
+    sdui: {
+        rendererType: "field.document.cpfCnpj",
+        acceptsDataBinding: true,
+        defaultProps: {
+            clearButton: true,
+            labelPosition: "float",
+            validateOnBlur: true
+        }
+    }
+};
+export const aiHints = {
+    version: "0.1",
+    preferredUseCases: [
+        "Campos unificados que aceitam CPF ou CNPJ no mesmo fluxo.",
+        "Cadastros onde a entidade pode ser pessoa fisica ou juridica.",
+        "Busca ou filtro por documento brasileiro sem tipo fixo."
+    ],
+    avoidUseCases: [
+        "Quando o dominio ja define apenas CPF; nesses casos prefira SgInputCPF.",
+        "Quando o dominio ja define apenas CNPJ; nesses casos prefira SgInputCNPJ.",
+        "Texto livre, telefone, email ou valores financeiros."
+    ],
+    synonyms: ["cpf cnpj", "documento misto", "hybrid document", "cpf or cnpj"],
+    relatedEntityFields: ["document", "cpfCnpj", "taxId", "personOrCompanyDocument"],
+    compositionHints: [
+        "Combinar com SgInputEmail e SgInputPhone em cadastros flexiveis.",
+        "Usar dentro de SgPanel em secoes de identificacao principal."
+    ],
+    rankingSignals: {
+        freeText: 0.1,
+        structuredChoice: 0,
+        date: 0,
+        number: 0.66,
+        denseLayout: 0.75
+    }
+};

package/dist/inputs/SgInputCurrency.meta.d.ts

@@ -0,0 +1,4 @@
+import type { SgAiHintsV0, SgMetaV0 } from "../ai-meta/types";
+export declare const sgMeta: SgMetaV0;
+export declare const aiHints: SgAiHintsV0;
+//# sourceMappingURL=SgInputCurrency.meta.d.ts.map

package/dist/inputs/SgInputCurrency.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgInputCurrency.meta.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputCurrency.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QA8GpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAyBrB,CAAC"}

package/dist/inputs/SgInputCurrency.meta.js

@@ -0,0 +1,136 @@
+export const sgMeta = {
+    version: "0.1",
+    componentId: "form.input.currency",
+    package: "@seedgrid/fe-components",
+    exportName: "SgInputCurrency",
+    slug: "sg-input-currency",
+    displayName: "SgInputCurrency",
+    category: "input",
+    subcategory: "currency",
+    description: "Campo monetario com formatacao de moeda, simbolo e validacao para precos, valores financeiros e totais.",
+    tags: ["form", "currency", "money", "price", "rhf"],
+    capabilities: ["rhf", "controlled", "currency-format", "symbol", "min-max", "validation"],
+    fieldSemantics: ["money", "currency", "price", "total", "financialAmount"],
+    props: [
+        {
+            name: "id",
+            type: "string",
+            required: true,
+            description: "Identificador unico do campo monetario.",
+            semanticRole: "data",
+            bindable: false
+        },
+        {
+            name: "name",
+            type: "string",
+            description: "Nome do campo para formularios.",
+            semanticRole: "data",
+            bindable: true
+        },
+        {
+            name: "label",
+            type: "string",
+            description: "Rotulo principal exibido ao usuario.",
+            semanticRole: "label",
+            bindable: true
+        },
+        {
+            name: "currency",
+            type: "string",
+            description: "Codigo ou configuracao de moeda usada na formatacao.",
+            semanticRole: "behavior",
+            bindable: true
+        },
+        {
+            name: "symbol",
+            type: "string",
+            description: "Simbolo monetario exibido no campo.",
+            semanticRole: "appearance",
+            bindable: true
+        },
+        {
+            name: "required",
+            type: "boolean",
+            default: false,
+            description: "Marca o campo como obrigatorio.",
+            semanticRole: "validation",
+            bindable: true
+        },
+        {
+            name: "min",
+            type: "number",
+            description: "Valor monetario minimo aceito.",
+            semanticRole: "validation",
+            bindable: true
+        },
+        {
+            name: "max",
+            type: "number",
+            description: "Valor monetario maximo aceito.",
+            semanticRole: "validation",
+            bindable: true
+        },
+        {
+            name: "onChange",
+            type: "(value: number | null) => void",
+            description: "Callback com o valor monetario normalizado.",
+            semanticRole: "event",
+            bindable: false
+        }
+    ],
+    states: ["default", "focused", "disabled", "readOnly", "error"],
+    examples: [
+        {
+            id: "basic",
+            title: "Basico",
+            file: "apps/showcase/src/app/components/sg-input-currency/samples/basico.tsx.sample",
+            kind: "sample"
+        },
+        {
+            id: "playground",
+            title: "Playground",
+            file: "apps/showcase/src/app/components/sg-input-currency/sg-input-currency.tsx.playground",
+            kind: "playground"
+        }
+    ],
+    showcase: {
+        route: "/components/sg-input-currency",
+        hasPlayground: true,
+        hasPropsTable: true
+    },
+    sdui: {
+        rendererType: "field.currency",
+        acceptsDataBinding: true,
+        defaultProps: {
+            clearButton: true,
+            labelPosition: "float",
+            currency: "BRL"
+        }
+    }
+};
+export const aiHints = {
+    version: "0.1",
+    preferredUseCases: [
+        "Captura de precos, totais, descontos e valores financeiros.",
+        "Campos monetarios que exigem formatacao de moeda e simbolo visual.",
+        "Entradas financeiras em formularios de venda, faturamento e cadastro."
+    ],
+    avoidUseCases: [
+        "Numeros genericos sem semantica monetaria; nesses casos prefira SgInputNumber.",
+        "Texto livre; nesses casos prefira SgInputText ou SgInputTextArea.",
+        "Datas e horas; nesses casos prefira SgInputDate."
+    ],
+    synonyms: ["currency input", "money field", "price input", "amount input"],
+    relatedEntityFields: ["price", "amount", "total", "subtotal", "discount", "fee"],
+    compositionHints: [
+        "Combinar com SgInputNumber para quantidades e com SgButton para acoes de submit.",
+        "Usar dentro de SgPanel em secoes financeiras ou comerciais."
+    ],
+    rankingSignals: {
+        freeText: 0,
+        structuredChoice: 0,
+        date: 0,
+        number: 0.85,
+        denseLayout: 0.7
+    }
+};

package/dist/inputs/SgInputDate.meta.d.ts

@@ -0,0 +1,4 @@
+import type { SgAiHintsV0, SgMetaV0 } from "../ai-meta/types";
+export declare const sgMeta: SgMetaV0;
+export declare const aiHints: SgAiHintsV0;
+//# sourceMappingURL=SgInputDate.meta.d.ts.map

package/dist/inputs/SgInputDate.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgInputDate.meta.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputDate.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QA8GpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAyBrB,CAAC"}

package/dist/inputs/SgInputDate.meta.js

@@ -0,0 +1,136 @@
+export const sgMeta = {
+    version: "0.1",
+    componentId: "form.input.date",
+    package: "@seedgrid/fe-components",
+    exportName: "SgInputDate",
+    slug: "sg-input-date",
+    displayName: "SgInputDate",
+    category: "input",
+    subcategory: "date",
+    description: "Campo de data com validacao de intervalo e suporte a selecao temporal para eventos, prazos e datas de referencia.",
+    tags: ["form", "date", "calendar", "rhf"],
+    capabilities: ["rhf", "controlled", "date-format", "min-max", "calendar-selection"],
+    fieldSemantics: ["date", "calendarDate", "deadline", "schedule", "referenceDate"],
+    props: [
+        {
+            name: "id",
+            type: "string",
+            required: true,
+            description: "Identificador unico do campo de data.",
+            semanticRole: "data",
+            bindable: false
+        },
+        {
+            name: "name",
+            type: "string",
+            description: "Nome do campo para formularios.",
+            semanticRole: "data",
+            bindable: true
+        },
+        {
+            name: "label",
+            type: "string",
+            description: "Rotulo principal exibido ao usuario.",
+            semanticRole: "label",
+            bindable: true
+        },
+        {
+            name: "required",
+            type: "boolean",
+            default: false,
+            description: "Marca o campo como obrigatorio.",
+            semanticRole: "validation",
+            bindable: true
+        },
+        {
+            name: "minDate",
+            type: "string | Date",
+            description: "Data minima permitida.",
+            semanticRole: "validation",
+            bindable: true
+        },
+        {
+            name: "maxDate",
+            type: "string | Date",
+            description: "Data maxima permitida.",
+            semanticRole: "validation",
+            bindable: true
+        },
+        {
+            name: "placeholder",
+            type: "string",
+            description: "Texto de apoio para orientar o preenchimento da data.",
+            semanticRole: "label",
+            bindable: true
+        },
+        {
+            name: "readOnly",
+            type: "boolean",
+            default: false,
+            description: "Impede edicao mantendo leitura e foco.",
+            semanticRole: "appearance",
+            bindable: true
+        },
+        {
+            name: "onChange",
+            type: "(value: string | null) => void",
+            description: "Callback com a data selecionada ou digitada.",
+            semanticRole: "event",
+            bindable: false
+        }
+    ],
+    states: ["default", "focused", "disabled", "readOnly", "error"],
+    examples: [
+        {
+            id: "basic",
+            title: "Basico",
+            file: "apps/showcase/src/app/components/sg-input-date/samples/basico.tsx.sample",
+            kind: "sample"
+        },
+        {
+            id: "playground",
+            title: "Playground",
+            file: "apps/showcase/src/app/components/sg-input-date/sg-input-date.tsx.playground",
+            kind: "playground"
+        }
+    ],
+    showcase: {
+        route: "/components/sg-input-date",
+        hasPlayground: true,
+        hasPropsTable: true
+    },
+    sdui: {
+        rendererType: "field.date",
+        acceptsDataBinding: true,
+        defaultProps: {
+            labelPosition: "float",
+            clearButton: true
+        }
+    }
+};
+export const aiHints = {
+    version: "0.1",
+    preferredUseCases: [
+        "Captura de datas de vencimento, agendamento, cadastro e referencia temporal.",
+        "Campos que exigem validacao de intervalo minimo e maximo de datas.",
+        "Selecao de data em formularios com contexto de calendario."
+    ],
+    avoidUseCases: [
+        "Texto livre ou descricoes; nesses casos prefira SgInputText ou SgInputTextArea.",
+        "Numeros ou valores monetarios; nesses casos prefira SgInputNumber ou SgInputCurrency.",
+        "Escolhas estruturadas sem contexto temporal; nesses casos prefira select ou combobox."
+    ],
+    synonyms: ["date input", "calendar field", "deadline input", "schedule date"],
+    relatedEntityFields: ["date", "startDate", "endDate", "deadline", "dueDate", "birthDate"],
+    compositionHints: [
+        "Combinar com SgButton para filtros por periodo e formulários com datas.",
+        "Usar dentro de SgPanel para blocos de agendamento ou dados temporais."
+    ],
+    rankingSignals: {
+        freeText: 0,
+        structuredChoice: 0.15,
+        date: 0.98,
+        number: 0,
+        denseLayout: 0.7
+    }
+};

package/dist/inputs/SgInputEmail.meta.d.ts

@@ -0,0 +1,4 @@
+import type { SgAiHintsV0, SgMetaV0 } from "../ai-meta/types";
+export declare const sgMeta: SgMetaV0;
+export declare const aiHints: SgAiHintsV0;
+//# sourceMappingURL=SgInputEmail.meta.d.ts.map

package/dist/inputs/SgInputEmail.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgInputEmail.meta.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputEmail.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QAuDpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAyBrB,CAAC"}

package/dist/inputs/SgInputEmail.meta.js

@@ -0,0 +1,81 @@
+export const sgMeta = {
+    version: "0.1",
+    componentId: "form.input.email",
+    package: "@seedgrid/fe-components",
+    exportName: "SgInputEmail",
+    slug: "sg-input-email",
+    displayName: "SgInputEmail",
+    category: "input",
+    subcategory: "email",
+    description: "Campo especializado para email com validacao de formato, bloqueio opcional de dominios temporarios e integracao com formularios.",
+    tags: ["form", "email", "contact", "login", "rhf"],
+    capabilities: ["rhf", "controlled", "validation", "email-format", "blocked-domains", "clearable"],
+    fieldSemantics: ["email", "contactEmail", "loginEmail", "notificationEmail"],
+    props: [
+        { name: "id", type: "string", required: true, description: "Identificador unico do campo.", semanticRole: "data", bindable: false },
+        { name: "name", type: "string", description: "Nome do campo em formularios.", semanticRole: "data", bindable: true },
+        { name: "label", type: "string", description: "Rotulo exibido ao usuario.", semanticRole: "label", bindable: true },
+        { name: "required", type: "boolean", default: false, description: "Marca o campo como obrigatorio.", semanticRole: "validation", bindable: true },
+        { name: "invalidMessage", type: "string", description: "Mensagem para email invalido.", semanticRole: "validation", bindable: true },
+        { name: "blockFakeMail", type: "boolean", default: true, description: "Bloqueia dominios temporarios conhecidos.", semanticRole: "behavior", bindable: true },
+        { name: "blockedEmailDomains", type: "string[]", description: "Lista customizada de dominios bloqueados.", semanticRole: "data", bindable: true },
+        { name: "validateOnBlur", type: "boolean", default: true, description: "Executa validacao no blur.", semanticRole: "behavior", bindable: true },
+        { name: "onValidation", type: "(message: string | null) => void", description: "Callback para estado de validacao.", semanticRole: "event", bindable: false }
+    ],
+    states: ["default", "focused", "disabled", "readOnly", "error"],
+    examples: [
+        {
+            id: "basic",
+            title: "Basico",
+            file: "apps/showcase/src/app/components/sg-input-email/samples/basico.tsx.sample",
+            kind: "sample"
+        },
+        {
+            id: "playground",
+            title: "Playground",
+            file: "apps/showcase/src/app/components/sg-input-email/sg-input-email.tsx.playground",
+            kind: "playground"
+        }
+    ],
+    showcase: {
+        route: "/components/sg-input-email",
+        hasPlayground: true,
+        hasPropsTable: true
+    },
+    sdui: {
+        rendererType: "field.email",
+        acceptsDataBinding: true,
+        defaultProps: {
+            clearButton: true,
+            labelPosition: "float",
+            blockFakeMail: true,
+            validateOnBlur: true
+        }
+    }
+};
+export const aiHints = {
+    version: "0.1",
+    preferredUseCases: [
+        "Captura de email de contato, login ou notificacao.",
+        "Formularios com validacao de formato de email.",
+        "Campos que precisam bloquear dominios temporarios ou descartaveis."
+    ],
+    avoidUseCases: [
+        "Texto livre ou identificadores genericos; nesses casos prefira SgInputText.",
+        "Telefone ou outros contatos nao estruturados.",
+        "Senhas, OTPs ou selecoes estruturadas."
+    ],
+    synonyms: ["email", "email input", "mail field", "contact email"],
+    relatedEntityFields: ["email", "contactEmail", "login", "usernameEmail", "notificationEmail"],
+    compositionHints: [
+        "Combinar com SgInputPassword em autenticacao e login.",
+        "Usar com SgInputPhone e SgButton em formularios de contato."
+    ],
+    rankingSignals: {
+        freeText: 0.7,
+        structuredChoice: 0,
+        date: 0,
+        number: 0,
+        denseLayout: 0.7
+    }
+};

package/dist/inputs/SgInputNumber.meta.d.ts

@@ -0,0 +1,4 @@
+import type { SgAiHintsV0, SgMetaV0 } from "../ai-meta/types";
+export declare const sgMeta: SgMetaV0;
+export declare const aiHints: SgAiHintsV0;
+//# sourceMappingURL=SgInputNumber.meta.d.ts.map

package/dist/inputs/SgInputNumber.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgInputNumber.meta.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputNumber.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QA+GpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAyBrB,CAAC"}

package/dist/inputs/SgInputNumber.meta.js

@@ -0,0 +1,137 @@
+export const sgMeta = {
+    version: "0.1",
+    componentId: "form.input.number",
+    package: "@seedgrid/fe-components",
+    exportName: "SgInputNumber",
+    slug: "sg-input-number",
+    displayName: "SgInputNumber",
+    category: "input",
+    subcategory: "number",
+    description: "Campo numerico com suporte a valores inteiros e decimais, validacao de limites e integracao com react-hook-form.",
+    tags: ["form", "number", "numeric", "rhf"],
+    capabilities: ["rhf", "controlled", "validation", "min-max", "decimal", "clearable"],
+    fieldSemantics: ["number", "integer", "decimal", "quantity", "measurement"],
+    props: [
+        {
+            name: "id",
+            type: "string",
+            required: true,
+            description: "Identificador unico do campo numerico.",
+            semanticRole: "data",
+            bindable: false
+        },
+        {
+            name: "name",
+            type: "string",
+            description: "Nome do campo para formularios.",
+            semanticRole: "data",
+            bindable: true
+        },
+        {
+            name: "label",
+            type: "string",
+            description: "Rotulo principal exibido ao usuario.",
+            semanticRole: "label",
+            bindable: true
+        },
+        {
+            name: "required",
+            type: "boolean",
+            default: false,
+            description: "Marca o campo como obrigatorio.",
+            semanticRole: "validation",
+            bindable: true
+        },
+        {
+            name: "min",
+            type: "number",
+            description: "Valor minimo aceito.",
+            semanticRole: "validation",
+            bindable: true
+        },
+        {
+            name: "max",
+            type: "number",
+            description: "Valor maximo aceito.",
+            semanticRole: "validation",
+            bindable: true
+        },
+        {
+            name: "decimals",
+            type: "number",
+            description: "Quantidade de casas decimais permitidas.",
+            semanticRole: "behavior",
+            bindable: true
+        },
+        {
+            name: "readOnly",
+            type: "boolean",
+            default: false,
+            description: "Impede edicao mantendo leitura e foco.",
+            semanticRole: "appearance",
+            bindable: true
+        },
+        {
+            name: "onChange",
+            type: "(value: number | null) => void",
+            description: "Callback com o valor numerico atual.",
+            semanticRole: "event",
+            bindable: false
+        }
+    ],
+    states: ["default", "focused", "disabled", "readOnly", "error"],
+    examples: [
+        {
+            id: "basic",
+            title: "Basico",
+            file: "apps/showcase/src/app/components/sg-input-number/samples/basico.tsx.sample",
+            kind: "sample"
+        },
+        {
+            id: "playground",
+            title: "Playground",
+            file: "apps/showcase/src/app/components/sg-input-number/sg-input-number.tsx.playground",
+            kind: "playground"
+        }
+    ],
+    showcase: {
+        route: "/components/sg-input-number",
+        hasPlayground: true,
+        hasPropsTable: true
+    },
+    sdui: {
+        rendererType: "field.number",
+        acceptsDataBinding: true,
+        defaultProps: {
+            clearButton: true,
+            labelPosition: "float",
+            validateOnBlur: true
+        }
+    }
+};
+export const aiHints = {
+    version: "0.1",
+    preferredUseCases: [
+        "Captura de quantidades, medidas, percentuais e outros valores numericos genericos.",
+        "Campos que exigem validacao numerica com limites minimos e maximos.",
+        "Entradas inteiras ou decimais em formularios CRUD."
+    ],
+    avoidUseCases: [
+        "Texto livre ou descricoes; nesses casos prefira SgInputText ou SgInputTextArea.",
+        "Valores monetarios; nesses casos prefira SgInputCurrency.",
+        "Datas e horas; nesses casos prefira SgInputDate."
+    ],
+    synonyms: ["number input", "numeric field", "quantity input", "decimal input"],
+    relatedEntityFields: ["quantity", "amount", "percentage", "weight", "height", "score"],
+    compositionHints: [
+        "Combinar com SgButton em formularios de calculo ou cadastro.",
+        "Usar dentro de SgPanel ou SgGroupBox para secoes de dados numericos."
+    ],
+    rankingSignals: {
+        freeText: 0,
+        structuredChoice: 0.1,
+        date: 0,
+        number: 0.95,
+        denseLayout: 0.75
+    }
+};

package/dist/inputs/SgInputOTP.js

@@ -438,7 +438,7 @@ const SgInputOTPBase = React.forwardRef(function SgInputOTPBase(props, ref) {
     }, [inputRef]);
     const labelText = label ?? "";
     const firstSlotId = `${id}-slot-0`;
-    return (_jsxs("div", { className: className, style: { width: toCssSize(width) }, children: [labelText ? (_jsxs("label", { htmlFor: firstSlotId, className: "mb-2 block text-sm font-medium text-foreground/80", children: [labelText, required ? (_jsx("span", { className: "ml-1 text-[hsl(var(--destructive))]", "aria-hidden": "true", children: "*" })) : null] })) : null, _jsx("div", { className: groupClassName ?? "inline-flex items-center gap-2", onFocusCapture: handleGroupFocusCapture, onBlurCapture: handleGroupBlurCapture, role: "group", "aria-label": labelText || t(i18n, "components.inputs.otp.group"), "aria-invalid": hasError || undefined, children: tokens.map((token, tokenIndex) => {
+    return (_jsxs("div", { className: className, style: { width: toCssSize(width) }, children: [labelText ? (_jsxs("label", { htmlFor: firstSlotId, className: "mb-2 block text-sm font-medium text-foreground/80", children: [labelText, required ? (_jsx("span", { className: "ml-1 text-[hsl(var(--destructive))]", "aria-hidden": "true", children: "*" })) : null] })) : null, _jsx("div", { className: groupClassName ? `inline-flex items-center gap-2 ${groupClassName}` : "inline-flex items-center gap-2", onFocusCapture: handleGroupFocusCapture, onBlurCapture: handleGroupBlurCapture, role: "group", "aria-label": labelText || t(i18n, "components.inputs.otp.group"), "aria-invalid": hasError || undefined, children: tokens.map((token, tokenIndex) => {
                     if (token.type === "separator") {
                         return (_jsx("span", { className: separatorClassName ??
                                 "select-none px-1 text-lg font-semibold leading-none text-foreground/60", "aria-hidden": "true", children: token.value }, `${id}-separator-${tokenIndex}`));

package/dist/inputs/SgInputOTP.meta.d.ts

@@ -0,0 +1,4 @@
+import type { SgAiHintsV0, SgMetaV0 } from "../ai-meta/types";
+export declare const sgMeta: SgMetaV0;
+export declare const aiHints: SgAiHintsV0;
+//# sourceMappingURL=SgInputOTP.meta.d.ts.map

package/dist/inputs/SgInputOTP.meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgInputOTP.meta.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputOTP.meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,MAAM,EAAE,QAsDpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,WAyBrB,CAAC"}