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

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

@@ -1,66 +0,0 @@
-import { Button } from "@components";
-import { Star } from "lucide-react";
-
-import { Box } from "../ui/box";
-import { Row } from "../ui/row";
-
-function ButtonExamples() {
-  return (
-    <Box title="Button">
-      <Row>
-        <Button>variant - ghost (default)</Button>
-        <Button variant="outline">variant - outline</Button>
-        <Button variant="ghost">variant - ghost</Button>
-        <Button variant="invisible">variant - invisible</Button>
-      </Row>
-
-      <Row>
-        <Button size="xs">size - xs</Button>
-        <Button size="sm">size - sm</Button>
-        <Button>size - md (default)</Button>
-        <Button size="lg">size - lg</Button>
-      </Row>
-
-      <Row>
-        <Button>scheme - primary (default)</Button>
-        <Button scheme="danger">scheme - danger</Button>
-        <Button scheme="info">scheme - info</Button>
-        <Button scheme="success">scheme - success</Button>
-        <Button scheme="warning">scheme - warning</Button>
-      </Row>
-
-      <Row>
-        <Button leftIcon={Star}>leftIcon</Button>
-        <Button rightIcon={Star}>rightIcon</Button>
-      </Row>
-      <Row>
-        <Button isLoading size="xs">
-          isLoading
-        </Button>
-        <Button isLoading size="sm">
-          isLoading
-        </Button>
-        <Button isLoading>isLoading</Button>
-        <Button isLoading size="lg">
-          isLoading
-        </Button>
-      </Row>
-      <Row>
-        <Button isLoading size="xs" loadingText="Loading...">
-          isLoading
-        </Button>
-        <Button isLoading size="sm" loadingText="Loading...">
-          isLoading
-        </Button>
-        <Button isLoading loadingText="Loading...">
-          isLoading
-        </Button>
-        <Button isLoading size="lg" loadingText="Loading...">
-          isLoading
-        </Button>
-      </Row>
-    </Box>
-  );
-}
-
-export { ButtonExamples };

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

@@ -1,36 +0,0 @@
-import { CardTabButton, CardTabContainer } from "@components";
-import { Box } from "../ui/box";
-
-function CardTabExamples() {
-  return (
-    <Box title="CardTab">
-      <CardTabContainer>
-        <CardTabButton value="item-1">Item 1</CardTabButton>
-        <CardTabButton value="item-2">Item 2</CardTabButton>
-        <CardTabButton value="item-3">Item 3</CardTabButton>
-      </CardTabContainer>
-
-      <CardTabContainer defaultValue="item-3">
-        <CardTabButton value="item-1">Item 1</CardTabButton>
-        <CardTabButton value="item-2">Item 2</CardTabButton>
-        <CardTabButton value="item-3">Item 3</CardTabButton>
-      </CardTabContainer>
-
-      <CardTabContainer disabled>
-        <CardTabButton value="item-1">Item 1</CardTabButton>
-        <CardTabButton value="item-2">Item 2</CardTabButton>
-        <CardTabButton value="item-3">Item 3</CardTabButton>
-      </CardTabContainer>
-
-      <CardTabContainer>
-        <CardTabButton value="item-1">Item 1</CardTabButton>
-        <CardTabButton value="item-2">Item 2</CardTabButton>
-        <CardTabButton value="item-3" disabled>
-          Item 3
-        </CardTabButton>
-      </CardTabContainer>
-    </Box>
-  );
-}
-
-export { CardTabExamples };

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

@@ -1,94 +0,0 @@
-import { Checkbox } from "@components";
-import { useState } from "react";
-
-import { Box } from "../ui/box";
-import { Row } from "../ui/row";
-
-function CheckboxExamples() {
-  const [isChecked, setIsChecked] = useState(false);
-  const [premiumEnabled, setPremiumEnabled] = useState(true);
-
-  return (
-    <Box title="Checkbox">
-      <Row>
-        <Checkbox name="basic1" label="Basic checkbox" />
-        <Checkbox name="basic2" label="With custom value" value="accepted" />
-        <Checkbox name="basic3" label="Default checked" defaultChecked />
-        <Checkbox name="basic4" label="Disabled state" disabled />
-      </Row>
-
-      <Row>
-        <Checkbox name="size1" label="Small (sm)" size="sm" />
-        <Checkbox name="size2" label="Medium (md) - default" size="md" />
-        <Checkbox name="size3" label="Large (lg)" size="lg" />
-      </Row>
-
-      <Row>
-        <Checkbox
-          name="controlled1"
-          label="Controlled checkbox"
-          checked={isChecked}
-          onCheck={(value) => setIsChecked(!!value)}
-        />
-        <Checkbox
-          name="controlled2"
-          label="Premium features"
-          checked={premiumEnabled}
-          value="premium"
-          onCheck={(value) => setPremiumEnabled(!!value)}
-          size="lg"
-        />
-      </Row>
-
-      <Row>
-        <Checkbox
-          name="error1"
-          label="With error message"
-          errorMessage={true}
-        />
-        <Checkbox
-          name="error2"
-          label="Required field"
-          errorMessage={true}
-          size="lg"
-        />
-      </Row>
-
-      <Row>
-        <Checkbox
-          name="terms"
-          label="I agree to the terms and conditions"
-          value="terms_accepted"
-          onCheck={(value) => console.log("Terms:", value)}
-        />
-        <Checkbox
-          name="newsletter"
-          label="Subscribe to newsletter"
-          value="subscribed"
-          defaultChecked
-          size="sm"
-        />
-      </Row>
-
-      <Row>
-        <Checkbox
-          name="notifications"
-          label="Enable notifications"
-          className="custom-checkbox"
-          onCheck={(value) => {
-            console.log("Notifications:", value);
-          }}
-        />
-        <Checkbox
-          name="remember"
-          label="Remember me for 30 days"
-          value="remember_user"
-          size="sm"
-          onCheck={(value) => console.log("Remember user:", value)}
-        />
-      </Row>
-    </Box>
-  );
-}
-
-export { CheckboxExamples };

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