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

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

@@ -1,149 +0,0 @@
-import { RadioBox, RadioGroup } from "@components";
-import { useState } from "react";
-
-import { Box } from "../ui/box";
-
-function RadioExamples() {
-  const [selectedGender, setSelectedGender] = useState("");
-  const [selectedPlan, setSelectedPlan] = useState("basic");
-  const [selectedTheme, setSelectedTheme] = useState("light");
-
-  return (
-    <Box title="Radio">
-      <RadioGroup name="gender1" label="Gender">
-        <RadioBox value="male">Male</RadioBox>
-        <RadioBox value="female">Female</RadioBox>
-        <RadioBox value="other">Other</RadioBox>
-      </RadioGroup>
-
-      <RadioGroup name="newsletter" label="Newsletter Subscription">
-        <RadioBox value="yes">Yes, send me updates</RadioBox>
-        <RadioBox value="no">No, thank you</RadioBox>
-      </RadioGroup>
-
-      <RadioGroup name="size_sm" label="Small Size" size="sm">
-        <RadioBox value="option1">Option 1</RadioBox>
-        <RadioBox value="option2">Option 2</RadioBox>
-      </RadioGroup>
-
-      <RadioGroup name="size_md" label="Medium Size (default)" size="md">
-        <RadioBox value="option1">Option 1</RadioBox>
-        <RadioBox value="option2">Option 2</RadioBox>
-      </RadioGroup>
-
-      <RadioGroup name="size_lg" label="Large Size" size="lg">
-        <RadioBox value="option1">Option 1</RadioBox>
-        <RadioBox value="option2">Option 2</RadioBox>
-      </RadioGroup>
-
-      <RadioGroup
-        name="controlled_gender"
-        label="Controlled Gender Selection"
-        value={selectedGender}
-        onChange={(value) => setSelectedGender(value)}
-      >
-        <RadioBox value="male">Male</RadioBox>
-        <RadioBox value="female">Female</RadioBox>
-        <RadioBox value="other">Other</RadioBox>
-      </RadioGroup>
-
-      <RadioGroup
-        name="controlled_plan"
-        label="Subscription Plan"
-        value={selectedPlan}
-        onChange={(value) => setSelectedPlan(value)}
-        showAsterisk
-      >
-        <RadioBox value="basic">Basic ($9.99/month)</RadioBox>
-        <RadioBox value="premium">Premium ($19.99/month)</RadioBox>
-        <RadioBox value="enterprise">Enterprise ($49.99/month)</RadioBox>
-      </RadioGroup>
-
-      <RadioGroup name="language" label="Preferred Language" defaultValue="en">
-        <RadioBox value="en">English</RadioBox>
-        <RadioBox value="es">Spanish</RadioBox>
-        <RadioBox value="fr">French</RadioBox>
-        <RadioBox value="pt">Portuguese</RadioBox>
-      </RadioGroup>
-
-      <RadioGroup
-        name="priority_error"
-        label="Priority Level"
-        errorMessage="Please select a priority level"
-        showAsterisk
-      >
-        <RadioBox value="low">Low Priority</RadioBox>
-        <RadioBox value="medium">Medium Priority</RadioBox>
-        <RadioBox value="high">High Priority</RadioBox>
-      </RadioGroup>
-
-      <RadioGroup
-        name="theme_selection"
-        label="Theme Selection"
-        value={selectedTheme}
-        onChange={(value) => setSelectedTheme(value)}
-      >
-        <RadioBox value="light">
-          <div>
-            <strong>🌞 Light Theme</strong>
-            <p style={{ margin: 0, fontSize: "0.875rem", color: "#666" }}>
-              Clean and bright interface
-            </p>
-          </div>
-        </RadioBox>
-        <RadioBox value="dark">
-          <div>
-            <strong>🌙 Dark Theme</strong>
-            <p style={{ margin: 0, fontSize: "0.875rem", color: "#666" }}>
-              Easy on the eyes
-            </p>
-          </div>
-        </RadioBox>
-        <RadioBox value="auto">
-          <div>
-            <strong>🔄 Auto Theme</strong>
-            <p style={{ margin: 0, fontSize: "0.875rem", color: "#666" }}>
-              Follows system preference
-            </p>
-          </div>
-        </RadioBox>
-      </RadioGroup>
-
-      <RadioGroup name="availability" label="Availability Status">
-        <RadioBox value="available">Available</RadioBox>
-        <RadioBox value="busy">Busy</RadioBox>
-        <RadioBox value="offline" disabled>
-          Offline (Maintenance)
-        </RadioBox>
-      </RadioGroup>
-
-      <RadioGroup name="notification_type" label="Notification Preferences">
-        <RadioBox value="all" size="lg">
-          All Notifications
-        </RadioBox>
-        <RadioBox value="important">Important Only</RadioBox>
-        <RadioBox value="none" size="sm">
-          None
-        </RadioBox>
-      </RadioGroup>
-
-      <RadioGroup
-        name="difficulty"
-        label="Game Difficulty"
-        onChange={(value) => console.log("Selected difficulty:", value)}
-      >
-        <RadioBox value="easy">
-          <span style={{ color: "#22c55e" }}>🟢 Easy</span>
-        </RadioBox>
-        <RadioBox value="medium">
-          <span style={{ color: "#f59e0b" }}>🟡 Medium</span>
-        </RadioBox>
-        <RadioBox value="hard">
-          <span style={{ color: "#ef4444" }}>🔴 Hard</span>
-        </RadioBox>
-      </RadioGroup>
-    </Box>
-  );
-}
-
-export { RadioExamples };

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

