ZIONIX ui

Typography


              <div>
              <Text>Text 1</Text>
              <Text large>Text 1</Text>
              <Text extra>Text 1</Text>
              <Text extraLarge>Text 1</Text>
              <Text superLarge>Text 1</Text>
              <Text thin superLarge>Text 1</Text>
              <Text subtitle>Description text</Text>
              <Text accent>Accent color</Text>

              <Text semiBold>Text 1</Text>
              <Text semiBold large>Text 1</Text>
              <Text semiBold extra>Text 1</Text>
              <Text semiBold extraLarge>Text 1</Text>
              <Text semiBold superLarge>Text 1</Text>
              <Text bold superLarge>Text 1</Text>
              <Text semiBold subtitle>Description text</Text>
              <Text semiBold accent>Accent color</Text>
              </div>

Buttons

 
<div>
<Button primary>Default</Button>
<Button primary size="sm">
  Small
</Button>
<Button primary size="xs">
  Extra-small
</Button>
<Button primary disabled>
  Default
</Button>
<Button primary disabled size="sm">
  Small
</Button>
<Button primary disabled size="xs">
  Extra-small
</Button>
<Button primary isLoading>
  Default
</Button>
<Button primary size="sm" isLoading>
  Small
</Button>
<Button primary size="xs" isLoading>
  Extra-small
</Button>
<Button invertedPrimary>Default</Button>
<Button invertedPrimary size="sm">
  Small
</Button>
<Button invertedPrimary size="xs">
  Extra-small
</Button>
<Button invertedPrimary disabled>
  Default
</Button>
<Button invertedPrimary disabled size="sm">
  Small
</Button>
<Button invertedPrimary disabled size="xs">
  Extra-small
</Button>
<Button invertedPrimary isLoading>
  Default
</Button>
<Button invertedPrimary size="sm" isLoading>
  Small
</Button>
<Button invertedPrimary size="xs" isLoading>
  Extra-small
</Button>
<Button secondary>Default</Button>
<Button secondary size="sm">
  Small
</Button>
<Button secondary size="xs">
  Extra-small
</Button>
<Button secondary disabled>
  Default
</Button>
<Button secondary disabled size="sm">
  Small
</Button>
<Button secondary disabled size="xs">
  Extra-small
</Button>
<Button secondary isLoading>
  Default
</Button>
<Button secondary size="sm" isLoading>
  Small
</Button>
<Button secondary size="xs" isLoading>
  Extra-small
</Button>
<Button invertedSecondary>Default</Button>
<Button invertedSecondary size="sm">
  Small
</Button>
<Button invertedSecondary size="xs">
  Extra-small
</Button>
<Button invertedSecondary disabled>
  Default
</Button>
<Button invertedSecondary disabled size="sm">
  Small
</Button>
<Button invertedSecondary disabled size="xs">
  Extra-small
</Button>
<Button invertedSecondary isLoading>
  Default
</Button>
<Button invertedSecondary size="sm" isLoading>
  Small
</Button>
<Button invertedSecondary size="xs" isLoading>
  Extra-small
</Button>
</div>

Scrolling


            <Card>
              <Scrolling>

                <div className="bg-slate-50 w-[220px] inline-block mr-4 shadow rounded-2xl hover:scale-105 ease-in-out duration-300">
                  <img
                    src="https://cdn.pixabay.com/photo/2017/12/15/13/51/polynesia-3021072_1280.jpg"
                    className="rounded-2xl p-2"
                    alt="image"
                  />
                </div>
    
                <div className="bg-slate-50 w-[220px] inline-block mr-4 shadow rounded-2xl hover:scale-105 ease-in-out duration-300">
                  <img
                    src="https://cdn.pixabay.com/photo/2020/02/15/16/09/loveourplanet-4851331_1280.jpg"
                    className="rounded-2xl p-2"
                    alt="image"
                  />
                </div>  
              
              </Scrolling>
            </Card>

