@app-studio/components 0.10.17

package/docs/components/TextArea.mdx

@@ -0,0 +1,136 @@
+# TextArea
+
+A text input field for multi-line text editing with customizable features.
+
+### **Import**
+  ```tsx
+  import { TextArea } from '@app-studio/components';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+
+import { TextArea } from '@app-studio/components';
+
+export const DefaultArea = () => (
+  <TextArea name="comments" placeholder="Enter your thoughts" />
+);
+
+```
+
+### **colorScheme**
+Optional color scheme for the component.
+
+```tsx
+import React from 'react';
+import { Vertical } from '@app-studio/components';
+
+import { TextArea } from '@app-studio/components';
+
+export const ColorArea = () => {
+  return (
+    <Vertical gap={10}>
+      <TextArea name="surname" label="Surname" colorScheme="theme-secondary" />
+      <TextArea
+        name="name"
+        label="Name"
+        colorScheme="theme-primary"
+        variant="outline"
+      />
+    </Vertical>
+  );
+};
+
+```
+
+### **helperText**
+Helper text that appears below the text area.
+
+```tsx
+import { useState } from 'react';
+import React from 'react';
+
+import { Button } from '@app-studio/components';
+import { TextArea } from '@app-studio/components';
+
+import { Vertical } from '@app-studio/components';
+
+export const HelperTextArea = () => {
+  const initialValues = {
+    guess: '',
+  };
+  const [formValues, setFormValues] = useState(initialValues);
+  const [formErrors, setFormErrors] = useState(initialValues);
+
+  const validate = (values: any) => {
+    const errors: any = {};
+    if (!values.guess) {
+      errors.guess = 'Required';
+    }
+
+    setFormErrors(errors);
+  };
+
+  const handleChange = (event: any) => {
+    setFormValues({ ...formValues, [event.target.name]: event.target.value });
+  };
+
+  const handleSubmit = (event: any) => {
+    event.preventDefault();
+    validate(formValues);
+    if (Object.values(formErrors).length === 0) {
+      alert(formValues.guess);
+    }
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <Vertical gap={10}>
+        <TextArea
+          name="guess"
+          placeholder="Write here..."
+          helperText={formErrors.guess}
+          error={!!formErrors.guess}
+          onChange={handleChange}
+        />
+        <Button type="submit" height="40px" isAuto>
+          Submit
+        </Button>
+      </Vertical>
+    </form>
+  );
+};
+
+```
+
+### **placeholder**
+Placeholder text for the text area when it is empty.
+
+```tsx
+import React from 'react';
+import { Button } from '@app-studio/components';
+
+import { Horizontal } from '@app-studio/components';
+
+import { TextArea } from '@app-studio/components';
+
+export const PlaceholderArea = () => {
+  const handleSubmit = (event: any) => {
+    event.preventDefault();
+    const formData = new FormData(event.target);
+    alert(formData.get('comment'));
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <Horizontal gap={10} alignItems="center" flexWrap="nowrap">
+        <TextArea name="comment" placeholder="Type your comment here..." />
+        <Button type="submit" height="40px" isAuto>
+          Submit
+        </Button>
+      </Horizontal>
+    </form>
+  );
+};
+
+```
+

package/docs/components/TextField.mdx