@@ -1,28 +0,0 @@
-import { Slider, useSlider } from "@components";
-import { Box } from "../ui/box";
-import { Row } from "../ui/row";
-
-function SliderExamples() {
-  const [sliderValue, changeSliderValue] = useSlider();
-  const [disabledSliderValue, changeDisabledSliderValue] = useSlider(50);
-
-  return (
-    <Box title="Slider">
-      <Row>
-        <Slider onChange={changeSliderValue} value={sliderValue} />
-        <p>{sliderValue}</p>
-      </Row>
-
-      <Row>
-        <Slider
-          disabled
-          onChange={changeDisabledSliderValue}
-          value={disabledSliderValue}
-        />
-        <p>{disabledSliderValue}</p>
-      </Row>
-    </Box>
-  );
-}
-
-export { SliderExamples };

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

@@ -1,180 +0,0 @@
-import { Switch } from "@components";
-import { useState } from "react";
-
-import { Box } from "../ui/box";
-import { Row } from "../ui/row";
-
-function SwitchExamples() {
-  const [isNotificationsEnabled, setIsNotificationsEnabled] = useState(false);
-  const [isDarkMode, setIsDarkMode] = useState(true);
-  const [isAutoSave, setIsAutoSave] = useState(false);
-  const [isPremiumEnabled, setIsPremiumEnabled] = useState(true);
-
-  return (
-    <Box title="Switch">
-      {/* Basic usage */}
-      <Row>
-        <Switch name="basic1" label="Enable notifications" />
-        <Switch name="basic2" label="Marketing emails" defaultChecked />
-        <Switch name="basic3" label="Auto-save documents" />
-        <Switch name="basic4" label="Disabled switch" disabled />
-      </Row>
-
-      {/* Different sizes */}
-      <Row>
-        <Switch name="size1" label="Small (sm)" size="sm" />
-        <Switch name="size2" label="Medium (md)" size="md" />
-        <Switch name="size3" label="Large (lg) - default" size="lg" />
-      </Row>
-
-      {/* Controlled state examples */}
-      <Row>
-        <Switch
-          name="controlled1"
-          label="Controlled notifications"
-          checked={isNotificationsEnabled}
-          onCheck={(value) => setIsNotificationsEnabled(!!value)}
-        />
-        <Switch
-          name="controlled2"
-          label="Dark mode"
-          checked={isDarkMode}
-          value="dark"
-          unCheckedValue="light"
-          onCheck={(value) => setIsDarkMode(value === "dark")}
-          size="md"
-        />
-      </Row>
-
-      {/* Custom values */}
-      <Row>
-        <Switch
-          name="theme"
-          label="Theme preference"
-          value="dark_theme"
-          unCheckedValue="light_theme"
-          onCheck={(value) => console.log("Theme:", value)}
-        />
-        <Switch
-          name="subscription"
-          label="Newsletter subscription"
-          value="subscribed"
-          unCheckedValue="unsubscribed"
-          defaultChecked
-          size="sm"
-        />
-      </Row>
-
-      {/* Real-world examples */}
-      <Row>
-        <Switch
-          name="autoSave"
-          label="Auto-save every 5 minutes"
-          checked={isAutoSave}
-          onCheck={(value) => {
-            setIsAutoSave(!!value);
-            console.log("Auto-save:", value ? "enabled" : "disabled");
-          }}
-          value="enabled"
-          unCheckedValue="disabled"
-        />
-        <Switch
-          name="premium"
-          label="Premium features"
-          checked={isPremiumEnabled}
-          onCheck={(value) => setIsPremiumEnabled(!!value)}
-          className="premium-switch"
-          size="lg"
-        />
-      </Row>
-
-      {/* Advanced usage */}
-      <Row>
-        <Switch
-          name="highContrast"
-          label="High contrast mode"
-          size="lg"
-          value="high_contrast"
-          unCheckedValue="normal"
-          onCheck={(value) => console.log("Accessibility:", value)}
-        />
-        <Switch
-          name="maintenance"
-          label="Maintenance mode"
-          value="maintenance_on"
-          unCheckedValue="maintenance_off"
-          disabled={!isPremiumEnabled}
-          onCheck={(value) => console.log("Maintenance:", value)}
-        />
-      </Row>
-
-      {/* Without labels for inline usage */}
-      <Row>
-        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-          <span>Sound effects:</span>
-          <Switch
-            name="soundEffects"
-            value="on"
-            unCheckedValue="off"
-            size="sm"
-            onCheck={(value) => console.log("Sound:", value)}
-          />
-        </div>
-
-        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-          <span>Background music:</span>
-          <Switch
-            name="backgroundMusic"
-            value="enabled"
-            unCheckedValue="disabled"
-            defaultChecked
-            size="md"
-            onCheck={(value) => console.log("Music:", value)}
-          />
-        </div>
-      </Row>
-
-      {/* State demonstration */}
-      <Row>
-        <div
-          style={{
-            padding: "16px",
-            border: "1px solid #e2e8f0",
-            borderRadius: "8px",
-          }}
-        >
-          <h4 style={{ margin: "0 0 12px 0" }}>Settings Panel</h4>
-          <div
-            style={{ display: "flex", flexDirection: "column", gap: "12px" }}
-          >
-            <Switch
-              name="privacy1"
-              label="Public profile"
-              size="sm"
-              value="public"
-              unCheckedValue="private"
-              onCheck={(value) => console.log("Profile visibility:", value)}
-            />
-            <Switch
-              name="privacy2"
-              label="Show online status"
-              size="sm"
-              defaultChecked
-              onCheck={(value) => console.log("Online status:", value)}
-            />
-            <Switch
-              name="privacy3"
-              label="Allow direct messages"
-              size="sm"
-              value="allowed"
-              unCheckedValue="blocked"
-              onCheck={(value) => console.log("Direct messages:", value)}
-            />
-          </div>
-        </div>
-      </Row>
-    </Box>
-  );
-}
-
-export { SwitchExamples };

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

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

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

