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

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"),
-    },
-  },
-});

package/src/components/alert/alertContainer/index.tsx

@@ -1,87 +0,0 @@
-import { createContext, HTMLAttributes, ReactNode, useContext } from "react";
-import { AlertTitle } from "../alertTitle";
-import "./styles.css";
-
-type AlertContainerProps = {
-  schema: "success" | "danger" | "warning" | "info";
-} & HTMLAttributes<HTMLDivElement>;
-
-const AlertContainerContext = createContext({} as AlertContainerProps);
-
-function useAlertContainer() {
-  return useContext(AlertContainerContext);
-}
-
-/**
- * AlertContainer component - used to display alert messages with different schemas
- *
- * @param props - AlertContainer component properties
- * @param props.schema - Alert color scheme and semantic meaning: "success" | "danger" | "warning" | "info"
- *
- * **...Other valid HTML properties for div**
- *
- * @returns AlertContainer JSX element with context provider
- *
- * @example
- * ```tsx
- * // Basic alert
- * <AlertContainer schema="info">
- *   Alert message content
- * </AlertContainer>
- *
- * // Success alert
- * <AlertContainer schema="success">
- *   Operation completed successfully!
- * </AlertContainer>
- *
- * // Alert with title
- * <AlertContainer schema="warning">
- *   <AlertTitle>Warning</AlertTitle>
- *   Please check your input data.
- * </AlertContainer>
- *
- * // Danger alert
- * <AlertContainer schema="danger">
- *   <AlertTitle>Error</AlertTitle>
- *   Something went wrong. Please try again.
- * </AlertContainer>
- * ```
- */
-
-function AlertContainer(props: AlertContainerProps) {
-  const { schema, children, className: baseClassName, ...rest } = props;
-
-  const hasAlertTitle = (children: ReactNode): boolean => {
-    let found = false;
-    const searchForAlertTitle = (nodes: ReactNode) => {
-      if (Array.isArray(nodes)) {
-        nodes.forEach(searchForAlertTitle);
-      } else if (nodes && typeof nodes === "object" && "type" in nodes) {
-        if (nodes.type === AlertTitle) {
-          found = true;
-        } else if (nodes.props && nodes.props.children) {
-          searchForAlertTitle(nodes.props.children);
-        }
-      }
-    };
-    searchForAlertTitle(children);
-    return found;
-  };
-
-  const shouldAlignCenter = !hasAlertTitle(children);
-  const finalClassName = shouldAlignCenter
-    ? "nonExistsAlertTitle"
-    : "existsAlertTitle";
-
-  const className = `arkynAlertContainer ${schema} ${finalClassName} ${baseClassName}`;
-
-  return (
-    <AlertContainerContext.Provider value={props}>
-      <div className={className.trim()} {...rest}>
-        {children}
-      </div>
-    </AlertContainerContext.Provider>
-  );
-}
-
-export { AlertContainer, useAlertContainer };

package/src/components/alert/alertContainer/styles.css

@@ -1,33 +0,0 @@
-.arkynAlertContainer {
-  display: flex;
-  align-items: start;
-  gap: 16px;
-  padding: 16px;
-
-  border: 1px solid transparent;
-  border-radius: 6px;
-}
-
-.arkynAlertContainer.nonExistsAlertTitle {
-  align-items: center;
-}
-
-.arkynAlertContainer.danger {
-  background: rgba(var(--spotlight-danger), 0.1);
-  border-color: rgba(var(--spotlight-danger), 0.4);
-}
-
-.arkynAlertContainer.success {
-  background: rgba(var(--spotlight-success), 0.1);
-  border-color: rgba(var(--spotlight-success), 0.4);
-}
-
-.arkynAlertContainer.info {
-  background: rgba(var(--spotlight-info), 0.1);
-  border-color: rgba(var(--spotlight-info), 0.4);
-}
-
-.arkynAlertContainer.warning {
-  background: rgba(var(--spotlight-warning), 0.1);
-  border-color: rgba(var(--spotlight-warning), 0.4);
-}

package/src/components/alert/alertContent/index.tsx

