@arkyn/components 3.0.1-beta.21 → 3.0.1-beta.23

package/documentation/src/components/examples.maskedInput.tsx

@@ -1,274 +0,0 @@
-import { MaskedInput } from "@components";
-import {
-  Calendar,
-  Clock,
-  CreditCard,
-  FileText,
-  Hash,
-  IdCard,
-  MapPin,
-  Phone,
-  User,
-  XCircle,
-} from "lucide-react";
-
-import { Box } from "../ui/box";
-import { Row } from "../ui/row";
-
-function MaskedInputExamples() {
-  return (
-    <Box title="MaskedInput">
-      <Row>
-        <MaskedInput
-          name="variant-solid"
-          mask="___.___.___-__"
-          replacement={{ _: /\d/ }}
-          placeholder="000.000.000-00"
-          label="Solid variant (default):"
-        />
-        <MaskedInput
-          name="variant-outline"
-          mask="___.___.___-__"
-          replacement={{ _: /\d/ }}
-          placeholder="000.000.000-00"
-          label="Outline variant:"
-          variant="outline"
-        />
-        <MaskedInput
-          name="variant-underline"
-          mask="___.___.___-__"
-          replacement={{ _: /\d/ }}
-          placeholder="000.000.000-00"
-          label="Underline variant:"
-          variant="underline"
-        />
-      </Row>
-
-      <Row>
-        <MaskedInput
-          name="size-md"
-          mask="(__)_____-____"
-          replacement={{ _: /\d/ }}
-          placeholder="(11)99999-9999"
-          label="Medium size (default):"
-        />
-        <MaskedInput
-          name="size-lg"
-          mask="(__)_____-____"
-          replacement={{ _: /\d/ }}
-          placeholder="(11)99999-9999"
-          label="Large size:"
-          size="lg"
-        />
-      </Row>
-
-      <Row>
-        <MaskedInput
-          name="cpf"
-          mask="___.___.___-__"
-          replacement={{ _: /\d/ }}
-          placeholder="000.000.000-00"
-          label="CPF:"
-          leftIcon={User}
-        />
-        <MaskedInput
-          name="cnpj"
-          mask="__.___.___/____-__"
-          replacement={{ _: /\d/ }}
-          placeholder="00.000.000/0000-00"
-          label="CNPJ:"
-          leftIcon={FileText}
-        />
-        <MaskedInput
-          name="rg"
-          mask="__.___.__-_"
-          replacement={{ _: /\d/ }}
-          placeholder="00.000.00-0"
-          label="RG:"
-          leftIcon={IdCard}
-        />
-      </Row>
-
-      <Row>
-        <MaskedInput
-          name="phone"
-          mask="(__)_____-____"
-          replacement={{ _: /\d/ }}
-          placeholder="(11)99999-9999"
-          label="Telefone:"
-          leftIcon={Phone}
-        />
-        <MaskedInput
-          name="cep"
-          mask="_____-___"
-          replacement={{ _: /\d/ }}
-          placeholder="00000-000"
-          label="CEP:"
-          leftIcon={MapPin}
-        />
-        <MaskedInput
-          name="credit-card"
-          mask="____ ____ ____ ____"
-          replacement={{ _: /\d/ }}
-          placeholder="0000 0000 0000 0000"
-          label="Cartão de Crédito:"
-          leftIcon={CreditCard}
-        />
-      </Row>
-
-      <Row>
-        <MaskedInput
-          name="date"
-          mask="__/__/____"
-          replacement={{ _: /\d/ }}
-          placeholder="dd/mm/yyyy"
-          label="Data:"
-          leftIcon={Calendar}
-        />
-        <MaskedInput
-          name="time"
-          mask="__:__"
-          replacement={{ _: /\d/ }}
-          placeholder="00:00"
-          label="Horário:"
-          leftIcon={Clock}
-        />
-        <MaskedInput
-          name="currency"
-          mask="R$ ___.__,__"
-          replacement={{ _: /\d/ }}
-          placeholder="R$ 000.00,00"
-          label="Moeda:"
-          prefix="R$"
-        />
-      </Row>
-
-      <Row>
-        <MaskedInput
-          name="prefix-suffix"
-          mask="_____-___"
-          replacement={{ _: /\d/ }}
-          placeholder="00000-000"
-          label="Prefix e Suffix:"
-          prefix="CEP:"
-          suffix="-BR"
-        />
-        <MaskedInput
-          name="show-mask"
-          mask="(__)_____-____"
-          replacement={{ _: /\d/ }}
-          placeholder="(11)99999-9999"
-          label="Show mask:"
-          showMask
-          leftIcon={Phone}
-        />
-      </Row>
-
-      <Row>
-        <MaskedInput
-          name="loading"
-          mask="___.___.___-__"
-          replacement={{ _: /\d/ }}
-          placeholder="000.000.000-00"
-          label="Loading:"
-          isLoading
-        />
-        <MaskedInput
-          name="loading-right"
-          mask="___.___.___-__"
-          replacement={{ _: /\d/ }}
-          placeholder="000.000.000-00"
-          label="Loading (right icon):"
-          rightIcon={Hash}
-          isLoading
-        />
-      </Row>
-
-      <Row>
-        <MaskedInput
-          name="disabled"
-          mask="___.___.___-__"
-          replacement={{ _: /\d/ }}
-          placeholder="000.000.000-00"
-          label="Disabled:"
-          disabled
-        />
-        <MaskedInput
-          name="readonly"
-          mask="___.___.___-__"
-          replacement={{ _: /\d/ }}
-          placeholder="000.000.000-00"
-          label="Read only:"
-          readOnly
-          defaultValue="123.456.789-00"
-        />
-      </Row>
-
-      <Row>
-        <MaskedInput
-          name="required"
-          mask="___.___.___-__"
-          replacement={{ _: /\d/ }}
-          placeholder="000.000.000-00"
-          label="Required field:"
-          showAsterisk
-          required
-        />
-        <MaskedInput
-          name="error"
-          mask="___.___.___-__"
-          replacement={{ _: /\d/ }}
-          placeholder="000.000.000-00"
-          label="With error:"
-          leftIcon={XCircle}
-          errorMessage="CPF inválido"
-        />
-      </Row>
-
-      <Row>
-        <MaskedInput
-          name="separate"
-          mask="___.___.___-__"
-          replacement={{ _: /\d/ }}
-          placeholder="000.000.000-00"
-          label="Separate:"
-          separate
-          leftIcon={User}
-        />
-        <MaskedInput
-          name="custom-pattern"
-          mask="___-###-___"
-          replacement={{ _: /\d/, "#": /[A-Z]/ }}
-          placeholder="000-ABC-000"
-          label="Custom pattern:"
-          leftIcon={Hash}
-        />
-      </Row>
-
-      <Row>
-        <MaskedInput
-          name="advanced-cpf"
-          mask="___.___.___-__"
-          replacement={{ _: /\d/ }}
-          placeholder="000.000.000-00"
-          label="CPF completo:"
-          leftIcon={User}
-          variant="outline"
-          size="lg"
-          showMask
-        />
-        <MaskedInput
-          name="advanced-phone"
-          mask="(__)_____-____"
-          replacement={{ _: /\d/ }}
-          placeholder="(11)99999-9999"
-          label="Telefone completo:"
-          leftIcon={Phone}
-          variant="underline"
-        />
-      </Row>
-    </Box>
-  );
-}
-
-export { MaskedInputExamples };