ToastNotification


/* page index.tsx */
<ToastNotification>
  <App />
</ToastNotification>


/* call examples */

/* don't forget to add the hook */
const toast = useToastNotification();

<div className="flex flex-wrap gap-2">
<Button
  secondary
  onClick={() =>
    toast({
      title: "Danger Notification",
      description: "This is a simple notification",
      type: "danger",
    })
  }
>
  Danger Notification
</Button>
<Button
  secondary
  onClick={() =>
    toast({
      title: "Success Notification",
      description: "This is a simple notification",
      type: "success",
    })
  }
>
  Success Notification
</Button>
<Button
  secondary
  onClick={() =>
    toast({
      title: "Warning Notification",
      description: "This is a simple notification",
      type: "warning",
    })
  }
>
  Warning Notification
</Button>
<Button
  secondary
  onClick={() =>
    toast({
      title: "Info Notification",
      description: "This is a simple notification",
      type: "info",
    })
  }
>
  Info Notification
</Button>
<Button
  secondary
  onClick={() =>
    toast({
      title: "Default Notification",
      description: "This is a simple notification",
    })
  }
>
  Default Notification
</Button>
</div>

Modal


const [open, setOpen] = useState(false);

  <Modal.Root open={open} setOpen={setOpen}>
  <Modal.Header>
    <Modal.Icon danger>
      <IconAlertCircle />
    </Modal.Icon>
    <Modal.Title label="Deactivate account" />
  </Modal.Header>

  <Modal.Text>
    Are you sure you want to deactivate your account? All of your data
    will be permanently removed. This action cannot be undone.
  </Modal.Text>

  <Modal.Footer cancelText="Abort">
    <Modal.Button
      onClick={() => alert("onClick Button Modal")}
      danger
    >
      Deactive
    </Modal.Button>
  </Modal.Footer>
</Modal.Root>

Table New v0.0.77

No.	Details	Status	Date	Total
0001	Detail field	Delivered	01/01/2024	1.99
0002	Detail field	Travelling	01/01/2024	4.96
0003	Detail field	Delivered	01/01/2024	74.96
0004	Detail field	Not Status	01/01/2024	127.54


   const data = [
    {
      id: "0001",
      details: "Detail field",
      status: "Delivered",
      date: "01/01/2024",
      total: 1.99,
      img: "https://avatars.githubusercontent.com/u/18231436?v=4",
    },
    {
      id: "0002",
      details: "Detail field",
      status: "Travelling",
      date: "01/01/2024",
      total: 4.96,
      img: "https://avatars.githubusercontent.com/u/6181797?v=4",
    },
    {
      id: "0003",
      details: "Detail field",
      status: "Delivered",
      date: "01/01/2024",
      total: 74.96,
      img: "https://avatars.githubusercontent.com/u/140957791?v=4",
    },
    {
      id: "0004",
      details: "Detail field",
      status: "Not Status",
      date: "01/01/2024",
      total: 127.54,
      img: "https://avatars.githubusercontent.com/u/69631?v=4",
    },
  ];

/* Mode 1 */
<Table.Root>
    <Table.Head labels={["No.", "Details", "Status", "Date", "Total"]} />
    <Table.Body
    data={data}
    fields={["id", "details", "status", "date", "total"]}
    />
</Table.Root>;

/* Mode 2 */
<Table.Root>
  <Table.Head labels={["No.","User", "Details", "Status", "Date", "Total"]} />
  <Table.Body
    data={data}
    fields={[
      { name: "id", color: "var(--primary-color)", bold: true },
      { name: "img", avatar: true },
      { name: "details" },
      {
        name: "status",
        badge: {
          color: "dark",
          bordered: true,
          conditions: [
            {
              color: "green",
              field: "status",
              operator: "equal",
              value: "Delivered",
            },
            {
              color: "yellow",
              field: "status",
              operator: "equal",
              value: "Travelling",
            },
          ],
        },
      },
      { name: "date" },
      { name: "total", align: "right", color: "#475569" },
    ]}
  />
