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

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

@@ -1,263 +0,0 @@
-import { CurrencyInput } from "@components";
-import {
-  Calculator,
-  CreditCard,
-  DollarSign,
-  PiggyBank,
-  Receipt,
-  TrendingUp,
-  Wallet,
-} from "lucide-react";
-
-import { Box } from "../ui/box";
-import { Row } from "../ui/row";
-
-function CurrencyInputExamples() {
-  return (
-    <Box title="CurrencyInput">
-      <Row>
-        <CurrencyInput
-          name="variant-solid"
-          locale="USD"
-          placeholder="0.00"
-          label="Solid variant:"
-        />
-        <CurrencyInput
-          name="variant-outline"
-          locale="EUR"
-          placeholder="0,00"
-          label="Outline variant:"
-          variant="outline"
-        />
-        <CurrencyInput
-          name="variant-underline"
-          locale="BRL"
-          placeholder="0,00"
-          label="Underline variant:"
-          variant="underline"
-        />
-      </Row>
-
-      <Row>
-        <CurrencyInput
-          name="size-md"
-          locale="USD"
-          placeholder="0.00"
-          label="Medium size:"
-        />
-        <CurrencyInput
-          name="size-lg"
-          locale="USD"
-          placeholder="0.00"
-          label="Large size:"
-          size="lg"
-        />
-      </Row>
-
-      <Row>
-        <CurrencyInput
-          name="left-icon"
-          locale="USD"
-          placeholder="0.00"
-          label="Left icon:"
-          leftIcon={DollarSign}
-        />
-        <CurrencyInput
-          name="right-icon"
-          locale="EUR"
-          placeholder="0,00"
-          label="Right icon:"
-          rightIcon={Calculator}
-        />
-        <CurrencyInput
-          name="both-icons"
-          locale="BRL"
-          placeholder="0,00"
-          label="Both icons:"
-          leftIcon={Wallet}
-          rightIcon={TrendingUp}
-        />
-      </Row>
-
-      <Row>
-        <CurrencyInput
-          name="prefix"
-          locale="USD"
-          placeholder="0.00"
-          label="With prefix:"
-          prefix="$"
-        />
-        <CurrencyInput
-          name="suffix"
-          locale="EUR"
-          placeholder="0,00"
-          label="With suffix:"
-          suffix="EUR"
-        />
-        <CurrencyInput
-          name="prefix-suffix"
-          locale="BRL"
-          placeholder="0,00"
-          label="Prefix and suffix:"
-          prefix="R$"
-          suffix="BRL"
-        />
-      </Row>
-
-      <Row>
-        <CurrencyInput
-          name="loading-left"
-          locale="USD"
-          placeholder="Loading..."
-          label="Loading (left):"
-          isLoading
-        />
-        <CurrencyInput
-          name="loading-right"
-          locale="EUR"
-          placeholder="Loading..."
-          label="Loading (right):"
-          rightIcon={Calculator}
-          isLoading
-        />
-      </Row>
-
-      <Row>
-        <CurrencyInput
-          name="salary"
-          locale="USD"
-          placeholder="0.00"
-          label="Salary:"
-          leftIcon={DollarSign}
-          prefix="$"
-        />
-        <CurrencyInput
-          name="price"
-          locale="EUR"
-          placeholder="0,00"
-          label="Product Price:"
-          leftIcon={Receipt}
-          variant="outline"
-        />
-        <CurrencyInput
-          name="investment"
-          locale="BRL"
-          placeholder="0,00"
-          label="Investment:"
-          leftIcon={PiggyBank}
-          variant="underline"
-        />
-      </Row>
-
-      <Row>
-        <CurrencyInput
-          name="disabled"
-          locale="USD"
-          placeholder="0.00"
-          label="Disabled:"
-          disabled
-          defaultValue={1500}
-        />
-        <CurrencyInput
-          name="readonly"
-          locale="EUR"
-          placeholder="0,00"
-          label="Read only:"
-          readOnly
-          value={2500}
-        />
-      </Row>
-
-      <Row>
-        <CurrencyInput
-          name="required"
-          locale="USD"
-          placeholder="0.00"
-          label="Required field:"
-          showAsterisk
-          required
-        />
-        <CurrencyInput
-          name="error"
-          locale="BRL"
-          placeholder="0,00"
-          label="With error:"
-          errorMessage="Amount must be greater than 0"
-          leftIcon={DollarSign}
-        />
-      </Row>
-
-      <Row>
-        <CurrencyInput
-          name="max-value"
-          locale="USD"
-          placeholder="0.00"
-          label="Max $10,000:"
-          max={10000}
-          leftIcon={CreditCard}
-          variant="outline"
-        />
-        <CurrencyInput
-          name="budget"
-          locale="EUR"
-          placeholder="0,00"
-          label="Monthly Budget:"
-          leftIcon={Calculator}
-          suffix="EUR"
-          variant="underline"
-          size="lg"
-        />
-      </Row>
-
-      <Row>
-        <CurrencyInput
-          name="different-locales-1"
-          locale="JPY"
-          placeholder="¥0"
-          label="Japanese Yen:"
-          leftIcon={DollarSign}
-        />
-        <CurrencyInput
-          name="different-locales-2"
-          locale="GBP"
-          placeholder="£0.00"
-          label="British Pound:"
-          leftIcon={DollarSign}
-          prefix="£"
-        />
-        <CurrencyInput
-          name="different-locales-3"
-          locale="CAD"
-          placeholder="$0.00"
-          label="Canadian Dollar:"
-          leftIcon={DollarSign}
-          suffix="CAD"
-        />
-      </Row>
-
-      <Row>
-        <CurrencyInput
-          name="business-revenue"
-          locale="USD"
-          placeholder="0.00"
-          label="Annual Revenue:"
-          leftIcon={TrendingUp}
-          rightIcon={DollarSign}
-          prefix="$"
-          variant="outline"
-        />
-        <CurrencyInput
-          name="savings-goal"
-          locale="BRL"
-          placeholder="0,00"
-          label="Savings Goal:"
-          leftIcon={PiggyBank}
-          variant="underline"
-          max={100000}
-        />
-      </Row>
-    </Box>
-  );
-}
-
-export { CurrencyInputExamples };

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