@@ -1,188 +0,0 @@
-import { Textarea } from "@components";
-import { useState } from "react";
-
-import { Box } from "../ui/box";
-
-function TextareaExamples() {
-  const [message, setMessage] = useState("");
-  const [bio, setBio] = useState("");
-  const [feedback, setFeedback] = useState("");
-  const [notes, setNotes] = useState("Some initial notes...");
-
-  const termsContent = `Terms and Conditions
-
-1. Acceptance of Terms
-By accessing and using this service, you accept and agree to be bound by the terms and provision of this agreement.
-
-2. Use License
-Permission is granted to temporarily download one copy of the materials for personal, non-commercial transitory viewing only.
-
-3. Disclaimer
-The materials on this website are provided on an 'as is' basis. We make no warranties, expressed or implied.`;
-
-  return (
-    <Box title="Textarea">
-      <Textarea
-        name="basic1"
-        placeholder="Enter your description..."
-        rows={3}
-      />
-
-      <Textarea
-        name="basic2"
-        label="Comments"
-        placeholder="Share your thoughts..."
-        rows={3}
-      />
-
-      <Textarea
-        name="size_md"
-        label="Medium Size (default)"
-        size="md"
-        variant="solid"
-        placeholder="Medium textarea with solid variant"
-        rows={3}
-      />
-
-      <Textarea
-        name="size_lg"
-        label="Large Size"
-        size="lg"
-        variant="outline"
-        placeholder="Large textarea with outline variant"
-        rows={3}
-      />
-
-      <Textarea
-        name="bio_required"
-        label="Biography"
-        showAsterisk
-        placeholder="Tell us about yourself (required)"
-        rows={4}
-      />
-
-      <Textarea
-        name="feedback_error"
-        label="Feedback"
-        errorMessage="Please provide your feedback"
-        placeholder="Your feedback is important to us"
-        rows={4}
-      />
-
-      <Textarea
-        name="controlled_message"
-        label="Message"
-        value={message}
-        onChange={(e) => setMessage(e.target.value)}
-        placeholder="Type your message here..."
-        rows={4}
-        showAsterisk
-      />
-
-      <Textarea
-        name="controlled_bio"
-        label="Professional Bio"
-        value={bio}
-        onChange={(e) => setBio(e.target.value)}
-        placeholder="Describe your professional background..."
-        maxLength={500}
-        rows={4}
-      />
-
-      <Textarea
-        name="limited_feedback"
-        label="Product Review"
-        value={feedback}
-        onChange={(e) => setFeedback(e.target.value)}
-        placeholder="Share your experience (max 300 characters)"
-        maxLength={300}
-        rows={5}
-        className="review-textarea"
-      />
-
-      <div style={{ position: "relative" }}>
-        <Textarea
-          name="notes_with_counter"
-          label="Notes"
-          value={notes}
-          onChange={(e) => setNotes(e.target.value)}
-          placeholder="Enter your notes..."
-          rows={5}
-          style={{ resize: "vertical" }}
-        />
-        <div
-          style={{
-            position: "absolute",
-            bottom: "8px",
-            right: "12px",
-            fontSize: "12px",
-            color: "#666",
-            background: "white",
-            padding: "2px 4px",
-          }}
-        >
-          {notes.length} characters
-        </div>
-      </div>
-
-      <Textarea
-        name="terms_readonly"
-        label="Terms and Conditions"
-        value={termsContent}
-        readOnly
-        rows={8}
-        variant="outline"
-        style={{ fontSize: "14px" }}
-      />
-
-      <Textarea
-        name="disabled_field"
-        label="Disabled Field"
-        value="This field cannot be edited"
-        disabled
-        placeholder="This field is disabled"
-        rows={3}
-      />
-
-      <Textarea
-        name="code_snippet"
-        label="Code Snippet"
-        placeholder="Paste your code here..."
-        rows={6}
-        style={{
-          fontFamily: "monospace",
-          fontSize: "14px",
-          resize: "both",
-        }}
-        variant="outline"
-      />
-
-      <Textarea
-        name="essay"
-        label="Essay Response"
-        placeholder="Write your essay response here..."
-        rows={6}
-        showAsterisk
-        onChange={(e) => console.log("Essay length:", e.target.value.length)}
-      />
-
-      <Textarea
-        name="article_content"
-        label="Article Content"
-        placeholder="Write your article content here..."
-        rows={8}
-        cols={60}
-        style={{ width: "100%", resize: "vertical" }}
-        onChange={(e) =>
-          console.log(
-            "Article updated:",
-            e.target.value.split("\n").length,
-            "lines"
-          )
-        }
-      />
-    </Box>
-  );
-}
-
-export { TextareaExamples };

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