@@ -1,53 +0,0 @@
-import { HTMLAttributes } from "react";
-import "./styles.css";
-
-type AlertContentProps = HTMLAttributes<HTMLDivElement>;
-
-/**
- * AlertContent component - used to wrap and style the main content area of alerts
- *
- * @param props - AlertContent component properties
- *
- * **...Other valid HTML properties for div**
- *
- * @returns AlertContent JSX element
- *
- * @example
- * ```tsx
- * // Basic alert content
- * <AlertContainer schema="info">
- *   <AlertContent>
- *     This is the main alert message content.
- *   </AlertContent>
- * </AlertContainer>
- *
- * // Alert with title and content
- * <AlertContainer schema="success">
- *   <AlertContent>
- *     <AlertTitle>Success</AlertTitle>
- *     Your operation has been completed successfully.
- *   </AlertContent>
- * </AlertContainer>
- *
- * // Multiple content sections
- * <AlertContainer schema="warning">
- *   <AlertContent>
- *     <AlertTitle>Warning</AlertTitle>
- *     <p>Please review the following items:</p>
- *     <ul>
- *       <li>Check your input data</li>
- *       <li>Verify permissions</li>
- *     </ul>
- *   </AlertContent>
- * </AlertContainer>
- * ```
- */
-
-function AlertContent(props: AlertContentProps) {
-  const { className: baseClassName, ...rest } = props;
-  const className = `arkynAlertContent ${baseClassName}`;
-
-  return <div className={className.trim()} {...rest} />;
-}
-
-export { AlertContent };

package/src/components/alert/alertContent/styles.css

@@ -1,5 +0,0 @@
-.arkynAlertContent {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}

package/src/components/alert/alertDescription/index.tsx

@@ -1,57 +0,0 @@
-import { HTMLAttributes } from "react";
-import "./styles.css";
-
-type AlertDescriptionProps = HTMLAttributes<HTMLDivElement>;
-
-/**
- * AlertDescription component - used to display additional descriptive text in alerts
- *
- * @param props - AlertDescription component properties
- *
- * **...Other valid HTML properties for div**
- *
- * @returns AlertDescription JSX element
- *
- * @example
- * ```tsx
- * // Basic alert with description
- * <AlertContainer schema="info">
- *   <AlertContent>
- *     <AlertTitle>Information</AlertTitle>
- *     <AlertDescription>
- *       This is additional information to help you understand the context.
- *     </AlertDescription>
- *   </AlertContent>
- * </AlertContainer>
- *
- * // Success alert with description
- * <AlertContainer schema="success">
- *   <AlertContent>
- *     <AlertTitle>Upload Complete</AlertTitle>
- *     <AlertDescription>
- *       Your file has been successfully uploaded and processed.
- *     </AlertDescription>
- *   </AlertContent>
- * </AlertContainer>
- *
- * // Warning with detailed description
- * <AlertContainer schema="warning">
- *   <AlertContent>
- *     <AlertTitle>Storage Limit</AlertTitle>
- *     <AlertDescription>
- *       You have used 90% of your storage quota. Consider upgrading your plan
- *       or removing unused files.
- *     </AlertDescription>
- *   </AlertContent>
- * </AlertContainer>
- * ```
- */
-
-function AlertDescription(props: AlertDescriptionProps) {
-  const { className: baseClassName, ...rest } = props;
-  const className = `arkynAlertDescription ${baseClassName}`;
-
-  return <div className={className.trim()} {...rest} />;
-}
-
-export { AlertDescription };

package/src/components/alert/alertDescription/styles.css

@@ -1,7 +0,0 @@
-.arkynAlertDescription {
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 19.07px;
-  text-align: left;
-  color: var(--text-body);
-}

package/src/components/alert/alertIcon/index.tsx

