@selectwin/kit 0.1.103 → 0.1.105

package/dist/SelectCardGrid.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { SelectListChromeProps, SelectListPagination } from './internal/listChrome';
-export declare function SelectCardGrid<T>({ items, getId, renderItem, loading, skeletonCount, empty, pagination, create, minCardWidth, title, help, description, action, filters, tools, }: {
+export declare function SelectCardGrid<T>({ items, getId, renderItem, loading, skeletonCount, empty, pagination, create, minCardWidth, skeletonCover, title, help, description, action, filters, tools, }: {
     items: T[];
     getId: (item: T) => string;
     /** O card de um item — tipicamente um SelectRecordCard. */
@@ -25,4 +25,7 @@ export declare function SelectCardGrid<T>({ items, getId, renderItem, loading, s
     };
     /** Piso da coluna da grade (`auto-fill` + `minmax`). */
     minCardWidth?: string;
+    /** Os cards têm capa (`SelectRecordCard cover`): o esqueleto traz a faixa 16:9 no topo, para a
+     *  grade não pular de altura quando as capas chegam. */
+    skeletonCover?: boolean;
 } & SelectListChromeProps): import("react").JSX.Element;

package/dist/SelectCertificatePreview.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+export interface SelectCertificateSignature {
+    name: ReactNode;
+    role?: ReactNode;
+    imageUrl?: string | null;
+}
+export interface SelectCertificatePreviewProps {
+    side?: 'front' | 'back';
+    /** A cor do Club (moldura + chamada). */
+    accent?: string;
+    /** O título da folha — no site, o nome do curso. */
+    courseTitle: ReactNode;
+    /** Linha sob o título (o título configurado, quando difere do curso). */
+    subtitle?: ReactNode;
+    /** Quem recebe — na miniatura, um exemplo. */
+    memberName?: ReactNode;
+    body?: ReactNode;
+    signatures?: SelectCertificateSignature[];
+    /** Rodapé da frente. */
+    issuedAt?: ReactNode;
+    verificationCode?: ReactNode;
+    /** Chamada do topo. Padrão: "Certificado de conclusão" (frente) / "Verso". */
+    eyebrow?: ReactNode;
+    className?: string;
+}
+export declare const SelectCertificatePreview: import('react').ForwardRefExoticComponent<SelectCertificatePreviewProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/SelectChoiceCard.d.ts

@@ -0,0 +1,39 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface SelectChoiceCardProps {
+    /** O glifo (um ícone do kit). */
+    icon: ReactNode;
+    /** Cor do quadrado do ícone (hex/var). Padrão: a primária da casa. */
+    accent?: string;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Canto superior direito — um SelectBadge ("3 cursos", "Recomendado"). */
+    badge?: ReactNode;
+    /** Rodapé à esquerda — contexto curto ("Até 5 GB", "MP4, MOV…"). */
+    meta?: ReactNode;
+    /** A chamada do rodapé à direita ("Criar", "Abrir"). A seta vem junto. */
+    cta?: ReactNode;
+    to?: string;
+    onClick?: () => void;
+    selected?: boolean;
+    disabled?: boolean;
+    className?: string;
+    /** Âncora de tour/teste. */
+    'data-tour'?: string;
+}
+export declare const SelectChoiceCard: import('react').ForwardRefExoticComponent<SelectChoiceCardProps & import('react').RefAttributes<HTMLElement>>;
+/** O card carregando, na FORMA do real: quadrado do ícone, selo no canto, nome, duas linhas e o rodapé. */
+export declare function SelectChoiceCardSkeleton({ badge }: {
+    badge?: boolean;
+}): import("react").JSX.Element;
+type SelectChoiceGridOwnProps = {
+    children?: ReactNode;
+    /** Largura mínima de um card antes de a grade quebrar a linha. */
+    minCardWidth?: string;
+    /** Carregando: a grade desenha `skeletonCount` cards-esqueleto no lugar dos filhos. */
+    loading?: boolean;
+    /** Quantos esqueletos — o número de cards que VAI aparecer, para a grade não mudar de forma. */
+    skeletonCount?: number;
+};
+export type SelectChoiceGridProps = SelectChoiceGridOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectChoiceGridOwnProps>;
+export declare const SelectChoiceGrid: import('react').ForwardRefExoticComponent<SelectChoiceGridOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectChoiceGridOwnProps> & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/SelectColorField.d.ts

@@ -1,9 +1,26 @@
+import { ReactNode } from 'react';
+/** Paleta para marca: neutros e tons médios que aguentam texto branco por cima. */
+export declare const SELECT_COLOR_PRESETS: string[];
+/** `#abc` / `abc` / `#aabbcc` → `#AABBCC`; qualquer outra coisa → null. */
+export declare function normalizeHex(input: string): string | null;
+/** Razão de contraste WCAG entre duas cores (1 a 21). */
+export declare function contrastRatio(a: string, b: string): number;
 export interface SelectColorFieldProps {
-    label?: string;
+    label?: ReactNode;
+    help?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    /** `#RRGGBB`, ou vazio quando `allowEmpty`. */
     value: string;
     onChange: (hex: string) => void;
+    presets?: string[];
     disabled?: boolean;
-    hint?: string;
-    error?: string;
+    /** Deixa apagar a cor (volta ao padrão de quem usa). */
+    allowEmpty?: boolean;
+    /** A cor do texto que vai POR CIMA desta — mede o contraste e avisa quando fica ilegível. */
+    contrastWith?: string;
+    /** Como chamar esse texto no aviso ("o texto branco", "o texto do botão"). */
+    contrastLabel?: string;
+    id?: string;
 }
-export declare function SelectColorField({ label, value, onChange, disabled, hint, error }: SelectColorFieldProps): import("react").JSX.Element;
+export declare function SelectColorField({ label, help, hint, error, value, onChange, presets, disabled, allowEmpty, contrastWith, contrastLabel, id: idProp, }: SelectColorFieldProps): import("react").JSX.Element;

package/dist/SelectHorizontalBar.d.ts

@@ -17,7 +17,13 @@ type SelectHorizontalBarOwnProps = {
     distributed?: boolean;
     /** Width reserved for the category labels. Omit to size it from the longest label (recommended). */
     labelWidth?: number;
+    /**
+     * Fixed top of the scale (e.g. 100 for percentages). Omit to scale to the largest value. A
+     * percentage chart scaled to its own maximum draws a 30% bar at full width — which reads as
+     * "everyone watched it all".
+     */
+    max?: number;
 };
 export type SelectHorizontalBarProps = SelectHorizontalBarOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectHorizontalBarOwnProps>;
-export declare function SelectHorizontalBar({ data, height, color, format, formatValue, distributed, labelWidth, className, ...rest }: SelectHorizontalBarProps): import("react").JSX.Element;
+export declare function SelectHorizontalBar({ data, height, color, format, formatValue, distributed, labelWidth, max: fixedMax, className, ...rest }: SelectHorizontalBarProps): import("react").JSX.Element;
 export {};

package/dist/SelectKpiCard.d.ts

@@ -1,6 +1,8 @@
 import { ReactNode, ComponentPropsWithoutRef } from 'react';
 type SelectKpiCardOwnProps = {
     label: ReactNode;
+    /** O número ainda carrega: valor e legenda viram skeleton na altura deles (o rótulo fica). */
+    loading?: boolean;
     value: ReactNode;
     caption?: ReactNode;
     chart?: ReactNode;

package/dist/SelectProgressBar.d.ts

@@ -0,0 +1,24 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export type SelectProgressTone = 'brand' | 'success' | 'warning' | 'critical';
+type SelectProgressBarOwnProps = {
+    /** De 0 a `max`. */
+    value?: number;
+    max?: number;
+    tone?: SelectProgressTone;
+    size?: 'sm' | 'md';
+    /** Texto à esquerda, acima da barra. */
+    label?: ReactNode;
+    /** Texto à direita, acima da barra (o número: "42%", "1,2 GB de 5 GB"). */
+    valueLabel?: ReactNode;
+    /** Linha de apoio sob a barra. */
+    caption?: ReactNode;
+    /** Sem número: a faixa corre (processando). */
+    indeterminate?: boolean;
+    /** Nome acessível quando não há `label` visível. */
+    ariaLabel?: string;
+    /** O número ainda não chegou: rótulo, valor e trilho viram esqueleto na mesma altura. */
+    loading?: boolean;
+};
+export type SelectProgressBarProps = SelectProgressBarOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectProgressBarOwnProps>;
+export declare const SelectProgressBar: import('react').ForwardRefExoticComponent<SelectProgressBarOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectProgressBarOwnProps> & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/SelectRecordCard.d.ts

@@ -27,6 +27,13 @@ type SelectRecordCardOwnProps = {
     to?: string;
     /** Faixa de destaque no topo (ex.: o registro em vigor). */
     accent?: boolean;
+    /**
+     * Capa larga (16:9) no topo do card — a imagem que o lojista reconhece de relance (a capa de
+     * um curso). `null` = o registro não tem capa: mostra `coverFallback` num fundo neutro, para a
+     * grade não ficar com cards de alturas diferentes. Omitido = card sem faixa de capa.
+     */
+    cover?: string | null;
+    coverFallback?: ReactNode;
 };
 export type SelectRecordCardProps = SelectRecordCardOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectRecordCardOwnProps>;
 export declare const SelectRecordCard: import('react').ForwardRefExoticComponent<SelectRecordCardOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectRecordCardOwnProps> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/SelectSection.d.ts

@@ -5,7 +5,9 @@ type SelectSectionOwnProps = {
      *  `collapsible` — ali o head inteiro é um <button>, e botão dentro de botão é DOM
      *  inválido. */
     help?: ReactNode;
-    /** Subdued line under the title (e.g. the step subtitle of a wizard card). */
+    /** Subdued line under the title (e.g. the step subtitle of a wizard card). Collapsible too:
+     *  there it is the SUMMARY of what is inside ("Liberação imediata · conclui com 90%"), so the
+     *  closed card still says what it holds. */
     description?: ReactNode;
     /** Right-aligned action in the head (e.g. an "Editar" link). Ignored when collapsible. */
     action?: ReactNode;

package/dist/SelectSkeleton.d.ts

@@ -9,8 +9,19 @@ declare function SkeletonThumbnail({ size }: {
 }): import("react").JSX.Element;
 /** Área de conteúdo não-textual carregando (chart, mapa, imagem, preview): retângulo
  *  shimmer com 100% da largura do pai e a altura dada. */
-declare function SkeletonBlock({ height }: {
+declare function SkeletonBlock({ height, aspectRatio }: {
     height?: number | string;
+    aspectRatio?: string;
+}): import("react").JSX.Element;
+/** Um campo de formulário carregando: o rótulo curto e a caixa do controle na altura real. */
+declare function SkeletonField({ tall }: {
+    tall?: boolean;
+}): import("react").JSX.Element;
+/** Uma linha de lista carregando. `boxed` = o item emoldurado (linha dentro de um well). */
+declare function SkeletonRow({ media, action, boxed }: {
+    media?: boolean;
+    action?: boolean;
+    boxed?: boolean;
 }): import("react").JSX.Element;
 export declare const SelectSkeleton: (({ lines }: {
     lines?: number;
@@ -19,5 +30,7 @@ export declare const SelectSkeleton: (({ lines }: {
     Display: typeof SkeletonDisplay;
     Thumbnail: typeof SkeletonThumbnail;
     Block: typeof SkeletonBlock;
+    Field: typeof SkeletonField;
+    Row: typeof SkeletonRow;
 };
 export {};

package/dist/icons.d.ts

@@ -122,4 +122,16 @@ export declare function CartIcon(): import("react").JSX.Element;
 export declare function MenuIcon(): import("react").JSX.Element;
 /** Marketplace — a storefront with an awning (a platform of sub-stores). */
 export declare function StorefrontIcon({ duotone }?: IconVariantProps): import("react").JSX.Element;
+/** Vídeo — o play no círculo (Iconsax play-circle). Aula em vídeo, envio de vídeo. */
+export declare function PlayCircleIcon(): import("react").JSX.Element;
+/** Livro aberto (Iconsax book) — e-book, material de leitura. */
+export declare function BookIcon(): import("react").JSX.Element;
+/** Documento com download (Iconsax document-download) — arquivo para baixar. */
+export declare function FileDownloadIcon(): import("react").JSX.Element;
+/** Medalha (Iconsax medal) — certificado, conquista. */
+export declare function AwardIcon(): import("react").JSX.Element;
+/** Duas pessoas (Iconsax profile-2user) — membros, alunos, equipe. */
+export declare function UsersIcon(): import("react").JSX.Element;
+/** Três círculos sobrepostos (Iconsax colorfilter) — cor, identidade visual. */
+export declare function PaletteIcon(): import("react").JSX.Element;
 export {};

package/dist/index.d.ts

@@ -176,7 +176,10 @@ export { SelectBuilderLayout } from './SelectBuilderLayout';
 export { SelectBuilderWorkspace } from './SelectBuilderWorkspace';
 export { SelectFlowCanvas, SelectFlowNode, SelectFlowLayout } from './SelectFlowCanvas';
 export { SelectSwitchField } from './SelectSwitchField';
-export { SelectColorField } from './SelectColorField';
+export { SelectColorField, SELECT_COLOR_PRESETS, normalizeHex, contrastRatio } from './SelectColorField';
+export { SelectProgressBar, type SelectProgressBarProps, type SelectProgressTone } from './SelectProgressBar';
+export { SelectChoiceCard, SelectChoiceCardSkeleton, SelectChoiceGrid, type SelectChoiceCardProps, type SelectChoiceGridProps } from './SelectChoiceCard';
+export { SelectCertificatePreview, type SelectCertificatePreviewProps, type SelectCertificateSignature } from './SelectCertificatePreview';
 export { SelectImageField } from './SelectImageField';
 export { SelectAccordion } from './SelectAccordion';
 export type { SelectNumberFieldProps } from './SelectNumberField';