@phsa.tec/design-system-react 0.1.3 → 0.1.5

package/.github/workflows/deploy-storybook.yml

@@ -16,8 +16,28 @@ concurrency:
   cancel-in-progress: false
 
 jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "yarn"
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Run tests
+        run: yarn test
+
   build:
     runs-on: ubuntu-latest
+    needs: test
+    if: github.event_name == 'push' && github.ref == 'refs/heads/master'
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -48,6 +68,7 @@ jobs:
       url: ${{ steps.deployment.outputs.page_url }}
     runs-on: ubuntu-latest
     needs: build
+    if: github.event_name == 'push' && github.ref == 'refs/heads/master'
     steps:
       - name: Deploy to GitHub Pages
         id: deployment

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phsa.tec/design-system-react",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "private": false,
   "main": "./src/index.ts",
   "scripts": {
@@ -11,7 +11,8 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "deploy-storybook": "storybook build && touch storybook-static/.nojekyll",
-    "test": "jest"
+    "test": "jest",
+    "prepare": "husky install"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
@@ -75,6 +76,7 @@
     "eslint": "^8",
     "eslint-config-next": "15.0.3",
     "eslint-plugin-storybook": "^9.0.15",
+    "husky": "^9.1.7",
     "jest": "^30.0.4",
     "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8",
@@ -91,6 +93,33 @@
     "type": "git",
     "url": "https://github.com/henriques4nti4go/phsa-design-system"
   },
