diff --git a/apps/experiments/src/index.html b/apps/experiments/src/index.html index 16ee71d..9a286fc 100644 --- a/apps/experiments/src/index.html +++ b/apps/experiments/src/index.html @@ -253,8 +253,8 @@

Shape

badge
-
- rounded +
+ cornered
square @@ -316,19 +316,19 @@

Light

Size

- xs + size-xs
- sm + size-sm
- md + size-md
- lg + size-lg
- xl + size-xl
@@ -1115,9 +1115,9 @@

Title

-

Breadcrumb

+

Breadcrumbs

-

Type

+

Color

    @@ -1265,7 +1265,6 @@

    Your content

    -
    @@ -1277,7 +1276,6 @@

    Your content

    -
    diff --git a/apps/website/components/Footer.tsx b/apps/website/components/Footer.tsx index 6bab364..d917c03 100644 --- a/apps/website/components/Footer.tsx +++ b/apps/website/components/Footer.tsx @@ -9,7 +9,7 @@ export const Footer = () => {
    - + Sira UI diff --git a/apps/website/components/Logo.tsx b/apps/website/components/Logo.tsx index 6cb5bf0..bd9b778 100644 --- a/apps/website/components/Logo.tsx +++ b/apps/website/components/Logo.tsx @@ -8,7 +8,7 @@ interface Props { export const Logo = ({ className = "" }: Props) => { return ( - + Sira ); diff --git a/apps/website/components/demo/drawer.tsx b/apps/website/components/demo/drawer.tsx new file mode 100644 index 0000000..794fbb5 --- /dev/null +++ b/apps/website/components/demo/drawer.tsx @@ -0,0 +1,61 @@ +import _ from "lodash"; +import React, { useCallback, useState } from "react"; + +interface Props { + position: "top" | "bottom" | "left" | "right"; + labelText?: string; + content?: string; + + pauseScroll?: boolean; + overlay?: boolean; + overlayClickClose?: boolean; +} + +export const DrawerDemo = ({ + position = "left", + pauseScroll = false, + overlay = true, + overlayClickClose = true, + labelText = "Open Drawer", + content = "Your content", +}: Props) => { + const [drawerId] = useState(_.uniqueId("sira-demo-drawer-")); + + const toggleDrawer = useCallback(() => { + let ele = document.getElementById(drawerId); + let show = ele!.classList.contains("show"); + if (show) { + ele!.classList.remove("show"); + } else { + ele!.classList.add("show"); + } + }, [drawerId]); + + return ( +
    + + {overlay && ( + + )} +
    +
    + +

    {content}

    +
    +
    +
    + ); +}; diff --git a/apps/website/components/demo/dropdown.tsx b/apps/website/components/demo/dropdown.tsx new file mode 100644 index 0000000..03fd5ba --- /dev/null +++ b/apps/website/components/demo/dropdown.tsx @@ -0,0 +1,45 @@ +import React from "react"; + +interface Props { + position: + | "top" + | "bottom" + | "left" + | "right" + | "top-left" + | "top-right" + | "bottom-left" + | "bottom-right" + | "left-top" + | "right-top" + | "left-bottom" + | "right-bottom"; + labelText?: string; + className?: string; + divider?: boolean; +} + +export const DropdownDemo = ({ + position = "bottom", + divider = false, + labelText = "Open Dropdown", + className = "", +}: Props) => { + return ( +
    + + +
    + ); +}; diff --git a/apps/website/components/demo/modal.tsx b/apps/website/components/demo/modal.tsx new file mode 100644 index 0000000..a0ff1d4 --- /dev/null +++ b/apps/website/components/demo/modal.tsx @@ -0,0 +1,58 @@ +import React, { useCallback, useState } from "react"; +import _ from "lodash"; + +interface Props { + labelText?: string; + pauseScroll?: boolean; + overlay?: boolean; +} + +export const ModalDemo = ({ + labelText = "Open Modal", + pauseScroll = false, + overlay = true, +}: Props) => { + const [eleId] = useState(_.uniqueId("sira-demo-modal-")); + + const toggle = useCallback(() => { + let ele = document.getElementById(eleId); + let show = ele!.classList.contains("show"); + if (show) { + ele!.classList.remove("show"); + } else { + ele!.classList.add("show"); + } + }, [eleId]); + + return ( +
    + + {overlay && } +
    + +

    Modal title

    + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur + dolorum voluptate ratione dicta. Maxime cupiditate, est commodi + consectetur earum iure, optio, obcaecati in nulla saepe maiores nobis + iste quasi alias! + +
    + + +
    +
    +
    + ); +}; diff --git a/apps/website/pages/docs/components/_meta.json b/apps/website/pages/docs/components/_meta.json index 02482e1..799c500 100644 --- a/apps/website/pages/docs/components/_meta.json +++ b/apps/website/pages/docs/components/_meta.json @@ -1,4 +1,21 @@ { "overview": "Overview", - "button": "Button" + "accordion": "Accordion", + "avatar": "Avatar", + "badge": "Badge", + "breadcrumbs": "Breadcrumbs", + "button": "Button", + "checkbox": "Checkbox", + "drawer": "Drawer", + "dropdown": "Dropdown", + "input": "Input", + "loader": "Loader", + "modal": "Modal", + "prompt": "Prompt", + "radio": "Radio", + "select": "Select", + "switch": "Switch", + "table": "Table", + "tabs": "Tabs", + "tooltip": "Tooltip" } \ No newline at end of file diff --git a/apps/website/pages/docs/components/accordion.mdx b/apps/website/pages/docs/components/accordion.mdx new file mode 100644 index 0000000..0e1d658 --- /dev/null +++ b/apps/website/pages/docs/components/accordion.mdx @@ -0,0 +1,233 @@ +# Accordion + +### Default + +```html +
    +
    + + +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quod +
    +
    +
    +
    + + +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quo +
    +
    +
    +
    +``` + +
    +
    + + +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quod +
    +
    +
    +
    + + +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quo +
    +
    +
    +
    + +### Bordered + +```html +
    +
    + + +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quod +
    +
    +
    +
    + + +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quo +
    +
    +
    +
    +``` + +
    +
    + + +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quod +
    +
    +
    +
    + + +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quo +
    +
    +
    +
    + +### Focusable + +```html +
    +
    + +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quod +
    +
    +
    +
    + +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quo +
    +
    +
    +
    +``` + +
    +
    + +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quod +
    +
    +
    +
    + +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quo +
    +
    +
    +
    + +### Force open + +```html +
    +
    + + +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quod +
    +
    +
    +
    + + +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quo +
    +
    +
    +
    +``` + +
    +
    + + +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quod +
    +
    +
    +
    + + +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quo +
    +
    +
    +
    diff --git a/apps/website/pages/docs/components/avatar.mdx b/apps/website/pages/docs/components/avatar.mdx new file mode 100644 index 0000000..d16f9fa --- /dev/null +++ b/apps/website/pages/docs/components/avatar.mdx @@ -0,0 +1,124 @@ +# Avatar + +## Shape + +### Default + +```html +
    + avatar +
    +``` + +
    + avatar +
    + +### Square + +```html +
    + avatar +
    +``` + +
    + avatar +
    + +## Ring + +```html +
    + avatar +
    +``` + +
    + avatar +
    + +## Size + +```html +
    +
    + avatar +
    +
    + avatar +
    +
    + avatar +
    +
    + avatar +
    +
    + avatar +
    +
    +``` + +
    +
    + avatar +
    +
    + avatar +
    +
    + avatar +
    +
    + avatar +
    +
    + avatar +
    +
    +## Text + +```html +
    +
    RV
    +
    +``` + +
    +
    RV
    +
    + +## Group + +```html +
    +
    + avatar +
    +
    + avatar +
    +
    + avatar +
    +
    + avatar +
    +
    +``` + +
    +
    + avatar +
    +
    + avatar +
    +
    + avatar +
    +
    + avatar +
    +
    diff --git a/apps/website/pages/docs/components/badge.mdx b/apps/website/pages/docs/components/badge.mdx new file mode 100644 index 0000000..ceed620 --- /dev/null +++ b/apps/website/pages/docs/components/badge.mdx @@ -0,0 +1,73 @@ +# Badge + +## Shape + +### Default + +```html +
    badge
    +``` + +
    badge
    + +### Square + +```html +
    square
    +``` + +
    square
    + +### Cornered + +```html +
    cornered
    +``` + +
    cornered
    + +## Variant + +### Solid + +```html +
    success
    +``` + +
    success
    + +### Outline + +```html +
    success
    +``` + +
    success
    + +### Light + +```html +
    success
    +``` + +
    success
    + +## Size + +```html +
    +
    size-xs
    +
    size-sm
    +
    size-md
    +
    size-lg
    +
    size-xl
    +
    +``` + +
    +
    size-xs
    +
    size-sm
    +
    size-md
    +
    size-lg
    +
    size-xl
    +
    diff --git a/apps/website/pages/docs/components/breadcrumbs.mdx b/apps/website/pages/docs/components/breadcrumbs.mdx new file mode 100644 index 0000000..b679d8a --- /dev/null +++ b/apps/website/pages/docs/components/breadcrumbs.mdx @@ -0,0 +1,127 @@ +# Breadcrumbs + +## Default + +```html +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +``` + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +## Force active + +```html +
    + +
    +``` + +
    + +
    diff --git a/apps/website/pages/docs/components/button.mdx b/apps/website/pages/docs/components/button.mdx index 8c8f401..422b881 100644 --- a/apps/website/pages/docs/components/button.mdx +++ b/apps/website/pages/docs/components/button.mdx @@ -154,6 +154,24 @@ Button colors.
    +#### Radio Typed Group + +```html +
    + + + + +
    +``` + +
    + + + + +
    + ### Loading ```html diff --git a/apps/website/pages/docs/components/checkbox.mdx b/apps/website/pages/docs/components/checkbox.mdx new file mode 100644 index 0000000..93a5bc5 --- /dev/null +++ b/apps/website/pages/docs/components/checkbox.mdx @@ -0,0 +1,75 @@ +# Checkbox + +## Default + +```html +
    + + + + +
    +``` + +
    + + + + +
    + +## Colored + +```html +
    + + + + +
    +``` + +
    + + + + +
    + +## Size + +```html +
    + + + + + +
    +``` + +
    + + + + + +
    + +## Disabled + +```html +
    + + + + +
    +``` + +
    + + + + +
    diff --git a/apps/website/pages/docs/components/drawer.mdx b/apps/website/pages/docs/components/drawer.mdx new file mode 100644 index 0000000..9c95483 --- /dev/null +++ b/apps/website/pages/docs/components/drawer.mdx @@ -0,0 +1,193 @@ +# Drawer + +import { DrawerDemo } from "../../../components/demo/drawer"; + +> For test drawer below, we add script like this to control classNames dynamically: +> +> ```js +> function toggleDrawer(name) { +> let element = document.getElementById(`drawer-${name}`); +> if (element.classList.contains("show")) { +> element.classList.remove("show"); +> } else { +> element.classList.add("show"); +> } +> } +> ``` + +## Position + +### Left + +```html +
    + + +
    +
    + +

    Your content

    +
    +
    +
    +``` + + + +### Right + +```html +
    + + +
    +
    + +

    Your content

    +
    +
    +
    +``` + + + +### Top + +```html +
    + + +
    +
    + +

    Your content

    +
    +
    +
    +``` + + + +### Bottom + +```html +
    + + +
    +
    + +

    Your content

    +
    +
    +
    +``` + + + +## Overlay click not close + +```html +
    + + +
    +
    + +

    Your content

    +
    +
    +
    +``` + + + +## No overlay + +```html +
    + +
    +
    + +

    Your content

    +
    +
    +
    +``` + + + +## Pause scroll + +```html +
    + + +
    +
    + +

    Your content

    +
    +
    +
    +``` + + diff --git a/apps/website/pages/docs/components/dropdown.mdx b/apps/website/pages/docs/components/dropdown.mdx new file mode 100644 index 0000000..8b0996d --- /dev/null +++ b/apps/website/pages/docs/components/dropdown.mdx @@ -0,0 +1,51 @@ +# Dropdown + +import { DropdownDemo } from "../../../components/demo/dropdown"; + +## Position + +Valid values: `top` `bottom` `left` `right` `top-left` `top-right` `bottom-left` `bottom-right` `left-top` `right-top` `left-bottom` `right-bottom` + +Use the specified value to modify the position of the drop-down list at the `bottom` class position of this line. + +```html {3} +
    + +
    + Profile + Account settings + Subscriptions +
    +
    +``` + +
    + + + + + + + + + + + + +
    + +## Divider + +```html +
    + +
    + Profile + + Account settings + Subscriptions +
    +
    +``` + + diff --git a/apps/website/pages/docs/components/input.mdx b/apps/website/pages/docs/components/input.mdx new file mode 100644 index 0000000..3cdf78d --- /dev/null +++ b/apps/website/pages/docs/components/input.mdx @@ -0,0 +1,71 @@ +# Input + +## Variant + +### Default + +```html + +``` + + + +### Solid + +```html + +``` + + + +### Outline + +```html + +``` + + + +## Size + +```html +
    + + + + + +
    +``` + +
    + + + + + +
    + +## Pill + +```html + +``` + + + +## Disabled + +```html + +``` + + + +## Textarea + +```html + +``` + + diff --git a/apps/website/pages/docs/components/loader.mdx b/apps/website/pages/docs/components/loader.mdx new file mode 100644 index 0000000..ac6aa07 --- /dev/null +++ b/apps/website/pages/docs/components/loader.mdx @@ -0,0 +1,127 @@ +# Loader + +## Type + +### bar-bounce + +```html +
    +
    +
    +``` + +
    +
    +
    + +### spin + +```html +
    +
    +
    +``` + +
    +
    +
    + +### bar-shake-y + +```html +
    +
    +
    +``` + +
    +
    +
    + +### bar-shake-x + +```html +
    +
    +
    +``` + +
    +
    +
    + +### flow-cross + +```html +
    +
    +
    +``` + +
    +
    +
    + +### ping-wave + +```html +
    +
    +
    +``` + +
    +
    +
    + +### dot-flash + +```html +
    +
    +
    +``` + +
    +
    +
    + +## Size + +```html +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +``` + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    diff --git a/apps/website/pages/docs/components/modal.mdx b/apps/website/pages/docs/components/modal.mdx new file mode 100644 index 0000000..de1cf56 --- /dev/null +++ b/apps/website/pages/docs/components/modal.mdx @@ -0,0 +1,39 @@ +# Modal + +import { ModalDemo } from "../../../components/demo/modal"; + +## Default + +We use this line code where the `modal` class is to apply `show` class to control the function of modal. + +```html {3-6} +
    + + + + +
    + +

    Modal title

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur dolorum + voluptate ratione dicta. Maxime cupiditate, est commodi consectetur earum + iure, optio, obcaecati in nulla saepe maiores nobis iste quasi + alias! +
    + + +
    +
    +
    +``` + + + +## Pause scroll + +Use `pause-scroll` class at `modal` layer will make page scroll paused when the modal opened. + +
    + diff --git a/apps/website/pages/docs/components/overview.mdx b/apps/website/pages/docs/components/overview.mdx index ea69991..654fcd3 100644 --- a/apps/website/pages/docs/components/overview.mdx +++ b/apps/website/pages/docs/components/overview.mdx @@ -52,7 +52,7 @@ import { ComponentOverviewCard } from "../../../components/ComponentOverview"; component={ <>
    badge
    -
    rounded
    +
    rounded
    square
    light
    diff --git a/apps/website/pages/docs/components/prompt.mdx b/apps/website/pages/docs/components/prompt.mdx new file mode 100644 index 0000000..829320b --- /dev/null +++ b/apps/website/pages/docs/components/prompt.mdx @@ -0,0 +1,262 @@ +# Prompt + +## Type + +### Default + +```html +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quod +
    +
    +``` + +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quod +
    +
    + +### Outline + +```html +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quod +
    +
    +``` + +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quod +
    +
    + +### Ghost + +```html +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quod +
    +
    +``` + +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quod +
    +
    + +## Shape + +### Default + +```html +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quod +
    +
    +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quod +
    +
    +``` + +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quod +
    +
    + +### Square + +```html +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quod +
    +
    +``` + +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quod +
    +
    + +## Icon + +```html +
    +
    + + + + + + + + + + + + + + +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quod +
    +
    +``` + +
    +
    + + + + + + + + + + + + + + +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quod +
    +
    + +## Title + +```html +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quod +
    +
    Lorem ipsum dolor sit amet
    +
    + + + + + + + + + + + + + + +
    +
    +``` + +
    +
    + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla + necessitatibus iusto laborum autem placeat aspernatur inventore eius + deleniti reprehenderit? Numquam commodi totam mollitia quod +
    +
    Lorem ipsum dolor sit amet
    +
    + + + + + + + + + + + + + + +
    +
    diff --git a/apps/website/pages/docs/components/radio.mdx b/apps/website/pages/docs/components/radio.mdx new file mode 100644 index 0000000..f25d676 --- /dev/null +++ b/apps/website/pages/docs/components/radio.mdx @@ -0,0 +1,74 @@ +# Radio + +## Default + +```html +
    + + + + +
    +``` + +
    + + + + +
    + +## Colored + +```html +
    + + + + +
    +``` + +
    + + + + +
    + +## Size + +Use `xs` `sm` `md` `lg` `xl` classes to control size of this component. + +```html +
    + + + + + +
    +``` + +
    + + + + + +
    diff --git a/apps/website/pages/docs/components/select.mdx b/apps/website/pages/docs/components/select.mdx new file mode 100644 index 0000000..83878b7 --- /dev/null +++ b/apps/website/pages/docs/components/select.mdx @@ -0,0 +1,127 @@ +# Select + +## Default + +```html + +``` + + + +## Ghost + +```html + +``` + + + +## Pill + +```html + +``` + + + +## Disabled + +```html + +``` + + + +## Size + +Use `xs` `sm` `md` `lg` `xl` classes to control size of this component as well. + +```html +
    + + + + + +
    +``` + +
    + + + + + +
    diff --git a/apps/website/pages/docs/components/switch.mdx b/apps/website/pages/docs/components/switch.mdx new file mode 100644 index 0000000..6017d49 --- /dev/null +++ b/apps/website/pages/docs/components/switch.mdx @@ -0,0 +1,91 @@ +# Switch + +## Variant + +### Default + +```html +
    + + + + +
    +``` + +
    + + + + +
    + +### Bordered + +```html +
    + + + + +
    +``` + +
    + + + + +
    + +### Ghost + +```html +
    + + + + +
    +``` + +
    + + + + +
    + +## Size + +```html +
    + + + + + +
    +``` + +
    + + + + + +
    + +## Disabled + +```html +
    + + +
    +``` + +
    + + +
    diff --git a/apps/website/pages/docs/components/table.mdx b/apps/website/pages/docs/components/table.mdx new file mode 100644 index 0000000..cb370aa --- /dev/null +++ b/apps/website/pages/docs/components/table.mdx @@ -0,0 +1,199 @@ +# Table + +## Default + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    TypeWhereDescriptionAmount
    1Cy GandertonQuality Control SpecialistBlue
    2Hart HagertyDesktop Support TechnicianPurple
    3Brice SwyreTax AccountantRed
    +``` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    TypeWhereDescriptionAmount
    1Cy GandertonQuality Control SpecialistBlue
    2Hart HagertyDesktop Support TechnicianPurple
    3Brice SwyreTax AccountantRed
    + +## Zebra + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    TypeWhereDescriptionAmount
    1Cy GandertonQuality Control SpecialistBlue
    2Hart HagertyDesktop Support TechnicianPurple
    3Brice SwyreTax AccountantRed
    +``` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    TypeWhereDescriptionAmount
    1Cy GandertonQuality Control SpecialistBlue
    2Hart HagertyDesktop Support TechnicianPurple
    3Brice SwyreTax AccountantRed
    + +## Compact + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    TypeWhereDescriptionAmount
    1Cy GandertonQuality Control SpecialistBlue
    2Hart HagertyDesktop Support TechnicianPurple
    3Brice SwyreTax AccountantRed
    +``` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    TypeWhereDescriptionAmount
    1Cy GandertonQuality Control SpecialistBlue
    2Hart HagertyDesktop Support TechnicianPurple
    3Brice SwyreTax AccountantRed
    diff --git a/apps/website/pages/docs/components/tabs.mdx b/apps/website/pages/docs/components/tabs.mdx new file mode 100644 index 0000000..8e75ffa --- /dev/null +++ b/apps/website/pages/docs/components/tabs.mdx @@ -0,0 +1,147 @@ +# Tabs + +## Default + +```html +
    +
    Tab 1
    +
    Tab 2
    +
    Tab 3
    +
    +``` + +
    +
    Tab 1
    +
    Tab 2
    +
    Tab 3
    +
    + +## Bordered + +```html +
    +
    Tab 1
    +
    Tab 2
    +
    Tab 3
    +
    +``` + +
    +
    Tab 1
    +
    Tab 2
    +
    Tab 3
    +
    + +## Pill + +```html +
    +
    Tab 1
    +
    Tab 2
    +
    Tab 3
    +
    +``` + +
    +
    Tab 1
    +
    Tab 2
    +
    Tab 3
    +
    + +## Boxed + +```html +
    +
    Tab 1
    +
    Tab 2
    +
    Tab 3
    +
    +``` + +
    +
    Tab 1
    +
    Tab 2
    +
    Tab 3
    +
    + +### Boxed with pill + +```html +
    +
    Tab 1
    +
    Tab 2
    +
    Tab 3
    +
    +``` + +
    +
    Tab 1
    +
    Tab 2
    +
    Tab 3
    +
    + +## Directions + +### Default (Top) + +```html +
    +
    Tab 1
    +
    Tab 2
    +
    Tab 3
    +
    +``` + +
    +
    Tab 1
    +
    Tab 2
    +
    Tab 3
    +
    + +### Bottom + +```html +
    +
    Tab 1
    +
    Tab 2
    +
    Tab 3
    +
    +``` + +
    +
    Tab 1
    +
    Tab 2
    +
    Tab 3
    +
    + +### Left + +```html +
    +
    Tab 1
    +
    Tab 2
    +
    Tab 3
    +
    +``` + +
    +
    Tab 1
    +
    Tab 2
    +
    Tab 3
    +
    + +### Right + +```html +
    +
    Tab 1
    +
    Tab 2
    +
    Tab 3
    +
    +``` + +
    +
    Tab 1
    +
    Tab 2
    +
    Tab 3
    +
    diff --git a/apps/website/pages/docs/components/tooltip.mdx b/apps/website/pages/docs/components/tooltip.mdx new file mode 100644 index 0000000..3ca5a1c --- /dev/null +++ b/apps/website/pages/docs/components/tooltip.mdx @@ -0,0 +1,56 @@ +# Tooltip + +Give your content string to `data-tooltip` slot attribute to plant it. + +## Position + +Use `top` `bottom` `left` `right` classes to control the position of tooltip. + +```html {1} + + + +``` + +
    + + + + + + + + + + + + +
    + +## Force show + +Apply `show` class on it to keep tooltip open. + +```html + + + +``` + + + + + +## Click to show + +The default function way of tooltip component is hover, but you can apply `click-show` class on it to change this behavior. + +```html + + + +``` + + + + diff --git a/packages/tailwind/package.json b/packages/tailwind/package.json index 70dc8f6..65ab462 100644 --- a/packages/tailwind/package.json +++ b/packages/tailwind/package.json @@ -6,6 +6,7 @@ "type": "git", "url": "git+https://github.com/riccox/sira.git" }, + "homepage": "https://sira.riccox.com", "license": "Apache-2.0", "bugs": { "url": "https://github.com/riccox/sira/issues" @@ -31,7 +32,7 @@ "dist/js", "dist/css", "LICENSE", - "README.md" + "../../README.md" ], "browserslist": [ "> 7%" diff --git a/packages/tailwind/src/style/components/badge.css b/packages/tailwind/src/style/components/badge.css index 3d22e52..56af14a 100644 --- a/packages/tailwind/src/style/components/badge.css +++ b/packages/tailwind/src/style/components/badge.css @@ -3,7 +3,7 @@ @apply inline-flex items-center whitespace-nowrap rounded-full w-fit h-fit border text-center align-middle font-bold; } -.badge.rounded { +.badge.cornered { @apply rounded-md; } @@ -33,11 +33,11 @@ } .badge.xs { - @apply p-[0.22rem] px-[0.38rem] text-[0.63rem]; + @apply py-[0.1rem] px-[0.3rem] text-[0.55rem]; } .badge.sm { - @apply py-[0.25rem] px-[0.42rem] text-[0.71rem]; + @apply py-[0.22rem] px-[0.43rem] text-[0.66rem]; } .badge.md { diff --git a/packages/tailwind/src/style/components/loader.css b/packages/tailwind/src/style/components/loader.css index 14cfa61..7db3287 100644 --- a/packages/tailwind/src/style/components/loader.css +++ b/packages/tailwind/src/style/components/loader.css @@ -314,7 +314,7 @@ .loader > .bar-bounce:after { --tw-bg-opacity: 1; background-color: rgba(var(--sira-color-500), var(--tw-bg-opacity)); - @apply absolute h-full w-full top-0 rounded; + @apply absolute top-0 rounded; @apply animate-[sira-loader-bar-bounce_1s_ease-in-out_infinite]; width: 1em; height: 4em;