@@ -1,79 +0,0 @@
-import {
-  AlertTriangle,
-  CheckCircle2,
-  Info,
-  LucideProps,
-  XCircle,
-} from "lucide-react";
-
-import { useAlertContainer } from "../alertContainer";
-import "./styles.css";
-
-type AlertIconProps = LucideProps;
-
-/**
- * AlertIcon component - automatically displays the appropriate icon based on the alert schema
- *
- * @param props - AlertIcon component properties
- *
- * **...Other valid Lucide icon properties**
- *
- * @returns AlertIcon JSX element with schema-specific icon
- *
- * @description
- * This component automatically selects and renders the appropriate icon based on the
- * AlertContainer's schema context:
- * - success: CheckCircle2 icon
- * - danger: XCircle icon
- * - warning: AlertTriangle icon
- * - info: Info icon
- *
- * @example
- * ```tsx
- * // Basic usage - icon automatically matches container schema
- * <AlertContainer schema="success">
- *   <AlertIcon />
- *   <AlertContent>
- *     <AlertTitle>Success</AlertTitle>
- *     <AlertDescription>Operation completed successfully.</AlertDescription>
- *   </AlertContent>
- * </AlertContainer>
- *
- * // Warning alert with icon
- * <AlertContainer schema="warning">
- *   <AlertIcon />
- *   <AlertContent>
- *     Please review your input before proceeding.
- *   </AlertContent>
- * </AlertContainer>
- *
- * // Custom icon size
- * <AlertContainer schema="danger">
- *   <AlertIcon size={24} />
- *   <AlertContent>
- *     <AlertTitle>Error</AlertTitle>
- *     <AlertDescription>Something went wrong.</AlertDescription>
- *   </AlertContent>
- * </AlertContainer>
- * ```
- */
-
-function AlertIcon(props: AlertIconProps) {
-  const { className: baseClassName, ...rest } = props;
-  const { schema } = useAlertContainer();
-
-  const className = `arkynAlertIcon ${schema} ${baseClassName}`;
-
-  switch (schema) {
-    case "success":
-      return <CheckCircle2 className={className} {...rest} />;
-    case "danger":
-      return <XCircle className={className} {...rest} />;
-    case "warning":
-      return <AlertTriangle className={className} {...rest} />;
-    case "info":
-      return <Info className={className} {...rest} />;
-  }
-}
-
-export { AlertIcon };

package/src/components/alert/alertIcon/styles.css

@@ -1,23 +0,0 @@
-.arkynAlertIcon {
-  min-width: 28px;
-  min-height: 28px;
-
-  max-width: 28px;
-  max-height: 28px;
-}
-
-.arkynAlertIcon.danger {
-  color: rgba(var(--spotlight-danger), 1);
-}
-
-.arkynAlertIcon.success {
-  color: rgba(var(--spotlight-success), 1);
-}
-
-.arkynAlertIcon.info {
-  color: rgba(var(--spotlight-info), 1);
-}
-
-.arkynAlertIcon.warning {
-  color: rgba(var(--spotlight-warning), 1);
-}

package/src/components/alert/alertTitle/index.tsx

@@ -1,54 +0,0 @@
-import { HTMLAttributes } from "react";
-import "./styles.css";
-
-type AlertTitleProps = HTMLAttributes<HTMLDivElement>;
-
-/**
- * AlertTitle component - used to display the main title/heading of alerts
- *
- * @param props - AlertTitle component properties
- *
- * **...Other valid HTML properties for div**
- *
- * @returns AlertTitle JSX element
- *
- * @description
- * This component affects the layout of the AlertContainer. When present, the container
- * content will be aligned differently compared to alerts without a title.
- *
- * @example
- * ```tsx
- * // Basic alert with title
- * <AlertContainer schema="info">
- *   <AlertTitle>Information</AlertTitle>
- *   <AlertDescription>This is important information.</AlertDescription>
- * </AlertContainer>
- *
- * // Success alert with title and icon
- * <AlertContainer schema="success">
- *   <AlertIcon />
- *   <AlertTitle>Success!</AlertTitle>
- *   <AlertDescription>Your operation was completed.</AlertDescription>
- * </AlertContainer>
- *
- * // Error alert with custom styling
- * <AlertContainer schema="danger">
- *   <AlertIcon />
- *   <AlertTitle className="custom-title">
- *     Critical Error
- *   </AlertTitle>
- *   <AlertDescription>
- *     Please contact support immediately.
- *   </AlertDescription>
- * </AlertContainer>
- * ```
- */
-
-function AlertTitle(props: AlertTitleProps) {
-  const { className: baseClassName, ...rest } = props;
-  const className = `arkynAlertTitle ${baseClassName}`;
-
-  return <div className={className.trim()} {...rest} />;
-}
-
-export { AlertTitle };