analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
1 lines • 3.54 kB
Source Map (JSON)
{"version":3,"sources":["../../src/components/Chips/Chips.tsx","../../src/utils/utils.ts"],"sourcesContent":["import { ButtonHTMLAttributes, ReactNode } from 'react';\nimport { Check } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\n/**\n * Lookup table for chip state classes\n */\nconst STATE_CLASSES = {\n default:\n 'bg-background text-text-950 border border-border-100 hover:bg-secondary-50 hover:border-border-300',\n selected:\n 'bg-info-background text-primary-950 border-2 border-primary-950 hover:bg-secondary-50 focus-visible:border-0',\n} as const;\n\n/**\n * Chips component props interface\n */\ntype ChipsProps = {\n /** Content to be displayed inside the chip */\n children: ReactNode;\n /** Se o chip está selecionado (mostra check automaticamente) */\n selected?: boolean;\n\n /** Additional CSS classes to apply */\n className?: string;\n} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>;\n\n/**\n * Chips component for Analytica Ensino platforms\n *\n * Um componente de chip seguindo exatamente o design do Figma.\n * Suporte a dois estados principais: default (sem ícone) e selected (com ícone de check).\n * Quando selecionado, automaticamente mostra o ícone de check.\n *\n * @param children - O conteúdo a ser exibido dentro do chip\n * @param selected - Se o chip está selecionado (mostra check automaticamente)\n * @param className - Classes CSS adicionais\n * @param props - Todos os outros atributos padrão de button HTML\n * @returns Um elemento de chip estilizado\n *\n * @example\n * ```tsx\n * <Chips onClick={() => console.log('clicked')}>\n * Label\n * </Chips>\n *\n * <Chips selected onClick={() => console.log('selected')}>\n * Selected Label\n * </Chips>\n * ```\n */\nconst Chips = ({\n children,\n selected = false,\n className = '',\n disabled,\n type = 'button',\n ...props\n}: ChipsProps) => {\n // Get classes from lookup tables\n const stateClasses = selected\n ? STATE_CLASSES.selected\n : STATE_CLASSES.default;\n\n const baseClasses =\n 'inline-flex items-center justify-center rounded-full cursor-pointer font-normal text-sm px-4 py-2 gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-primary-600 disabled:opacity-40 disabled:cursor-not-allowed';\n\n return (\n <button\n className={cn(baseClasses, stateClasses, className)}\n disabled={disabled}\n type={type}\n {...props}\n >\n {selected && (\n <span className={`flex items-center`}>\n <Check weight=\"bold\" size={16} />\n </span>\n )}\n\n <span className=\"flex-1\">{children}</span>\n </button>\n );\n};\n\nexport default Chips;\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n"],"mappings":";AACA,SAAS,aAAa;;;ACDtB,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;AD+DI,SAQM,KARN;AA7DJ,IAAM,gBAAgB;AAAA,EACpB,SACE;AAAA,EACF,UACE;AACJ;AAuCA,IAAM,QAAQ,CAAC;AAAA,EACb;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,MAAkB;AAEhB,QAAM,eAAe,WACjB,cAAc,WACd,cAAc;AAElB,QAAM,cACJ;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,aAAa,cAAc,SAAS;AAAA,MAClD;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,oBACC,oBAAC,UAAK,WAAW,qBACf,8BAAC,SAAM,QAAO,QAAO,MAAM,IAAI,GACjC;AAAA,QAGF,oBAAC,UAAK,WAAU,UAAU,UAAS;AAAA;AAAA;AAAA,EACrC;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}