[] | undefined;
10 | }
11 | const {
12 | breadcrumbsMain,
13 | breadcrumbsWords: words,
14 | title,
15 | subTitle: description,
16 | links,
17 | } = Astro.props;
18 | ---
19 |
20 |
21 |
24 |
25 |
30 | {breadcrumbsMain.text}
31 |
33 |
34 | {
35 | words.map((word, index) => (
36 |
45 | {word}
46 | {index === words.length - 1 ? null : (
47 |
50 | ))
51 | }
52 |
53 |
54 | {title}
55 |
56 |
57 | {description}
58 |
59 | {
60 | links ? (
61 |
62 | {links.map((link) =>
63 | Object.entries(link).map(([key, value]) => (
64 |
68 | ) : null
69 | }
70 |
71 |
--------------------------------------------------------------------------------
/app/src/components/docs/MdxComponents.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import Paragraph from "./mdx-components/Paragraph.astro";
3 | import DocsTab from "./mdx-components/DocsTab.astro";
4 | import TabPanel from "./mdx-components/TabPanel.astro";
5 | import Heading2 from "./mdx-components/Heading2.astro";
6 | import Heading3 from "./mdx-components/Heading3.astro";
7 | import Callout from "./mdx-components/Callout.astro";
8 | import Ol from "./mdx-components/Ol.astro";
9 | import Ul from "./mdx-components/Ul.astro";
10 | import Table from "./mdx-components/Table.astro";
11 | import THead from "./mdx-components/THead.astro";
12 | import TBody from "./mdx-components/TBody.astro";
13 | import Li from "./mdx-components/Li.astro";
14 | import Steps from "./mdx-components/Steps.astro";
15 | import Step from "./mdx-components/Step.astro";
16 | import BoxCode from "./mdx-components/BoxCode.astro";
17 | import Codebloc from "./mdx-components/Codebloc.astro";
18 | import BlockCode from "./mdx-components/BlockCode.astro";
19 | import DocLink from "./mdx-components/DocLink.astro";
20 | import DemoBox from "./mdx-components/DemoBox.astro";
21 | import LinkCard from "./mdx-components/LinkCard.astro";
22 | import UiWrapper from "./mdx-components/UiWrapper.astro";
23 | import ComponentPreview from "./mdx-components/ComponentPreview.astro";
24 | import ComponentPreviewOnly from "./mdx-components/ComponentPreviewOnly.astro";
25 | import ComponentPrev from "./mdx-components/ComponentPrev.astro";
26 | import CodeGroupBox from "./mdx-components/CodeGroupBox.astro";
27 |
28 | export const components = {
29 | Tabs: DocsTab,
30 | TabPanel,
31 | Callout,
32 | Steps,
33 | Step,
34 | BoxCode,
35 | BlockCode,
36 | DemoBox,
37 | LinkCard,
38 | UiWrapper,
39 | CodeGroupBox,
40 | p: Paragraph,
41 | h2: Heading2,
42 | h3: Heading3,
43 | li: Li,
44 | ol: Ol,
45 | ul: Ul,
46 | a: DocLink,
47 | table: Table,
48 | thead: THead,
49 | tbody: TBody,
50 | pre: Codebloc,
51 | ComponentPreview,
52 | PreviewBox: ComponentPreviewOnly,
53 | Preview:ComponentPrev
54 | };
55 | ---
56 |
--------------------------------------------------------------------------------
/app/src/components/docs/base/DocResLink.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import UiLink from "@components/atoms/UiLink.astro";
3 | type Props = {
4 | href: string;
5 | text: string;
6 | }
7 |
8 | const { href, text } = Astro.props;
9 |
10 | const isNotExternal = (href: string) =>
11 | href.startsWith("/") || href.startsWith("#");
12 | ---
13 |
14 |
15 | {text}
16 | {
17 | isNotExternal(href) ? null : (
18 |
22 |
--------------------------------------------------------------------------------
/app/src/components/docs/base/GroupItem.astro:
--------------------------------------------------------------------------------
1 | ---
2 | type Props = {
3 | icon: string;
4 | title: string;
5 | path: string;
6 | isActive: boolean;
7 | }
8 | const { icon, title, path, isActive } = Astro.props;
9 | ---
10 |
11 |
12 |
19 |
24 |
26 |
27 | {title}
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/app/src/components/docs/base/ScrollableY.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { HTMLAttributes } from "astro/types";
3 |
4 | type Props = HTMLAttributes<"div">
5 |
6 | const { class: className = "", ...rest } = Astro.props;
7 | ---
8 |
9 |
15 |
17 |
--------------------------------------------------------------------------------
/app/src/components/docs/base/SidebarGroup.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import SidebarItemBlock from "./SidebarItemBlock.astro";
3 |
4 | type Props = {
5 | activeItem: string;
6 | label: string;
7 | items: {
8 | title: string;
9 | path: string;
10 | state?: "updated" | "draft" | "new" | "none" | "wip";
11 | }[];
12 | };
13 | const { label, items, activeItem } = Astro.props;
14 | ---
15 |
16 |
67 |
--------------------------------------------------------------------------------
/app/src/components/docs/base/SidebarItemBlock.astro:
--------------------------------------------------------------------------------
1 | ---
2 | type Props = {
3 | label: string;
4 | }
5 |
6 | const { label } = Astro.props;
7 | ---
8 |
9 |
12 | {label}
13 |
14 |
15 |
17 |
--------------------------------------------------------------------------------
/app/src/components/docs/base/TopDocsNav.astro:
--------------------------------------------------------------------------------
1 | ---
2 | type Props = {
3 | hideTableOfContent?: boolean;
4 | }
5 |
6 | const { hideTableOfContent } = Astro.props;
7 | ---
8 |
9 |
12 |
13 |
16 |
22 |
24 | {
25 | !hideTableOfContent ? (
26 |
32 | On this page
33 |
38 | ) : null
39 | }
40 |
41 |
34 | {
35 | withoutIcon ? null : (
36 |
37 |
39 | )
40 | }
41 |
42 |
44 |
12 |
13 |
14 |
15 |
16 |
18 |
19 |
--------------------------------------------------------------------------------
/app/src/components/docs/mdx-components/CodeGroupBox.astro:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/app/src/components/docs/mdx-components/Codebloc.astro:
--------------------------------------------------------------------------------
1 | ---
2 | type Props = {
3 | noBorderRadiusTop?: boolean;
4 | }
5 |
6 | const { noBorderRadiusTop } = Astro.props;
7 | ---
8 |
9 |
30 |
--------------------------------------------------------------------------------
/app/src/components/docs/mdx-components/ComponentPrev.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import dynamic from "astro:import";
3 |
4 | type Props = {
5 | name: string;
6 | props?: any;
7 | };
8 |
9 | const { name, props = {} } = Astro.props;
10 |
11 | const toImport = `components/registry/${name}.astro`;
12 | const Component = await dynamic(toImport);
13 | ---
14 |
15 |
23 |
--------------------------------------------------------------------------------
/app/src/components/docs/mdx-components/ComponentPreviewOnly.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import dynamic from "astro:import";
3 | import BlockCode from "./BlockCode.astro";
4 |
5 | type Props = {
6 | name: string;
7 | props?: any;
8 | };
9 |
10 | const { name, props = {} } = Astro.props;
11 |
12 | const toImport = `components/registry/${name}.astro`;
13 | const Component = await dynamic(toImport);
14 | ---
15 |
16 |
17 |
21 |
23 |
24 |
26 |
18 |
20 |
--------------------------------------------------------------------------------
/app/src/components/docs/mdx-components/DocLink.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import UiLink from "@components/atoms/UiLink.astro";
3 | import type { HTMLAttributes } from "astro/types";
4 |
5 | type Props = HTMLAttributes<"a">
6 | const { href } = Astro.props;
7 | const href_ = href as string;
8 | const isInternalLink =
9 | (href_ && href_.startsWith("/")) || (href_ && href_.startsWith("#"));
10 | ---
11 |
12 |
16 |
21 |
--------------------------------------------------------------------------------
/app/src/components/docs/mdx-components/DocsTab.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { HTMLAttributes } from "astro/types";
3 | type Props = {
4 | values: string[];
5 | docPanelClass?: string;
6 | } & HTMLAttributes<"div">;
7 |
8 | const { values, docPanelClass, ...rest } = Astro.props;
9 | ---
10 |
11 |
18 |
23 | {
24 | values.map((value) => (
25 |
26 |
35 | {value}
36 |
37 |
38 | ))
39 | }
40 |
41 |
45 |
47 |
8 |
--------------------------------------------------------------------------------
/app/src/components/docs/mdx-components/Heading3.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { HTMLAttributes} from "astro/types"
3 | type Props = HTMLAttributes<"h3">
4 | const {...rest} = Astro.props
5 | ---
6 |
7 |
8 |
--------------------------------------------------------------------------------
/app/src/components/docs/mdx-components/Li.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { HTMLAttributes } from "astro/types"
3 |
4 | type Props = HTMLAttributes<"li">
5 |
6 | const { ...rest } = Astro.props
7 | ---
8 |
9 |
--------------------------------------------------------------------------------
/app/src/components/docs/mdx-components/LinkCard.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import UiLink from "@components/atoms/UiLink.astro";
3 |
4 |
5 | type Props = {
6 | href: string;
7 | title: string;
8 | padding: number;
9 | type?: "soft" | "ghost" | "white";
10 | }
11 | const { href, padding, title, type = "white" } = Astro.props;
12 | ---
13 |
14 | div]:text-fg ease-linear duration-200",
18 | {
19 | "p1 space-y-0.5": padding === 1,
20 | "p2 space-y-1": padding === 2,
21 | "p3 space-y-1": padding === 3,
22 | "p4 space-y-1.5": padding === 4,
23 | "p5 space-y-1.5": padding === 5,
24 | "p6 space-y-2": padding === 6,
25 | "btn-soft btn-soft-gray": type === "soft",
26 | "btn-ghost btn-ghost-gray": type === "ghost",
27 | "b b-border text-fg hover-b-border-light hover-bg-bg-light":type==="white"
28 | },
29 | ]}
30 | >{title}
31 |
33 |
--------------------------------------------------------------------------------
/app/src/components/docs/mdx-components/Ol.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { HTMLAttributes } from "astro/types"
3 |
4 | type Props = HTMLAttributes<"ol">
5 |
6 | const { ...rest } = Astro.props
7 | ---
8 |
9 |
--------------------------------------------------------------------------------
/app/src/components/docs/mdx-components/Paragraph.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { HTMLAttributes } from "astro/types";
3 |
4 | type Props = HTMLAttributes<"p">
5 | const { class: className, ...rest } = Astro.props;
6 | ---
7 |
8 |
9 |
11 |
--------------------------------------------------------------------------------
/app/src/components/docs/mdx-components/Step.astro:
--------------------------------------------------------------------------------
1 |
6 |
8 |
--------------------------------------------------------------------------------
/app/src/components/docs/mdx-components/Steps.astro:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
45 |
--------------------------------------------------------------------------------
/app/src/components/docs/mdx-components/TBody.astro:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/app/src/components/docs/mdx-components/THead.astro:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/app/src/components/docs/mdx-components/TabPanel.astro:
--------------------------------------------------------------------------------
1 | ---
2 | type Props = {
3 | value: string;
4 | active?: boolean;
5 | noBorder?: boolean;
6 | noBg?: string;
7 | class?: string;
8 | };
9 |
10 | const { value, active, class: className } = Astro.props;
11 | ---
12 |
13 |
25 |
--------------------------------------------------------------------------------
/app/src/components/docs/mdx-components/Table.astro:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/src/components/docs/mdx-components/UiWrapper.astro:
--------------------------------------------------------------------------------
1 | ---
2 | type Props = {
3 | col: "1-2" | "1-2-3" | "2-4" | "1-2-4";
4 | gap?: number;
5 | }
6 |
7 | const { col, gap } = Astro.props;
8 | ---
9 |
10 |
27 |
29 |
--------------------------------------------------------------------------------
/app/src/components/docs/mdx-components/Ul.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { HTMLAttributes } from "astro/types";
3 |
4 | type Props = HTMLAttributes<"ul">
5 |
6 | const { ...rest } = Astro.props;
7 | ---
8 |
9 |
16 |
--------------------------------------------------------------------------------
/app/src/components/docs/ui/BoxTableOfContent.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { MarkdownHeading } from "astro";
3 | import ScrollableY from "../base/ScrollableY.astro";
4 | import TableOfContent from "./TableOfContent.astro";
5 | import ContribDoc from "./ContribDoc.astro";
6 | type Props = {
7 | headings: MarkdownHeading[];
8 | fileName: string;
9 | contribUrl: string;
10 | discussionLink?:string
11 | }
12 |
13 | const { headings, fileName, contribUrl, discussionLink } = Astro.props;
14 | ---
15 |
16 |
21 |
22 |
23 |
24 |
On this page
25 |
28 |
29 |
30 |
32 |
22 |
23 |
24 |
25 | Published under MIT License
29 |
30 |
31 | {
32 | links.map((link) => (
33 |
38 | {link.text}
39 | {link.href.startsWith("/") || link.href.startsWith("#") ? null : (
40 |
43 | ))
44 | }
45 |
46 |
47 |
49 |
50 |
51 | © unifyuidev 2023 - Present. By UnifyUIDev Team in DRC.
52 |
53 |
55 |
--------------------------------------------------------------------------------
/app/src/components/docs/ui/TableOfContent.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { MarkdownHeading } from "astro";
3 | import TableOfContentsHeading from "./TableOfContentsHeading.astro";
4 |
5 | type Props = {
6 | headings: MarkdownHeading[];
7 | };
8 |
9 | type HeadingWithSubheadings = MarkdownHeading & {
10 | subheadings: MarkdownHeading[];
11 | };
12 |
13 | const { headings } = Astro.props;
14 |
15 | const grouppedHeadings = headings.reduce((array, heading) => {
16 | if (heading.depth === 2) {
17 | array.push({ ...heading, subheadings: [] });
18 | } else if (heading.depth === 3) {
19 | array.at(-1)?.subheadings.push(heading);
20 | }
21 |
22 | return array;
23 | }, [] as HeadingWithSubheadings[]);
24 | ---
25 |
26 |
31 |
32 | {grouppedHeadings.map((h) =>
34 |
35 |
36 |
--------------------------------------------------------------------------------
/app/src/components/docs/ui/TableOfContentsHeading.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { MarkdownHeading } from "astro";
3 |
4 | type HeadingWithSubheadings = MarkdownHeading & {
5 | subheadings: MarkdownHeading[];
6 | };
7 |
8 | type Props = {
9 | heading: HeadingWithSubheadings;
10 | }
11 |
12 | const { heading: h } = Astro.props;
13 | ---
14 |
15 |
16 |
20 | {h.text}
21 |
22 | {h.subheadings.length > 0 && (
23 |
24 | {h.subheadings.map((sub) => (
25 |
26 |
30 | {sub.text}
31 |
32 |
33 | ))}
34 |
35 | )}
36 |
--------------------------------------------------------------------------------
/app/src/components/molecules/SEO.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { siteUrl, site_domain } from "@/const/index";
3 | import { type SeoType } from "@/types/index";
4 |
5 | export type Props = {
6 | seo: SeoType;
7 | }
8 |
9 | const {
10 | seo: { title, ogImage, description, keywords },
11 | } = Astro.props;
12 | ---
13 |
14 | {title}
21 |
2 |
3 |
5 | Is it accessible?
6 |
9 |
10 |
11 | Yes. It adheres to the WAI-ARIA design pattern.
12 |
13 |
14 |
15 |
16 |
18 | Is it unstyled?
19 |
22 |
23 |
24 | Yes. It's unstyled by default, giving you freedom over the look and feel.
25 |
26 |
27 |
28 |
29 |
31 | Can it be animated?
32 |
35 |
36 |
37 | Yes! You can use the transition prop to configure the animation.
38 |
39 |
40 |
41 |
2 |
3 |
5 | Is it accessible?
6 |
9 |
10 |
11 | Yes. It adheres to the WAI-ARIA design pattern.
12 |
13 |
14 |
15 |
16 |
18 | Is it unstyled?
19 |
22 |
23 |
24 | Yes. It's unstyled by default, giving you freedom over the look and feel.
25 |
26 |
27 |
28 |
29 |
31 | Can it be animated?
32 |
35 |
36 |
37 | Yes! You can use the transition prop to configure the animation.
38 |
39 |
40 |
41 |
2 |
3 |
5 | Is it accessible?
6 |
9 |
10 |
11 | Yes. It adheres to the WAI-ARIA design pattern.
12 |
13 |
14 |
15 |
16 |
18 | Is it unstyled?
19 |
22 |
23 |
24 | Yes. It's unstyled by default, giving you freedom over the look and feel.
25 |
26 |
27 |
28 |
29 |
31 | Can it be animated?
32 |
35 |
36 |
37 | Yes! You can use the transition prop to configure the animation.
38 |
39 |
40 |
41 |
2 |
4 |
6 | Is it accessible?
7 |
10 |
11 |
12 | Yes. It adheres to the WAI-ARIA design pattern.
13 |
14 |
15 |
16 |
18 |
20 | Is it unstyled?
21 |
24 |
25 |
26 | Yes. It's unstyled by default, giving you freedom over the look and feel.
27 |
28 |
29 |
30 |
32 |
34 | Can it be animated?
35 |
38 |
39 |
40 | Yes! You can use the transition prop to configure the animation.
41 |
42 |
43 |
44 |
2 |
3 |
5 | Is it accessible?
6 |
9 |
10 |
11 | Yes. It adheres to the WAI-ARIA design pattern.
12 |
13 |
14 |
15 |
16 |
18 | Is it unstyled?
19 |
22 |
23 |
24 | Yes. It's unstyled by default, giving you freedom over the look and feel.
25 |
26 |
27 |
28 |
29 |
31 | Can it be animated?
32 |
35 |
36 |
37 | Yes! You can use the transition prop to configure the animation.
38 |
39 |
40 |
41 |
2 |
4 |
6 | Is it accessible?
7 |
10 |
11 |
12 | Yes. It adheres to the WAI-ARIA design pattern.
13 |
14 |
15 |
16 |
18 |
20 | Is it unstyled?
21 |
24 |
25 |
26 | Yes. It's unstyled by default, giving you freedom over the look and feel.
27 |
28 |
29 |
30 |
32 |
34 | Can it be animated?
35 |
38 |
39 |
40 | Yes! You can use the transition prop to configure the animation.
41 |
42 |
43 |
44 |
2 |
3 |
5 |
6 |
The data export you requested is ready!
7 |
8 |
12 | View the Data
13 |
14 |
15 |
16 |
2 |
3 |
4 | You can add components to your app using the ou CLI.
5 |
6 |
7 |
8 |
9 |
10 |
11 | You can add components to your app using the ou CLI.
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | You can add components to your app using the ou CLI.
20 |
21 |
22 |
23 |
2 |
3 |
You can add components to your app using the ou CLI.
4 |
5 |
6 |
You can add components to your app using the ou CLI.
7 |
8 |
9 |
With Border
10 |
11 | You can add components to your app using the ou CLI.
12 |
13 |
14 |
15 |
16 | You can add components to your app using the ou CLI.
17 |
18 |
19 |
2 |
3 |
4 |
You can add components to your app using the ou CLI.
5 |
6 |
7 |
You can add components to your app using the ou CLI.
8 |
9 |
10 |
You can add components to your app using the ou CLI.
11 |
12 |
13 |
14 | You can add components to your app using the ou CLI.
15 |
16 |
17 |
2 |
3 |
4 | Alert with title : default
5 |
6 |
7 | You can add components to your app using the ou CLI.
8 |
9 |
10 |
11 |
12 |
14 |
15 |
16 | Alert with title & Icon : default Reverse
17 |
18 |
19 | You can add components to your app using the ou CLI.
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | Alert with title & Icon : default Reverse
28 |
29 |
30 | You can add components to your app using the ou CLI.
31 |
32 |
33 |
34 |
2 |
4 |
2 |
4 |
2 |
4 |
2 |
4 |
2 |
4 |
6 |
10 |
--------------------------------------------------------------------------------
/app/src/components/registry/avatar/AvatarPlace.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import ImageSize from "./ImageSize.astro";
3 | ---
4 |
5 |
6 |
--------------------------------------------------------------------------------
/app/src/components/registry/avatar/AvatarUI.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import ImageSize from "./ImageSize.astro";
3 | ---
4 |
5 |
6 |
--------------------------------------------------------------------------------
/app/src/components/registry/badge/Default.astro:
--------------------------------------------------------------------------------
1 |
2 | Badge
3 | Badge
4 | Badge
5 | Badge
6 | Badge
7 |
--------------------------------------------------------------------------------
/app/src/components/registry/badge/Outline.astro:
--------------------------------------------------------------------------------
1 |
2 | Badge Gray
3 | Badge Neutral
4 | Badge Primary
5 | Badge Secondary
6 | Badge Accent
7 | Badge Warning
8 | Badge danger
9 | Badge Info
10 | Badge Success
11 |
--------------------------------------------------------------------------------
/app/src/components/registry/badge/Soft.astro:
--------------------------------------------------------------------------------
1 |
2 | Badge Gray
3 | Badge Neutral
4 | Badge Primary
5 | Badge Secondary
6 | Badge Accent
7 | Badge Warning
8 | Badge danger
9 | Badge Info
10 | Badge Success
11 |
--------------------------------------------------------------------------------
/app/src/components/registry/badge/Solid.astro:
--------------------------------------------------------------------------------
1 |
2 | Badge Gray
3 | Badge Neutral
4 | Badge Primary
5 | Badge Secondary
6 | Badge Accent
7 | Badge Warning
8 | Badge danger
9 | Badge Info
10 | Badge Success
11 |
--------------------------------------------------------------------------------
/app/src/components/registry/badge/Subtle.astro:
--------------------------------------------------------------------------------
1 |
2 | Badge Gray
3 | Badge Neutral
4 | Badge Primary
5 | Badge Secondary
6 | Badge Accent
7 | Badge Warning
8 | Badge danger
9 | Badge Info
10 | Badge Success
11 |
--------------------------------------------------------------------------------
/app/src/components/registry/badge/WithIcon.astro:
--------------------------------------------------------------------------------
1 |
2 |
3 | 12%
4 |
6 |
7 | 50%
8 |
10 |
11 | You're reaching out your limit
12 |
14 |
--------------------------------------------------------------------------------
/app/src/components/registry/button/Button.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import type { BtnSizeVariant, CornerRadius } from "@/types/index";
3 | import type { HTMLAttributes } from "astro/types";
4 |
5 | type Props = {
6 | variant?: "soft" | "outline" | "solid" | "ghost";
7 | size?: BtnSizeVariant;
8 | radius?: CornerRadius;
9 | } & HTMLAttributes<"button">;
10 |
11 | const variants = {
12 | solid: "btn-solid",
13 | soft: "btn-soft",
14 | outline: "btn-outline",
15 | ghost: "btn-ghost",
16 | };
17 | const sizes = {
18 | xs: "btn-xs",
19 | sm: "btn-sm",
20 | md: "btn-md",
21 | lg: "btn-lg",
22 | xl: "btn-xl",
23 | "icon-xs": "btn-icon-xs",
24 | "icon-sm": "btn-icon-sm",
25 | "icon-md": "btn-icon-md",
26 | "icon-lg": "btn-icon-lg",
27 | "icon-xl": "btn-icon-xl",
28 | };
29 |
30 | const cornerRadius = {
31 | sm: "rd-sm",
32 | md: "rd-md",
33 | lg: "rd-lg",
34 | xl: "rd-xl",
35 | "2xl": "rd-2xl",
36 | "3xl": "rd-3xl",
37 | full: "rd-full",
38 | };
39 |
40 | const {
41 | size = "md",
42 | radius = "lg",
43 | class: className = "",
44 | variant = "solid",
45 | ...rest
46 | } = Astro.props;
47 | ---
48 |
49 |
59 |
61 |
--------------------------------------------------------------------------------
/app/src/components/registry/button/Default.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import Button from "./Button.astro";
3 | ---
4 |
5 |
6 | Click Me
7 |
--------------------------------------------------------------------------------
/app/src/components/registry/button/IconSizes.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import Button from "./Button.astro";
3 | ---
4 |
5 |
6 |
8 |
9 |
11 |
12 |
14 |
15 |
17 |
18 |
20 |
--------------------------------------------------------------------------------
/app/src/components/registry/button/Sizes.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import Button from "./Button.astro";
3 | ---
4 |
5 |
6 | Click me
7 |
8 |
9 | Click me
10 |
11 |
12 | Click me
13 |
14 |
15 | Click me
16 |
17 |
18 | Click me
19 |
20 |
--------------------------------------------------------------------------------
/app/src/components/registry/button/WithIcon.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import Button from "./Button.astro";
3 | ---
4 |
5 |
6 |
10 |
13 |
17 | trailing
18 |
20 |
21 |
--------------------------------------------------------------------------------
/app/src/components/registry/card/Default.astro:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Card Title
9 |
10 | Lorem ipsum dolor sit amet consectetur adipisicing elit.
11 |
12 |
13 |
14 |
2 |
3 |
4 |
5 |
7 |
9 | -40%
10 |
11 |
13 |
15 |
16 |
17 |
18 |
19 |
20 | Air Nike
21 |
22 | 12$
23 |
24 |
25 |
26 |
2 |
3 |
4 |
5 |
6 | Top Seller
7 |
8 |
9 |
10 |
11 |
12 |
13 | Air Nike
14 |
15 | 12$
16 |
17 |
18 |
19 | Colored
20 |
21 |
23 | Add to card
24 |
25 |
26 |
27 |
28 |
29 |
2 |
3 |
Business Plan
4 |
5 | Lorem ipsum dolor sit amet consectetur, adipisicing elit.
6 |
7 |
8 |
10 | $400
11 |
12 |
13 | lifetime
14 |
15 |
16 |
17 |
18 |
21 |
22 |
25 |
26 |
29 |
30 |
33 |
34 |
37 |
38 |
39 | Get Started
40 |
41 |
42 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Card Title
10 |
11 | Lorem ipsum dolor sit amet consectetur adipisicing elit.
12 |
13 |
14 |
15 |
16 |
2 |
2 |
3 | Label Start
4 |
5 |
6 | Label Center
7 |
8 |
9 | Label Start
10 |
11 |
12 | Custom label
13 |
14 |
4 | User Setting
5 |
7 |
24 |
--------------------------------------------------------------------------------
/app/src/components/registry/dropdown/code_Dropdown.ts:
--------------------------------------------------------------------------------
1 | import type { ComponentCode } from "@/types/index";
2 |
3 | export const codeDropdowns: ComponentCode = {
4 | 'dropdown/Default':{
5 | lang:"html",
6 | name:"index.html",
7 | code:`
8 |
11 | User Setting
12 |
14 | `
31 | },
32 | }
--------------------------------------------------------------------------------
/app/src/components/registry/input/Default.astro:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/src/components/registry/input/Leading.astro:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/src/components/registry/input/Trailing.astro:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/src/components/registry/input/WithLabel.astro:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/src/components/registry/kbd/Default.astro:
--------------------------------------------------------------------------------
1 |
2 |
3 | kbd xs
4 |
5 |
6 | Kbd sm
7 |
8 |
9 | Kbd md
10 |
11 |
12 | Kbd lg
13 |
14 |
15 | Kbd xl
16 |
17 |
--------------------------------------------------------------------------------
/app/src/components/registry/kbd/Grouped.astro:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 | +
8 | B
9 |
10 |
11 | And
12 |
13 |
14 |
15 |
17 | + R
18 |
19 |
20 |
2 |
3 |
4 |
6 |
7 |
8 |
10 |
11 | /
12 |
13 |
2 |
--------------------------------------------------------------------------------
/app/src/components/registry/meter/MeterSize.astro:
--------------------------------------------------------------------------------
1 |
2 |
33 |
--------------------------------------------------------------------------------
/app/src/components/registry/meter/ProgIndicator.astro:
--------------------------------------------------------------------------------
1 |
2 |
12 |
13 |
18 |
22 | 70%
23 |
24 |
25 |
2 |
3 |
4 |
5 |
7 |
8 |
9 |
10 | 1
11 |
12 |
13 |
14 |
15 | 2
16 |
17 |
18 |
19 |
20 | 3
21 |
22 |
23 |
24 |
25 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/app/src/components/registry/pagination/Default.astro:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/src/components/registry/pagination/WithIcon.astro:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
8 |
9 |
10 |
11 | 1
12 |
13 |
14 |
15 |
16 | 2
17 |
18 |
19 |
20 |
21 | 3
22 |
23 |
24 |
25 |
26 | Next
27 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/app/src/components/registry/popover/Default.astro:
--------------------------------------------------------------------------------
1 |
2 |
4 | Show Content
5 |
6 |
12 |
3 |
6 |
Johnkat MJ
7 | FrontEnd Designer
8 |
9 |
10 |
12 |
13 |
14 |
John Doe
15 |
12k followers
16 |
17 |
19 | Follow
20 |
21 |
10 | Show Content
11 |
12 | `
18 | },
19 |
20 | }
--------------------------------------------------------------------------------
/app/src/components/registry/progress/Default.astro:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/src/components/registry/progress/ProgressIndicator.astro:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 | 40%
12 |
13 |
15 |
16 |
2 |
4 |
6 |
8 |
10 |
12 |
14 |
2 |
3 |
8 |
9 | Installing ...
10 |
11 |
12 |
20 |
44 |
66 |
26 |
27 |
31 |
32 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/app/src/components/vuejs/CustomCodeBlock.vue:
--------------------------------------------------------------------------------
1 |
25 |
26 |
--------------------------------------------------------------------------------
/app/src/components/vuejs/NewsLetterForm.vue:
--------------------------------------------------------------------------------
1 |
19 |
20 |
40 |
--------------------------------------------------------------------------------
/app/src/config/shikiconfig.ts:
--------------------------------------------------------------------------------
1 | import { createCssVariablesTheme } from 'shiki'
2 |
3 | export const cssVariables = createCssVariablesTheme({
4 | variablePrefix: '--astro-code-',
5 | variableDefaults: {},
6 | })
--------------------------------------------------------------------------------
/app/src/const/index.ts:
--------------------------------------------------------------------------------
1 | export const siteUrl = "import.meta.env.SITE"
2 | export const keywordsDef = "UnifyUI, Unify, Unify UI, Unify Components, UnoCSS, Uno CSS, Atomic UI, Atomic CSS, UnoCSS Components, Modern Components, Uno Components, UnoCSS Components"
3 | export const defaultOgImage = "/ui.png"
4 | export const defaultOgAlt = "UnifyUI : "
5 |
6 | export const site_domain = "siteUrl"
7 |
8 | export const twitterLink = 'https://twitter.com/johnkat_Mj'
9 | export const discordServer = 'https://discord.gg/6VN6zTPZAy'
10 | export const githubUrl = 'https://github.com/unoforge'
11 | export const repositoryUrl = "https://github.com/unoforge/unify-ui"
12 | export const repositoryUrlPreset = "https://github.com/unoforge/unify-preset"
13 |
14 | export const repoContentLocation = "https://github.com/unoforge/unify-ui/blob/main/app"
15 | export const orgUrl = "https://github.com/unoforge/"
16 | export const startDiscussion = "https://github.com/unoforge/unify-ui/discussions"
17 | export const startDiscussionPreset = "https://github.com/unoforge/unify-preset/discussions"
18 | export const contribUrl = 'https://github.com/unoforge/unify-ui/blob/main/CONTRIBUTING.MD'
19 | export const contribUrlPreset = 'https://github.com/unoforge/unify-preset/blob/main/CONTRIBUTING.MD'
20 |
--------------------------------------------------------------------------------
/app/src/content.config.ts:
--------------------------------------------------------------------------------
1 | import { defineCollection, z } from 'astro:content';
2 | import { glob, file } from 'astro/loaders'; // Not available with legacy API
3 |
4 |
5 | const linkSchema = z.array(z.record(z.string().trim()));
6 |
7 | const docSchema = z.object({
8 | title: z.string(),
9 | description: z.string(),
10 | hideTableOfContent:z.boolean().optional(),
11 | links: linkSchema.optional()
12 | })
13 | const documentation = defineCollection({
14 | loader: glob({ pattern: "**/[^_]*.mdx", base: "./src/docs-content/documentation" }),
15 | schema: docSchema
16 | })
17 |
18 | const preset = defineCollection({
19 | loader: glob({ pattern: "**/[^_]*.mdx", base: "./src/docs-content/preset" }),
20 | schema: docSchema
21 | })
22 |
23 | const components = defineCollection({
24 | loader: glob({ pattern: "**/[^_]*.mdx", base: "./src/docs-content/components" }),
25 | schema: docSchema
26 | })
27 |
28 |
29 | // export const collections = {
30 | // docs: docsCollection,
31 | // components:docsCollection,
32 | // preset:docsCollection
33 | // };
34 |
35 | export const collections = { documentation, components, preset: preset };
36 |
--------------------------------------------------------------------------------
/app/src/data/index.ts:
--------------------------------------------------------------------------------
1 | export { sidebarItems } from "./docSidebar"
2 |
3 |
--------------------------------------------------------------------------------
/app/src/docs-content/components/accordion.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: UnoCSS Accordion
3 | description: Display togglable accordion panels.
4 | links:
5 | - 'PresetUI' : /preset/utilities/common
6 | - 'Flexilla Accordion' : https://flexilla-docs.vercel.app/docs/accordion
7 | ---
8 |
9 |
10 |
11 | ## Example
12 |
13 |
16 | This component require JS. By default we're using our own Interactive Component Library [Flexilla](https://flexilla-docs.vercel.app/)
17 |
18 |
19 |
20 | ### Adding JS
21 |
22 |
23 | ```js
24 | import { Accordion } from "@flexilla/flexilla"
25 | Accordion.autoInit('[data-accordion]')
26 | ```
27 |
28 |
29 | ## Variants
30 |
31 | ### Solid
32 |
33 |
9 | ```html
10 |
11 |
13 |
17 |
18 | ## Square
19 |
20 |
21 | ```html
22 |
23 |
25 |
28 |
29 | ## 35mm film
30 |
31 |
32 | ```html
33 |
34 |
36 |
39 |
40 | ## Standard TV/Monitor
41 |
42 |
43 | ```html
44 |
45 |
47 |
50 |
51 | ## Ultrawide monitor
52 |
53 |
54 | ```html
55 |
56 |
58 |
61 |
--------------------------------------------------------------------------------
/app/src/docs-content/components/avatar.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Avatar
3 | description: An image element for representing the user.
4 | ---
5 |
6 | ## Size
7 |
8 |
9 | ```html
10 |
11 |
12 |
13 |
14 |
15 |
16 |
19 |
20 | ## PlaceHolder
21 |
22 | ### With Text
23 |
24 |
25 | ```html
26 |
27 |
JK
28 |
JK
29 |
JK
30 |
33 |
34 | ### With Icon
35 |
36 |
37 | ```html
38 |
39 |
40 |
42 |
43 |
45 |
46 |
48 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/app/src/docs-content/components/card.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Card
3 | description: Cards provide a flexible and extensible content container with multiple variants and options.
4 | ---
5 |
6 |
10 | ```html
11 |
21 | ```
22 |
--------------------------------------------------------------------------------
/app/src/docs-content/components/divider.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Divider
3 | description: Insert a horizontal rule or a thematic break to divide or separate sections.
4 | ---
5 |
6 |
7 | ## Default
8 |
9 | ```html
10 |
11 |
18 |
19 | ## With Label
20 |
21 |
22 | ```html
23 |
24 |
25 | Label Start
26 |
27 |
28 | Label Center
29 |
30 |
31 | Label Start
32 |
33 |
34 | Custom label
35 |
36 |
--------------------------------------------------------------------------------
/app/src/docs-content/components/dropdown.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Dropdown
3 | description: A customizable menu that allows users to select an option from a list.
4 | ---
5 |
6 | ## Default
7 |
8 |
11 | ```html
12 |
29 | ```
30 |
31 |
32 | ## With icon
33 |
34 |
35 | ```html
36 |
56 | ```
57 |
58 |
59 | ## Button Link
60 |
61 |
62 | ```html
63 |
72 | ```
73 |
--------------------------------------------------------------------------------
/app/src/docs-content/documentation/framework-guide/astrojs.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Install with ViteJS
3 | description: Use UnoCSS within your ViteJS project
4 | ---
5 |
6 | This guide will help you get started with UnifyUI, how to install and integrate it in your new or existing ViteJS project.
7 |
8 |
--------------------------------------------------------------------------------
/app/src/docs-content/documentation/framework-guide/index.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Framework Guide
3 | description: Use UnifyUI + UnoCSS with your favorite framework
4 | ---
5 |
6 | This guide will help you how to use UnoCSS + UnifyUI, how to install and integrate it in your new or existing project!
7 | How to install dependencies and structure your app.
8 |
9 |
--------------------------------------------------------------------------------
/app/src/docs-content/documentation/framework-guide/laravel.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Install with Laravel
3 | description: Use UnoCSS within your Laravel project
4 | ---
5 |
6 | This guide will help you get started with UnifyUI, how to install and integrate it in your new or existing Laravel project.
7 |
8 |
--------------------------------------------------------------------------------
/app/src/docs-content/documentation/framework-guide/static.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Install In any Static Site
3 | description: Use UnoCSS within your Static Site
4 | ---
5 |
6 | This guide will help you get started with UnifyUI, how to install and integrate it in following projects
7 | - Symfony
8 | - Django
9 | - Static Site
10 |
11 |
--------------------------------------------------------------------------------
/app/src/docs-content/documentation/framework-guide/vitejs.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Install with ViteJS
3 | description: Use UnoCSS within your ViteJS project
4 | ---
5 |
6 | This guide will help you get started with UnifyUI, how to install and integrate it in your new or existing ViteJS project.
7 |
8 |
--------------------------------------------------------------------------------
/app/src/docs-content/documentation/installation.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: UnifyUI - Installation
3 | description: something
4 | ---
5 |
6 | ## Quick setup
7 |
8 | This guide will help you get started with UnifyUI
9 |
10 | ## Installation
11 |
12 | We need to have `UnoCSS` & `Preset UI` installed.
13 |
14 |
15 |
16 | ### Installation
17 |
18 | ```bash
19 | npm i -D unocss @unifydev/preset-ui
20 | ```
21 |
22 |
23 | To learn more about installing UnoCSS and PresetUI, check [this guide](/preset/installation)
24 |
25 |
26 | ### Add interactivity
27 |
28 | If you're willing to use interactive component then make sure to have [Flexilla]() installed or the corresponding Flexilla Package
29 |
30 |
31 | ```bash
32 | npm i @flexilla/flexilla
33 | ```
34 |
35 |
36 | To init all components
37 |
38 |
39 | ```ts
40 | import {initFlexilla} from "@flexilla/flexilla"
41 |
42 | initFlexilla() // This will init all interactive component for all element with data-fx-COmponentName attribute
43 | ```
44 |
45 |
46 |
47 |
48 |
49 | ## Use a boiler Plate
50 |
51 | You can start even faster with our boilerplate :
52 | - [Vite HTML Starter]()
53 | - [AstroJS Boilerplate]()
54 | - [Laravel Blade]()
55 | - [Static Site]()
56 |
--------------------------------------------------------------------------------
/app/src/docs-content/documentation/introduction.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Unify-UI
3 | description: Rapidly build your website with modern look using UnoCss
4 | ---
5 |
6 | ## About UnifyUI
7 |
8 | UnifyUI is a collection of blocks and components designed to work seamlessly with UnoCSS.
9 | Designed to be attractive, functional, lightweight, flexible, and easy to use.
10 | Unify-UI's goal is to provide developers with the tools they need to create beautiful and engaging user interfaces with ease.
11 |
12 |
13 | UnifyUI is free and Open-source, every contribution is welcome.
14 | It still under development.
15 |
16 |
17 | ## Features
18 | - Fully responsive
19 | - Dark Mode Support
20 | - Customizable
21 | - Modern and accessible
22 | - Framework support
23 | - Efficient design
24 |
25 |
26 |
27 | ## Authors
28 |
29 | - [Johnkat Mj]()
30 |
31 | ## Credits
32 |
33 | - [UnoCSS](https://github.com/unocss/unocss)
34 | - [Flowbite]()
35 | - [Preline]()
36 |
37 | ## Quick Start
38 |
39 |
40 |
41 | Lorem ipsum dolor sit, amet consectetur adipisicing elit.
42 |
43 |
44 | Lorem ipsum dolor sit, amet consectetur adipisicing elit.
45 |
46 |
47 | Lorem ipsum dolor sit, amet consectetur adipisicing elit.
48 |
49 |
50 | Lorem ipsum dolor sit, amet consectetur adipisicing elit.
51 |
52 |
53 |
--------------------------------------------------------------------------------
/app/src/docs-content/preset/customization/configuration.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Configuration Guide for Preset UI
3 | description: Learn how to configure PresetUI to suit your project's needs.
4 | ---
5 |
6 | While presetUI's configuration mainly focused on CSS Variable, there's some optional configurations but not realy required
7 |
8 | ## Configuration
9 |
10 |
11 | ```js
12 | // uno.config.ts
13 | import { presetUI } from "@unifydev/preset-ui"
14 |
15 | export default defineConfig({
16 | // ...config
17 | presets: [
18 | // ...other presets
19 | presetUI({
20 | prefixDataStateVariant?: string,
21 | components?: Components,
22 | baseVariants?: BaseVariants,
23 | colorFormat?: "rgb" | "hex" | "hsl" | "oklch" | "none",
24 | })
25 | ],
26 | });
27 | ```
28 |
29 |
30 | ### colorFormat
31 |
32 | This option tells PresetUI what color format you’re using for your project. By default, it is set to hsl. However, you can change it to match your preferred format.
33 |
34 | Options:
35 | - hsl (default)
36 | - rgb
37 | - hex
38 | - oklch
39 | - none (use this if you have multiple color formats in your project)
40 |
41 |
42 | ```js
43 | ...
44 | colorFormat: "none"
45 | ...
46 | ```
47 |
48 |
49 | ### prefixDataStateVariant
50 |
51 | This option allows you to customize the prefix for data-state variants. By default, it is set to fx-.
52 |
53 | - Default: fx-
54 |
55 | - Usage: All custom variants will start with the specified prefix
56 |
57 | Example
58 |
59 |
60 | ```html
61 |
62 | Active now
63 |
64 | ```
65 |
66 |
67 | If you want to change the prefix, you can do so like this:
68 |
69 |
70 | ```js
71 | presetUI({
72 | prefixDataStateVariant: 'custom-', // Now variants will start with `custom-`
73 | })
74 | ```
75 |
--------------------------------------------------------------------------------
/app/src/docs-content/preset/installation.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Preset Ui - Installation
3 | description: This guide will help you get started with PresetUI
4 | links:
5 | - UnoCSS: https://unocss.dev/
6 | ---
7 | ## Installation
8 | ### Requirements
9 | Ensure that UnoCSS has been already installed in your project. If not, please follow the [Official UnoCSS installation guide](https://unocss.dev/integrations/vite).
10 |
11 |
12 |
13 | ### Install PresetUI
14 |
15 | ```bash
16 | npm i -D @unifydev/preset-ui
17 | ```
18 |
19 | Note that PresetUI is a `dev dependency`
20 |
21 |
22 |
23 | ### Add the preset
24 | Inside your `uno.config.(js|ts)` file, import PresetUI and add it in preset List.
25 |
26 | ```js
27 | // import the packages
28 | import { presetUI } from "@unifydev/preset-ui"
29 |
30 | export default defineConfig({
31 | // ...config
32 | presets: [
33 | //other presets
34 | presetUI({
35 | // your configuration here
36 | })
37 | ],
38 | });
39 | ```
40 |
41 |
42 |
43 |
44 | Nice you can now use PresetUI in your project, test this :
45 |
46 | ```html
47 |
48 | badge md
49 |
50 | ```
51 |
--------------------------------------------------------------------------------
/app/src/docs-content/preset/utilities/common.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Shared Utilities
3 | description: Guide to shared component utilities in Preset UI
4 | ---
5 |
6 | Preset UI offers a range of utilities for various components such as accordion, alert, and badge. These components share similar configuration options, making it easy to manage and customize them collectively.
7 |
8 | ## Common Variants
9 |
10 | | ClassName | Description | Example |
11 | |-----------|-------------|---------|
12 | | `ui-variantName` | Apply variantName style to an Element | `ui-solid` |
13 |
14 |
15 |
16 | ## Common Sizes
17 |
18 | Availabele `xs`, `sm`, `md`, `lg`, `xl`
19 |
20 |
21 | ## Example
22 |
23 |
24 | ```html
25 |
26 | Message Here
27 |
28 |
29 | A Solid UI Element Example with Gray
30 |
31 | ```
32 |
33 |
34 | ## Configuration
35 |
36 |
37 |
--------------------------------------------------------------------------------
/app/src/docs-content/preset/utilities/display.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Preset Ui - Installation
3 | description: something
4 | ---
5 |
6 | ##
--------------------------------------------------------------------------------
/app/src/docs-content/preset/utilities/form-input.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Form Input Utilities
3 | description: Utility classes to customize Form Input
4 | ---
5 |
6 | ## Form Input
7 |
8 | To use it just add `form-input` utility class to your input, this class contains base styles.
9 |
10 | ### Sizes
11 |
12 | The Input component supports the following sizes : `2xs`, `xs`, `sm`, `md`, `lg`, `xl`
13 |
14 | ### Customize style
15 |
16 |
17 | ```css
18 | --ui-input-focus-outline: your color ; /** When input focus */
19 | --ui-input-place-holder: your color; /** placeholder text-color */
20 | --ui-input-invalid-outline: your color; /** When input invalid and focus */
21 | ```
22 |
23 |
24 | ### Examples
25 |
26 |
27 | ```html
28 |
31 |
32 |
33 | Using form input utilities require having [@julr/unocss-preset-forms](https://github.com/Julien-R44/unocss-preset-forms) Preset installed.
34 |
35 |
36 |
37 | ## Input Checkbox
38 |
39 |
40 | ```html
41 |
46 |
47 | ### Style
48 |
49 |
50 | ```css
51 | --ui-checkbox-bg: your color ;
52 | --ui-checkbox-border: your color;
53 | --ui-ring-bg: your color;
54 | ```
55 |
56 |
57 | ## Input Radio
58 |
59 |
60 | ```html
61 |
66 |
67 | ### Style
68 |
69 |
70 | ```css
71 | --ui-radio-bg: color here;
72 | ```
73 |
74 |
75 | ## Input Range
76 |
77 |
78 | ```html
79 |
82 |
83 |
--------------------------------------------------------------------------------
/app/src/docs-content/preset/utilities/progressbar.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Progressbar utilities
3 | description: something
4 | ---
5 |
6 | ## Progressbar
7 |
8 | Easily customize the semantic `progressbar` element.
9 |
10 |
11 |
12 | ```html
13 |
16 |
17 | - **Set base rules :** Simply add `progress-bar`
18 | - **Progressebar background** : add `progress-bar-bg-*`
19 | - `gray` : apply a background with gray color (light gray-200 and dark gray-900)
20 | - `light` : apply a background with gray color (light gray-100 and dark gray-900)
21 | - `high` : apply a background with gray color (light gray-200 and dark gray-800)
22 | - `higher` : apply a background with gray color (light gray-300 and dark gray-700)
23 | - **Progressbar Height** : add `progress-bar-sizeVariant`
24 | - `xs`
25 | - `sm`
26 | - `md`
27 | - `lg`
28 | - `xl`
29 | - `2xl`
30 | - `3xl`
31 | - **Corner radius** : add `progress-bar-rounded-*`
32 | - `sm`
33 | - `md`
34 | - `lg`
35 | - `xl`
36 | - `full`
37 |
38 |
39 | ## Meter
40 |
41 |
--------------------------------------------------------------------------------
/app/src/docs-content/preset/utilities/switch.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Preset Ui - Variants
3 | description: something
4 | ---
5 |
6 | ##
--------------------------------------------------------------------------------
/app/src/helpers/copy-to-clipboard.ts:
--------------------------------------------------------------------------------
1 | import { ref } from "vue"
2 |
3 | export const copyToClipboard = async ({ snippet, onCopy, onCopyCompleted, timeout = 1000 }: { snippet: HTMLElement | string | undefined | null, onCopy?: () => void, onCopyCompleted?: () => void, timeout?: number }) => {
4 | if (snippet instanceof HTMLElement || typeof snippet === 'string') {
5 | let valueToCopy = ''
6 | const timer = ref(null)
7 | const startTimeOut = (callback: () => void) => {
8 | timer.value = setTimeout(() => {
9 | callback()
10 | }, timeout)
11 | }
12 |
13 | const cancelTimeout = () => {
14 | timer.value && clearTimeout(timer.value)
15 | }
16 | if (typeof snippet === 'string')
17 | valueToCopy = snippet
18 | else
19 | valueToCopy = snippet.innerText
20 |
21 | onCopy && onCopy()
22 | await navigator.clipboard.writeText(valueToCopy)
23 |
24 | const onCompleted = () => {
25 | onCopyCompleted && onCopyCompleted()
26 | cancelTimeout()
27 | }
28 | if (onCopyCompleted) startTimeOut(onCompleted)
29 | }
30 | }
--------------------------------------------------------------------------------
/app/src/helpers/string-helper.ts:
--------------------------------------------------------------------------------
1 |
2 | export const splitSlugUrl = (value: string) => value.includes("/") ? value.split('/') : [value]
3 |
4 |
--------------------------------------------------------------------------------
/app/src/layouts/Base.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { AstroFont } from "astro-font";
3 | import "@assets/css/global.css";
4 | import "@assets/css/find-ui.css";
5 | import type { SeoType } from "../types";
6 | import SEO from "@components/molecules/SEO.astro";
7 | import ScriptTheme from "./ScriptTheme.astro";
8 | import { ClientRouter } from "astro:transitions";
9 | type Props = {
10 | seo: SeoType;
11 | };
12 |
13 | const { seo } = Astro.props;
14 | ---
15 |
16 |
17 |
18 |
19 |
20 |
22 |
23 |
50 |
51 |
52 |
54 |
56 |
58 |
{title}
18 |
19 |
20 |
11 |
12 | {JSON.stringify(docs)}
13 |
14 |
15 |
--------------------------------------------------------------------------------
/app/src/types/index.ts:
--------------------------------------------------------------------------------
1 | export type SeoType = {
2 | ogImage: {
3 | src: string;
4 | alt: string;
5 | };
6 | keywords: string;
7 | title: string;
8 | description: string;
9 | };
10 |
11 | export type SidebarItem = {
12 | title: string;
13 | path: string;
14 | description: string;
15 | keywords: string;
16 | state?: "updated" | "draft" | "new" | "none" | "wip"
17 | }
18 | type SidebarGroupItems = {
19 | label: string;
20 | items: SidebarItem[];
21 | }
22 |
23 | export type SidebarGroupCat = {
24 | name: string;
25 | items: SidebarGroupItems[];
26 | }
27 |
28 | export type CornerRadius = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"
29 | export type BtnSizeVariant = "xs" | "sm" | "md" | "lg" | "xl" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl"
30 | export type UiSize = "2xs" | "xs" | "sm" | "md" | "lg" | "xl"
31 | export type VariantIntent = "primary" | "secondary" | "accent" | "info" | "warning" | "success" | "danger" | "gray" | "neutral"
32 | export type UiVariant = "outline" | "soft" | "subtle" | "solid"
33 | export type SupportedLanguage = "html" | "css" | "js" | "ts" | "vue"
34 | export type ComponentCode = Record
--------------------------------------------------------------------------------
/app/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "astro/tsconfigs/strict",
3 | "include": [
4 | ".astro/types.d.ts",
5 | "**/*"
6 | ],
7 | "compilerOptions": {
8 | "baseUrl": ".",
9 | "paths": {
10 | "@components/*": [
11 | "src/components/*"
12 | ],
13 | "@layouts/*": [
14 | "src/layouts/*"
15 | ],
16 | "@lib/*": [
17 | "src/lib/*"
18 | ],
19 | "@/data/*": [
20 | "src/data/*"
21 | ],
22 | "@assets/*": [
23 | "src/assets/*"
24 | ],
25 | "@helper/*": [
26 | "src/helpers/*"
27 | ],
28 | "@/types/*": [
29 | "src/types/*"
30 | ],
31 | "@/const/*": [
32 | "src/const/*"
33 | ]
34 | },
35 | "allowJs": true,
36 | "jsx": "preserve"
37 | },
38 | "exclude": [
39 | "dist"
40 | ]
41 | }
--------------------------------------------------------------------------------
/html/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/html/colors.css:
--------------------------------------------------------------------------------
1 | @import url(./ui-colors.css);
2 | @import url(./ui.css);
3 |
4 | :root {
5 | --bg: var(--c-white);
6 | --bg-lighter: var(--neutral-50);
7 | --bg-light: var(--neutral-100);
8 | --bg-high: var(--neutral-200);
9 | --bg-higher: var(--neutral-300);
10 |
11 | --fg: var(--neutral-700);
12 | --fg-subtext: var(--neutral-600);
13 | --fg-title: var(--neutral-900);
14 | --fg-subtitle: var(--neutral-800);
15 | --border: var(--neutral-200);
16 |
17 | --border-lighter: var(--neutral-50);
18 | --border-light: var(--neutral-200);
19 | --border-high: var(--neutral-300);
20 | --border-higher: var(--neutral-400);
21 |
22 | --ui-checkbox-bg: var(--bg);
23 | --ui-checkbox-border: var(--border-high);
24 | --ui-radio-bg: var(--bg);
25 | --ui-radio-border: var(--border-high);
26 |
27 | --switch-checked-thumb-primary: var(--primary-600)
28 |
29 | }
30 |
31 | .dark {
32 | /* Background colors */
33 | --bg:var(--neutral-950);
34 | --bg-lighter: var(--neutral-900);
35 | --bg-light: var(--neutral-900);
36 | --bg-high: var(--neutral-800);
37 | --bg-higher: var(--neutral-700);
38 |
39 | /* Foreground colors */
40 | --fg-text: var(--neutral-300);
41 | --fg-title: var(--c-white);
42 | --fg-subtitle: var(--neutral-200);
43 | --fg-subtext: var(--neutral-300);
44 | --fg-light: var(--neutral-400);
45 |
46 | /* Border colors */
47 | --border: var(--neutral-900);
48 | --border-light: var(--neutral-800);
49 | --border-lighter: var(--neutral-900);
50 | --border-high: var(--neutral-700);
51 | --border-higher: var(--neutral-600);
52 |
53 | --ui-checkbox-border: var(--border-light);
54 |
55 | }
--------------------------------------------------------------------------------
/html/components/accordion/js/script.js:
--------------------------------------------------------------------------------
1 | import { Accordion } from "@flexilla/accordion";
2 |
3 | Accordion.autoInit("[data-accordion]")
--------------------------------------------------------------------------------
/html/components/alert-dialog/alert.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unoforge/unify-ui/c8a3a099c123378fcb406d7e692d21de8ac2bbd9/html/components/alert-dialog/alert.html
--------------------------------------------------------------------------------
/html/components/alert-dialog/js/script.js:
--------------------------------------------------------------------------------
1 | import { Modal } from "@flexilla/modal";
2 | import "@flexilla/modal/modal.css"
3 |
4 | // Initialize modals on elements with the 'data-alert-dialog' attribute.
5 | const modals = Array.from(document.querySelectorAll("[data-alert-dialog]"));
6 | for (const modal of modals) {
7 | new Modal(modal);
8 | }
9 |
--------------------------------------------------------------------------------
/html/components/container/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Document
8 |
9 |
10 |
11 |
12 |
13 |
14 |
16 |
19 |
20 |
22 |
23 |
24 | Container : Default
25 |
26 |
33 |
35 |
36 | Container : Max-w7xl
37 |
38 |
45 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/html/components/dropdown/js/script.js:
--------------------------------------------------------------------------------
1 | import { Dropdown } from "@flexilla/dropdown";
2 | import "@flexilla/dropdown/dropdown.css";
3 |
4 | const dropdowns = Array.from(document.querySelectorAll("[data-drop-down]"));
5 | for (const dropdown of dropdowns) {
6 | new Dropdown(dropdown);
7 | }
8 |
--------------------------------------------------------------------------------
/html/components/popover/js/script.js:
--------------------------------------------------------------------------------
1 | import { Popover } from "@flexilla/popover";
2 |
3 |
4 | Popover.autoInit("[data-popover]")
5 |
--------------------------------------------------------------------------------
/html/components/range/js/script.js:
--------------------------------------------------------------------------------
1 | import { CustomRange } from "@flexilla/custom-range"
2 |
3 | const constumRanges = Array.from(document.querySelectorAll("[data-custom-range-wrapper]"))
4 |
5 | for (const customRange of constumRanges) {
6 | new CustomRange(customRange)
7 | }
--------------------------------------------------------------------------------
/html/components/slideover/js/script.js:
--------------------------------------------------------------------------------
1 | import { OffCanvas } from "@flexilla/offcanvas";
2 |
3 | const slideOvers = Array.from(document.querySelectorAll("[data-slideover]"));
4 |
5 | for (const slideover of slideOvers) {
6 | new OffCanvas(slideover);
7 | }
8 |
--------------------------------------------------------------------------------
/html/components/tabs/js/script.js:
--------------------------------------------------------------------------------
1 | import { Tabs } from "@flexilla/flexilla";
2 |
3 | Tabs.autoInit("[data-tabs]")
4 |
--------------------------------------------------------------------------------
/html/components/text-area/js/script.js:
--------------------------------------------------------------------------------
1 | import { AutoResizeTextArea } from "@flexilla/auto-resize-area";
2 | const resizableTextAreas = Array.from(
3 | document.querySelectorAll("textarea[data-autoresizable]")
4 | );
5 |
6 | for (const resizableTextArea of resizableTextAreas) {
7 | new AutoResizeTextArea(resizableTextArea);
8 | }
--------------------------------------------------------------------------------
/html/components/tooltip/js/script.js:
--------------------------------------------------------------------------------
1 | import { Tooltip } from "@flexilla/tooltip";
2 | import "@flexilla/tooltip/tooltip.css"
3 |
4 | const tooltips = Array.from(document.querySelectorAll("[data-fx-tooltip]"));
5 | for (const tooltip of tooltips) {
6 | new Tooltip(tooltip);
7 | }
8 |
--------------------------------------------------------------------------------
/html/js/app.js:
--------------------------------------------------------------------------------
1 | import { getThemePreference } from "./load.theme";
2 |
3 | const themeSwitcher = () => {
4 | const switchTheme = document.querySelector("[data-switch-theme]");
5 |
6 | const isDark = getThemePreference() === "dark";
7 | document.documentElement.classList[isDark ? "add" : "remove"]("dark");
8 | if (switchTheme) {
9 | switchTheme.addEventListener("click", (e) => {
10 | e.preventDefault();
11 | const doc = document.documentElement;
12 | if (doc) {
13 | const isDarkTheme = getThemePreference() === "dark";
14 | doc.classList[isDarkTheme ? "remove" : "add"]("dark");
15 | localStorage.setItem("theme", isDarkTheme ? "light" : "dark");
16 | }
17 | });
18 | }
19 | };
20 |
21 | themeSwitcher()
--------------------------------------------------------------------------------
/html/js/load.theme.js:
--------------------------------------------------------------------------------
1 | export const getThemePreference = () => {
2 | const currentTheme = localStorage.getItem("theme");
3 | if (localStorage !== undefined && currentTheme) {
4 | return currentTheme;
5 | }
6 | return window.matchMedia("(prefers-color-scheme: dark)").matches
7 | ? "dark"
8 | : "light";
9 | };
10 | const isDark = getThemePreference() === "dark";
11 | document.documentElement.classList[isDark ? "add" : "remove"]("dark");
12 |
13 | if (localStorage) {
14 | const observer = new MutationObserver(() => {
15 | const isDark = document.documentElement.classList.contains("dark");
16 | localStorage.setItem("theme", isDark ? "dark" : "light");
17 | });
18 | observer.observe(document.documentElement, {
19 | attributes: true,
20 | attributeFilter: ["class"],
21 | });
22 | }
23 |
--------------------------------------------------------------------------------
/html/main.ts:
--------------------------------------------------------------------------------
1 | import '@unocss/reset/tailwind.css'
2 | import 'virtual:uno.css'
3 | import "./button.css"
4 | import './style.css'
5 | import "./colors.css"
6 |
7 | import "./js/app.js"
--------------------------------------------------------------------------------
/html/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "uno-ui",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc && vite build",
9 | "preview": "vite preview"
10 | },
11 | "devDependencies": {
12 | "@iconify-json/carbon": "^1.2.5",
13 | "@iconify-json/ph": "^1.2.2",
14 | "@julr/unocss-preset-forms": "^0.1.0",
15 | "@unifydev/flexilla": "^0.0.0",
16 | "@unifydev/preset-ui": "^0.1.0",
17 | "typescript": "~5.6.2",
18 | "unocss": "^0.65.3",
19 | "unocss-preset-animations": "^1.1.0",
20 | "vite": "^6.0.5"
21 | },
22 | "dependencies": {
23 | "@flexilla/flexilla": "^2.0.9"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/html/public/defaultavatar.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unoforge/unify-ui/c8a3a099c123378fcb406d7e692d21de8ac2bbd9/html/public/defaultavatar.webp
--------------------------------------------------------------------------------
/html/public/images/baskets.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unoforge/unify-ui/c8a3a099c123378fcb406d7e692d21de8ac2bbd9/html/public/images/baskets.webp
--------------------------------------------------------------------------------
/html/public/images/baskets_2.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unoforge/unify-ui/c8a3a099c123378fcb406d7e692d21de8ac2bbd9/html/public/images/baskets_2.webp
--------------------------------------------------------------------------------
/html/public/images/bottes-cuir.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unoforge/unify-ui/c8a3a099c123378fcb406d7e692d21de8ac2bbd9/html/public/images/bottes-cuir.webp
--------------------------------------------------------------------------------
/html/public/images/chaussures-cuir-marron.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unoforge/unify-ui/c8a3a099c123378fcb406d7e692d21de8ac2bbd9/html/public/images/chaussures-cuir-marron.webp
--------------------------------------------------------------------------------
/html/public/images/chaussures-talons-hauts.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unoforge/unify-ui/c8a3a099c123378fcb406d7e692d21de8ac2bbd9/html/public/images/chaussures-talons-hauts.webp
--------------------------------------------------------------------------------
/html/public/images/img1.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unoforge/unify-ui/c8a3a099c123378fcb406d7e692d21de8ac2bbd9/html/public/images/img1.webp
--------------------------------------------------------------------------------
/html/public/images/img2.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unoforge/unify-ui/c8a3a099c123378fcb406d7e692d21de8ac2bbd9/html/public/images/img2.webp
--------------------------------------------------------------------------------
/html/public/images/sports-shoe.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unoforge/unify-ui/c8a3a099c123378fcb406d7e692d21de8ac2bbd9/html/public/images/sports-shoe.webp
--------------------------------------------------------------------------------
/html/public/vite.svg:
--------------------------------------------------------------------------------
1 | 
4 | 
17 | 
10 | 
12 |