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

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

@@ -1,262 +0,0 @@
-import { PhoneInput } from "@components";
-import { useState } from "react";
-
-import { Box } from "../ui/box";
-import { Row } from "../ui/row";
-
-function PhoneInputExamples() {
-  const [contactPhone, setContactPhone] = useState("");
-  const [businessPhone, setBusinessPhone] = useState("");
-  const [emergencyPhone, setEmergencyPhone] = useState("");
-
-  return (
-    <Box title="PhoneInput">
-      <Row>
-        <PhoneInput name="basic" />
-        <PhoneInput name="with-label" label="Phone Number" />
-      </Row>
-
-      <Row>
-        <PhoneInput
-          name="size-md"
-          label="Medium Size (default)"
-          size="md"
-          variant="solid"
-        />
-        <PhoneInput
-          name="size-lg"
-          label="Large Size"
-          size="lg"
-          variant="outline"
-        />
-      </Row>
-
-      <Row>
-        <PhoneInput name="us-phone" label="US Phone" defaultCountry="US" />
-        <PhoneInput name="br-phone" label="Brasil Phone" defaultCountry="BR" />
-        <PhoneInput name="uk-phone" label="UK Phone" defaultCountry="GB" />
-      </Row>
-
-      <Row>
-        <PhoneInput
-          name="us-default"
-          label="US Number with Default"
-          defaultCountry="US"
-          defaultValue="+1 (555) 123-4567"
-        />
-        <PhoneInput
-          name="br-default"
-          label="BR Number with Default"
-          defaultCountry="BR"
-          defaultValue="+55 11 99999-9999"
-        />
-      </Row>
-
-      <Row>
-        <PhoneInput
-          name="required-phone"
-          label="Contact Phone"
-          showAsterisk
-          defaultCountry="US"
-        />
-        <PhoneInput
-          name="error-phone"
-          label="Phone with Error"
-          errorMessage="Please enter a valid phone number"
-          defaultCountry="CA"
-        />
-      </Row>
-
-      <Row>
-        <PhoneInput
-          name="controlled-contact"
-          label="Contact Phone"
-          onChange={(value) => {
-            setContactPhone(value);
-            console.log("Contact phone:", value);
-          }}
-          defaultCountry="US"
-          showAsterisk
-        />
-        <PhoneInput
-          name="controlled-business"
-          label="Business Phone"
-          onChange={(value) => {
-            setBusinessPhone(value);
-            console.log("Business phone:", value);
-          }}
-          defaultCountry="BR"
-          size="lg"
-        />
-      </Row>
-
-      <Row>
-        <PhoneInput
-          name="custom-text-en"
-          label="Phone (English)"
-          searchCountryPlaceholder="Search country..."
-          notFoundCountryText="Country not found"
-          defaultCountry="GB"
-        />
-        <PhoneInput
-          name="custom-text-pt"
-          label="Telefone (Português)"
-          searchCountryPlaceholder="Pesquisar país..."
-          notFoundCountryText="Nenhum país encontrado"
-          defaultCountry="BR"
-        />
-      </Row>
-
-      <Row>
-        <PhoneInput
-          name="disabled-phone"
-          label="Disabled Phone"
-          defaultValue="+1 (555) 987-6543"
-          defaultCountry="US"
-          disabled
-        />
-        <PhoneInput
-          name="readonly-phone"
-          label="Read Only Phone"
-          defaultValue="+55 21 98765-4321"
-          defaultCountry="BR"
-          readOnly
-        />
-      </Row>
-
-      <Row>
-        <PhoneInput
-          name="loading-phone"
-          label="Loading Phone"
-          isLoading
-          defaultCountry="CA"
-        />
-        <PhoneInput
-          name="loading-large"
-          label="Loading Large"
-          isLoading
-          size="lg"
-          variant="outline"
-          defaultCountry="AU"
-        />
-      </Row>
-
-      <Row>
-        <PhoneInput
-          name="france-phone"
-          label="France Phone"
-          defaultCountry="FR"
-          variant="outline"
-        />
-        <PhoneInput
-          name="japan-phone"
-          label="Japan Phone"
-          defaultCountry="JP"
-          variant="outline"
-        />
-        <PhoneInput
-          name="germany-phone"
-          label="Germany Phone"
-          defaultCountry="DE"
-          variant="outline"
-        />
-      </Row>
-
-      <Row>
-        <div
-          style={{
-            padding: "20px",
-            border: "1px solid #e2e8f0",
-            borderRadius: "8px",
-            width: "100%",
-          }}
-        >
-          <h4 style={{ margin: "0 0 16px 0" }}>Contact Information</h4>
-          <div
-            style={{ display: "flex", flexDirection: "column", gap: "16px" }}
-          >
-            <PhoneInput
-              name="primary-phone"
-              label="Primary Phone"
-              showAsterisk
-              defaultCountry="US"
-              onChange={(value) => console.log("Primary:", value)}
-            />
-            <PhoneInput
-              name="secondary-phone"
-              label="Secondary Phone (Optional)"
-              defaultCountry="US"
-              onChange={(value) => console.log("Secondary:", value)}
-            />
-            <PhoneInput
-              name="emergency-contact"
-              label="Emergency Contact"
-              showAsterisk
-              defaultCountry="US"
-              onChange={(value) => {
-                setEmergencyPhone(value);
-                console.log("Emergency:", value);
-              }}
-              size="lg"
-            />
-          </div>
-        </div>
-      </Row>
-
-      <Row>
-        <PhoneInput
-          name="customer-service"
-          label="Customer Service"
-          defaultValue="+1 (800) 123-4567"
-          defaultCountry="US"
-          readOnly
-          variant="outline"
-        />
-        <PhoneInput
-          name="sales-team"
-          label="Sales Team"
-          defaultCountry="US"
-          searchCountryPlaceholder="Find country..."
-          className="sales-phone"
-        />
-      </Row>
-
-      <Row>
-        <PhoneInput
-          name="mobile-number"
-          label="Mobile Number"
-          defaultCountry="BR"
-          showAsterisk
-          onChange={(value) => console.log("Mobile:", value)}
-        />
-        <PhoneInput
-          name="whatsapp-number"
-          label="WhatsApp Number"
-          defaultCountry="BR"
-          variant="outline"
-          onChange={(value) => console.log("WhatsApp:", value)}
-        />
-      </Row>
-
-      <Row>
-        <PhoneInput
-          name="asia-phone"
-          label="Asia Pacific"
-          defaultCountry="SG"
-        />
-        <PhoneInput
-          name="europe-phone"
-          label="European Union"
-          defaultCountry="IT"
-        />
-        <PhoneInput
-          name="americas-phone"
-          label="Americas"
-          defaultCountry="MX"
-        />
-      </Row>
-    </Box>
-  );
-}
-
-export { PhoneInputExamples };

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