npm - @arkyn/components - Versions diffs - 3.0.1-beta.21 → 3.0.1-beta.23 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (537) hide show

package/documentation/css/variables.css DELETED Viewed

@@ -1,41 +0,0 @@
-:root {
-  /* background */
-  --background: #f1f5f9;
-  --background-foreground: #ffffff;
-  /* modal, drawer, popover... */
-  --card: #ffffff;
-  --card-foreground-primary: #f8fafc;
-  --card-foreground-secondary: #f1f5f9;
-  --card-foreground-third: #e2e8f0;
-  /* skeleton */
-  --skeleton: #f8fafc;
-  --skeleton-foreground: #f1f5f9;
-  /* text */
-  --text-heading: #0f172a;
-  --text-body: #475569;
-  --text-muted: #94a3b8;
-  /* border */
-  --border: #e2e8f0;
-  /* tooltip */
-  --tooltip-text: #f1f5f9;
-  --tooltip-background: #0f172a;
-  /* spotlight */
-  --spotlight-primary: 17, 109, 220; /* #116ddc */
-  --spotlight-secondary: 248, 250, 252; /* #f8fafc */
-  --spotlight-success: 16, 185, 129; /* #10b981 */
-  --spotlight-danger: 244, 63, 94; /* #f43f5e */
-  --spotlight-info: 14, 165, 233; /* #0ea5e9 */
-  --spotlight-warning: 249, 115, 22; /* #f97316 */
-  /* toast */
-  --toast-success: 16, 185, 129; /* #10B981 */
-  --toast-danger: 225, 29, 72; /* #E11D48 */
-  --toast-info: 14, 165, 233; /* #0EA5E9 */
-  --toast-warning: 251, 146, 60; /* #FB923C */
-}

package/documentation/index.html DELETED Viewed

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/documentation/src/app.tsx DELETED Viewed

@@ -1,93 +0,0 @@
-import { MultiSelect } from "@components";
-import { useState } from "react";
-import { AlertExamples } from "./components/examples.alert";
-import { AudioPlayerExamples } from "./components/examples.audioPlayer";
-import { BadgeExamples } from "./components/examples.badge";
-import { ButtonExamples } from "./components/examples.button";
-import { CardTabExamples } from "./components/examples.cardTab";
-import { CheckboxExamples } from "./components/examples.checkbox";
-import { CurrencyInputExamples } from "./components/examples.currencyInput";
-import { DividerExamples } from "./components/examples.divider";
-import { DrawerExamples } from "./components/examples.drawer";
-import { IconButtonExamples } from "./components/examples.iconButton";
-import { InputExamples } from "./components/examples.input";
-import { MaskedInputExamples } from "./components/examples.maskedInput";
-import { ModalExamples } from "./components/examples.modal";
-import { MultiSelectExamples } from "./components/examples.multiSelect";
-import { SliderExamples } from "./components/examples.slider";
-import { TabExamples } from "./components/examples.tab";
-import { TooltipExamples } from "./components/examples.tooltip";
-import { RadioExamples } from "./components/examples.radio";
-import { SwitchExamples } from "./components/examples.switch";
-import { TextareaExamples } from "./components/examples.texarea";
-import { PhoneInputExamples } from "./components/examples.phoneInput";
-function App() {
-  const [selectedOption, setSelectedOption] = useState<string[]>([]);
-  const options = [
-    { label: "Alert", value: "alert" },
-    { label: "AudioPlayer", value: "audio-player" },
-    { label: "Badge", value: "badge" },
-    { label: "Button", value: "button" },
-    { label: "CardTab", value: "card-tab" },
-    { label: "Checkbox", value: "checkbox" },
-    { label: "CurrencyInput", value: "currency-input" },
-    { label: "Divider", value: "divider" },
-    { label: "Drawer", value: "drawer" },
-    { label: "IconButton", value: "icon-button" },
-    { label: "Input", value: "input" },
-    { label: "MaskedInput", value: "masked-input" },
-    { label: "Modal", value: "modal" },
-    { label: "MultiSelect", value: "multi-select" },
-    { label: "PhoneInput", value: "phone-input" },
-    { label: "Radio", value: "radio" },
-    { label: "Slider", value: "slider" },
-    { label: "Switch", value: "switch" },
-    { label: "Tab", value: "tab" },
-    { label: "Textarea", value: "textarea" },
-    { label: "Tooltip", value: "tooltip" },
-  ];
-  function showExamples(value: string): boolean {
-    return selectedOption.includes(value);
-  }
-  return (
-    <div
-      style={{ display: "flex", flexDirection: "column", gap: 40, padding: 40 }}
-    >
-      <MultiSelect
-        isSearchable
-        label="Select the examples:"
-        name="selectedOptions"
-        options={options}
-        onChange={setSelectedOption}
-      />
-      {showExamples("alert") && <AlertExamples />}
-      {showExamples("audio-player") && <AudioPlayerExamples />}
-      {showExamples("badge") && <BadgeExamples />}
-      {showExamples("button") && <ButtonExamples />}
-      {showExamples("card-tab") && <CardTabExamples />}
-      {showExamples("checkbox") && <CheckboxExamples />}
-      {showExamples("currency-input") && <CurrencyInputExamples />}
-      {showExamples("divider") && <DividerExamples />}
-      {showExamples("drawer") && <DrawerExamples />}
-      {showExamples("icon-button") && <IconButtonExamples />}
-      {showExamples("input") && <InputExamples />}
-      {showExamples("masked-input") && <MaskedInputExamples />}
-      {showExamples("modal") && <ModalExamples />}
-      {showExamples("multi-select") && <MultiSelectExamples />}
-      {showExamples("phone-input") && <PhoneInputExamples />}
-      {showExamples("radio") && <RadioExamples />}
-      {showExamples("slider") && <SliderExamples />}
-      {showExamples("switch") && <SwitchExamples />}
-      {showExamples("tab") && <TabExamples />}
-      {showExamples("textarea") && <TextareaExamples />}
-      {showExamples("tooltip") && <TooltipExamples />}
-    </div>
-  );
-}
-export { App };