@@ -0,0 +1,225 @@
+# TextField
+
+A customizable text input field with optional helpers, labels, and icons.
+
+### **Import**
+  ```tsx
+  import { TextField } from '@app-studio/components';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Button } from '@app-studio/components';
+
+import { Horizontal } from '@app-studio/components';
+
+import { TextField } from '@app-studio/components';
+
+export const DefaultInput = () => {
+  const handleSubmit = (event: any) => {
+    event.preventDefault();
+    const formData = new FormData(event.target);
+    alert(`Hello, ${formData.get('surname')}`);
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <Horizontal gap={10} alignItems="center" flexWrap="nowrap">
+        <TextField name="surname" />
+        <Button type="submit" height="40px" isAuto>
+          Submit
+        </Button>
+      </Horizontal>
+    </form>
+  );
+};
+
+```
+
+### **helperText**
+Optional helper text that appears below the TextField.
+
+```tsx
+import { useState } from 'react';
+import React from 'react';
+import { Button } from '@app-studio/components';
+
+import { TextField } from '@app-studio/components';
+
+import { Vertical } from '@app-studio/components';
+
+export const HelperTextInput = () => {
+  const initialValues = {
+    firstName: '',
+    lastName: '',
+  };
+  const [formValues, setFormValues] = useState(initialValues);
+  const [formErrors, setFormErrors] = useState(initialValues);
+
+  const validate = (values: any) => {
+    const errors: any = {};
+    if (!values.firstName) {
+      errors.firstName = 'Required';
+    }
+    if (!values.lastName) {
+      errors.lastName = 'Required';
+    }
+    setFormErrors(errors);
+  };
+
+  const handleChange = (event: any) => {
+    setFormValues({ ...formValues, [event.target.name]: event.target.value });
+  };
+
+  const handleSubmit = (event: any) => {
+    event.preventDefault();
+    validate(formValues);
+    if (Object.values(formErrors).length === 0) {
+      alert(`Hello, ${formValues.firstName} ${formValues.lastName} `);
+    }
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <Vertical gap={10} alignItems="center" flexWrap="nowrap">
+        <TextField
+          name="firstName"
+          placeholder="First Name"
+          helperText={formErrors.firstName}
+          error={!!formErrors.firstName}
+          onChange={handleChange}
+        />
+        <TextField
+          name="lastName"
+          placeholder="Last Name"
+          helperText={formErrors.lastName}
+          error={!!formErrors.lastName}
+          onChange={handleChange}
+        />
+        <Button type="submit" height="40px" isAuto>
+          Submit
+        </Button>
+      </Vertical>
+    </form>
+  );
+};
+
+```
+
+### **colorScheme**
+Optional property to specify the color scheme of the TextField.
+
+```tsx
+import React from 'react';
+import { Vertical } from '@app-studio/components';
+
+import { TextField } from '@app-studio/components';
+
+export const ColorSchemeDemo = () => {
+  return (
+    <Vertical gap={10} width="300px">
+      <TextField name="surname" label="Surname" colorScheme="theme-secondary" />
+      <TextField
+        name="name"
+        label="Name"
+        colorScheme="theme-primary"
+        variant="outline"
+      />
+    </Vertical>
+  );
+};
+
+```
+
+### **left**
+Optional React node to be rendered on the left side of the TextField.
+
+```tsx
+import React from 'react';
+import { ProfileIcon } from '@app-studio/components';
+
+import { TextField } from '@app-studio/components';
+
+export const LeftInput = () => {
+  return (
+    <TextField
+      name="name"
+      placeholder="Name"
+      left={<ProfileIcon color="black" size={16} />}
+    />
+  );
+};
+
+```
+
+### **right**
+Optional React node to be rendered on the right side of the TextField.
+
+```tsx
+import React from 'react';
+import { EditIcon } from '@app-studio/components';
+
+import { TextField } from '@app-studio/components';
+
+export const RightInput = () => {
+  return (
+    <TextField
+      name="name"
+      placeholder="Name"
+      right={<EditIcon color="black" size={16} />}
+    />
+  );
+};
+
+```
+
+### **placeholder**
+Optional placeholder text shown inside the TextField when empty.
+
+```tsx
+import React from 'react';
+import { Button } from '@app-studio/components';
+
+import { Horizontal } from '@app-studio/components';
+
+import { TextField } from '@app-studio/components';
+
+export const Placeholder = () => {
+  const handleSubmit = (event: any) => {
+    event.preventDefault();
+    const formData = new FormData(event.target);
+    alert(`Hello, ${formData.get('surname')}`);
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <Horizontal gap={10} alignItems="center" flexWrap="nowrap">
+        <TextField name="surname" placeholder="Surname" />
+        <Button type="submit" height="40px" isAuto>
+          Submit
+        </Button>
+      </Horizontal>
+    </form>
+  );
+};
+
+```
+
+### **isClearable**
+Optional flag that when true allows the TextField to be cleared.
+
+```tsx
+import React from 'react';
+import { Vertical } from '@app-studio/components';
+
+import { TextField } from '@app-studio/components';
+
+export const IsClearableDemo = () => {
+  return (
+    <Vertical gap={10} width="300px">
+      <TextField value="Clear Button" size="xs" />
+      <TextField size="xs" value="No Clear Button" isClearable={false} />
+    </Vertical>
+  );
+};
+
+```
+

package/docs/components/Title.mdx

