@arkyn/components 3.0.1-beta.17 → 3.0.1-beta.172

package/src/components/button/styles.css

@@ -1,208 +0,0 @@
-/* base css */
-.arkynButton {
-  background: transparent;
-  border: 1px solid transparent;
-  outline: 1px solid transparent;
-  position: relative;
-  transition: 0.15s all ease-out;
-}
-
-.arkynButton:hover {
-  cursor: pointer;
-  filter: brightness(0.9);
-}
-
-html.dark .arkynButton:hover {
-  cursor: pointer;
-  filter: brightness(1.2);
-}
-
-.arkynButton:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.arkynButton .arkynButtonContent {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-}
-
-/* variants */
-.arkynButton.solid {
-  color: #fff;
-}
-.arkynButton.solid.primary {
-  background-color: rgba(var(--spotlight-primary), 1);
-}
-.arkynButton.solid.danger {
-  background-color: rgba(var(--spotlight-danger), 1);
-}
-.arkynButton.solid.success {
-  background-color: rgba(var(--spotlight-success), 1);
-}
-.arkynButton.solid.warning {
-  background-color: rgba(var(--spotlight-warning), 1);
-}
-.arkynButton.solid.info {
-  background-color: rgba(var(--spotlight-info), 1);
-}
-
-.arkynButton.outline {
-  background-color: var(--card-foreground-primary);
-  border-color: var(--border);
-}
-.arkynButton.outline.primary {
-  color: rgba(var(--spotlight-primary), 1);
-}
-.arkynButton.outline.danger {
-  color: rgba(var(--spotlight-danger), 1);
-}
-.arkynButton.outline.success {
-  color: rgba(var(--spotlight-success), 1);
-}
-.arkynButton.outline.warning {
-  color: rgba(var(--spotlight-warning), 1);
-}
-.arkynButton.outline.info {
-  color: rgba(var(--spotlight-info), 1);
-}
-
-.arkynButton.ghost:hover {
-  filter: brightness(0.8);
-}
-.arkynButton.ghost.primary {
-  color: rgba(var(--spotlight-primary), 1);
-  background-color: rgba(var(--spotlight-primary), 0.2);
-}
-.arkynButton.ghost.danger {
-  color: rgba(var(--spotlight-danger), 1);
-  background-color: rgba(var(--spotlight-danger), 0.2);
-}
-.arkynButton.ghost.success {
-  color: rgba(var(--spotlight-success), 1);
-  background-color: rgba(var(--spotlight-success), 0.2);
-}
-.arkynButton.ghost.warning {
-  color: rgba(var(--spotlight-warning), 1);
-  background-color: rgba(var(--spotlight-warning), 0.2);
-}
-.arkynButton.ghost.info {
-  color: rgba(var(--spotlight-info), 1);
-  background-color: rgba(var(--spotlight-info), 0.2);
-}
-
-.arkynButton.invisible.primary {
-  color: rgba(var(--spotlight-primary), 1);
-}
-.arkynButton.invisible.danger {
-  color: rgba(var(--spotlight-danger), 1);
-}
-.arkynButton.invisible.success {
-  color: rgba(var(--spotlight-success), 1);
-}
-.arkynButton.invisible.warning {
-  color: rgba(var(--spotlight-warning), 1);
-}
-.arkynButton.invisible.info {
-  color: rgba(var(--spotlight-info), 1);
-}
-
-/* sizes */
-.arkynButton.lg {
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 14px;
-  border-radius: 6px;
-  padding: 0px 20px;
-  height: 44px;
-}
-.arkynButton.lg .arkynButtonContent,
-.arkynButton.lg .arkynButtonSpinner {
-  gap: 16px;
-}
-
-.arkynButton.md {
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 14px;
-  border-radius: 6px;
-  gap: 16px;
-  padding: 0px 16px;
-  height: 40px;
-}
-.arkynButton.md .arkynButtonContent,
-.arkynButton.md .arkynButtonSpinner {
-  gap: 14px;
-}
-
-.arkynButton.sm {
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 12px;
-  border-radius: 6px;
-  padding: 0px 16px;
-  height: 32px;
-}
-.arkynButton.sm .arkynButtonContent,
-.arkynButton.sm .arkynButtonSpinner {
-  gap: 12px;
-}
-
-.arkynButton.xs {
-  font-weight: 600;
-  font-size: 10px;
-  line-height: 10px;
-  border-radius: 4px;
-  padding: 0px 16px;
-  height: 24px;
-}
-.arkynButton.xs .arkynButtonContent,
-.arkynButton.xs .arkynButtonSpinner {
-  gap: 8px;
-}
-
-/* loader spin */
-.arkynButton .arkynButtonSpinner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  white-space: nowrap;
-  opacity: 0;
-}
-
-.arkynButton .arkynButtonSpinner > svg {
-  animation: spin 2s linear infinite;
-}
-
-.arkynButton.loadingTextFalse .arkynButtonSpinner {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.arkynButton.loadingTextTrue .arkynButtonSpinner {
-  max-height: 0px;
-}
-
-.arkynButton.loadingTrue .arkynButtonContent {
-  opacity: 0;
-  max-height: 0px;
-}
-
-.arkynButton.loadingTrue .arkynButtonSpinner {
-  opacity: 1;
-  max-height: unset;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

package/src/components/cardTab/cardTabButton/index.tsx

@@ -1,114 +0,0 @@
-import { ButtonHTMLAttributes, MouseEvent, ReactNode } from "react";
-
-import { useCardTab } from "../cardTabContext";
-import "./styles.css";
-
-type CardTabButtonProps = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  "children" | "value" | "type"
-> & {
-  children: ReactNode;
-  value: string;
-};
-
-/**
- * CardTabButton component - used as interactive buttons within a CardTabContainer for tab navigation
- *
- * @param props - CardTabButton component properties
- * @param props.children - Content to display inside the tab button (required)
- * @param props.value - Unique identifier for the tab button (required)
- * @param props.disabled - Whether the button is disabled. Can be overridden by CardTabContainer's disabled state
- *
- * **...Other valid HTML button properties except children, value, and type**
- *
- * @returns CardTabButton JSX element
- *
- * @example
- * ```tsx
- * // Basic tab buttons within CardTabContainer
- * <CardTabContainer>
- *   <CardTabButton value="home">Home</CardTabButton>
- *   <CardTabButton value="about">About</CardTabButton>
- *   <CardTabButton value="contact">Contact</CardTabButton>
- * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab button with click handler
- * <CardTabContainer onChange={(value) => console.log('Tab changed:', value)}>
- *   <CardTabButton
- *     value="profile"
- *     onClick={() => console.log('Profile tab clicked')}
- *   >
- *     Profile
- *   </CardTabButton>
- *   <CardTabButton value="settings">Settings</CardTabButton>
- * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled tab button
- * <CardTabContainer>
- *   <CardTabButton value="available">Available</CardTabButton>
- *   <CardTabButton value="coming-soon" disabled>
- *     Coming Soon
- *   </CardTabButton>
- * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab buttons with custom styling and default value
- * <CardTabContainer defaultValue="dashboard">
- *   <CardTabButton
- *     value="dashboard"
- *     className="custom-tab"
- *     aria-label="Dashboard tab"
- *   >
- *     Dashboard
- *   </CardTabButton>
- *   <CardTabButton value="analytics">Analytics</CardTabButton>
- *   <CardTabButton value="reports">Reports</CardTabButton>
- * </CardTabContainer>
- * ```
- */
-
-function CardTabButton(props: CardTabButtonProps) {
-  const {
-    children,
-    disabled: rawDisabled = false,
-    className: baseClassName = "",
-    onClick,
-    value,
-    ...rest
-  } = props;
-
-  const { disabled, currentTab, changeCurrentTab } = useCardTab();
-
-  const isDisabled = disabled || rawDisabled;
-
-  const disabledClass = isDisabled ? "isDisabled" : "";
-  const activeClass = currentTab === value && value ? "isActive" : "";
-  const className = `arkynCardTabButton ${disabledClass} ${activeClass} ${baseClassName}`;
-
-  function handleClick(event: MouseEvent<HTMLButtonElement>) {
-    changeCurrentTab(value);
-    onClick && onClick(event);
-  }
-
-  return (
-    <button
-      onClick={handleClick}
-      className={className.trim()}
-      {...rest}
-      disabled={isDisabled}
-      type="button"
-    >
-      {children}
-    </button>
-  );
-}
-
-export { CardTabButton };

package/src/components/cardTab/cardTabButton/styles.css

@@ -1,30 +0,0 @@
-.arkynCardTabButton {
-  padding: 8px 16px;
-  font-size: 14px;
-
-  font-weight: 600;
-  letter-spacing: 0%;
-  border: none;
-  color: var(--text-muted);
-  background-color: var(--background);
-  cursor: pointer;
-}
-
-.arkynCardTabButton.isDisabled {
-  cursor: not-allowed;
-  opacity: 0.2;
-}
-
-.arkynCardTabButton:hover:not(:disabled) {
-  background-color: var(--background-foreground);
-  color: rgb(var(--spotlight-primary));
-}
-
-.arkynCardTabButton:not(:last-child) {
-  border-right: 2px solid var(--border);
-}
-
-.arkynCardTabButton.isActive {
-  background-color: var(--background-foreground);
-  color: rgb(var(--spotlight-primary));
-}

package/src/components/cardTab/cardTabContainer/index.tsx

@@ -1,121 +0,0 @@
-import { HTMLAttributes, ReactNode, useState } from "react";
-
-import { TabProvider } from "../cardTabContext";
-import "./styles.css";
-
-type CardTabContainerProps = Omit<
-  HTMLAttributes<HTMLElement>,
-  "onClick" | "children" | "ref"
-> & {
-  children: ReactNode;
-  disabled?: boolean;
-  defaultValue?: string;
-  onChange?: (index: string) => void;
-};
-
-/**
- * CardTabContainer component - used as a wrapper for CardTabButton components to create tabbed navigation
- *
- * @param props - CardTabContainer component properties
- * @param props.children - CardTabButton components and other content (required)
- * @param props.disabled - Whether all tab buttons are disabled. Default: false
- * @param props.defaultValue - Initial tab value to be selected
- * @param props.onChange - Callback function called when tab changes, receives the tab value
- *
- * **...Other valid HTML nav properties except onClick, children, and ref**
- *
- * @returns CardTabContainer JSX element
- *
- * @example
- * ```tsx
- * // Basic tab container
- * <CardTabContainer>
- *   <CardTabButton value="home">Home</CardTabButton>
- *   <CardTabButton value="about">About</CardTabButton>
- *   <CardTabButton value="contact">Contact</CardTabButton>
- * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab container with default value and change handler
- * <CardTabContainer
- *   defaultValue="dashboard"
- *   onChange={(value) => console.log('Active tab:', value)}
- * >
- *   <CardTabButton value="dashboard">Dashboard</CardTabButton>
- *   <CardTabButton value="analytics">Analytics</CardTabButton>
- *   <CardTabButton value="settings">Settings</CardTabButton>
- * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Disabled all tabs
- * <CardTabContainer disabled>
- *   <CardTabButton value="tab1">Tab 1</CardTabButton>
- *   <CardTabButton value="tab2">Tab 2</CardTabButton>
- * </CardTabContainer>
- * ```
- *
- * @example
- * ```tsx
- * // Tab container with custom styling and state management
- * function MyTabs() {
- *   const [activeTab, setActiveTab] = useState('profile');
- *
- *   return (
- *     <div>
- *       <CardTabContainer
- *         defaultValue={activeTab}
- *         onChange={setActiveTab}
- *         className="custom-tabs"
- *         role="tablist"
- *       >
- *         <CardTabButton value="profile">Profile</CardTabButton>
- *         <CardTabButton value="account">Account</CardTabButton>
- *         <CardTabButton value="notifications">Notifications</CardTabButton>
- *       </CardTabContainer>
- *
- *       {activeTab === 'profile' && <ProfileContent />}
- *       {activeTab === 'account' && <AccountContent />}
- *       {activeTab === 'notifications' && <NotificationsContent />}
- *     </div>
- *   );
- * }
- * ```
- */
-
-function CardTabContainer(props: CardTabContainerProps) {
-  const {
-    children,
-    onChange,
-    defaultValue,
-    disabled = false,
-    className: baseClassName,
-    ...rest
-  } = props;
-
-  const [currentTab, setCurrentTab] = useState(defaultValue || "");
-
-  const className = `arkynCardTabContainer ${baseClassName || ""}`;
-
-  function changeCurrentTab(value: string) {
-    setCurrentTab(value);
-    if (onChange) onChange(value);
-  }
-
-  return (
-    <TabProvider
-      disabled={disabled}
-      currentTab={currentTab}
-      changeCurrentTab={changeCurrentTab}
-    >
-      <nav className={className.trim()} {...rest}>
-        {children}
-      </nav>
-    </TabProvider>
-  );
-}
-
-export { CardTabContainer };

package/src/components/cardTab/cardTabContainer/styles.css

@@ -1,9 +0,0 @@
-.arkynCardTabContainer {
-  display: flex;
-  align-items: center;
-
-  border: 2px solid var(--border);
-  border-radius: 8px;
-  width: max-content;
-  overflow: hidden;
-}

package/src/components/cardTab/cardTabContext.tsx

@@ -1,30 +0,0 @@
-import { createContext, ReactNode, useContext } from "react";
-
-type CardTabContextProps = {
-  disabled: boolean;
-  currentTab: string;
-  changeCurrentTab: (tab: string) => void;
-};
-
-type TabProviderProps = {
-  children: ReactNode;
-  disabled: boolean;
-  currentTab: string;
-  changeCurrentTab: (tab: string) => void;
-};
-
-const CardTabContext = createContext({} as CardTabContextProps);
-
-function useCardTab() {
-  return useContext(CardTabContext);
-}
-
-function TabProvider(props: TabProviderProps) {
-  return (
-    <CardTabContext.Provider value={props}>
-      {props.children}
-    </CardTabContext.Provider>
-  );
-}
-
-export { TabProvider, useCardTab };

package/src/components/checkbox/index.tsx

@@ -1,158 +0,0 @@
-import { Check } from "lucide-react";
-import { ButtonHTMLAttributes, useId, useRef, useState } from "react";
-
-import { useForm } from "../../hooks/useForm";
-import { FieldWrapper } from "../fieldWrapper";
-
-import { FieldError } from "../fieldError";
-import { FieldLabel } from "../fieldLabel";
-import "./styles.css";
-
-type CheckboxProps = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  | "size"
-  | "prefix"
-  | "type"
-  | "name"
-  | "defaultValue"
-  | "value"
-  | "onChange"
-  | "onSelect"
-  | "onClick"
-> & {
-  label?: string;
-  errorMessage?: boolean;
-
-  size?: "md" | "lg" | "sm";
-
-  name: string;
-  value?: string;
-
-  checked?: boolean;
-  defaultChecked?: boolean;
-  onCheck?: (value: string) => void;
-};
-
-/**
- * Checkbox component - used for creating interactive checkbox inputs with customizable styling and validation
- *
- * @param props - Checkbox component properties
- * @param props.name - Required field name for form handling and hidden input identification
- * @param props.label - Optional label text to display next to the checkbox
- * @param props.errorMessage - Error state indicator to display validation errors
- * @param props.size - Size variant of the checkbox. Default: "md"
- * @param props.value - Optional value to be used when checkbox is checked. Default: "checked"
- * @param props.checked - Controlled checked state of the checkbox
- * @param props.defaultChecked - Default checked state for uncontrolled usage. Default: false
- * @param props.onCheck - Callback function called when checkbox state changes, receives the value or empty string
- *
- * **...Other valid HTML properties for button element (except type, name, defaultValue, value, onChange, onSelect, onClick)**
- *
- * @returns Checkbox JSX element wrapped in FieldWrapper with optional label and error
- *
- * @example
- * ```tsx
- * // Basic checkbox
- * <Checkbox name="terms" label="I agree to the terms and conditions" />
- *
- * // Checkbox with custom value and validation
- * <Checkbox
- *   name="newsletter"
- *   label="Subscribe to newsletter"
- *   value="subscribed"
- *   errorMessage={errors.newsletter}
- * />
- *
- * // Large checkbox with controlled state
- * <Checkbox
- *   name="premium"
- *   label="Enable premium features"
- *   size="lg"
- *   checked={isPremium}
- *   onCheck={(value) => setIsPremium(!!value)}
- * />
- *
- * // Small checkbox with default checked state
- * <Checkbox
- *   name="remember"
- *   label="Remember me"
- *   size="sm"
- *   defaultChecked={true}
- *   value="remember_user"
- * />
- *
- * // Checkbox with custom styling and callback
- * <Checkbox
- *   name="notifications"
- *   label="Enable notifications"
- *   className="custom-checkbox"
- *   onCheck={(value) => console.log('Notification setting:', value)}
- *   disabled={isLoading}
- * />
- * ```
- */
-
-function Checkbox(props: CheckboxProps) {
-  const {
-    id,
-    name,
-    className: baseClassName = "",
-    size = "md",
-    errorMessage: baseErrorMessage,
-    defaultChecked = false,
-    label,
-    checked: baseChecked = null,
-    onCheck,
-    value,
-    ...rest
-  } = props;
-
-  const { fieldErrors } = useForm();
-
-  const checkboxRef = useRef<HTMLInputElement>(null);
-  const checkboxId = id || useId();
-
-  const errorMessage = baseErrorMessage || fieldErrors?.[name];
-  const isError = !!errorMessage;
-
-  const [isChecked, setIsChecked] = useState(defaultChecked || false);
-
-  const currentChecked =
-    typeof baseChecked === "boolean" ? baseChecked : isChecked;
-
-  const errorClass = isError ? "errorTrue" : "errorFalse";
-  const currentCheckedClass = currentChecked ? "checkedTrue" : "checkedFalse";
-
-  const className = `arkynCheckbox ${size} ${errorClass} ${currentCheckedClass} ${baseClassName}`;
-
-  function handleCheck() {
-    const defaultChecked = isChecked;
-    setIsChecked(!defaultChecked);
-    onCheck && onCheck(!defaultChecked ? value || "checked" : "");
-  }
-
-  return (
-    <FieldWrapper>
-      {label && <FieldLabel>{label}</FieldLabel>}
-      <button
-        id={checkboxId}
-        type="button"
-        className={className}
-        onClick={handleCheck}
-        {...rest}
-      >
-        <input
-          type="hidden"
-          name={name}
-          ref={checkboxRef}
-          value={currentChecked ? value || "checked" : ""}
-        />
-
-        <Check />
-      </button>
-      {errorMessage && <FieldError>{errorMessage}</FieldError>}
-    </FieldWrapper>
-  );
-}
-
-export { Checkbox };