+  "keywords": [
+    "react",
+    "design-system",
+    "ui-components",
+    "typescript",
+    "tailwindcss",
+    "radix-ui",
+    "storybook",
+    "nextjs",
+    "form-components",
+    "data-table",
+    "theme-support",
+    "dark-mode",
+    "light-mode",
+    "responsive",
+    "accessible",
+    "reusable-components",
+    "react-hook-form",
+    "zod-validation",
+    "tanstack-query",
+    "zustand",
+    "lucide-react",
+    "shadcn-ui",
+    "component-library",
+    "frontend",
+    "ui-kit"
+  ],
   "homepage": "https://github.com/henriques4nti4go/phsa-design-system#readme",
   "bugs": {
     "url": "https://github.com/henriques4nti4go/phsa-design-system/issues"

package/src/components/dataInput/Input/components/Input/index.tsx

@@ -8,6 +8,8 @@ import { cn } from "@/lib/utils";
 export const Input = ({
   "data-testid": dataTestId,
   withoutForm = false,
+  extraElement,
+  containerClassName,
   ...props
 }: InputProps) => {
   const formData = useConditionalController({
@@ -29,15 +31,18 @@ export const Input = ({
       required={props.required}
       data-testid={dataTestId}
     >
-      <InputUI
-        {...inputProps}
-        data-testid={dataTestId}
-        className={cn(
-          props.className,
-          props.error &&
-            "border-destructive focus:border-destructive focus-visible:ring-0"
-        )}
-      />
+      <div className={cn("flex items-center gap-2", containerClassName)}>
+        <InputUI
+          {...inputProps}
+          data-testid={dataTestId}
+          className={cn(
+            props.className,
+            props.error &&
+              "border-destructive focus:border-destructive focus-visible:ring-0"
+          )}
+        />
+        {extraElement}
+      </div>
     </InputBase>
   );
 };

package/src/components/dataInput/Input/components/Input/types.ts

@@ -10,4 +10,6 @@ export type InputProps = Omit<InputBaseProps, "children"> & {
   helperText?: string;
   floatingLabel?: boolean;
   "data-testid"?: string;
+  extraElement?: React.ReactNode;
+  containerClassName?: string;
 };

package/src/components/dataInput/Input/components/MaskInput/__tests__/mask-input.test.tsx

@@ -1,11 +1,12 @@
 import "@testing-library/jest-dom";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { MaskInput } from "../mask-input";
 
 describe("MaskInput", () => {
   it("should render label", () => {
     render(
-      <MaskInput label="test" data-testid="mask-input" mask="000.000.000-00" />
+      <MaskInput label="test" data-testid="mask-input" mask="999.999.999-99" />
     );
     const label = screen.getByTestId("mask-input-label");
     expect(label).toBeInTheDocument();
@@ -14,7 +15,7 @@ describe("MaskInput", () => {
 
   it("should render error", () => {
     render(
-      <MaskInput error="test" data-testid="mask-input" mask="000.000.000-00" />
+      <MaskInput error="test" data-testid="mask-input" mask="999.999.999-99" />
     );
     const error = screen.getByTestId("mask-input-error-label");
     expect(error).toBeInTheDocument();
@@ -23,7 +24,7 @@ describe("MaskInput", () => {
 
   it("should be disabled", () => {
     render(
-      <MaskInput disabled data-testid="mask-input" mask="000.000.000-00" />
+      <MaskInput disabled data-testid="mask-input" mask="999.999.999-99" />
     );
     const input = screen.getByTestId("mask-input");
     expect(input).toBeDisabled();
@@ -35,7 +36,7 @@ describe("MaskInput", () => {
         required
         data-testid="mask-input"
         label="test"
-        mask="000.000.000-00"
+        mask="999.999.999-99"
       />
     );
     const label = screen.getByTestId("mask-input-label");
@@ -43,11 +44,11 @@ describe("MaskInput", () => {
   });
 
   it("should apply mask to input value", async () => {
-    render(<MaskInput data-testid="mask-input" mask="000.000.000-00" />);
+    const user = userEvent.setup();
+    render(<MaskInput data-testid="mask-input" mask="999.999.999-99" />);
     const input = screen.getByTestId("mask-input");
 
-    fireEvent.focus(input);
-    fireEvent.input(input, { target: { value: "12345678901" } });
+    await user.type(input, "12345678901");
 
     expect(input).toHaveValue("123.456.789-01");
   });
@@ -56,7 +57,7 @@ describe("MaskInput", () => {
     render(
       <MaskInput
         data-testid="mask-input"
-        mask="000.000.000-00"
+        mask="999.999.999-99"
         placeholder="Digite seu CPF"
       />
     );
@@ -67,7 +68,7 @@ describe("MaskInput", () => {
 
   it("should handle name attribute", () => {
     render(
-      <MaskInput data-testid="mask-input" mask="000.000.000-00" name="cpf" />
+      <MaskInput data-testid="mask-input" mask="999.999.999-99" name="cpf" />
     );
     const input = screen.getByTestId("mask-input");
 

package/src/components/dataInput/Input/components/MaskInput/mask-input.stories.tsx

@@ -19,31 +19,47 @@ export const Default: Story = {
   args: {
     placeholder: "99999-999",
     label: "CEP",
-    mask: "00000-000",
+    mask: "99999-999",
   },
 };
 
 export const CPF: Story = {
   args: {
-    placeholder: "000.000.000-00",
+    placeholder: "999.999.999-99",
     label: "CPF",
-    mask: "000.000.000-00",
+    mask: "999.999.999-99",
   },
 };
 
 export const Phone: Story = {
   args: {
-    placeholder: "(00) 00000-0000",
+    placeholder: "(99) 99999-9999",
     label: "Telefone",
-    mask: "(00) 00000-0000",
+    mask: "(99) 99999-9999",
   },
 };
 
 export const Date: Story = {
   args: {
-    placeholder: "00/00/0000",
+    placeholder: "99/99/9999",
     label: "Data",
-    mask: "00/00/0000",
+    mask: "99/99/9999",
+  },
+};
+
+export const LettersExample: Story = {
+  args: {
+    placeholder: "AAA-9999",
+    label: "Código com Letras",
+    mask: "AAA-9999",
+  },
+};
+
+export const MixedExample: Story = {
+  args: {
+    placeholder: "A99-AAA-999",
+    label: "Código Misto",
+    mask: "A99-AAA-999",
   },
 };
 
@@ -60,8 +76,8 @@ export const WithForm = () => {
         <MaskInput
           name="cpf"
           label="CPF"
-          placeholder="000.000.000-00"
-          mask="000.000.000-00"
+          placeholder="999.999.999-99"
+          mask="999.999.999-99"
         />
       </form>
     </Form>

package/src/components/dataInput/Input/components/MaskInput/mask-input.tsx

@@ -1,15 +1,20 @@
 "use client";
 import * as React from "react";
-import { useIMask, ReactMaskOpts } from "react-imask";
 import { Input } from "../Input";
 import { useConditionalController } from "@/hooks/use-conditional-controller";
 import { InputProps } from "../Input/types";
+import { useMask } from "@/hooks/use-mask";
+import { useRef } from "react";
 
-export type MaskInputProps = ReactMaskOpts & InputProps;
+export type MaskInputProps = {
+  mask?: string;
+} & InputProps;
 
 export const MaskInput = ({
   "data-testid": dataTestId,
   withoutForm = false,
+  extraElement,
+  mask = "",
   ...props
 }: MaskInputProps) => {
   const formData = useConditionalController({
@@ -17,38 +22,52 @@ export const MaskInput = ({
     withoutForm,
   });
 
-  const {
-    label,
-    error,
-    required,
-    name,
-    className,
-    placeholder,
-    ...imaskProps
-  } = props;
-
-  const { ref, value } = useIMask({
-    ...imaskProps,
-  });
+  const inputProps = React.useMemo(() => {
+    return {
+      ...formData,
+      ...props,
+    };
+  }, [formData, props]);
+
+  const { applyMask } = useMask({ mask });
 
-  React.useEffect(() => {
-    if (formData.value !== undefined && formData.value !== value) {
-      formData.onChange(value);
-    }
-  }, [formData, value]);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const applyMaskToInput = React.useCallback(
+    (value: string) => {
+      if (inputRef.current && mask) {
+        const maskedValue = applyMask(value);
+        inputRef.current.value = maskedValue;
+      }
+    },
+    [applyMask, mask]
+  );
+
+  const handleChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const maskedValue = mask ? applyMask(e.target.value) : e.target.value;
+
+      const response = {
+        ...e,
+        target: {
+          ...e.target,
+          value: maskedValue,
+        },
+      };
+      applyMaskToInput(maskedValue);
+      return inputProps?.onChange?.(response);
+    },
+    [applyMask, inputProps, mask, applyMaskToInput]
+  );
 
   return (
     <Input
-      {...props}
-      ref={ref as React.RefObject<HTMLInputElement>}
+      {...inputProps}
+      ref={inputRef}
+      onChange={handleChange}
+      extraElement={extraElement}
       data-testid={dataTestId}
       withoutForm={true}
-      label={label}
-      error={error}
-      required={required}
-      className={className}
-      placeholder={placeholder}
-      name={name}
     />
   );
 };

package/src/components/dataInput/Input/components/MultipleInput/MultipleInput.tsx

@@ -1,36 +1,105 @@
 import { Button } from "../../../../actions/Button";
-import { Input, InputProps } from "../Input";
-import { MultipleInputBase } from "./MultipleInputBase";
 import { Icon } from "../../../../dataDisplay/Icon";
+import { useCallback, useMemo, useState } from "react";
+import { useConditionalController } from "@/hooks/use-conditional-controller";
+import { MaskInput, MaskInputProps } from "../MaskInput";
 
-export type MultipleInputProps = InputProps & {
+export type MultipleInputProps = MaskInputProps & {
   data?: string[];
-  onChangeData?: (data: string[]) => void;
+  onAdd?: (data: string) => void;
+  onRemove?: (position: number) => void;
   name: string;
+  defaultValue?: string;
+  "data-testid"?: string;
 };
 
 export const MultipleInput = ({
   data = [],
-  mask,
+  onAdd = () => {},
+  defaultValue = "",
+  onRemove = () => {},
+  withoutForm = false,
   ...props
 }: MultipleInputProps) => {
+  const [inputValue, setInputValue] = useState(defaultValue);
+
+  const formData = useConditionalController({
+    name: props.name || "",
+    withoutForm,
+  });
+
+  const inputItems = useMemo(() => {
+    if (formData?.value) {
+      return formData.value;
+    }
+    return data;
+  }, [data, formData]);
+
+  const onAddData = useCallback(() => {
+    const trimmedValue = inputValue.trim();
+    if (trimmedValue) {
+      if (formData?.onChange) {
+        formData.onChange([...inputItems, trimmedValue]);
+      } else {
+        onAdd(trimmedValue);
+      }
+      setInputValue("");
+    }
+  }, [inputValue, formData, onAdd, inputItems]);
+
+  const onRemoveData = useCallback(
+    (index: number) => {
+      if (formData?.onChange) {
+        const newData = inputItems.filter(
+          (_: string, i: number) => i !== index
+        );
+        formData.onChange(newData);
+      } else {
+        onRemove(index);
+      }
+    },
+    [formData, inputItems, onRemove]
+  );
+
+  const renderItens = useCallback(() => {
+    return inputItems?.map((item: string, index: number) => {
+      return (
+        <div key={item} className="flex justify-between">
+          {item}
+          <Button
+            variant="ghost"
+            className="text-destructive"
+            size={"icon"}
+            onClick={() => onRemoveData(index)}
+          >
+            <Icon name="MdDelete" />
+          </Button>
+        </div>
+      );
+    });
+  }, [inputItems, onRemoveData]);
+
+  const extraElement = useMemo(
+    () => (
+      <Button type="button" onClick={onAddData} disabled={!inputValue}>
+        <Icon name="MdAdd" />
+      </Button>
+    ),
+    [onAddData, inputValue]
+  );
+
   return (
-    <MultipleInputBase data={data} {...props}>
-      {({ onChange, addItem, value, error }) => (
-        <Input
-          {...props}
-          mask={mask}
-          value={value}
-          onChange={onChange}
-          withoutForm
-          error={error}
-          component={
-            <Button type="button" onClick={() => addItem()}>
-              <Icon name="MdAdd" />
-            </Button>
-          }
-        />
-      )}
-    </MultipleInputBase>
+    <div className="flex flex-col gap-2">
+      <MaskInput
+        {...props}
+        withoutForm
+        extraElement={extraElement}
+        onChange={(e) => {
+          setInputValue(e.target.value);
+        }}
+        value={inputValue}
+      />
+      {renderItens()}
+    </div>
   );
 };

package/src/components/dataInput/Input/components/MultipleInput/__tests__/multiple-input.test.tsx

@@ -0,0 +1,152 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { MultipleInput } from "../MultipleInput";
+
+describe("MultipleInput", () => {
+  it("should render label", () => {
+    render(
+      <MultipleInput
+        label="test"
+        name="test-input"
+        data-testid="multiple-input"
+      />
+    );
+    const label = screen.getByTestId("multiple-input-label");
+    expect(label).toBeInTheDocument();
+    expect(label).toHaveTextContent("test");
+  });
+
+  it("should render error", () => {
+    render(
+      <MultipleInput
+        error="test"
+        name="test-input"
+        data-testid="multiple-input"
+      />
+    );
+    const error = screen.getByTestId("multiple-input-error-label");
+    expect(error).toBeInTheDocument();
+    expect(error).toHaveTextContent("test");
+  });
+
+  it("should be disabled", () => {
+    render(
+      <MultipleInput disabled name="test-input" data-testid="multiple-input" />
+    );
+    const input = screen.getByTestId("multiple-input");
+    expect(input).toBeDisabled();
+  });
+
+  it("should be required", () => {
+    render(
+      <MultipleInput
+        required
+        name="test-input"
+        label="test"
+        data-testid="multiple-input"
+      />
+    );
+    const label = screen.getByTestId("multiple-input-label");
+    expect(label).toHaveTextContent("test *");
+  });
+
+  it("should change value", () => {
+    render(<MultipleInput name="test-input" data-testid="multiple-input" />);
+    const input = screen.getByTestId("multiple-input");
+    fireEvent.change(input, { target: { value: "test" } });
+    expect(input).toHaveValue("test");
+  });
+
+  it("should render add button", () => {
+    render(<MultipleInput name="test-input" data-testid="multiple-input" />);
+    const addButton = screen.getByRole("button");
+    expect(addButton).toBeInTheDocument();
+  });
+
+  it("should add item when add button is clicked", () => {
+    const mockOnAdd = jest.fn();
+    render(
+      <MultipleInput
+        name="test-input"
+        data-testid="multiple-input"
+        onAdd={mockOnAdd}
+        withoutForm
+      />
+    );
+
+    const input = screen.getByTestId("multiple-input");
+    const addButton = screen.getByRole("button");
+
+    fireEvent.change(input, { target: { value: "test item" } });
+    fireEvent.click(addButton);
+
+    expect(mockOnAdd).toHaveBeenCalledWith("test item");
+  });
+
+  it("should render with initial data", () => {
+    const initialData = ["item 1", "item 2"];
+
+    render(
+      <MultipleInput
+        name="test-input"
+        data={initialData}
+        data-testid="multiple-input"
+        withoutForm
+      />
+    );
+
+    expect(screen.getByText("item 1")).toBeInTheDocument();
+    expect(screen.getByText("item 2")).toBeInTheDocument();
+  });
+
+  it("should handle mask prop", () => {
+    render(
+      <MultipleInput
+        name="test-input"
+        mask="(99) 99999-9999"
+        data-testid="multiple-input"
+      />
+    );
+
+    const input = screen.getByTestId("multiple-input");
+    expect(input).toBeInTheDocument();
+  });
+
+  it("should remove item when remove button is clicked", () => {
+    const mockOnRemove = jest.fn();
+    const initialData = ["item 1", "item 2"];
+
+    render(
+      <MultipleInput
+        name="test-input"
+        data={initialData}
+        onRemove={mockOnRemove}
+        data-testid="multiple-input"
+        withoutForm
+      />
+    );
+
+    const removeButtons = screen.getAllByRole("button");
+    const removeButton = removeButtons.find((button) =>
+      button.querySelector('[data-icon="MdDelete"]')
+    );
+
+    if (removeButton) {
+      fireEvent.click(removeButton);
+      expect(mockOnRemove).toHaveBeenCalledWith(0);
+    }
+  });
+
+  it("should disable add button when input is empty", () => {
+    render(
+      <MultipleInput
+        name="test-input"
+        data-testid="multiple-input"
+        withoutForm
+      />
+    );
+
+    const addButton = screen.getByRole("button");
+    expect(addButton).toBeDisabled();
+  });
+});

package/src/components/dataInput/Input/components/MultipleInput/multiple-input.stories.tsx

@@ -21,8 +21,12 @@ export const Default: Story = {
     name: "multipleInput",
     data: ["Item 1", "Item 2", "Item 3"],
     placeholder: "Multiple Input",
-    onChangeData: (data: string[]) => {
-      console.log(data);
+    withoutForm: true,
+    onAdd: (data: string) => {
+      console.log("Added:", data);
+    },
+    onRemove: (index: number) => {
+      console.log("Removed index:", index);
     },
   },
 };
@@ -34,30 +38,51 @@ export const WithError: Story = {
     error: "This is an error",
     data: ["Item 1", "Item 2", "Item 3"],
     placeholder: "Multiple Input",
+    withoutForm: true,
+    onAdd: (data: string) => {
+      console.log("Added:", data);
+    },
+    onRemove: (index: number) => {
+      console.log("Removed index:", index);
+    },
   },
 };
 
 export const WithForm: Story = {
   args: {
     label: "Multiple Input",
-    name: "client.data",
+    name: "client",
     placeholder: "Multiple Input",
-    mask: "999.999.999-99",
   },
   decorators: [
     (Story: React.ComponentType) => {
       const form = useForm({
         defaultValues: {
-          client: {
-            data: ["Item 1", "Item 2", "Item 3"],
-          },
+          client: ["Item 1", "Item 2", "Item 3"],
         },
-        errors: {
-          client: {
-            data: {
-              message: "This is an error",
-            },
-          },
+      });
+
+      return (
+        <Form {...form}>
+          <Story />
+        </Form>
+      );
+    },
+  ],
+};
+
+export const WithMaskAndForm: Story = {
+  args: {
+    label: "Phone Numbers",
+    name: "phoneNumbers",
+    placeholder: "Enter phone number",
+    mask: "(99) 99999-9999",
+  },
+  decorators: [
+    (Story: React.ComponentType) => {
+      const form = useForm({
+        defaultValues: {
+          phoneNumbers: ["(11) 99999-9999", "(21) 88888-8888"],
         },
       });
 

package/src/hooks/use-mask.tsx

@@ -0,0 +1,116 @@
+import { useState, useCallback } from "react";
+
+export type UseMaskProps = {
+  mask: string;
+  placeholder?: string; // Placeholder que mostra a máscara
+  showMask?: boolean; // Se deve mostrar a máscara mesmo sem valor
+  allowEmpty?: boolean; // Se permite valor vazio
+  transform?: "uppercase" | "lowercase" | "capitalize"; // Transformação do texto
+};
+
+export const useMask = ({ mask, ...options }: UseMaskProps) => {
+  const [value, setValue] = useState("");
+
+  const applyMask = useCallback(
+    (inputValue: string) => {
+      if (!inputValue || !mask) return "";
+
+      // Remove todos os caracteres que não são letras ou números
+      const cleanValue = inputValue.replace(/[^a-zA-Z0-9]/g, "");
+
+      let maskedValue = "";
+      let cleanIndex = 0;
+
+      for (let i = 0; i < mask.length && cleanIndex < cleanValue.length; i++) {
+        const maskChar = mask[i];
+        const inputChar = cleanValue[cleanIndex];
+
+        if (maskChar === "9") {
+          // Só aceita números
+          if (/\d/.test(inputChar)) {
+            maskedValue += inputChar;
+            cleanIndex++;
+          } else {
+            // Se não for número, pula esse caractere do input
+            cleanIndex++;
+            i--; // Volta um passo na máscara para tentar novamente
+          }
+        } else if (maskChar === "A") {
+          // Só aceita letras
+          if (/[a-zA-Z]/.test(inputChar)) {
+            let char = inputChar;
+            // Aplica transformação se especificada
+            if (options.transform === "uppercase") char = char.toUpperCase();
+            else if (options.transform === "lowercase")
+              char = char.toLowerCase();
+            maskedValue += char;
+            cleanIndex++;
+          } else {
+            // Se não for letra, pula esse caractere do input
+            cleanIndex++;
+            i--; // Volta um passo na máscara para tentar novamente
+          }
+        } else {
+          // Caractere literal da máscara (parênteses, hífen, etc.)
+          maskedValue += maskChar;
+        }
+      }
+
+      return maskedValue;
+    },
+    [mask, options.transform]
+  );
+
+  const handleSetValue = useCallback(
+    (newValue: string) => {
+      const maskedValue = applyMask(newValue);
+      setValue(maskedValue);
+    },
+    [applyMask]
+  );
+
+  // Função para obter valor sem máscara (raw)
+  const getRawValue = useCallback(() => {
+    return value.replace(/[^a-zA-Z0-9]/g, "");
+  }, [value]);
+
+  // Função para verificar se está completo
+  const isComplete = useCallback(() => {
+    return value.length === mask.length;
+  }, [value, mask]);
+
+  // Função para verificar se é válido
+  const isValid = useCallback(() => {
+    // Implementar validação específica
+    return isComplete() && value.length > 0;
+  }, [isComplete, value]);
+
+  // Função para limpar o valor
+  const clear = useCallback(() => {
+    setValue("");
+  }, []);
+
+  // Compatibilidade com react-hook-form
+  const getFormProps = useCallback(
+    () => ({
+      value,
+      onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+        handleSetValue(e.target.value);
+      },
+      placeholder: options.placeholder,
+    }),
+    [value, handleSetValue, options.placeholder]
+  );
+
+  return {
+    value,
+    setValue: handleSetValue,
+    rawValue: getRawValue(),
+    isComplete: isComplete(),
+    isValid: isValid(),
+    applyMask,
+    clear,
+    placeholder: options.placeholder || mask.replace(/[9A]/g, "_"),
+    formProps: getFormProps(),
+  };
+};

package/src/introduction.mdx

@@ -0,0 +1,132 @@
+# PHSA Design System
+
+Welcome to the **PHSA Design System** - a modern and accessible React component library built with TypeScript, Tailwind CSS, and Radix UI.
+
+## 🎯 About the Project
+
+The PHSA Design System is a collection of reusable components that follow best practices in design and accessibility. Our mission is to provide a solid foundation for building consistent and professional user interfaces.
+
+## 🚀 Technologies
+
+- **React 19** - JavaScript library for user interfaces
+- **TypeScript** - Static typing for JavaScript
+- **Tailwind CSS** - Utility-first CSS framework
+- **Radix UI** - Accessible primitive components
+- **Lucide React** - Modern and consistent icons
+- **React Hook Form** - Form management
+- **Zod** - Schema validation
+
+## 📦 Available Components
+
+### Forms
+
+- Input, Textarea, Select
+- Checkbox, Switch, Radio
+- DatePicker, TimePicker
+- Form validation with Zod
+
+### Navigation
+
+- Button, Link
+- Breadcrumb
+- Pagination
+- Tabs
+
+### Feedback
+
+- Alert, Toast
+- Modal, Dialog
+- Tooltip, Popover
+- Loading states
+
+### Layout
+
+- Card, Container
+- Grid, Flex
+- Divider, Spacer
+
+### Data
+
+- Table
+- DataTable
+- Charts (in development)
+
+## 🎨 Theme and Customization
+
+The design system supports light and dark themes with full customization through Tailwind CSS. All components follow a consistent design system with:
+
+- **Colors**: Semantic and accessible color palette
+- **Typography**: Clear text hierarchy
+- **Spacing**: Consistent spacing system
+- **Borders**: Standardized border radius
+- **Shadows**: Elevation system
+
+## ♿ Accessibility
+
+All components are built with accessibility in mind:
+
+- Full keyboard navigation support
+- Screen reader compatibility
+- Adequate color contrast
+- Visible focus states
+- Appropriate ARIA labels
+
+## 🛠️ How to Use
+
+### Installation
+
+```bash
+npm install @phsa.tec/design-system-react
+# or
+yarn add @phsa.tec/design-system-react
+```
+
+### Basic Setup
+
+```tsx
+import { Button, Input, Card } from "@phsa.tec/design-system-react";
+
+function App() {
+  return (
+    <div>
+      <Card>
+        <Input placeholder="Type something..." />
+        <Button>Click here</Button>
+      </Card>
+    </div>
+  );
+}
+```
+
+### Theme Configuration
+
+```tsx
+import { ThemeProvider } from "@phsa.tec/design-system-react";
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="light" storageKey="phsa-theme">
+      {/* Your components here */}
+    </ThemeProvider>
+  );
+}
+```
+
+## 📚 Documentation
+
+- **Components**: Explore all available components
+- **Examples**: See practical usage examples
+- **API**: Complete documentation of props and methods
+- **Style Guide**: Design patterns and best practices
+
+## 🤝 Contributing
+
+Contributions are welcome! Please read our contribution guide before submitting pull requests.
+
+## 📄 License
+
+This project is licensed under the MIT License.
+
+---
+
+**Need help?** Open an issue on GitHub or contact our team.