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

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

@@ -1,256 +0,0 @@
-import { Input } from "@components";
-import {
-  Calendar,
-  Clock,
-  DollarSign,
-  Eye,
-  EyeOff,
-  Globe,
-  Hash,
-  Lock,
-  Mail,
-  MapPin,
-  Percent,
-  Phone,
-  Search,
-  User,
-  XCircle,
-} from "lucide-react";
-
-import { Box } from "../ui/box";
-import { Row } from "../ui/row";
-
-function InputExamples() {
-  return (
-    <Box title="Input">
-      <Row>
-        <Input
-          name="variant-solid"
-          placeholder="Variant solid (default)"
-          label="Solid variant:"
-        />
-        <Input
-          name="variant-outline"
-          placeholder="Variant outline"
-          label="Outline variant:"
-          variant="outline"
-        />
-        <Input
-          name="variant-underline"
-          placeholder="Variant underline"
-          label="Underline variant:"
-          variant="underline"
-        />
-      </Row>
-
-      <Row>
-        <Input
-          name="size-md"
-          placeholder="Size md (default)"
-          label="Medium size:"
-        />
-        <Input
-          name="size-lg"
-          placeholder="Size lg"
-          label="Large size:"
-          size="lg"
-        />
-      </Row>
-
-      <Row>
-        <Input
-          name="left-icon"
-          placeholder="With left icon"
-          label="Left icon:"
-          leftIcon={Search}
-        />
-        <Input
-          name="right-icon"
-          placeholder="With right icon"
-          label="Right icon:"
-          rightIcon={Eye}
-        />
-        <Input
-          name="both-icons"
-          placeholder="With both icons"
-          label="Both icons:"
-          leftIcon={User}
-          rightIcon={Lock}
-        />
-      </Row>
-
-      <Row>
-        <Input
-          name="prefix"
-          placeholder="example"
-          label="With prefix:"
-          prefix="https://"
-        />
-        <Input
-          name="suffix"
-          placeholder="website"
-          label="With suffix:"
-          suffix=".com"
-        />
-        <Input
-          name="prefix-suffix"
-          placeholder="amount"
-          label="Prefix and suffix:"
-          prefix="$"
-          suffix=".00"
-        />
-      </Row>
-
-      <Row>
-        <Input
-          name="loading-left"
-          placeholder="Loading..."
-          label="Loading (left):"
-          isLoading
-        />
-        <Input
-          name="loading-right"
-          placeholder="Loading..."
-          label="Loading (right):"
-          rightIcon={Search}
-          isLoading
-        />
-      </Row>
-
-      <Row>
-        <Input
-          name="email"
-          type="email"
-          placeholder="your@email.com"
-          label="Email:"
-          leftIcon={Mail}
-        />
-        <Input
-          name="password"
-          type="password"
-          placeholder="Password"
-          label="Password:"
-          leftIcon={Lock}
-          rightIcon={EyeOff}
-        />
-        <Input
-          name="tel"
-          type="tel"
-          placeholder="(11) 99999-9999"
-          label="Phone:"
-          leftIcon={Phone}
-        />
-      </Row>
-
-      <Row>
-        <Input
-          name="disabled"
-          placeholder="Disabled input"
-          label="Disabled:"
-          disabled
-        />
-        <Input
-          name="readonly"
-          placeholder="Read only input"
-          label="Read only:"
-          readOnly
-          value="Cannot edit"
-        />
-      </Row>
-
-      <Row>
-        <Input
-          name="required"
-          placeholder="Required field"
-          label="Required field:"
-          showAsterisk
-          required
-        />
-        <Input
-          name="error"
-          leftIcon={XCircle}
-          placeholder="Field with error"
-          label="With error:"
-          errorMessage="This field is required"
-        />
-      </Row>
-
-      <Row>
-        <Input
-          name="search"
-          type="search"
-          placeholder="Search..."
-          label="Search:"
-          leftIcon={Search}
-        />
-        <Input
-          name="url"
-          type="url"
-          placeholder="https://example.com"
-          label="Website:"
-          leftIcon={Globe}
-        />
-        <Input
-          name="number"
-          type="number"
-          placeholder="123"
-          label="Number:"
-          leftIcon={Hash}
-        />
-      </Row>
-
-      <Row>
-        <Input name="date" type="date" label="Date:" leftIcon={Calendar} />
-        <Input name="time" type="time" label="Time:" leftIcon={Clock} />
-        <Input
-          name="datetime-local"
-          type="datetime-local"
-          label="Date and Time:"
-          leftIcon={Calendar}
-        />
-      </Row>
-
-      <Row>
-        <Input
-          name="price"
-          type="number"
-          placeholder="0.00"
-          label="Price:"
-          prefix="$"
-          rightIcon={DollarSign}
-          variant="outline"
-          size="lg"
-        />
-
-        <Input
-          name="percentage"
-          type="number"
-          placeholder="0"
-          label="Percentage:"
-          suffix="%"
-          rightIcon={Percent}
-          variant="underline"
-        />
-      </Row>
-
-      <Row>
-        <Input
-          name="address"
-          placeholder="Street address"
-          label="Address:"
-          leftIcon={MapPin}
-          variant="outline"
-        />
-        <Input
-          name="postalCode"
-          placeholder="12345-678"
-          label="ZIP Code:"
-          leftIcon={MapPin}
-          maxLength={9}
-        />
-      </Row>
-    </Box>
-  );
-}
-
-export { InputExamples };

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 };