@arkyn/components 3.0.1-beta.12 → 3.0.1-beta.13

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

@@ -0,0 +1,149 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,180 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,188 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,13 @@
+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"),
+    },
+  },
+});