</Table.Root>;

/* Mode 3 */
<Table.Root>
  <Table.Head labels={["No.", "Details", "Status", "Date", "Total"]} />
  <Table.Body>
    <Table.Row color="light">
      <Table.Data>0001</Table.Data>
      <Table.Data>My details</Table.Data>
      <Table.Data>Delivered</Table.Data>
      <Table.Data>01/01/2024</Table.Data>
      <Table.Data align="right">$ 7.99</Table.Data>
    </Table.Row>

    <Table.Row color="dark">
      <Table.Data>0001</Table.Data>
      <Table.Data>My details</Table.Data>
      <Table.Data>Delivered</Table.Data>
      <Table.Data>01/01/2024</Table.Data>
      <Table.Data align="right">$ 7.99</Table.Data>
    </Table.Row>
  </Table.Body>
</Table.Root>;

Skeleton


<div className="flex gap-4 max-w-[550px]">

    <div className="flex flex-col gap-1 justify-center items-center">
        <Skeleton.Avatar size={80} />
        <Skeleton.Row radius width={120} />
    </div>

    <div className="flex flex-col justify-center gap-4">
        <Skeleton.Row radius width={150} />
        <Skeleton.Row radiusMedium width={200} />
        <Skeleton.Row radiusLarge width={320} />
    </div>

</div>

Avatar


          <div className="flex flex-wrap items-center gap-4">
            <Avatar label="PG" mini accent />
            <Avatar src="https://github.com/pablogeokar.png" />
            <Avatar label="PG" />
            <Avatar src="https://github.com/pablogeokar.png" shadow />
            <Avatar src="https://github.com/zionixtecnologia.png" ring />
            <Avatar label="ZN" secondary shadow />
            <Avatar src="https://github.com/zionixtecnologia.png" ring accent />
            <Avatar src="https://github.com/romatorres.png" large />
            <Avatar src="https://github.com/romatorres.png" large ring />
            <Avatar
                src="https://github.com/romatorres.png"
                large
                ring
                secondary
            />
            <Avatar
                src="https://github.com/zionixtecnologia.png"
                large
                ring
                accent
            />
        </div>

Checkbox


            <div className="flex gap-6 flex-wrap">
                <Checkbox label="Not Checked?" />
                <Checkbox label="Default Checkbox?" checked />
                <Checkbox secondary label="Secondary Checkbox?" checked />
                <Checkbox accent label="Accent Checkbox?" checked />
            </div>

Badge


            <div className="flex gap-6 flex-wrap">
            <Badge color="blue">Blue</Badge>
            <Badge color="blue" large>Blue</Badge>
            <Badge color="blue" bordered>Blue</Badge>
            
            <Badge color="dark">Dark</Badge>
            <Badge color="dark" large>Dark</Badge>
            <Badge color="dark" bordered>Dark</Badge>
            
            <Badge color="red">Red</Badge>
            <Badge color="red" large>Red</Badge>
            <Badge color="red" bordered>Badge</Badge>
            
            <Badge color="green">Green</Badge>
            <Badge color="green" large>Green</Badge>
            <Badge color="green" bordered>Green</Badge>
            
            <Badge color="yellow">Yellow</Badge>
            <Badge color="yellow" large>Yellow</Badge>
            <Badge color="yellow" bordered>Yellow</Badge>
            
            <Badge color="indigo">Indigo</Badge>
            <Badge color="indigo" large>Indigo</Badge>
            <Badge color="indigo" bordered>Indigo</Badge>
            
            <Badge color="purple">Purple</Badge>
            <Badge color="purple" large>Purple</Badge>
            <Badge color="purple" bordered>Purple</Badge>
            
            <Badge color="pink">Badge</Badge>
            <Badge color="pink" large>Badge</Badge>
            <Badge color="pink" bordered>Badge</Badge>
            </div>