@@ -0,0 +1,183 @@
+# Title
+
+Displays customizable titles with highlighting, responsive sizing, animation effects, and multi-line support.
+
+### **Import**
+```tsx
+import { Title } from '@app-studio/components';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Vertical } from 'app-studio';
+import { Title } from '@app-studio/components';
+
+export const DefaultTitle = () => {
+  return (
+    <Vertical gap={32}>
+      <Title size="xs">Extra Small Title (xs)</Title>
+      <Title size="sm">Small Title (sm)</Title>
+      <Title size="md">Medium Title (md)</Title>
+      <Title size="lg">Large Title (lg)</Title>
+      <Title size="xl">Extra Large Title (xl)</Title>
+    </Vertical>
+  );
+};
+```
+
+### **Line Breaks**
+Use the pipe character `|` to force a line break within the title text.
+
+```tsx
+import React from 'react';
+import { Title } from '@app-studio/components';
+
+export const MultiLineTitle = () => (
+  <Title size="lg" highlightText="Breaking">
+    This title is | Breaking Lines | manually
+  </Title>
+);
+```
+
+
+
+### **highlightText & Style**
+Highlight specific words within the title text.
+
+- **highlightText:** `string | string[]` - Text to match and highlight.
+- **highlightStyle:** `HighlightStyle` - Visual style (`background`, `gradient`, `underline`, `glow`, `outline`).
+- **highlightColor:** `string` - Primary highlight color-
+- **highlightSecondaryColor:** `string` - Secondary color for gradients.
+
+```tsx
+import React from 'react';
+import { Vertical } from 'app-studio';
+import { Title } from '@app-studio/components';
+
+export const HighlightStyles = () => (
+  <Vertical gap={20}>
+    <Title highlightText="Background" highlightStyle="background">
+      Background Highlight
+    </Title>
+    <Title 
+      highlightText="Gradient" 
+      highlightStyle="gradient"
+      highlightColor="#705CFF"
+      highlightSecondaryColor="#FFC75C"
+    >
+      Gradient Highlight
+    </Title>
+    <Title highlightText="Underline" highlightStyle="underline">
+      Underline Highlight
+    </Title>
+    <Title highlightText="Glow" highlightStyle="glow" highlightColor="#10B981">
+      Glow Highlight
+    </Title>
+  </Vertical>
+);
+```
+
+### **animationLoop**
+Controls the loop behavior of title and highlight animations.
+
+- **Type:** `number | 'infinite'`
+- **Default:** `1`
+
+```tsx
+import React from 'react';
+import { Title } from '@app-studio/components';
+
+export const AnimatedLoopTitle = () => (
+  <Title
+    animate={{
+      from: { transform: 'translateY(10px)', opacity: 0 },
+      to: { transform: 'translateY(0)', opacity: 1 },
+      duration: '1s'
+    }}
+    animationLoop="infinite"
+  >
+    Infinitely Bouncing Title
+  </Title>
+);
+```
+
+### **highlightTypewriter**
+Adds a typewriter effect to the highlighted text.
+
+- **Type:** `boolean`
+- **Default:** `false`
+- **related:** `highlightTypewriterDuration` (ms)
+
+```tsx
+import React from 'react';
+import { Title } from '@app-studio/components';
+
+export const TypewriterTitle = () => (
+  <Title
+    highlightText="Typewriter output"
+    highlightTypewriter
+    highlightTypewriterDuration={2000}
+    highlightStyle="background"
+  >
+    Displaying: Typewriter output
+  </Title>
+);
+```
+
+### **highlightSlide**
+Adds a sliding entry effect to the highlighted text words.
+
+- **Type:** `boolean`
+- **Default:** `false`
+- **related:** `highlightSlideDuration`, `highlightSlideStagger`, `highlightSlideSequential`
+
+```tsx
+import React from 'react';
+import { Title } from '@app-studio/components';
+
+export const SlideTitle = () => (
+  <Title
+    highlightText={["Slide", "Effect", "Demo"]}
+    highlightSlide
+    highlightSlideSequential={true}
+    highlightStyle="underline"
+  >
+    Welcome to the Slide Effect Demo
+  </Title>
+);
+```
+
+### **responsive**
+Enables automatic responsive sizing adjustments based on screen width.
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+```tsx
+<Title size="xl" responsive>
+  Responsive Title
+</Title>
+```
+
+### **alternateHighlightText**
+Cycles through an array of strings, replacing the highlighted text.
+
+- **Type:** `string[]`
+- **related:** `alternateAnimation`, `alternateDuration`
+
+```tsx
+import React from 'react';
+import { Title } from '@app-studio/components';
+
+export const RotatingTitle = () => (
+  <Title
+    highlightText="Design"
+    alternateHighlightText={['Develop', 'Deploy', 'Scale']}
+    alternateAnimation
+    highlightStyle="gradient"
+  >
+    We help you Design better apps.
+  </Title>
+);
+```

package/docs/components/Toast.mdx

@@ -0,0 +1,88 @@
+# Toast
+
+Displays temporary, dismissible messages to inform users about actions, status, or events.
+
+### **Import**
+```tsx
+import { Toast } from '@app-studio/components';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Button } from '@app-studio/components';
+import { Horizontal } from 'app-studio';
+import { Toast } from '@app-studio/components';
+
+export const DefaultToast = () => {
+  return (
+    <Horizontal gap={10}>
+      <Button
+        onClick={() =>
+          Toast.success('Success', 'Your action was completed successfully.')
+        }
+      >
+        Show Success Toast
+      </Button>
+    </Horizontal>
+  );
+};
+```
+
+### **duration**
+The time in milliseconds before the toast automatically closes. Default is usually 5000ms.
+
+- **Type:** `number`
+
+```tsx
+import React from 'react';
+import { Button } from '@app-studio/components';
+import { Horizontal } from 'app-studio';
+import { Toast } from '@app-studio/components';
+
+export const ToastDurations = () => {
+  return (
+    <Horizontal gap={10}>
+      <Button
+        onClick={() =>
+          Toast.info(
+            'Short Duration',
+            'This toast will disappear in 2 seconds.',
+            {
+              duration: 2000,
+            }
+          )
+        }
+      >
+        2 Seconds
+      </Button>
+
+      <Button
+        onClick={() =>
+          Toast.info(
+            'Default Duration',
+            'This toast will disappear in 5 seconds.'
+          )
+        }
+      >
+        5 Seconds (Default)
+      </Button>
+
+      <Button
+        onClick={() =>
+          Toast.info(
+            'Long Duration',
+            'This toast will disappear in 10 seconds.',
+            {
+              duration: 10000,
+            }
+          )
+        }
+      >
+        10 Seconds
+      </Button>
+    </Horizontal>
+  );
+};
+```
+