package/documentation/src/components/examples.modal.tsx

@@ -1,31 +0,0 @@
-import { Button, ModalContainer, ModalFooter, ModalHeader } from "@components";
-import { useState } from "react";
-
-import { Box } from "../ui/box";
-import { Row } from "../ui/row";
-
-function ModalExamples() {
-  const [modal, setModal] = useState(false);
-
-  return (
-    <Box title="Modal">
-      <Row>
-        <Button onClick={() => setModal(true)}>Open modal</Button>
-
-        <ModalContainer isVisible={modal} makeInvisible={() => setModal(false)}>
-          <ModalHeader>Modal</ModalHeader>
-          <p style={{ padding: "16px", minWidth: "400px" }}>
-            This is the content of the right drawer.
-          </p>
-          <ModalFooter>
-            <Button scheme="danger" onClick={() => setModal(false)}>
-              Close modal
-            </Button>
-          </ModalFooter>
-        </ModalContainer>
-      </Row>
-    </Box>
-  );
-}
-
-export { ModalExamples };

package/documentation/src/components/examples.multiSelect.tsx

@@ -1,320 +0,0 @@
-import { MultiSelect } from "@components";
-import {
-  Globe,
-  Hash,
-  Search,
-  Star,
-  Tag,
-  User,
-  Users,
-  MapPin,
-  Code,
-  Building,
-  Briefcase,
-  Heart,
-  Book,
-  Music,
-  Camera,
-  Coffee,
-  Gamepad2,
-  Monitor,
-  Palette,
-} from "lucide-react";
-
-import { Box } from "../ui/box";
-import { Row } from "../ui/row";
-
-// Sample data for examples
-const basicOptions = [
-  { label: "Opção 1", value: "option1" },
-  { label: "Opção 2", value: "option2" },
-  { label: "Opção 3", value: "option3" },
-  { label: "Opção 4", value: "option4" },
-];
-
-const categoriesOptions = [
-  { label: "Tecnologia", value: "tech" },
-  { label: "Design", value: "design" },
-  { label: "Marketing", value: "marketing" },
-  { label: "Vendas", value: "sales" },
-  { label: "Recursos Humanos", value: "hr" },
-  { label: "Financeiro", value: "finance" },
-];
-
-const countriesOptions = [
-  { label: "Brasil", value: "br" },
-  { label: "Estados Unidos", value: "us" },
-  { label: "Reino Unido", value: "uk" },
-  { label: "França", value: "fr" },
-  { label: "Alemanha", value: "de" },
-  { label: "Japão", value: "jp" },
-  { label: "Canadá", value: "ca" },
-  { label: "Austrália", value: "au" },
-];
-
-const skillsOptions = [
-  { label: "JavaScript", value: "javascript" },
-  { label: "TypeScript", value: "typescript" },
-  { label: "React", value: "react" },
-  { label: "Node.js", value: "nodejs" },
-  { label: "Python", value: "python" },
-  { label: "Java", value: "java" },
-  { label: "C#", value: "csharp" },
-  { label: "PHP", value: "php" },
-  { label: "Go", value: "go" },
-  { label: "Rust", value: "rust" },
-];
-
-const tagsOptions = [
-  { label: "Urgente", value: "urgent" },
-  { label: "Importante", value: "important" },
-  { label: "Baixa Prioridade", value: "low" },
-  { label: "Em Progresso", value: "progress" },
-  { label: "Concluído", value: "done" },
-  { label: "Revisão", value: "review" },
-];
-
-const departmentsOptions = [
-  { label: "Desenvolvimento", value: "dev" },
-  { label: "Design", value: "design" },
-  { label: "Marketing", value: "marketing" },
-  { label: "Vendas", value: "sales" },
-  { label: "Suporte", value: "support" },
-  { label: "Administração", value: "admin" },
-];
-
-const hobbiesOptions = [
-  { label: "Leitura", value: "reading" },
-  { label: "Música", value: "music" },
-  { label: "Fotografia", value: "photography" },
-  { label: "Culinária", value: "cooking" },
-  { label: "Games", value: "gaming" },
-  { label: "Esportes", value: "sports" },
-  { label: "Viagem", value: "travel" },
-  { label: "Arte", value: "art" },
-];
-
-function MultiSelectExamples() {
-  return (
-    <Box title="MultiSelect">
-      <Row>
-        <MultiSelect
-          name="variant-solid"
-          options={basicOptions}
-          placeholder="Variant solid (default)"
-          label="Solid variant:"
-        />
-        <MultiSelect
-          name="variant-outline"
-          options={basicOptions}
-          placeholder="Variant outline"
-          label="Outline variant:"
-          variant="outline"
-        />
-        <MultiSelect
-          name="variant-underline"
-          options={basicOptions}
-          placeholder="Variant underline"
-          label="Underline variant:"
-          variant="underline"
-        />
-      </Row>
-
-      <Row>
-        <MultiSelect
-          name="size-md"
-          options={basicOptions}
-          placeholder="Size md (default)"
-          label="Medium size:"
-        />
-        <MultiSelect
-          name="size-lg"
-          options={basicOptions}
-          placeholder="Size lg"
-          label="Large size:"
-          size="lg"
-        />
-      </Row>
-
-      <Row>
-        <MultiSelect
-          name="left-icon"
-          options={categoriesOptions}
-          placeholder="Selecione categorias"
-          label="Left icon:"
-          leftIcon={Tag}
-        />
-        <MultiSelect
-          name="prefix"
-          options={countriesOptions}
-          placeholder="Selecione países"
-          label="With prefix:"
-          prefix="País:"
-        />
-        <MultiSelect
-          name="prefix-icon"
-          options={countriesOptions}
-          placeholder="Selecione países"
-          label="Prefix and icon:"
-          prefix="Loc:"
-          leftIcon={Globe}
-        />
-      </Row>
-
-      <Row>
-        <MultiSelect
-          name="searchable"
-          options={skillsOptions}
-          placeholder="Busque e selecione habilidades"
-          label="Searchable:"
-          leftIcon={Search}
-          isSearchable
-        />
-        <MultiSelect
-          name="close-on-select"
-          options={tagsOptions}
-          placeholder="Selecione tags"
-          label="Close on select:"
-          leftIcon={Hash}
-          closeOnSelect
-        />
-      </Row>
-
-      <Row>
-        <MultiSelect
-          name="loading"
-          options={categoriesOptions}
-          placeholder="Carregando..."
-          label="Loading state:"
-          isLoading
-        />
-        <MultiSelect
-          name="loading-with-icon"
-          options={skillsOptions}
-          placeholder="Carregando habilidades..."
-          label="Loading with icon:"
-          leftIcon={Code}
-          isLoading
-        />
-      </Row>
-
-      <Row>
-        <MultiSelect
-          name="disabled"
-          options={basicOptions}
-          placeholder="MultiSelect desabilitado"
-          label="Disabled:"
-          disabled
-        />
-        <MultiSelect
-          name="readonly"
-          options={departmentsOptions}
-          placeholder="MultiSelect apenas leitura"
-          label="Read only:"
-          readOnly
-          defaultValue={["dev", "design"]}
-        />
-      </Row>
-
-      <Row>
-        <MultiSelect
-          name="required"
-          options={categoriesOptions}
-          placeholder="Campo obrigatório"
-          label="Required field:"
-          showAsterisk
-        />
-        <MultiSelect
-          name="error"
-          options={skillsOptions}
-          placeholder="Campo com erro"
-          label="With error:"
-          errorMessage="Selecione pelo menos uma habilidade"
-        />
-      </Row>
-
-      <Row>
-        <MultiSelect
-          name="default-values"
-          options={hobbiesOptions}
-          placeholder="Selecione hobbies"
-          label="With default values:"
-          leftIcon={Heart}
-          defaultValue={["reading", "music"]}
-        />
-        <MultiSelect
-          name="custom-not-found"
-          options={[]}
-          placeholder="Sem opções"
-          label="Empty options:"
-          notFoundText="Nenhuma opção disponível no momento"
-        />
-      </Row>
-
-      <Row>
-        <MultiSelect
-          name="departments"
-          options={departmentsOptions}
-          placeholder="Selecione departamentos"
-          label="Departments:"
-          leftIcon={Building}
-          variant="outline"
-          size="lg"
-          isSearchable
-          closeOnSelect={false}
-        />
-        <MultiSelect
-          name="team-roles"
-          options={[
-            { label: "Frontend Developer", value: "frontend" },
-            { label: "Backend Developer", value: "backend" },
-            { label: "Full Stack Developer", value: "fullstack" },
-            { label: "DevOps Engineer", value: "devops" },
-            { label: "QA Engineer", value: "qa" },
-            { label: "Product Manager", value: "pm" },
-          ]}
-          placeholder="Selecione funções"
-          label="Team roles:"
-          leftIcon={Users}
-          variant="underline"
-        />
-      </Row>
-
-      <Row>
-        <MultiSelect
-          name="creative-areas"
-          options={[
-            { label: "Design Gráfico", value: "graphic" },
-            { label: "UI/UX Design", value: "uiux" },
-            { label: "Ilustração", value: "illustration" },
-            { label: "Animação", value: "animation" },
-            { label: "Branding", value: "branding" },
-            { label: "Motion Graphics", value: "motion" },
-          ]}
-          placeholder="Áreas criativas"
-          label="Creative areas:"
-          leftIcon={Palette}
-          isSearchable
-          notFoundText="Área não encontrada"
-        />
-        <MultiSelect
-          name="work-locations"
-          options={[
-            { label: "São Paulo - SP", value: "sp" },
-            { label: "Rio de Janeiro - RJ", value: "rj" },
-            { label: "Belo Horizonte - MG", value: "mg" },
-            { label: "Remote", value: "remote" },
-            { label: "Híbrido", value: "hybrid" },
-          ]}
-          placeholder="Locais de trabalho"
-          label="Work locations:"
-          leftIcon={MapPin}
-          closeOnSelect
-          variant="outline"
-        />
-      </Row>
-    </Box>
-  );
-}
-
-export { MultiSelectExamples };