Toggle


            <div>
              <Toggle name="myoption" label="is primary?" checked />
              <Toggle name="myoption3" />
              <Toggle name="myoption2" accent checked label="is accent?" />
              <Toggle name="myoption4" secondary checked label="is secondary?" />          
            </div>

Select


         <Select
         placeholder="Select a country..."
         name="country"
         defaultValue="canada"
         onChange={(value) => {
           console.log("Select country", value);
         }}
         options={[
           {
             label: "Brasil",
             value: "brasil",
             img: "https://flagpedia.net/data/flags/w580/br.webp",
           },
           {
             label: "Argentina",
             value: "argentina",
             img: "https://flagpedia.net/data/flags/w580/ar.webp",
           },
           {
             label: "Canadá",
             value: "canada",
             img: "https://flagpedia.net/data/flags/w580/ca.webp",
           },
         ]}
       />
        </div>

Dropdowns


            <div className="flex">
              <Dropdown.Root>
              <Dropdown.Label>Select an option</Dropdown.Label>
              <Dropdown.Content>
                <Dropdown.Item onClick={() => alert("onClick Event")}>
                  Item 1
                </Dropdown.Item>
                <Dropdown.Item href="http://www.google.com">
                  Item 2
                </Dropdown.Item>
              </Dropdown.Content>
            </Dropdown.Root>

            <Dropdown.Root>
              <Dropdown.Label>
                <Avatar mini src="https://github.com/pablogeokar.png" />
                Pablo George
              </Dropdown.Label>
              <Dropdown.Content>
                <Dropdown.Item onClick={() => alert("onClick Event")}>
                  Click me
                </Dropdown.Item>
              </Dropdown.Content>
            </Dropdown.Root>

            <Dropdown.Root transparent>
              <Dropdown.Label>
                <Avatar mini src="https://github.com/romatorres.png" />
                Romario
              </Dropdown.Label>
              <Dropdown.Content>
                <Dropdown.Item onClick={() => alert("onClick Event")}>
                  Content align default
                </Dropdown.Item>
              </Dropdown.Content>
            </Dropdown.Root>

            <Dropdown.Root transparent bordered>
              <Dropdown.Label>
                <Avatar mini src="https://github.com/zionixtecnologia.png" />
                ZIONIX
              </Dropdown.Label>
              <Dropdown.Content left>
                <Dropdown.Item onClick={() => alert("onClick Event")}>
                  Content align Left
                </Dropdown.Item>
              </Dropdown.Content>
            </Dropdown.Root>                        
            </div>

Tabs


        <div>
            <Tab.Root>
            <Tab.Tabs>
            <Tab.Item id="home">
                <IconHome /> My Home
            </Tab.Item>
            <Tab.Item id="settings">
                <IconSettings /> Settings
            </Tab.Item>
            </Tab.Tabs>

            <Tab.Content idItem="home">
            <p>
                This is <strong>My Home Tab</strong>
            </p>
            </Tab.Content>

            <Tab.Content idItem="settings">
            <p>
                This is <strong>Settings Tab</strong>
            </p>
            </Tab.Content>

            </Tab.Root>
        </div>

Form


            <>
            <Card className="w-[420px] max-w-full">
              <Input
                placeholder="Informe o seu username"
                label="Username"
                mandatory
                icon={<Icon.User />}
              />
              <Input
                placeholder="Informe o seu e-mail"
                label="E-mail"
                type="email"
              />
              <Input
                placeholder="0,00"
                label="Currency Value"
                type="currency"
                icon={<Icon.Real />}
              />
              <Input
                placeholder="Informe o seu e-mail"
                label="Password"
                type="password"
              />

              <Toggle name="admin" label="Is Admin?" checked />
              
              <Checkbox label="Remember my password" checked/>
            </Card>
          </>