@@ -1,45 +0,0 @@
-import { Badge, Tooltip } from "@components";
-import { Box } from "../ui/box";
-import { Row } from "../ui/row";
-
-function TooltipExamples() {
-  return (
-    <Box title="Tooltip">
-      <Row>
-        <Tooltip text="Tooltip on top" orientation="top">
-          <Badge>top</Badge>
-        </Tooltip>
-
-        <Tooltip text="Tooltip on right" orientation="right">
-          <Badge>right</Badge>
-        </Tooltip>
-
-        <Tooltip text="Tooltip on bottom" orientation="bottom">
-          <Badge>bottom</Badge>
-        </Tooltip>
-
-        <Tooltip text="Tooltip on left" orientation="left">
-          <Badge>left</Badge>
-        </Tooltip>
-      </Row>
-
-      <Row>
-        <Tooltip text="Tooltip on left" orientation="left">
-          <Badge>oh no... the tooltip does not fit on the left</Badge>
-        </Tooltip>
-      </Row>
-
-      <Row>
-        <Tooltip text="md tooltip" orientation="top" size="md">
-          <Badge>size - md </Badge>
-        </Tooltip>
-
-        <Tooltip text="lg tooltip" orientation="top">
-          <Badge>size - lg (default)</Badge>
-        </Tooltip>
-      </Row>
-    </Box>
-  );
-}
-
-export { TooltipExamples };

package/documentation/src/main.tsx

@@ -1,12 +0,0 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { App } from "./app";
-
-import "../css/reset.css";
-import "../css/variables.css";
-
-createRoot(document.getElementById("root")).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-);

package/documentation/src/ui/box.tsx

@@ -1,17 +0,0 @@
-import { ReactNode } from "react";
-
-type BoxProps = {
-  title: string;
-  children: ReactNode;
-};
-
-function Box(props: BoxProps) {
-  return (
-    <div className="box">
-      <strong>{props.title}</strong>
-      {props.children}
-    </div>
-  );
-}
-
-export { Box };

package/documentation/src/ui/row.tsx

@@ -1,11 +0,0 @@
-import { ReactNode } from "react";
-
-type RowProps = {
-  children: ReactNode;
-};
-
-function Row(props: RowProps) {
-  return <div className="row">{props.children}</div>;
-}
-
-export { Row };

package/documentation/vite.config.ts

@@ -1,13 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import { resolve } from "path";
-
-export default defineConfig({
-  root: __dirname,
-  plugins: [react()],
-  resolve: {
-    alias: {
-      "@components": resolve(__dirname, "../src"),
-    },
-  },
-});