package/documentation/src/components/examples.alert.tsx DELETED Viewed

@@ -1,49 +0,0 @@
-import {
-  AlertContainer,
-  AlertContent,
-  AlertDescription,
-  AlertIcon,
-  AlertTitle,
-} from "@components";
-import { Box } from "../ui/box";
-function AlertExamples() {
-  return (
-    <Box title="Alert">
-      <AlertContainer schema="danger">
-        <AlertIcon />
-        <AlertContent>
-          <AlertTitle>Alert title</AlertTitle>
-          <AlertDescription>This is an alert description</AlertDescription>
-        </AlertContent>
-      </AlertContainer>
-      <AlertContainer schema="info">
-        <AlertIcon />
-        <AlertContent>
-          <AlertTitle>Info title</AlertTitle>
-          <AlertDescription>This is an info description</AlertDescription>
-        </AlertContent>
-      </AlertContainer>
-      <AlertContainer schema="success">
-        <AlertIcon />
-        <AlertContent>
-          <AlertTitle>Success title</AlertTitle>
-          <AlertDescription>This is a success description</AlertDescription>
-        </AlertContent>
-      </AlertContainer>
-      <AlertContainer schema="warning">
-        <AlertIcon />
-        <AlertContent>
-          <AlertTitle>Warning title</AlertTitle>
-          <AlertDescription>This is a warning description</AlertDescription>
-        </AlertContent>
-      </AlertContainer>
-    </Box>
-  );
-}
-export { AlertExamples };

package/documentation/src/components/examples.audioPlayer.tsx DELETED Viewed

@@ -1,16 +0,0 @@
-import { AudioPlayer } from "@components";
-import { Box } from "../ui/box";
-const AUDIO_PLAYER_SRC = `http://codeskulptor-demos.commondatastorage.googleapis.com/pang/paza-moduless.mp3`;
-function AudioPlayerExamples() {
-  return (
-    <Box title="AudioPlayer">
-      <AudioPlayer src={AUDIO_PLAYER_SRC} />
-      <AudioPlayer src={AUDIO_PLAYER_SRC} disabled />
-    </Box>
-  );
-}
-export { AudioPlayerExamples };

package/documentation/src/components/examples.badge.tsx DELETED Viewed

@@ -1,38 +0,0 @@
-import { Badge } from "@components";
-import { Star } from "lucide-react";
-import { Box } from "../ui/box";
-import { Row } from "../ui/row";
-function BadgeExamples() {
-  return (
-    <Box title="Badge">
-      <Row>
-        <Badge>variant - ghost (default)</Badge>
-        <Badge variant="outline">variant - outline</Badge>
-        <Badge variant="solid">variant - solid</Badge>
-      </Row>
-      <Row>
-        <Badge size="md">size - md </Badge>
-        <Badge>size - lg (default)</Badge>
-      </Row>
-      <Row>
-        <Badge>scheme - primary (default)</Badge>
-        <Badge scheme="secondary">scheme - secondary</Badge>
-        <Badge scheme="danger">scheme - danger</Badge>
-        <Badge scheme="info">scheme - info</Badge>
-        <Badge scheme="success">scheme - success</Badge>
-        <Badge scheme="warning">scheme - warning</Badge>
-      </Row>
-      <Row>
-        <Badge leftIcon={Star}>leftIcon</Badge>
-        <Badge rightIcon={Star}>rightIcon</Badge>
-      </Row>
-    </Box>
-  );
-}
-export { BadgeExamples };

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

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

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