@@ -1,12 +0,0 @@
-import { Divider } from "@components";
-import { Box } from "../ui/box";
-
-function DividerExamples() {
-  return (
-    <Box title="Divider">
-      <Divider />
-    </Box>
-  );
-}
-
-export { DividerExamples };

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

@@ -1,43 +0,0 @@
-import { Button, DrawerContainer, DrawerHeader } from "@components";
-
-import { useState } from "react";
-import { Box } from "../ui/box";
-import { Row } from "../ui/row";
-
-function DrawerExamples() {
-  const [leftDrawer, setLeftDrawer] = useState(false);
-  const [rightDrawer, setRightDrawer] = useState(false);
-
-  return (
-    <Box title="Drawer">
-      <Row>
-        <Button onClick={() => setLeftDrawer(true)}>Open left drawer</Button>
-        <Button onClick={() => setRightDrawer(true)}>Open right drawer</Button>
-
-        <DrawerContainer
-          isVisible={leftDrawer}
-          makeInvisible={() => setLeftDrawer(false)}
-          orientation="left"
-        >
-          <DrawerHeader>Left drawer</DrawerHeader>
-          <p style={{ padding: "16px" }}>
-            This is the content of the left drawer.
-          </p>
-        </DrawerContainer>
-
-        <DrawerContainer
-          isVisible={rightDrawer}
-          makeInvisible={() => setRightDrawer(false)}
-          orientation="right"
-        >
-          <DrawerHeader>Right drawer</DrawerHeader>
-          <p style={{ padding: "16px" }}>
-            This is the content of the right drawer.
-          </p>
-        </DrawerContainer>
-      </Row>
-    </Box>
-  );
-}
-
-export { DrawerExamples };

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

@@ -1,78 +0,0 @@
-import { IconButton } from "@components";
-import { Star } from "lucide-react";
-
-import { Box } from "../ui/box";
-import { Row } from "../ui/row";
-
-function IconButtonExamples() {
-  return (
-    <Box title="IconButton">
-      <Row>
-        <IconButton aria-label="test" icon={Star} />
-        <IconButton
-          aria-label="variant - outline"
-          icon={Star}
-          variant="outline"
-        />
-        <IconButton aria-label="variant - ghost" icon={Star} variant="ghost" />
-        <IconButton
-          aria-label="variant - invisible"
-          icon={Star}
-          variant="invisible"
-        />
-      </Row>
-
-      <Row>
-        <IconButton size="xs" aria-label="size - xs" icon={Star} />
-        <IconButton size="sm" aria-label="size - sm" icon={Star} />
-        <IconButton size="md" aria-label="size - md (default)" icon={Star} />
-        <IconButton size="lg" aria-label="size - lg" icon={Star} />
-      </Row>
-
-      <Row>
-        <IconButton aria-label="scheme - primary (default)" icon={Star} />
-        <IconButton aria-label="scheme - danger" icon={Star} scheme="danger" />
-        <IconButton aria-label="scheme - info" icon={Star} scheme="info" />
-        <IconButton
-          aria-label="scheme - success"
-          icon={Star}
-          scheme="success"
-        />
-        <IconButton
-          aria-label="scheme - warning"
-          icon={Star}
-          scheme="warning"
-        />
-      </Row>
-
-      <Row>
-        <IconButton
-          aria-label="isLoading - size xs"
-          icon={Star}
-          isLoading
-          size="xs"
-        />
-        <IconButton
-          aria-label="isLoading - size sm"
-          icon={Star}
-          isLoading
-          size="sm"
-        />
-        <IconButton
-          aria-label="isLoading - size md"
-          icon={Star}
-          isLoading
-          size="md"
-        />
-        <IconButton
-          aria-label="isLoading - size lg"
-          icon={Star}
-          isLoading
-          size="lg"
-        />
-      </Row>
-    </Box>
-  );
-}
-
-export { IconButtonExamples };

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