p-sw/pswui-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: p-sw:main
Branches Tags
p-sw:main
p-sw:dependabot/npm_and_yarn/ws-8.17.1
..
compare: p-sw:dependabot/npm_and_yarn/ws-8.17.1
Branches Tags
p-sw:main
p-sw:dependabot/npm_and_yarn/ws-8.17.1

1 Commits
main ... dependabot

Author SHA1 Message Date
dependabot[bot]
759fbd8a5e
chore(deps): bump ws from 8.17.0 to 8.17.1 
Bumps [ws](https://github.com/websockets/ws) from 8.17.0 to 8.17.1.
- [Release notes](https://github.com/websockets/ws/releases)
- [Commits](https://github.com/websockets/ws/compare/8.17.0...8.17.1)

---
updated-dependencies:
- dependency-name: ws
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
 2024-06-30 13:58:32 +00:00
54 changed files with 3108 additions and 3632 deletions
Show Stats Expand all files Collapse all files

17
package.json
View File

@ -7,6 +7,7 @@
"author": "Shinwoo PARK <devpysweb@gmail.com>", "author": "Shinwoo PARK <devpysweb@gmail.com>",
"license": "MIT", "license": "MIT",
"private": true, "private": true,
"packageManager": "yarn@4.3.0+sha512.1606bef7c84bc7d83b8576063de2fd08f7d69f9939015bed800f9585a002390268ecc777e9feeba7e26e9556aef6beaad4806968db2182ab5dd3e955ab3b9a0b",
"type": "module", "type": "module",
"scripts": { "scripts": {
"postinstall": "lefthook install", "postinstall": "lefthook install",
@ -18,16 +19,14 @@
"dependencies": { "dependencies": {
"@mdx-js/react": "^3.0.1", "@mdx-js/react": "^3.0.1",
"@stefanprobst/rehype-extract-toc": "^2.2.0", "@stefanprobst/rehype-extract-toc": "^2.2.0",
"@tailwindcss/vite": "^4.0.12",
"highlight.js": "^11.9.0", "highlight.js": "^11.9.0",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-router-dom": "^6.23.1", "react-router-dom": "^6.23.1",
"react-syntax-highlighter": "^15.6.1", "react-syntax-highlighter": "^15.5.0",
"rehype-slug": "^6.0.0", "rehype-slug": "^6.0.0",
"remark-gfm": "^4.0.0", "remark-gfm": "^4.0.0",
"tailwind-merge": "^2.3.0", "tailwind-merge": "^2.3.0"
"typescript": "^5.4.5"
}, },
"devDependencies": { "devDependencies": {
"@biomejs/biome": "1.8.3", "@biomejs/biome": "1.8.3",
@ -43,11 +42,13 @@
"@typescript-eslint/eslint-plugin": "^7.13.0", "@typescript-eslint/eslint-plugin": "^7.13.0",
"@typescript-eslint/parser": "^7.13.0", "@typescript-eslint/parser": "^7.13.0",
"@vitejs/plugin-react": "^4.3.1", "@vitejs/plugin-react": "^4.3.1",
"autoprefixer": "^10.4.19",
"lefthook": "^1.6.18", "lefthook": "^1.6.18",
"tailwind-scrollbar": "^4.0.1", "postcss": "^8.4.38",
"tailwindcss": "^4.0.12", "tailwind-scrollbar": "^3.1.0",
"tailwindcss": "^3.4.4",
"typescript": "^5.4.5",
"vite": "^5.3.0", "vite": "^5.3.0",
"vite-plugin-dynamic-import": "^1.5.0" "vite-plugin-dynamic-import": "^1.5.0"
}, }
"packageManager": "yarn@4.4.0+sha512.91d93b445d9284e7ed52931369bc89a663414e5582d00eea45c67ddc459a2582919eece27c412d6ffd1bd0793ff35399381cb229326b961798ce4f4cc60ddfdb"
} }

84
src/App.tsx
View File

@ -9,8 +9,19 @@ import {
import DocsLayout from "./DocsLayout"; import DocsLayout from "./DocsLayout";
import DynamicLayout from "./DynamicLayout"; import DynamicLayout from "./DynamicLayout";
import ErrorBoundary from "./ErrorHandler"; import ErrorBoundary from "./ErrorHandler";
import Home from "./Home";
import MainLayout from "./MainLayout"; import MainLayout from "./MainLayout";
import DocsConfiguration, {
tableOfContents as docsConfigurationToc,
} from "./docs/configuration.mdx";
import DocsInstallation, {
tableOfContents as docsInstallationToc,
} from "./docs/installation.mdx";
import DocsIntroduction, {
tableOfContents as docsIntroductionToc,
} from "./docs/introduction.mdx";
import { Tooltip, TooltipContent } from "@pswui/Tooltip"; import { Tooltip, TooltipContent } from "@pswui/Tooltip";
import React, { import React, {
type ForwardedRef, type ForwardedRef,
@ -214,20 +225,12 @@ const router = createBrowserRouter(
> >
<Route <Route
index index
lazy={async () => { loader={() =>
const { default: Component } = await import("./Home"); REDIRECTED_404.test(window.location.search)
? redirect(REDIRECTED_404.exec(window.location.search)?.[1] ?? "/")
return { : true
Component, }
loader() { element={<Home />}
return REDIRECTED_404.test(window.location.search)
? redirect(
REDIRECTED_404.exec(window.location.search)?.[1] ?? "/",
)
: true;
},
};
}}
/> />
<Route <Route
path="docs" path="docs"
@ -239,50 +242,27 @@ const router = createBrowserRouter(
/> />
<Route <Route
path="introduction" path="introduction"
lazy={async () => { element={
const { default: DocsIntroduction, tableOfContents } = await import( <DynamicLayout toc={docsIntroductionToc}>
"./docs/introduction.mdx" <DocsIntroduction components={overrideComponents} />
); </DynamicLayout>
}
return {
Component: () => (
<DynamicLayout toc={tableOfContents}>
<DocsIntroduction components={overrideComponents} />
</DynamicLayout>
),
};
}}
/> />
<Route <Route
path="installation" path="installation"
lazy={async () => { element={
const { default: DocsInstallation, tableOfContents } = await import( <DynamicLayout toc={docsInstallationToc}>
"./docs/installation.mdx" <DocsInstallation components={overrideComponents} />
); </DynamicLayout>
}
return {
Component: () => (
<DynamicLayout toc={tableOfContents}>
<DocsInstallation components={overrideComponents} />
</DynamicLayout>
),
};
}}
/> />
<Route <Route
path="configuration" path="configuration"
lazy={async () => { element={
const { default: DocsConfiguration, tableOfContents } = <DynamicLayout toc={docsConfigurationToc}>
await import("./docs/configuration.mdx"); <DocsConfiguration components={overrideComponents} />
</DynamicLayout>
return { }
Component: () => (
<DynamicLayout toc={tableOfContents}>
<DocsConfiguration components={overrideComponents} />
</DynamicLayout>
),
};
}}
/> />
<Route path="components"> <Route path="components">
<Route <Route

2
src/DocsLayout.tsx
View File

@ -33,7 +33,7 @@ function SideNav() {
function DocsLayout() { function DocsLayout() {
return ( return (
<div className="grow grid grid-cols-1 md:grid-cols-[12rem_1fr] lg:grid-cols-[12rem_1fr_10rem] w-full max-w-5xl mx-auto"> <div className="flex-grow grid grid-cols-1 md:grid-cols-[12rem_1fr] lg:grid-cols-[12rem_1fr_10rem] w-full max-w-5xl mx-auto">
<SideNav /> <SideNav />
<Outlet /> <Outlet />
</div> </div>

2
src/Home.tsx
View File

@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
function Home() { function Home() {
return ( return (
<main className="grow h-full flex flex-col p-4 justify-center items-center"> <main className="flex-grow h-full flex flex-col p-4 justify-center items-center">
<section className="h-full flex flex-col justify-center items-center text-center gap-8"> <section className="h-full flex flex-col justify-center items-center text-center gap-8">
<header className="flex flex-col justify-center items-center gap-2"> <header className="flex flex-col justify-center items-center gap-2">
<h1 className="text-4xl font-bold"> <h1 className="text-4xl font-bold">

5
src/MainLayout.tsx
View File

@ -62,8 +62,7 @@ function ThemeButton() {
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent
anchor={"end"} anchor="bottomLeft"
align={"end"}
className="w-32" className="w-32"
> >
<Button <Button
@ -150,7 +149,7 @@ function TopNav() {
</svg> </svg>
</Button> </Button>
</DrawerTrigger> </DrawerTrigger>
<DrawerOverlay className="z-99"> <DrawerOverlay className="z-[99]">
<DrawerContent className="w-[300px] overflow-auto"> <DrawerContent className="w-[300px] overflow-auto">
<DrawerClose className="absolute top-4 right-4"> <DrawerClose className="absolute top-4 right-4">
<Button <Button

85
src/components/LoadedCode.tsx
View File

@ -1,39 +1,10 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
import { useToast } from "@pswui/Toast"; import { useToast } from "@pswui/Toast";
import { import { forwardRef, useEffect, useMemo, useState } from "react";
type Component, import SyntaxHighlighter from "react-syntax-highlighter";
forwardRef, import { gruvboxDark } from "react-syntax-highlighter/dist/cjs/styles/hljs";
useEffect,
useMemo,
useState,
} from "react";
import {
PrismLight,
type SyntaxHighlighterProps,
} from "react-syntax-highlighter";
import { duotoneSpace } from "react-syntax-highlighter/dist/cjs/styles/prism";
import css from "react-syntax-highlighter/dist/esm/languages/prism/css";
import js from "react-syntax-highlighter/dist/esm/languages/prism/javascript";
import jsx from "react-syntax-highlighter/dist/esm/languages/prism/jsx";
import markup from "react-syntax-highlighter/dist/esm/languages/prism/markup";
import tsx from "react-syntax-highlighter/dist/esm/languages/prism/tsx";
import ts from "react-syntax-highlighter/dist/esm/languages/prism/typescript";
import { twMerge } from "tailwind-merge"; import { twMerge } from "tailwind-merge";
const SyntaxHighlighter =
PrismLight as unknown as typeof Component<SyntaxHighlighterProps> & {
registerLanguage<T>(name: string, func: T): void;
alias(name: string, alias: string | string[]): void;
alias(aliases: Record<string, string | string[]>): void;
};
SyntaxHighlighter.registerLanguage("javascript", js);
SyntaxHighlighter.registerLanguage("typescript", ts);
SyntaxHighlighter.registerLanguage("tsx", tsx);
SyntaxHighlighter.registerLanguage("jsx", jsx);
SyntaxHighlighter.registerLanguage("markup", markup);
SyntaxHighlighter.registerLanguage("css", css);
export const GITHUB_UI = "https://raw.githubusercontent.com/pswui/ui/main"; export const GITHUB_UI = "https://raw.githubusercontent.com/pswui/ui/main";
export const GITHUB_DOCS = "https://raw.githubusercontent.com/pswui/docs/main"; export const GITHUB_DOCS = "https://raw.githubusercontent.com/pswui/docs/main";
export const GITHUB_COMP = (componentName: string) => export const GITHUB_COMP = (componentName: string) =>
@ -45,19 +16,17 @@ export const GITHUB_COMP_PREVIEW = (componentName: string) =>
export const GITHUB_STORY = (componentName: string, storyName: string) => export const GITHUB_STORY = (componentName: string, storyName: string) =>
`${GITHUB_DOCS}/src/docs/components/${componentName}Blocks/Examples/${storyName}.tsx`; `${GITHUB_DOCS}/src/docs/components/${componentName}Blocks/Examples/${storyName}.tsx`;
export type TEMPLATE = Record< export type TEMPLATE = Record<string, Record<string, string | boolean>>;
string,
Record<string, string | boolean | number | undefined>
>;
const TEMPLATE_REMOVE_REGEX = /\/\*\s*remove\s*\*\/(.|\n)*?\/\*\s*end\s*\*\//g; export const LoadedCode = ({
const TEMPLATE_REPLACE_REGEX = from,
/\/\*\s*replace\s*\*\/(.|\n)*?\/\*\s*with\s*\n((.|\n)+)\n\s*\*\//g; className,
template,
export const LoadedCode = forwardRef< }: {
HTMLDivElement, from: string;
{ from: string; className?: string; template?: TEMPLATE } className?: string;
>(({ from, className, template }, ref) => { template?: TEMPLATE;
}) => {
const [state, setState] = useState<string | undefined | null>(); const [state, setState] = useState<string | undefined | null>();
const { toast } = useToast(); const { toast } = useToast();
@ -75,10 +44,6 @@ export const LoadedCode = forwardRef<
let templatedCode = state; let templatedCode = state;
templatedCode = templatedCode
.replaceAll(TEMPLATE_REMOVE_REGEX, "")
.replaceAll(TEMPLATE_REPLACE_REGEX, "$2");
for (const [componentName, componentTemplateProps] of Object.entries( for (const [componentName, componentTemplateProps] of Object.entries(
template, template,
)) { )) {
@ -86,15 +51,13 @@ export const LoadedCode = forwardRef<
componentTemplateProps, componentTemplateProps,
)) { )) {
const regex = new RegExp( const regex = new RegExp(
`(<${componentName.slice(0, componentName.length - 5)}\\b[^>]*?)(\n?\\s+)${propName}={${componentName}.${propName}}`, `(<${componentName}\s[^]*)\s${propName}=(\{(true|false|"[^"\n]*"|'[^'\n]*'|\`[^\`\n]*\`)\}|"[^"\n]*"|'[^'\n]*')`,
); );
templatedCode = templatedCode.replace( templatedCode = templatedCode.replace(
regex, regex,
typeof propValue === "undefined" typeof propValue === "string"
? "$1" ? `\$1 ${propName}="${propValue}"`
: typeof propValue === "string" : `$1 ${propName}={${propValue}}`,
? `\$1$2 ${propName}="${propValue}"`
: `$1$2 ${propName}={${propValue}}`,
); );
} }
} }
@ -103,10 +66,7 @@ export const LoadedCode = forwardRef<
}, [state, template]); }, [state, template]);
return ( return (
<div <div className={twMerge("relative", className)}>
className={twMerge("relative", className)}
ref={ref}
>
<Button <Button
preset="default" preset="default"
size="icon" size="icon"
@ -143,16 +103,15 @@ export const LoadedCode = forwardRef<
</Button> </Button>
<SyntaxHighlighter <SyntaxHighlighter
language="typescript" language="typescript"
style={duotoneSpace} style={gruvboxDark}
className={`w-full h-64 rounded-lg ${!state ? "animate-pulse" : ""} scrollbar-none resize-y`} className={`w-full h-64 rounded-lg ${!state ? "animate-pulse" : ""} scrollbar-none`}
customStyle={{ padding: "1rem" }} customStyle={{ padding: "1rem" }}
> >
{postProcessedCode} {postProcessedCode}
</SyntaxHighlighter> </SyntaxHighlighter>
</div> </div>
); );
}); };
LoadedCode.displayName = "LoadedCode";
export const Code = forwardRef< export const Code = forwardRef<
HTMLDivElement, HTMLDivElement,
@ -193,7 +152,7 @@ export const Code = forwardRef<
</Button> </Button>
<SyntaxHighlighter <SyntaxHighlighter
language={language} language={language}
style={duotoneSpace} style={gruvboxDark}
className={"w-full h-auto max-h-64 rounded-lg scrollbar-none"} className={"w-full h-auto max-h-64 rounded-lg scrollbar-none"}
customStyle={{ padding: "1rem" }} customStyle={{ padding: "1rem" }}
> >

44
src/components/PgHooks.tsx
View File

@ -1,44 +0,0 @@
import useMutable from "@/utils/useMutable";
import { useMemo } from "react";
import type { TEMPLATE } from "./LoadedCode";
import type { ControlTemplate, Template } from "./Playground";
export function usePgProps<T extends TEMPLATE>(
t: Template,
): [T, ControlTemplate] {
const [props, mutate] = useMutable(t);
return useMemo(() => {
const rawProps: TEMPLATE = {};
const controlTemplate: ControlTemplate = {};
for (const [componentName, prop] of Object.entries(props)) {
const pre: ControlTemplate[string] = {};
const vals: TEMPLATE[string] = {};
for (const [propKey, propMeta] of Object.entries(prop)) {
pre[propKey] = {
...propMeta,
onChange(value: string | number | boolean) {
console.log(`mutating ${componentName}/${propKey}`);
mutate((state) => {
state[componentName][propKey].value = value;
});
},
onToggle(v: boolean) {
console.log(`toggling ${componentName}/${propKey}`);
mutate((state) => {
state[componentName][propKey].disabled = v;
});
},
};
vals[propKey] = propMeta.disabled ? undefined : propMeta.value;
}
controlTemplate[componentName] = pre;
rawProps[componentName] = vals;
}
return [rawProps as T, controlTemplate];
}, [props, mutate]);
}

183
src/components/Playground.tsx
View File

@ -1,183 +0,0 @@
import { Button } from "@pswui/Button";
import { Checkbox } from "@pswui/Checkbox";
import { Input } from "@pswui/Input";
import { Label } from "@pswui/Label";
import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover";
import { Switch } from "@pswui/Switch";
import { TabContent, TabList, TabProvider, TabTrigger } from "@pswui/Tabs";
import type { ReactNode } from "react";
import { GITHUB_COMP_PREVIEW, LoadedCode, type TEMPLATE } from "./LoadedCode";
import { Story } from "./Story";
export type Template = Record<
string,
Record<
string,
| { type: "boolean"; value: boolean; disabled?: boolean }
| { type: "select"; options: string[]; value: string; disabled?: boolean }
| { type: "string"; value: string; disabled?: boolean }
| { type: "number"; value: number; disabled?: boolean }
>
>;
export type ControlTemplate = Record<
string,
Record<
string,
| {
type: "boolean";
value: boolean;
disabled?: boolean;
onChange: (value: boolean) => void;
onToggle: (v: boolean) => void;
}
| {
type: "select";
options: string[];
value: string;
disabled?: boolean;
onChange: (value: string) => void;
onToggle: (v: boolean) => void;
}
| {
type: "string";
value: string;
disabled?: boolean;
onChange: (value: string) => void;
onToggle: (v: boolean) => void;
}
| {
type: "number";
value: number;
disabled?: boolean;
onChange: (value: number) => void;
onToggle: (v: boolean) => void;
}
>
>;
export function PlaygroundControl<T extends ControlTemplate>(props: {
props: T;
}): ReactNode {
return (
<>
<h3>Controls</h3>
<div
className={
"rounded-lg p-4 border border-neutral-300 dark:border-neutral-700 flex flex-col justify-center items-start gap-12"
}
>
{Object.entries(props.props).map(([componentName, propEntries]) => (
<div
key={componentName}
className="w-full flex flex-col justify-center items-start gap-4"
>
<span className="font-thin opacity-50 w-full border-b border-b-current pb-2">
&lt;{componentName.slice(0, componentName.length - 5)}&gt;
</span>
{Object.entries(propEntries).map(([propName, propMeta]) => (
<div
key={componentName + propName}
className={`flex gap-2 justify-between w-full ${propMeta.type === "boolean" ? "flex-row items-center" : "flex-col md:flex-row md:items-center"}`}
>
<Label
direction="horizontal"
className="flex flex-row items-center gap-2"
>
<Switch
checked={!propMeta.disabled}
onChange={(e) => {
propMeta.onToggle(!e.currentTarget.checked);
}}
/>
{propMeta.disabled ? (
<s className="opacity-50">{propName}</s>
) : (
<span>{propName}</span>
)}
</Label>
{propMeta.type === "boolean" ? (
<Checkbox
checked={propMeta.value}
onChange={(e) => propMeta.onChange(e.currentTarget.checked)}
/>
) : propMeta.type === "string" ? (
<Input
type="text"
value={propMeta.value}
onChange={(e) => propMeta.onChange(e.currentTarget.value)}
className="w-full md:w-fit"
/>
) : propMeta.type === "select" ? (
<Popover>
<PopoverTrigger>
<Button
preset="default"
className="w-full md:w-fit"
>
{propMeta.value}
</Button>
</PopoverTrigger>
<PopoverContent className="min-w-36">
{propMeta.options.map((value) => (
<Button
preset="ghost"
key={value}
onClick={() => propMeta.onChange(value)}
>
{value}
</Button>
))}
</PopoverContent>
</Popover>
) : propMeta.type === "number" ? (
<Input
type="number"
value={propMeta.value}
onChange={(e) =>
propMeta.onChange(e.currentTarget.valueAsNumber)
}
className="w-full md:w-fit"
/>
) : null}
</div>
))}
</div>
))}
</div>
</>
);
}
export function PlaygroundLayout<T extends ControlTemplate>({
children,
compName,
props,
control,
}: {
children: ReactNode;
compName: string;
props: TEMPLATE;
control: T;
}) {
return (
<>
<TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">{children}</Story>
</TabContent>
<TabContent name="code">
<LoadedCode
from={GITHUB_COMP_PREVIEW(compName)}
template={props}
/>
</TabContent>
</TabProvider>
<PlaygroundControl props={control} />
</>
);
}

172
src/docs/components/Button.mdx
View File

@ -1,16 +1,26 @@
import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs"; import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
import { Story } from "@/components/Story"; import { Story } from "@/components/Story";
import { LoadedCode, GITHUB_COMP, GITHUB_STORY } from "@/components/LoadedCode"; import { LoadedCode, GITHUB_COMP, GITHUB_COMP_PREVIEW, GITHUB_STORY } from "@/components/LoadedCode";
import { ButtonDemo } from "./ButtonBlocks/Preview";
import Examples from "./ButtonBlocks/Examples"; import Examples from "./ButtonBlocks/Examples";
import ButtonPlayground from "./ButtonBlocks/Playground";
# Button # Button
Displays a button or a component that looks like a button. Displays a button or a component that looks like a button.
## Playground <TabProvider defaultName="preview">
<TabList>
<ButtonPlayground /> <TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<ButtonDemo />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={GITHUB_COMP_PREVIEW("Button")} />
</TabContent>
</TabProvider>
## Installation ## Installation
@ -26,7 +36,7 @@ import { Button } from "@components/Button";
``` ```
```html ```html
<button>Button</button> <Button>Button</Button>
``` ```
## Props ## Props
@ -34,7 +44,7 @@ import { Button } from "@components/Button";
### Variants ### Variants
| Prop | Type | Default | Description | | Prop | Type | Default | Description |
| :----------- | :---------------------------------------------------------------------------- | :---------- | :-------------------------------------- | |:-------------|:------------------------------------------------------------------------------|:------------|:----------------------------------------|
| `size` | `"link" \| "sm" \| "md" \| "lg" \| "icon"` | `"md"` | The size of the button | | `size` | `"link" \| "sm" \| "md" \| "lg" \| "icon"` | `"md"` | The size of the button |
| `border` | `"none" \| "solid" \| "success" \| "warning" \| "danger"` | `"solid"` | The border color of the button | | `border` | `"none" \| "solid" \| "success" \| "warning" \| "danger"` | `"solid"` | The border color of the button |
| `background` | `"default" \| "ghost" \| "success" \| "warning" \| "danger" \| "transparent"` | `"default"` | The background color of the button | | `background` | `"default" \| "ghost" \| "success" \| "warning" \| "danger" \| "transparent"` | `"default"` | The background color of the button |
@ -44,7 +54,7 @@ import { Button } from "@components/Button";
### Special ### Special
| Prop | Type | Default | Description | | Prop | Type | Default | Description |
| :-------- | :-------- | :------ | :------------------------------------------------------- | |:----------|:----------|:--------|:---------------------------------------------------------|
| `asChild` | `boolean` | `false` | Whether the button is rendered as a child of a component | | `asChild` | `boolean` | `false` | Whether the button is rendered as a child of a component |
## Examples ## Examples
@ -52,101 +62,101 @@ import { Button } from "@components/Button";
### Default ### Default
<TabProvider defaultName="preview"> <TabProvider defaultName="preview">
<TabList> <TabList>
<TabTrigger name="preview">Preview</TabTrigger> <TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger> <TabTrigger name="code">Code</TabTrigger>
</TabList> </TabList>
<TabContent name="preview"> <TabContent name="preview">
<Story layout="centered"> <Story layout="centered">
<Examples.Default /> <Examples.Default />
</Story> </Story>
</TabContent> </TabContent>
<TabContent name="code"> <TabContent name="code">
<LoadedCode from={GITHUB_STORY("Button", "Default")} /> <LoadedCode from={GITHUB_STORY("Button", "Default")} />
</TabContent> </TabContent>
</TabProvider> </TabProvider>
### Ghost ### Ghost
<TabProvider defaultName="preview"> <TabProvider defaultName="preview">
<TabList> <TabList>
<TabTrigger name="preview">Preview</TabTrigger> <TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger> <TabTrigger name="code">Code</TabTrigger>
</TabList> </TabList>
<TabContent name="preview"> <TabContent name="preview">
<Story layout="centered"> <Story layout="centered">
<Examples.Ghost /> <Examples.Ghost />
</Story> </Story>
</TabContent> </TabContent>
<TabContent name="code"> <TabContent name="code">
<LoadedCode from={GITHUB_STORY("Button", "Ghost")} /> <LoadedCode from={GITHUB_STORY("Button", "Ghost")} />
</TabContent> </TabContent>
</TabProvider> </TabProvider>
### Link ### Link
<TabProvider defaultName="preview"> <TabProvider defaultName="preview">
<TabList> <TabList>
<TabTrigger name="preview">Preview</TabTrigger> <TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger> <TabTrigger name="code">Code</TabTrigger>
</TabList> </TabList>
<TabContent name="preview"> <TabContent name="preview">
<Story layout="centered"> <Story layout="centered">
<Examples.Link /> <Examples.Link />
</Story> </Story>
</TabContent> </TabContent>
<TabContent name="code"> <TabContent name="code">
<LoadedCode from={GITHUB_STORY("Button", "Link")} /> <LoadedCode from={GITHUB_STORY("Button", "Link")} />
</TabContent> </TabContent>
</TabProvider> </TabProvider>
### Success ### Success
<TabProvider defaultName="preview"> <TabProvider defaultName="preview">
<TabList> <TabList>
<TabTrigger name="preview">Preview</TabTrigger> <TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger> <TabTrigger name="code">Code</TabTrigger>
</TabList> </TabList>
<TabContent name="preview"> <TabContent name="preview">
<Story layout="centered"> <Story layout="centered">
<Examples.Success /> <Examples.Success />
</Story> </Story>
</TabContent> </TabContent>
<TabContent name="code"> <TabContent name="code">
<LoadedCode from={GITHUB_STORY("Button", "Success")} /> <LoadedCode from={GITHUB_STORY("Button", "Success")} />
</TabContent> </TabContent>
</TabProvider> </TabProvider>
### Warning ### Warning
<TabProvider defaultName="preview"> <TabProvider defaultName="preview">
<TabList> <TabList>
<TabTrigger name="preview">Preview</TabTrigger> <TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger> <TabTrigger name="code">Code</TabTrigger>
</TabList> </TabList>
<TabContent name="preview"> <TabContent name="preview">
<Story layout="centered"> <Story layout="centered">
<Examples.Warning /> <Examples.Warning />
</Story> </Story>
</TabContent> </TabContent>
<TabContent name="code"> <TabContent name="code">
<LoadedCode from={GITHUB_STORY("Button", "Warning")} /> <LoadedCode from={GITHUB_STORY("Button", "Warning")} />
</TabContent> </TabContent>
</TabProvider> </TabProvider>
### Danger ### Danger
<TabProvider defaultName="preview"> <TabProvider defaultName="preview">
<TabList> <TabList>
<TabTrigger name="preview">Preview</TabTrigger> <TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger> <TabTrigger name="code">Code</TabTrigger>
</TabList> </TabList>
<TabContent name="preview"> <TabContent name="preview">
<Story layout="centered"> <Story layout="centered">
<Examples.Danger /> <Examples.Danger />
</Story> </Story>
</TabContent> </TabContent>
<TabContent name="code"> <TabContent name="code">
<LoadedCode from={GITHUB_STORY("Button", "Danger")} /> <LoadedCode from={GITHUB_STORY("Button", "Danger")} />
</TabContent> </TabContent>
</TabProvider> </TabProvider>

64
src/docs/components/ButtonBlocks/Playground.tsx
View File

@ -1,64 +0,0 @@
import type { TEMPLATE } from "@/components/LoadedCode";
import { usePgProps } from "@/components/PgHooks";
import { PlaygroundLayout } from "@/components/Playground";
import { ButtonDemo, type ControlledButtonDemoProps } from "./Preview";
interface TemplateProps extends TEMPLATE, ControlledButtonDemoProps {}
export default function ButtonPlayground() {
const [props, control] = usePgProps<TemplateProps>({
ButtonProps: {
preset: {
type: "select",
options: ["default", "ghost", "link", "success", "warning", "danger"],
value: "default",
},
size: {
type: "select",
options: ["link", "sm", "md", "lg", "icon"],
value: "md",
disabled: true,
},
border: {
type: "select",
options: ["none", "solid", "success", "warning", "danger"],
value: "solid",
disabled: true,
},
background: {
type: "select",
options: [
"default",
"ghost",
"success",
"warning",
"danger",
"transparent",
],
value: "default",
disabled: true,
},
decoration: {
type: "select",
options: ["none", "link"],
value: "none",
disabled: true,
},
disabled: {
type: "boolean",
value: false,
disabled: true,
},
},
});
return (
<PlaygroundLayout
compName="Button"
props={props}
control={control}
>
<ButtonDemo {...props} />
</PlaygroundLayout>
);
}

36
src/docs/components/ButtonBlocks/Preview.tsx
View File

@ -1,37 +1,5 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
/* remove */
export interface ControlledButtonDemoProps {
ButtonProps: {
preset?: "default" | "ghost" | "link" | "success" | "warning" | "danger";
size?: "link" | "sm" | "md" | "lg" | "icon";
border?: "none" | "solid" | "success" | "warning" | "danger";
background?:
| "default"
| "ghost"
| "success"
| "warning"
| "danger"
| "transparent";
decoration?: "none" | "link";
disabled?: boolean;
};
}
/* end */
/* replace */
export function ButtonDemo({ ButtonProps }: ControlledButtonDemoProps) {
/* with
export function ButtonDemo() { export function ButtonDemo() {
*/ return <Button>Button</Button>;
return (
<Button
preset={ButtonProps.preset}
size={ButtonProps.size}
border={ButtonProps.border}
background={ButtonProps.background}
decoration={ButtonProps.decoration}
disabled={ButtonProps.disabled}
>
Button
</Button>
);
} }

77
src/docs/components/Checkbox.mdx
View File

@ -1,21 +1,26 @@
import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs"; import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
import { Story } from "@/components/Story"; import { Story } from "@/components/Story";
import { import { LoadedCode, GITHUB_COMP, GITHUB_COMP_PREVIEW, GITHUB_STORY } from "@/components/LoadedCode";
LoadedCode, import { CheckboxDemo } from "./CheckboxBlocks/Preview";
GITHUB_COMP,
GITHUB_COMP_PREVIEW,
GITHUB_STORY,
} from "@/components/LoadedCode";
import Examples from "./CheckboxBlocks/Examples"; import Examples from "./CheckboxBlocks/Examples";
import Playground from "./CheckboxBlocks/Playground";
# Checkbox # Checkbox
A control that allows the user to toggle between checked and not checked. A control that allows the user to toggle between checked and not checked.
## Playground <TabProvider defaultName="preview">
<TabList>
<Playground /> <TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<CheckboxDemo />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={GITHUB_COMP_PREVIEW("Checkbox")} />
</TabContent>
</TabProvider>
## Installation ## Installation
@ -39,7 +44,7 @@ import { Checkbox } from "@components/Checkbox";
### Variants ### Variants
| Prop | Type | Default | Description | | Prop | Type | Default | Description |
| :----- | :----------------------- | :------ | :----------------------- | |:-------|:-------------------------|:--------|:-------------------------|
| `size` | `"base" \| "md" \| "lg"` | `"md"` | The size of the checkbox | | `size` | `"base" \| "md" \| "lg"` | `"md"` | The size of the checkbox |
## Examples ## Examples
@ -47,33 +52,33 @@ import { Checkbox } from "@components/Checkbox";
### Text ### Text
<TabProvider defaultName="preview"> <TabProvider defaultName="preview">
<TabList> <TabList>
<TabTrigger name="preview">Preview</TabTrigger> <TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger> <TabTrigger name="code">Code</TabTrigger>
</TabList> </TabList>
<TabContent name="preview"> <TabContent name="preview">
<Story layout="centered"> <Story layout="centered">
<Examples.Text /> <Examples.Text />
</Story> </Story>
</TabContent> </TabContent>
<TabContent name="code"> <TabContent name="code">
<LoadedCode from={GITHUB_STORY("Checkbox", "Text")} /> <LoadedCode from={GITHUB_STORY("Checkbox", "Text")} />
</TabContent> </TabContent>
</TabProvider> </TabProvider>
### Disabled ### Disabled
<TabProvider defaultName="preview"> <TabProvider defaultName="preview">
<TabList> <TabList>
<TabTrigger name="preview">Preview</TabTrigger> <TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger> <TabTrigger name="code">Code</TabTrigger>
</TabList> </TabList>
<TabContent name="preview"> <TabContent name="preview">
<Story layout="centered"> <Story layout="centered">
<Examples.Disabled /> <Examples.Disabled />
</Story> </Story>
</TabContent> </TabContent>
<TabContent name="code"> <TabContent name="code">
<LoadedCode from={GITHUB_STORY("Checkbox", "Disabled")} /> <LoadedCode from={GITHUB_STORY("Checkbox", "Disabled")} />
</TabContent> </TabContent>
</TabProvider> </TabProvider>

28
src/docs/components/CheckboxBlocks/Playground.tsx
View File

@ -1,28 +0,0 @@
import type { TEMPLATE } from "@/components/LoadedCode";
import { usePgProps } from "@/components/PgHooks";
import { PlaygroundLayout } from "@/components/Playground";
import { CheckboxDemo, type CheckboxDemoPlaygroundProps } from "./Preview";
interface TemplateProps extends TEMPLATE, CheckboxDemoPlaygroundProps {}
export default function CheckboxPlayground() {
const [props, control] = usePgProps<TemplateProps>({
CheckboxProps: {
size: {
type: "select",
options: ["base", "md", "lg"],
value: "md",
},
},
});
return (
<PlaygroundLayout
compName="Checkbox"
props={props}
control={control}
>
<CheckboxDemo {...props} />
</PlaygroundLayout>
);
}

12
src/docs/components/CheckboxBlocks/Preview.tsx
View File

@ -1,20 +1,10 @@
import { Checkbox } from "@pswui/Checkbox"; import { Checkbox } from "@pswui/Checkbox";
import { Label } from "@pswui/Label"; import { Label } from "@pswui/Label";
/* remove */
export interface CheckboxDemoPlaygroundProps {
CheckboxProps: {
size: "base" | "md" | "lg";
};
}
/* replace */
export function CheckboxDemo({ CheckboxProps }: CheckboxDemoPlaygroundProps) {
/* with
export function CheckboxDemo() { export function CheckboxDemo() {
*/
return ( return (
<Label direction="horizontal"> <Label direction="horizontal">
<Checkbox size={CheckboxProps.size} /> <Checkbox />
<span>Checkbox</span> <span>Checkbox</span>
</Label> </Label>
); );

194
src/docs/components/Dialog.mdx
View File

@ -1,68 +1,73 @@
import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs"; import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
import { Story } from "@/components/Story"; import { Story } from "@/components/Story";
import { import { LoadedCode, GITHUB_DIR_COMP, GITHUB_COMP_PREVIEW, GITHUB_STORY } from "@/components/LoadedCode";
LoadedCode,
GITHUB_DIR_COMP,
GITHUB_COMP_PREVIEW,
GITHUB_STORY,
} from "@/components/LoadedCode";
import { DialogDemo } from "./DialogBlocks/Preview"; import { DialogDemo } from "./DialogBlocks/Preview";
import Examples from "./DialogBlocks/Examples"; import Examples from "./DialogBlocks/Examples";
import Playground from "./DialogBlocks/Playground";
# Dialog # Dialog
A modal window that prompts the user to take an action or provides critical information. A modal window that prompts the user to take an action or provides critical information.
<Playground /> <TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<DialogDemo />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={GITHUB_COMP_PREVIEW("Dialog")} />
</TabContent>
</TabProvider>
## Installation ## Installation
1. Create a new directory named `Dialog` in your component folder. 1. Create a new directory named `Dialog` in your component folder.
2. Create following files in the folder, and paste the code into the file. 2. Create following files in the folder, and paste the code into the file.
* `index.ts`
- `index.ts` <LoadedCode from={GITHUB_DIR_COMP("Dialog", "index.ts")} />
<LoadedCode from={GITHUB_DIR_COMP("Dialog", "index.ts")} /> * `Context.ts`
- `Context.ts` <LoadedCode from={GITHUB_DIR_COMP("Dialog", "Context.ts")} />
<LoadedCode from={GITHUB_DIR_COMP("Dialog", "Context.ts")} /> * `Component.tsx`
- `Component.tsx` <LoadedCode from={GITHUB_DIR_COMP("Dialog", "Component.tsx")} />
<LoadedCode from={GITHUB_DIR_COMP("Dialog", "Component.tsx")} />
## Usage ## Usage
```tsx ```tsx
import { import {
DialogRoot, DialogRoot,
DialogTrigger, DialogTrigger,
DialogOverlay, DialogOverlay,
DialogContent, DialogContent,
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
DialogSubtitle, DialogSubtitle,
DialogFooter, DialogFooter,
DialogClose, DialogClose,
} from "@components/Dialog"; } from "@components/Dialog";
``` ```
```html ```html
<DialogRoot> <DialogRoot>
<DialogTrigger> <DialogTrigger>
<button>Open Dialog</button> <Button>Open Dialog</Button>
</DialogTrigger> </DialogTrigger>
<DialogOverlay> <DialogOverlay>
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle>Dialog Title</DialogTitle> <DialogTitle>Dialog Title</DialogTitle>
<DialogSubtitle>Dialog Subtitle</DialogSubtitle> <DialogSubtitle>Dialog Subtitle</DialogSubtitle>
</DialogHeader> </DialogHeader>
{/* Main Contents */} {/* Main Contents */}
<DialogFooter> <DialogFooter>
<DialogClose> <DialogClose>
<button>Close</button> <Button>Close</Button>
</DialogClose> </DialogClose>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
</DialogOverlay> </DialogOverlay>
</DialogRoot> </DialogRoot>
``` ```
@ -78,44 +83,99 @@ import {
### DialogOverlay ### DialogOverlay
#### Variants
| Prop | Type | Default | Description |
|:----------|:-----------------------|:--------|:---------------------------------------------|
| `blur` | `"sm" \| "md" \| "lg"` | `md` | Whether the background of dialog is blurred |
| `darken` | `"sm" \| "md" \| "lg"` | `md` | Whether the background of dialog is darkened |
| `padding` | `"sm" \| "md" \| "lg"` | `md` | Minimum margin of the dialog |
#### Special #### Special
| Prop | Type | Default | Description | | Prop | Type | Default | Description |
| :------------- | :-------- | :------ | :--------------------------------------------- | |:---------------|:----------|:--------|:-----------------------------------------------|
| `closeOnClick` | `boolean` | `false` | Whether the dialog will be closed when clicked | | `closeOnClick` | `boolean` | `false` | Whether the dialog will be closed when clicked |
### DialogContent
#### Variants
| Prop | Type | Default | Description |
|:----------|:---------------------------------------------------------------------|:--------|:-----------------------------------------------|
| `size` | `"fit" \| "fullSm" \| "fullMd" \| "fullLg" \| "fullXl" \| "full2xl"` | `fit` | Size of the dialog - width and max width |
| `rounded` | `"sm" \| "md" \| "lg" \| "xl"` | `md` | Roundness of the dialog |
| `padding` | `"sm" \| "md" \| "lg"` | `md` | Padding of the dialog |
| `gap` | `"sm" \| "md" \| "lg"` | `md` | Works like flex's gap - space between children |
### DialogHeader
#### Variants
| Prop | Type | Default | Description |
|:------|:-----------------------|:--------|:----------------------------------------------|
| `gap` | `"sm" \| "md" \| "lg"` | `sm` | Gap between the children - title and subtitle |
### DialogTitle
#### Variants
| Prop | Type | Default | Description |
|:---------|:-----------------------|:--------|:--------------------|
| `size` | `"sm" \| "md" \| "lg"` | `md` | Size of the title |
| `weight` | `"sm" \| "md" \| "lg"` | `lg` | Weight of the title |
### DialogSubtitle
#### Variants
| Prop | Type | Default | Description |
|:----------|:-----------------------|:--------|:------------------------|
| `size` | `"sm" \| "md" \| "lg"` | `sm` | Size of the subtitle |
| `weight` | `"sm" \| "md" \| "lg"` | `md` | Weight of the subtitle |
| `opacity` | `"sm" \| "md" \| "lg"` | `sm` | Opacity of the subtitle |
### DialogFooter
#### Variants
| Prop | Type | Default | Description |
|:------|:-----------------------|:--------|:-------------------------|
| `gap` | `"sm" \| "md" \| "lg"` | `sm` | Gap between the children |
## Examples ## Examples
### Basic Informational Dialog ### Basic Informational Dialog
<TabProvider defaultName="preview"> <TabProvider defaultName="preview">
<TabList> <TabList>
<TabTrigger name="preview">Preview</TabTrigger> <TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger> <TabTrigger name="code">Code</TabTrigger>
</TabList> </TabList>
<TabContent name="preview"> <TabContent name="preview">
<Story layout="centered"> <Story layout="centered">
<Examples.BasicInformationalDialog /> <Examples.BasicInformationalDialog />
</Story> </Story>
</TabContent> </TabContent>
<TabContent name="code"> <TabContent name="code">
<LoadedCode from={GITHUB_STORY("Dialog", "BasicInformationalDialog")} /> <LoadedCode from={GITHUB_STORY("Dialog", "BasicInformationalDialog")} />
</TabContent> </TabContent>
</TabProvider> </TabProvider>
### Deleting Item ### Deleting Item
<TabProvider defaultName="preview"> <TabProvider defaultName="preview">
<TabList> <TabList>
<TabTrigger name="preview">Preview</TabTrigger> <TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger> <TabTrigger name="code">Code</TabTrigger>
</TabList> </TabList>
<TabContent name="preview"> <TabContent name="preview">
<Story layout="centered"> <Story layout="centered">
<Examples.DeletingItem /> <Examples.DeletingItem />
</Story> </Story>
</TabContent> </TabContent>
<TabContent name="code"> <TabContent name="code">
<LoadedCode from={GITHUB_STORY("Dialog", "DeletingItem")} /> <LoadedCode from={GITHUB_STORY("Dialog", "DeletingItem")} />
</TabContent> </TabContent>
</TabProvider> </TabProvider>

2
src/docs/components/DialogBlocks/Examples/BasicInformationalDialog.tsx
View File

@ -18,7 +18,7 @@ export function BasicInformationalDialog() {
<Button preset="default">What is this?</Button> <Button preset="default">What is this?</Button>
</DialogTrigger> </DialogTrigger>
<DialogOverlay> <DialogOverlay>
<DialogContent> <DialogContent size={"fullMd"}>
<DialogHeader> <DialogHeader>
<DialogTitle>Dialog Title</DialogTitle> <DialogTitle>Dialog Title</DialogTitle>
<DialogSubtitle>Dialog Subtitle</DialogSubtitle> <DialogSubtitle>Dialog Subtitle</DialogSubtitle>

2
src/docs/components/DialogBlocks/Examples/DeletingItem.tsx
View File

@ -21,7 +21,7 @@ export function DeletingItem() {
<Button preset="danger">Delete Item</Button> <Button preset="danger">Delete Item</Button>
</DialogTrigger> </DialogTrigger>
<DialogOverlay> <DialogOverlay>
<DialogContent> <DialogContent size={"fullMd"}>
<DialogHeader> <DialogHeader>
<DialogTitle>Delete Item</DialogTitle> <DialogTitle>Delete Item</DialogTitle>
<DialogSubtitle> <DialogSubtitle>

27
src/docs/components/DialogBlocks/Playground.tsx
View File

@ -1,27 +0,0 @@
import type { TEMPLATE } from "@/components/LoadedCode";
import { usePgProps } from "@/components/PgHooks";
import { PlaygroundLayout } from "@/components/Playground";
import { DialogDemo, type DialogDemoPlaygroundProps } from "./Preview";
interface TemplateProps extends TEMPLATE, DialogDemoPlaygroundProps {}
export default function DialogPlayground() {
const [props, control] = usePgProps<TemplateProps>({
DialogOverlayProps: {
closeOnClick: {
type: "boolean",
value: false,
},
},
});
return (
<PlaygroundLayout
compName="Dialog"
control={control}
props={props}
>
<DialogDemo {...props} />
</PlaygroundLayout>
);
}

16
src/docs/components/DialogBlocks/Preview.tsx
View File

@ -10,25 +10,15 @@ import {
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "@pswui/Dialog"; } from "@pswui/Dialog";
/* remove */
export interface DialogDemoPlaygroundProps {
DialogOverlayProps: {
closeOnClick: boolean;
};
}
/* end */
/* replace */
export function DialogDemo({ DialogOverlayProps }: DialogDemoPlaygroundProps) {
/* with
export function DialogDemo() { export function DialogDemo() {
*/
return ( return (
<DialogRoot> <DialogRoot>
<DialogTrigger> <DialogTrigger>
<Button preset="default">Open Dialog</Button> <Button preset="default">Open Dialog</Button>
</DialogTrigger> </DialogTrigger>
<DialogOverlay closeOnClick={DialogOverlayProps.closeOnClick}> <DialogOverlay>
<DialogContent> <DialogContent size={"fullMd"}>
<DialogHeader> <DialogHeader>
<DialogTitle>Dialog Title</DialogTitle> <DialogTitle>Dialog Title</DialogTitle>
<DialogSubtitle>Dialog Subtitle</DialogSubtitle> <DialogSubtitle>Dialog Subtitle</DialogSubtitle>

24
src/docs/components/Drawer.mdx
View File

@ -1,13 +1,26 @@
import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs"; import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
import { Story } from "@/components/Story"; import { Story } from "@/components/Story";
import { LoadedCode, GITHUB_COMP, GITHUB_COMP_PREVIEW, GITHUB_STORY } from '@/components/LoadedCode'; import { LoadedCode, GITHUB_COMP, GITHUB_COMP_PREVIEW, GITHUB_STORY } from '@/components/LoadedCode';
import { DrawerDemo } from "./DrawerBlocks/Preview";
import Examples from "./DrawerBlocks/Examples"; import Examples from "./DrawerBlocks/Examples";
import Playground from "./DrawerBlocks/Playground";
# Drawer # Drawer
Displays a panel that slides out from the edge of the screen, typically used for navigation or additional content. Displays a panel that slides out from the edge of the screen, typically used for navigation or additional content.
<Playground /> <TabProvider defaultName="preview">
<TabList>
<TabTrigger name="preview">Preview</TabTrigger>
<TabTrigger name="code">Code</TabTrigger>
</TabList>
<TabContent name="preview">
<Story layout="centered">
<DrawerDemo />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={GITHUB_COMP_PREVIEW("Drawer")} />
</TabContent>
</TabProvider>
## Installation ## Installation
@ -85,10 +98,9 @@ import {
#### Variants #### Variants
| Prop | Type | Default | Description | | Prop | Type | Default | Description |
|:-----------|:-----------------------------------------|:---------|:--------------------------------------------| |:-----------|:-----------------------------------------|:---------|:---------------------------|
| `position` | `"top" \| "bottom" \| "left" \| "right"` | `"left"` | The position of the drawer | | `position` | `"top" \| "bottom" \| "left" \| "right"` | `"left"` | The position of the drawer |
| `maxSize` | `"sm" \| "md" \| "lg" \| "xl"` | `"sm"` | max width ignored on top or bottom position |
#### Special #### Special

2
src/docs/components/DrawerBlocks/Examples/Bottom.tsx
View File

@ -16,7 +16,7 @@ export const Bottom = () => {
<DrawerTrigger> <DrawerTrigger>
<Button>Open Drawer</Button> <Button>Open Drawer</Button>
</DrawerTrigger> </DrawerTrigger>
<DrawerOverlay className="z-99"> <DrawerOverlay className="z-[99]">
<DrawerContent position="bottom"> <DrawerContent position="bottom">
<DrawerHeader> <DrawerHeader>
<h1 className="text-2xl font-bold">Drawer</h1> <h1 className="text-2xl font-bold">Drawer</h1>

2
src/docs/components/DrawerBlocks/Examples/Left.tsx
View File

@ -16,7 +16,7 @@ export const Left = () => {
<DrawerTrigger> <DrawerTrigger>
<Button>Open Drawer</Button> <Button>Open Drawer</Button>
</DrawerTrigger> </DrawerTrigger>
<DrawerOverlay className="z-99"> <DrawerOverlay className="z-[99]">
<DrawerContent <DrawerContent
position="left" position="left"
className="max-w-[320px]" className="max-w-[320px]"

2
src/docs/components/DrawerBlocks/Examples/Right.tsx
View File

@ -16,7 +16,7 @@ export const Right = () => {
<DrawerTrigger> <DrawerTrigger>
<Button>Open Drawer</Button> <Button>Open Drawer</Button>
</DrawerTrigger> </DrawerTrigger>
<DrawerOverlay className="z-99"> <DrawerOverlay className="z-[99]">
<DrawerContent <DrawerContent
position="right" position="right"
className="max-w-[320px]" className="max-w-[320px]"

2
src/docs/components/DrawerBlocks/Examples/Top.tsx
View File

@ -16,7 +16,7 @@ export const Top = () => {
<DrawerTrigger> <DrawerTrigger>
<Button>Open Drawer</Button> <Button>Open Drawer</Button>
</DrawerTrigger> </DrawerTrigger>
<DrawerOverlay className="z-99"> <DrawerOverlay className="z-[99]">
<DrawerContent position="top"> <DrawerContent position="top">
<DrawerHeader> <DrawerHeader>
<h1 className="text-2xl font-bold">Drawer</h1> <h1 className="text-2xl font-bold">Drawer</h1>

39
src/docs/components/DrawerBlocks/Playground.tsx
View File

@ -1,39 +0,0 @@
import type { TEMPLATE } from "@/components/LoadedCode";
import { usePgProps } from "@/components/PgHooks";
import { PlaygroundLayout } from "@/components/Playground";
import { DrawerDemo, type DrawerDemoPlaygroundProps } from "./Preview";
interface TemplateProps extends TEMPLATE, DrawerDemoPlaygroundProps {}
export default function DrawerPlayground() {
const [props, control] = usePgProps<TemplateProps>({
DrawerRootProps: {
closeThreshold: {
type: "number",
value: 0.3,
},
},
DrawerContentProps: {
position: {
type: "select",
options: ["top", "bottom", "left", "right"],
value: "left",
},
maxSize: {
type: "select",
options: ["sm", "md", "lg", "xl"],
value: "sm",
},
},
});
return (
<PlaygroundLayout
compName="Drawer"
control={control}
props={props}
>
<DrawerDemo {...props} />
</PlaygroundLayout>
);
}

32
src/docs/components/DrawerBlocks/Preview.tsx
View File

@ -9,35 +9,15 @@ import {
DrawerRoot, DrawerRoot,
DrawerTrigger, DrawerTrigger,
} from "@pswui/Drawer"; } from "@pswui/Drawer";
/* remove */
export interface DrawerDemoPlaygroundProps { export const DrawerDemo = () => {
DrawerRootProps: {
closeThreshold: number;
};
DrawerContentProps: {
position: "top" | "bottom" | "left" | "right";
maxSize: "sm" | "md" | "lg" | "xl";
};
}
/* end */
/* replace */
export function DrawerDemo({
DrawerRootProps,
DrawerContentProps,
}: DrawerDemoPlaygroundProps) {
/* with
export function DrawerDemo() {
*/
return ( return (
<DrawerRoot closeThreshold={DrawerRootProps.closeThreshold}> <DrawerRoot>
<DrawerTrigger> <DrawerTrigger>
<Button>Open Drawer</Button> <Button>Open Drawer</Button>
</DrawerTrigger> </DrawerTrigger>
<DrawerOverlay className="z-99"> <DrawerOverlay className="z-[99]">
<DrawerContent <DrawerContent className="max-w-[320px]">
position={DrawerContentProps.position}
maxSize={DrawerContentProps.maxSize}
>
<DrawerHeader> <DrawerHeader>
<h1 className="text-2xl font-bold">Drawer</h1> <h1 className="text-2xl font-bold">Drawer</h1>
</DrawerHeader> </DrawerHeader>
@ -57,4 +37,4 @@ export function DrawerDemo() {
</DrawerOverlay> </DrawerOverlay>
</DrawerRoot> </DrawerRoot>
); );
} };

7
src/docs/components/PopoverBlocks/Examples/ThemeSelector.tsx
View File

@ -51,12 +51,7 @@ export const ThemeSelector = () => {
{theme === "light" ? <LightIcon /> : <DarkIcon />} {theme === "light" ? <LightIcon /> : <DarkIcon />}
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent anchor={"bottomCenter"}>
direction={"col"}
position={"end"}
anchor={"middle"}
align={"middle"}
>
<Button <Button
onClick={() => setTheme("dark")} onClick={() => setTheme("dark")}
preset={"ghost"} preset={"ghost"}

8
src/docs/components/PopoverBlocks/Examples/UserControl.tsx
View File

@ -77,8 +77,7 @@ const SignInForm = () => {
return ( return (
<PopoverContent <PopoverContent
anchor={"end"} anchor={"bottomLeft"}
align={"end"}
className={"p-4 space-y-3"} className={"p-4 space-y-3"}
> >
<Label> <Label>
@ -128,10 +127,7 @@ const UserControlContent = () => {
} }
return ( return (
<PopoverContent <PopoverContent anchor={"bottomLeft"}>
anchor={"end"}
align={"end"}
>
<Button preset={"ghost"}>Dashboard</Button> <Button preset={"ghost"}>Dashboard</Button>
<Button <Button
preset={"ghost"} preset={"ghost"}

362
src/docs/components/PopoverBlocks/Playground.tsx
View File

@ -1,58 +1,328 @@
import type { TEMPLATE } from "@/components/LoadedCode.tsx"; import { GITHUB_COMP_PREVIEW, LoadedCode } from "@/components/LoadedCode.tsx";
import { usePgProps } from "@/components/PgHooks.tsx"; import { Story } from "@/components/Story";
import { PlaygroundLayout } from "@/components/Playground.tsx"; import useMutable from "@/utils/useMutable.ts";
import { Button } from "@pswui/Button.tsx";
import { Checkbox } from "@pswui/Checkbox.tsx";
import { Label } from "@pswui/Label.tsx";
import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover.tsx";
import { TabContent, TabList, TabProvider, TabTrigger } from "@pswui/Tabs";
import { type ControlledPopoverDemoProps, PopoverDemo } from "./Preview.tsx"; import { type ControlledPopoverDemoProps, PopoverDemo } from "./Preview.tsx";
interface TemplateProps extends TEMPLATE, ControlledPopoverDemoProps {}
export default function PopoverPlayground() { export default function PopoverPlayground() {
const [props, control] = usePgProps<TemplateProps>({ const [props, mutate] = useMutable<ControlledPopoverDemoProps>({
PopoverProps: { PopoverProps: {
opened: { opened: false,
type: "boolean",
value: false,
},
}, },
PopoverContentProps: { PopoverContentProps: {
direction: { direction: "col",
type: "select", position: "end",
options: ["col", "row"], anchor: "middle",
value: "col", align: "middle",
}, offset: "md",
position: { className: "",
type: "select",
options: ["start", "end"],
value: "end",
},
anchor: {
type: "select",
options: ["start", "middle", "end"],
value: "middle",
},
align: {
type: "select",
options: ["start", "middle", "end"],
value: "middle",
},
offset: {
type: "select",
options: ["sm", "md", "lg"],
value: "md",
},
className: {
type: "string",
value: "",
},
}, },
}); });
return ( return (
<PlaygroundLayout <>
compName="Popover" <TabProvider defaultName="preview">
props={props} <TabList>
control={control} <TabTrigger name="preview">Preview</TabTrigger>
> <TabTrigger name="code">Code</TabTrigger>
<PopoverDemo {...props} /> </TabList>
</PlaygroundLayout> <TabContent name="preview">
<Story layout="centered">
<PopoverDemo {...props} />
</Story>
</TabContent>
<TabContent name="code">
<LoadedCode from={GITHUB_COMP_PREVIEW("Popover")} />
</TabContent>
</TabProvider>
<h3>Controls</h3>
<div
className={
"rounded-lg p-4 border border-neutral-300 dark:border-neutral-700 flex flex-col justify-center items-start gap-2"
}
>
<Label direction={"horizontal"}>
<span>opened </span>
<Checkbox
checked={props.PopoverProps.opened}
onChange={(e) => {
const v = e.currentTarget.checked;
mutate((p) => {
p.PopoverProps.opened = v;
});
}}
/>
</Label>
<Label direction={"horizontal"}>
<span>direction = </span>
<Popover>
<PopoverTrigger>
<Button className={"gap-2"}>
{props.PopoverContentProps.direction}
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<title>Expand</title>
<path
fill="currentColor"
d="M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z"
/>
</svg>
</Button>
</PopoverTrigger>
<PopoverContent
anchor={"start"}
align={"start"}
>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.direction = "col";
})
}
>
Column
</Button>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.direction = "row";
})
}
>
Row
</Button>
</PopoverContent>
</Popover>
</Label>
<Label direction={"horizontal"}>
<span>position = </span>
<Popover>
<PopoverTrigger>
<Button className={"gap-2"}>
{props.PopoverContentProps.position}
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<title>Expand</title>
<path
fill="currentColor"
d="M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z"
/>
</svg>
</Button>
</PopoverTrigger>
<PopoverContent
anchor={"start"}
align={"start"}
>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.position = "start";
})
}
>
Start
</Button>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.position = "end";
})
}
>
End
</Button>
</PopoverContent>
</Popover>
</Label>
<Label direction={"horizontal"}>
<span>anchor = </span>
<Popover>
<PopoverTrigger>
<Button className={"gap-2"}>
{props.PopoverContentProps.anchor}
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<title>Expand</title>
<path
fill="currentColor"
d="M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z"
/>
</svg>
</Button>
</PopoverTrigger>
<PopoverContent
anchor={"start"}
align={"start"}
>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.anchor = "start";
})
}
>
Start
</Button>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.anchor = "middle";
})
}
>
Middle
</Button>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.anchor = "end";
})
}
>
End
</Button>
</PopoverContent>
</Popover>
</Label>
<Label direction={"horizontal"}>
<span>align = </span>
<Popover>
<PopoverTrigger>
<Button className={"gap-2"}>
{props.PopoverContentProps.align}
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<title>Expand</title>
<path
fill="currentColor"
d="M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z"
/>
</svg>
</Button>
</PopoverTrigger>
<PopoverContent
anchor={"start"}
align={"start"}
>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.align = "start";
})
}
>
Start
</Button>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.align = "middle";
})
}
>
Middle
</Button>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.align = "end";
})
}
>
End
</Button>
</PopoverContent>
</Popover>
</Label>
<Label direction={"horizontal"}>
<span>offset = </span>
<Popover>
<PopoverTrigger>
<Button className={"gap-2"}>
{props.PopoverContentProps.offset}
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<title>Expand</title>
<path
fill="currentColor"
d="M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z"
/>
</svg>
</Button>
</PopoverTrigger>
<PopoverContent
anchor={"start"}
align={"start"}
>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.offset = "sm";
})
}
>
Small
</Button>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.offset = "md";
})
}
>
Middle
</Button>
<Button
preset={"ghost"}
onClick={() =>
mutate((p) => {
p.PopoverContentProps.offset = "lg";
})
}
>
Large
</Button>
</PopoverContent>
</Popover>
</Label>
</div>
</>
); );
} }

21
src/docs/components/PopoverBlocks/Preview.tsx
View File

@ -1,6 +1,5 @@
import { Button } from "@pswui/Button"; import { Button } from "@pswui/Button";
import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover"; import { Popover, PopoverContent, PopoverTrigger } from "@pswui/Popover";
/* remove */
export interface ControlledPopoverDemoProps { export interface ControlledPopoverDemoProps {
PopoverProps: { PopoverProps: {
@ -16,17 +15,12 @@ export interface ControlledPopoverDemoProps {
}; };
} }
/* end */
/* replace */
export function PopoverDemo({ export function PopoverDemo({
PopoverProps, PopoverProps,
PopoverContentProps, PopoverContentProps,
}: ControlledPopoverDemoProps) { }: ControlledPopoverDemoProps) {
/* with
export function PopoverDemo() {
*/
return ( return (
<Popover opened={PopoverProps.opened}> <Popover {...PopoverProps}>
<PopoverTrigger> <PopoverTrigger>
<Button size="icon"> <Button size="icon">
<svg <svg
@ -43,14 +37,7 @@ export function PopoverDemo() {
</svg> </svg>
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent {...PopoverContentProps}>
direction={PopoverContentProps.direction}
position={PopoverContentProps.position}
anchor={PopoverContentProps.anchor}
align={PopoverContentProps.align}
offset={PopoverContentProps.offset}
className={PopoverContentProps.className}
>
<Button <Button
preset="ghost" preset="ghost"
className="gap-2" className="gap-2"
@ -67,7 +54,7 @@ export function PopoverDemo() {
d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z" d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"
/> />
</svg> </svg>
<span className="grow text-left">Dashboard</span> <span className="flex-grow text-left">Dashboard</span>
</Button> </Button>
<Button <Button
preset="ghost" preset="ghost"
@ -85,7 +72,7 @@ export function PopoverDemo() {
d="m17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5M4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4z" d="m17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5M4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4z"
/> />
</svg> </svg>
<span className="grow text-left">Log out</span> <span className="flex-grow text-left">Log out</span>
</Button> </Button>
</PopoverContent> </PopoverContent>
</Popover> </Popover>

2
src/docs/components/Tabs.mdx
View File

@ -12,7 +12,7 @@ Organizes content into multiple sections with tabbed navigation.
<TabTrigger name="code">Code</TabTrigger> <TabTrigger name="code">Code</TabTrigger>
</TabList> </TabList>
<TabContent name="preview"> <TabContent name="preview">
<Story layout="centered" className="flex-col *:w-full"> <Story layout="centered" className="flex-col [&>*]:w-full">
<TabsDemo /> <TabsDemo />
</Story> </Story>
</TabContent> </TabContent>

2
src/errors/PageNotFound.tsx
View File

@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
function PageNotFound() { function PageNotFound() {
return ( return (
<main className="grow h-full flex flex-col justify-center items-center gap-8"> <main className="flex-grow h-full flex flex-col justify-center items-center gap-8">
<section className="flex flex-col justify-center items-center text-center gap-2"> <section className="flex flex-col justify-center items-center text-center gap-2">
<h1 className="text-4xl font-bold">Page not found</h1> <h1 className="text-4xl font-bold">Page not found</h1>
<p className="text-base"> <p className="text-base">

2
src/errors/Unexpected.tsx
View File

@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
function UnexpectedError() { function UnexpectedError() {
return ( return (
<main className="grow h-full flex flex-col justify-center items-center gap-8"> <main className="flex-grow h-full flex flex-col justify-center items-center gap-8">
<section className="flex flex-col justify-center items-center text-center gap-2"> <section className="flex flex-col justify-center items-center text-center gap-2">
<h1 className="text-4xl font-bold">Something went wrong</h1> <h1 className="text-4xl font-bold">Something went wrong</h1>
<p className="text-base"> <p className="text-base">

26
src/pswui/components/Button.tsx
View File

@ -14,18 +14,21 @@ const colors = {
danger: "border-red-400 dark:border-red-600", danger: "border-red-400 dark:border-red-600",
}, },
background: { background: {
default: "bg-white dark:bg-black", default:
"bg-white dark:bg-black hover:bg-neutral-200 dark:hover:bg-neutral-800",
ghost: ghost:
"bg-black/0 dark:bg-white/0 hover:bg-black/20 dark:hover:bg-white/20", "bg-black/0 dark:bg-white/0 hover:bg-black/20 dark:hover:bg-white/20",
success: "bg-green-100 dark:bg-green-900", success:
warning: "bg-yellow-100 dark:bg-yellow-900", "bg-green-100 dark:bg-green-900 hover:bg-green-200 dark:hover:bg-green-800",
danger: "bg-red-100 dark:bg-red-900", warning:
"bg-yellow-100 dark:bg-yellow-900 hover:bg-yellow-200 dark:hover:bg-yellow-800",
danger: "bg-red-100 dark:bg-red-900 hover:bg-red-200 dark:hover:bg-red-800",
}, },
underline: "decoration-current", underline: "decoration-current",
}; };
const [buttonVariants, resolveVariants] = vcn({ const [buttonVariants, resolveVariants] = vcn({
base: `w-fit flex flex-row items-center justify-between rounded-md outline outline-1 outline-transparent outline-offset-2 hover:brightness-90 dark:hover:brightness-110 ${colors.outline.focus} ${colors.disabled} transition-all cursor-pointer`, base: `w-fit flex flex-row items-center justify-between rounded-md outline outline-1 outline-transparent outline-offset-2 ${colors.outline.focus} ${colors.disabled} transition-all cursor-pointer`,
variants: { variants: {
size: { size: {
link: "p-0 text-base", link: "p-0 text-base",
@ -108,22 +111,21 @@ export interface ButtonProps
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
(props, ref) => { (props, ref) => {
const [variantProps, otherPropsCompressed] = resolveVariants(props); const [variantProps, otherPropsCompressed] = resolveVariants(props);
const { asChild, type, role, ...otherPropsExtracted } = const { asChild, ...otherPropsExtracted } = otherPropsCompressed;
otherPropsCompressed;
const Comp = asChild ? Slot : "button"; const Comp = asChild ? Slot : "button";
const compProps = {
...otherPropsExtracted,
className: buttonVariants(variantProps),
};
return ( return (
<Comp <Comp
ref={ref} ref={ref}
type={type ?? "button"} {...compProps}
className={buttonVariants(variantProps)}
role={role ?? "button"}
{...otherPropsExtracted}
/> />
); );
}, },
); );
Button.displayName = "Button";
export { Button }; export { Button };

18
src/pswui/components/Checkbox.tsx
View File

@ -18,10 +18,12 @@ const checkboxColors = {
disabledCheckedHover: disabledCheckedHover:
"has-[input[type='checkbox']:disabled:checked]:hover:bg-neutral-300 dark:has-[input[type='checkbox']:disabled:checked]:hover:bg-neutral-700", "has-[input[type='checkbox']:disabled:checked]:hover:bg-neutral-300 dark:has-[input[type='checkbox']:disabled:checked]:hover:bg-neutral-700",
}, },
checkmark:
"text-black dark:text-white has-[input[type=checkbox]:disabled]:text-neutral-400 dark:has-[input[type=checkbox]:disabled]:text-neutral-500",
}; };
const [checkboxVariant, resolveCheckboxVariantProps] = vcn({ const [checkboxVariant, resolveCheckboxVariantProps] = vcn({
base: `inline-block rounded-md ${checkboxColors.background.disabled} ${checkboxColors.background.default} ${checkboxColors.background.hover} ${checkboxColors.background.checked} ${checkboxColors.background.checkedHover} ${checkboxColors.background.disabledChecked} ${checkboxColors.background.disabledCheckedHover} has-[input[type="checkbox"]:disabled]:cursor-not-allowed transition-colors duration-150 ease-in-out`, base: `inline-block rounded-md ${checkboxColors.checkmark} ${checkboxColors.background.disabled} ${checkboxColors.background.default} ${checkboxColors.background.hover} ${checkboxColors.background.checked} ${checkboxColors.background.checkedHover} ${checkboxColors.background.disabledChecked} ${checkboxColors.background.disabledCheckedHover} has-[input[type="checkbox"]:disabled]:cursor-not-allowed transition-colors duration-75 ease-in-out`,
variants: { variants: {
size: { size: {
base: "size-[1em] p-0 [&>svg]:size-[1em]", base: "size-[1em] p-0 [&>svg]:size-[1em]",
@ -90,11 +92,23 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
} }
}} }}
/> />
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
className={`${checked ? "opacity-100" : "opacity-0"} transition-opacity duration-75 ease-in-out`}
>
<title>checked</title>
<path
fill="currentColor"
d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z"
/>
</svg>
</label> </label>
</> </>
); );
}, },
); );
Checkbox.displayName = "Checkbox";
export { Checkbox }; export { Checkbox };

213
src/pswui/components/Dialog/Component.tsx
View File

@ -1,5 +1,5 @@
import { Slot, type VariantProps, useDocument, vcn } from "@pswui-lib"; import { Slot, type VariantProps, vcn } from "@pswui-lib";
import React, { type ReactNode, useState } from "react"; import React, { useState } from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import { import {
@ -55,15 +55,33 @@ const DialogTrigger = ({ children }: DialogTriggerProps) => {
*/ */
const [dialogOverlayVariant, resolveDialogOverlayVariant] = vcn({ const [dialogOverlayVariant, resolveDialogOverlayVariant] = vcn({
base: "fixed inset-0 z-50 w-full h-screen overflow-y-auto max-w-screen transition-all duration-300 backdrop-blur-md backdrop-brightness-75 [&>div]:p-6", base: "fixed inset-0 z-50 w-full h-screen overflow-y-auto max-w-screen transition-all duration-300",
variants: { variants: {
opened: { opened: {
true: "pointer-events-auto opacity-100", true: "pointer-events-auto opacity-100",
false: "pointer-events-none opacity-0", false: "pointer-events-none opacity-0",
}, },
blur: {
sm: "backdrop-blur-sm",
md: "backdrop-blur-md",
lg: "backdrop-blur-lg",
},
darken: {
sm: "backdrop-brightness-90",
md: "backdrop-brightness-75",
lg: "backdrop-brightness-50",
},
padding: {
sm: "[&>div]:p-4",
md: "[&>div]:p-6",
lg: "[&>div]:p-8",
},
}, },
defaults: { defaults: {
opened: false, opened: false,
blur: "md",
darken: "md",
padding: "md",
}, },
}); });
@ -82,36 +100,35 @@ const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlay>(
}); });
const { children, closeOnClick, onClick, ...otherPropsExtracted } = const { children, closeOnClick, onClick, ...otherPropsExtracted } =
otherPropsCompressed; otherPropsCompressed;
return (
const document = useDocument(); <>
if (!document) return null; {ReactDOM.createPortal(
<div
return ReactDOM.createPortal( {...otherPropsExtracted}
<div ref={ref}
{...otherPropsExtracted} className={dialogOverlayVariant(variantProps)}
ref={ref} onClick={(e) => {
className={dialogOverlayVariant(variantProps)} if (closeOnClick) {
onClick={(e) => { setContext((p) => ({ ...p, opened: false }));
if (closeOnClick) { }
setContext((p) => ({ ...p, opened: false })); onClick?.(e);
} }}
onClick?.(e); >
}} <div
> className={
<div "w-screen max-w-full min-h-screen flex flex-col justify-center items-center"
className={ }
"w-screen max-w-full min-h-screen flex flex-col justify-center items-center" >
} {/* Layer for overflow positioning */}
> {children}
{/* Layer for overflow positioning */} </div>
{children} </div>,
</div> document.body,
</div>, )}
document.body, </>
); );
}, },
); );
DialogOverlay.displayName = "DialogOverlay";
/** /**
* ========================= * =========================
@ -120,15 +137,43 @@ DialogOverlay.displayName = "DialogOverlay";
*/ */
const [dialogContentVariant, resolveDialogContentVariant] = vcn({ const [dialogContentVariant, resolveDialogContentVariant] = vcn({
base: "transition-transform duration-300 bg-white dark:bg-black border border-neutral-200 dark:border-neutral-800 p-6 w-full max-w-xl rounded-md flex flex-col justify-start items-start gap-6", base: "transition-transform duration-300 bg-white dark:bg-black border border-neutral-200 dark:border-neutral-800",
variants: { variants: {
opened: { opened: {
true: "scale-100", true: "scale-100",
false: "scale-50", false: "scale-50",
}, },
size: {
fit: "w-fit",
fullSm: "w-full max-w-sm",
fullMd: "w-full max-w-md",
fullLg: "w-full max-w-lg",
fullXl: "w-full max-w-xl",
full2xl: "w-full max-w-2xl",
},
rounded: {
sm: "rounded-sm",
md: "rounded-md",
lg: "rounded-lg",
xl: "rounded-xl",
},
padding: {
sm: "p-4",
md: "p-6",
lg: "p-8",
},
gap: {
sm: "space-y-4",
md: "space-y-6",
lg: "space-y-8",
},
}, },
defaults: { defaults: {
opened: false, opened: false,
size: "fit",
rounded: "md",
padding: "md",
gap: "md",
}, },
}); });
@ -159,7 +204,6 @@ const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
); );
}, },
); );
DialogContent.displayName = "DialogContent";
/** /**
* ========================= * =========================
@ -190,9 +234,17 @@ const DialogClose = ({ children }: DialogCloseProps) => {
*/ */
const [dialogHeaderVariant, resolveDialogHeaderVariant] = vcn({ const [dialogHeaderVariant, resolveDialogHeaderVariant] = vcn({
base: "flex flex-col gap-2", base: "flex flex-col",
variants: {}, variants: {
defaults: {}, gap: {
sm: "gap-2",
md: "gap-4",
lg: "gap-6",
},
},
defaults: {
gap: "sm",
},
}); });
interface DialogHeaderProps interface DialogHeaderProps
@ -216,8 +268,6 @@ const DialogHeader = React.forwardRef<HTMLElement, DialogHeaderProps>(
}, },
); );
DialogHeader.displayName = "DialogHeader";
/** /**
* ========================= * =========================
* DialogTitle / DialogSubtitle * DialogTitle / DialogSubtitle
@ -225,9 +275,22 @@ DialogHeader.displayName = "DialogHeader";
*/ */
const [dialogTitleVariant, resolveDialogTitleVariant] = vcn({ const [dialogTitleVariant, resolveDialogTitleVariant] = vcn({
base: "text-xl font-bold", variants: {
variants: {}, size: {
defaults: {}, sm: "text-lg",
md: "text-xl",
lg: "text-2xl",
},
weight: {
sm: "font-medium",
md: "font-semibold",
lg: "font-bold",
},
},
defaults: {
size: "md",
weight: "lg",
},
}); });
interface DialogTitleProps interface DialogTitleProps
@ -235,9 +298,28 @@ interface DialogTitleProps
VariantProps<typeof dialogTitleVariant> {} VariantProps<typeof dialogTitleVariant> {}
const [dialogSubtitleVariant, resolveDialogSubtitleVariant] = vcn({ const [dialogSubtitleVariant, resolveDialogSubtitleVariant] = vcn({
base: "text-sm opacity-60 font-normal", variants: {
variants: {}, size: {
defaults: {}, sm: "text-sm",
md: "text-base",
lg: "text-lg",
},
opacity: {
sm: "opacity-60",
md: "opacity-70",
lg: "opacity-80",
},
weight: {
sm: "font-light",
md: "font-normal",
lg: "font-medium",
},
},
defaults: {
size: "sm",
opacity: "sm",
weight: "md",
},
}); });
interface DialogSubtitleProps interface DialogSubtitleProps
@ -260,7 +342,6 @@ const DialogTitle = React.forwardRef<HTMLHeadingElement, DialogTitleProps>(
); );
}, },
); );
DialogTitle.displayName = "DialogTitle";
const DialogSubtitle = React.forwardRef< const DialogSubtitle = React.forwardRef<
HTMLHeadingElement, HTMLHeadingElement,
@ -279,7 +360,6 @@ const DialogSubtitle = React.forwardRef<
</h2> </h2>
); );
}); });
DialogSubtitle.displayName = "DialogSubtitle";
/** /**
* ========================= * =========================
@ -288,9 +368,17 @@ DialogSubtitle.displayName = "DialogSubtitle";
*/ */
const [dialogFooterVariant, resolveDialogFooterVariant] = vcn({ const [dialogFooterVariant, resolveDialogFooterVariant] = vcn({
base: "flex w-full flex-col items-end sm:flex-row sm:items-center sm:justify-end gap-2", base: "flex flex-col items-end sm:flex-row sm:items-center sm:justify-end",
variants: {}, variants: {
defaults: {}, gap: {
sm: "gap-2",
md: "gap-4",
lg: "gap-6",
},
},
defaults: {
gap: "md",
},
}); });
interface DialogFooterProps interface DialogFooterProps
@ -313,34 +401,6 @@ const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(
); );
}, },
); );
DialogFooter.displayName = "DialogFooter";
interface DialogControllers {
context: IDialogContext;
setContext: React.Dispatch<React.SetStateAction<IDialogContext>>;
close: () => void;
}
interface DialogControllerProps {
children: (controllers: DialogControllers) => ReactNode;
}
const DialogController = (props: DialogControllerProps) => {
return (
<DialogContext.Consumer>
{([context, setContext]) =>
props.children({
context,
setContext,
close() {
setContext((p) => ({ ...p, opened: false }));
},
})
}
</DialogContext.Consumer>
);
};
export { export {
DialogRoot, DialogRoot,
@ -352,5 +412,4 @@ export {
DialogTitle, DialogTitle,
DialogSubtitle, DialogSubtitle,
DialogFooter, DialogFooter,
DialogController,
}; };

136
src/pswui/components/Drawer.tsx
View File

@ -1,11 +1,4 @@
import { import { type AsChild, Slot, type VariantProps, vcn } from "@pswui-lib";
type AsChild,
Slot,
type VariantProps,
useAnimatedMount,
useDocument,
vcn,
} from "@pswui-lib";
import React, { import React, {
type ComponentPropsWithoutRef, type ComponentPropsWithoutRef,
type TouchEvent as ReactTouchEvent, type TouchEvent as ReactTouchEvent,
@ -22,8 +15,6 @@ interface IDrawerContext {
closeThreshold: number; closeThreshold: number;
movePercentage: number; movePercentage: number;
isDragging: boolean; isDragging: boolean;
isMounted: boolean;
isRendered: boolean;
leaveWhileDragging: boolean; leaveWhileDragging: boolean;
} }
const DrawerContextInitial: IDrawerContext = { const DrawerContextInitial: IDrawerContext = {
@ -31,8 +22,6 @@ const DrawerContextInitial: IDrawerContext = {
closeThreshold: 0.3, closeThreshold: 0.3,
movePercentage: 0, movePercentage: 0,
isDragging: false, isDragging: false,
isMounted: false,
isRendered: false,
leaveWhileDragging: false, leaveWhileDragging: false,
}; };
const DrawerContext = React.createContext< const DrawerContext = React.createContext<
@ -107,14 +96,8 @@ interface DrawerOverlayProps
const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>( const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
(props, ref) => { (props, ref) => {
const internalRef = useRef<HTMLDivElement | null>(null);
const [state, setState] = useContext(DrawerContext); const [state, setState] = useContext(DrawerContext);
const { isMounted, isRendered } = useAnimatedMount(
state.isDragging ? true : state.opened,
internalRef,
);
const [variantProps, restPropsCompressed] = const [variantProps, restPropsCompressed] =
resolveDrawerOverlayVariantProps(props); resolveDrawerOverlayVariantProps(props);
const { asChild, ...restPropsExtracted } = restPropsCompressed; const { asChild, ...restPropsExtracted } = restPropsCompressed;
@ -136,46 +119,25 @@ const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
: 1 : 1
})`; })`;
const document = useDocument(); return createPortal(
if (!document) return null; <Comp
{...restPropsExtracted}
return ( className={drawerOverlayVariant({
<> ...variantProps,
<DrawerContext.Provider opened: state.isDragging ? true : state.opened,
value={[{ ...state, isMounted, isRendered }, setState]} })}
> onClick={onOutsideClick}
{isMounted style={{
? createPortal( backdropFilter,
<Comp WebkitBackdropFilter: backdropFilter,
{...restPropsExtracted} transitionDuration: state.isDragging ? "0s" : undefined,
className={drawerOverlayVariant({ }}
...variantProps, ref={ref}
opened: isRendered, />,
})} document.body,
onClick={onOutsideClick}
style={{
backdropFilter,
WebkitBackdropFilter: backdropFilter,
transitionDuration: state.isDragging ? "0s" : undefined,
}}
ref={(el: HTMLDivElement) => {
internalRef.current = el;
if (typeof ref === "function") {
ref(el);
} else if (ref) {
ref.current = el;
}
}}
/>,
document.body,
)
: null}
</DrawerContext.Provider>
</>
); );
}, },
); );
DrawerOverlay.displayName = "DrawerOverlay";
const drawerContentColors = { const drawerContentColors = {
background: "bg-white dark:bg-black", background: "bg-white dark:bg-black",
@ -186,52 +148,25 @@ const [drawerContentVariant, resolveDrawerContentVariantProps] = vcn({
base: `fixed ${drawerContentColors.background} ${drawerContentColors.border} transition-all p-4 flex flex-col justify-between gap-8 overflow-auto`, base: `fixed ${drawerContentColors.background} ${drawerContentColors.border} transition-all p-4 flex flex-col justify-between gap-8 overflow-auto`,
variants: { variants: {
position: { position: {
top: "top-0 w-full max-w-screen rounded-t-lg border-b-2", top: "top-0 inset-x-0 w-full max-w-screen rounded-t-lg border-b-2",
bottom: "bottom-0 w-full max-w-screen rounded-b-lg border-t-2", bottom: "bottom-0 inset-x-0 w-full max-w-screen rounded-b-lg border-t-2",
left: "left-0 h-screen rounded-l-lg border-r-2", left: "left-0 inset-y-0 h-screen rounded-l-lg border-r-2",
right: "right-0 h-screen rounded-r-lg border-l-2", right: "right-0 inset-y-0 h-screen rounded-r-lg border-l-2",
},
maxSize: {
sm: "[&.left-0]:max-w-sm [&.right-0]:max-w-sm",
md: "[&.left-0]:max-w-md [&.right-0]:max-w-md",
lg: "[&.left-0]:max-w-lg [&.right-0]:max-w-lg",
xl: "[&.left-0]:max-w-xl [&.right-0]:max-w-xl",
}, },
opened: { opened: {
true: "", true: "",
false: false:
"[&.top-0]:-translate-y-full [&.bottom-0]:translate-y-full [&.left-0]:-translate-x-full [&.right-0]:translate-x-full", "[&.top-0]:-translate-y-full [&.bottom-0]:translate-y-full [&.left-0]:-translate-x-full [&.right-0]:translate-x-full",
}, },
internal: {
true: "relative",
false: "fixed",
},
}, },
defaults: { defaults: {
position: "left", position: "left",
opened: false, opened: false,
maxSize: "sm",
internal: false,
}, },
dynamics: [
({ position, internal }) => {
if (!internal) {
if (["top", "bottom"].includes(position)) {
return "inset-x-0";
}
return "inset-y-0";
}
return "w-fit";
},
],
}); });
interface DrawerContentProps interface DrawerContentProps
extends Omit< extends Omit<VariantProps<typeof drawerContentVariant>, "opened">,
VariantProps<typeof drawerContentVariant>,
"opened" | "internal"
>,
AsChild, AsChild,
ComponentPropsWithoutRef<"div"> {} ComponentPropsWithoutRef<"div"> {}
@ -372,9 +307,9 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
<div <div
className={drawerContentVariant({ className={drawerContentVariant({
...variantProps, ...variantProps,
opened: state.isRendered, opened: true,
className: dragState.isDragging className: dragState.isDragging
? "transition-[width] duration-0" ? "transition-[width_0ms]"
: variantProps.className, : variantProps.className,
})} })}
style={ style={
@ -386,7 +321,6 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
0) + 0) +
(position === "top" ? dragState.delta : -dragState.delta), (position === "top" ? dragState.delta : -dragState.delta),
padding: 0, padding: 0,
[`padding${position.slice(0, 1).toUpperCase()}${position.slice(1)}`]: `${dragState.delta}px`,
} }
: { : {
width: width:
@ -394,7 +328,6 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
0) + 0) +
(position === "left" ? dragState.delta : -dragState.delta), (position === "left" ? dragState.delta : -dragState.delta),
padding: 0, padding: 0,
[`padding${position.slice(0, 1).toUpperCase()}${position.slice(1)}`]: `${dragState.delta}px`,
} }
: { width: 0, height: 0, padding: 0 } : { width: 0, height: 0, padding: 0 }
} }
@ -403,16 +336,14 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
{...restPropsExtracted} {...restPropsExtracted}
className={drawerContentVariant({ className={drawerContentVariant({
...variantProps, ...variantProps,
opened: state.isRendered, opened: state.opened,
internal: true,
})} })}
style={{ style={{
transform: transform: dragState.isDragging
dragState.isDragging && ? `translate${["top", "bottom"].includes(position) ? "Y" : "X"}(${
((["top", "left"].includes(position) && dragState.delta < 0) || dragState.delta
(["bottom", "right"].includes(position) && dragState.delta > 0)) }px)`
? `translate${["top", "bottom"].includes(position) ? "Y" : "X"}(${dragState.delta}px)` : undefined,
: undefined,
transitionDuration: dragState.isDragging ? "0s" : undefined, transitionDuration: dragState.isDragging ? "0s" : undefined,
userSelect: dragState.isDragging ? "none" : undefined, userSelect: dragState.isDragging ? "none" : undefined,
}} }}
@ -443,7 +374,6 @@ const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
); );
}, },
); );
DrawerContent.displayName = "DrawerContent";
const DrawerClose = forwardRef< const DrawerClose = forwardRef<
HTMLButtonElement, HTMLButtonElement,
@ -458,7 +388,6 @@ const DrawerClose = forwardRef<
/> />
); );
}); });
DrawerClose.displayName = "DrawerClose";
const [drawerHeaderVariant, resolveDrawerHeaderVariantProps] = vcn({ const [drawerHeaderVariant, resolveDrawerHeaderVariantProps] = vcn({
base: "flex flex-col gap-2", base: "flex flex-col gap-2",
@ -488,10 +417,9 @@ const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>(
); );
}, },
); );
DrawerHeader.displayName = "DrawerHeader";
const [drawerBodyVariant, resolveDrawerBodyVariantProps] = vcn({ const [drawerBodyVariant, resolveDrawerBodyVariantProps] = vcn({
base: "grow", base: "flex-grow",
variants: {}, variants: {},
defaults: {}, defaults: {},
}); });
@ -516,7 +444,6 @@ const DrawerBody = forwardRef<HTMLDivElement, DrawerBodyProps>((props, ref) => {
/> />
); );
}); });
DrawerBody.displayName = "DrawerBody";
const [drawerFooterVariant, resolveDrawerFooterVariantProps] = vcn({ const [drawerFooterVariant, resolveDrawerFooterVariantProps] = vcn({
base: "flex flex-row justify-end gap-2", base: "flex flex-row justify-end gap-2",
@ -546,7 +473,6 @@ const DrawerFooter = forwardRef<HTMLDivElement, DrawerFooterProps>(
); );
}, },
); );
DrawerFooter.displayName = "DrawerFooter";
export { export {
DrawerRoot, DrawerRoot,

183
src/pswui/components/Form.tsx
View File

@ -1,183 +0,0 @@
import { type AsChild, Slot, type VariantProps, vcn } from "@pswui-lib";
import {
type ComponentPropsWithoutRef,
createContext,
forwardRef,
useContext,
useEffect,
useRef,
} from "react";
/**
Form Item Context
**/
interface IFormItemContext {
invalid?: string | null | undefined;
}
const FormItemContext = createContext<IFormItemContext>({});
/**
FormItem
**/
const [formItemVariant, resolveFormItemVariantProps] = vcn({
base: "flex flex-col gap-2 items-start w-full",
variants: {},
defaults: {},
});
interface FormItemProps
extends VariantProps<typeof formItemVariant>,
AsChild,
ComponentPropsWithoutRef<"label"> {
invalid?: string | null | undefined;
}
const FormItem = forwardRef<HTMLLabelElement, FormItemProps>((props, ref) => {
const [variantProps, restPropsCompressed] =
resolveFormItemVariantProps(props);
const { asChild, children, invalid, ...restPropsExtracted } =
restPropsCompressed;
const innerRef = useRef<HTMLLabelElement | null>(null);
useEffect(() => {
const invalidAsString = invalid ? invalid : "";
const input = innerRef.current?.querySelector?.("input");
if (!input) return;
input.setCustomValidity(invalidAsString);
}, [invalid]);
const Comp = asChild ? Slot : "label";
return (
<FormItemContext.Provider value={{ invalid }}>
<Comp
ref={(el: HTMLLabelElement | null) => {
innerRef.current = el;
if (typeof ref === "function") {
ref(el);
} else if (ref) {
ref.current = el;
}
}}
className={formItemVariant(variantProps)}
{...restPropsExtracted}
>
{children}
</Comp>
</FormItemContext.Provider>
);
});
FormItem.displayName = "FormItem";
/**
FormLabel
**/
const [formLabelVariant, resolveFormLabelVariantProps] = vcn({
base: "text-sm font-bold",
variants: {},
defaults: {},
});
interface FormLabelProps
extends VariantProps<typeof formLabelVariant>,
AsChild,
ComponentPropsWithoutRef<"span"> {}
const FormLabel = forwardRef<HTMLSpanElement, FormLabelProps>((props, ref) => {
const [variantProps, otherPropsCompressed] =
resolveFormLabelVariantProps(props);
const { children, asChild, ...otherPropsExtracted } = otherPropsCompressed;
const Comp = asChild ? Slot : "span";
return (
<Comp
ref={ref}
className={formLabelVariant(variantProps)}
{...otherPropsExtracted}
>
{children}
</Comp>
);
});
FormLabel.displayName = "FormLabel";
/**
FormHelper
**/
const [formHelperVariant, resolveFormHelperVariantProps] = vcn({
base: "opacity-75 text-sm font-light",
variants: {},
defaults: {},
});
interface FormHelperProps
extends VariantProps<typeof formHelperVariant>,
AsChild,
ComponentPropsWithoutRef<"span"> {
hiddenOnInvalid?: boolean;
}
const FormHelper = forwardRef<HTMLSpanElement, FormHelperProps>(
(props, ref) => {
const [variantProps, otherPropsCompressed] =
resolveFormHelperVariantProps(props);
const { asChild, children, hiddenOnInvalid, ...otherPropsExtracted } =
otherPropsCompressed;
const item = useContext(FormItemContext);
if (item.invalid && hiddenOnInvalid) return null;
const Comp = asChild ? Slot : "span";
return (
<Comp
ref={ref}
className={formHelperVariant(variantProps)}
{...otherPropsExtracted}
>
{children}
</Comp>
);
},
);
FormHelper.displayName = "FormHelper";
/**
FormError
**/
const [formErrorVariant, resolveFormErrorVariantProps] = vcn({
base: "text-sm text-red-500",
variants: {},
defaults: {},
});
interface FormErrorProps
extends VariantProps<typeof formErrorVariant>,
AsChild,
Omit<ComponentPropsWithoutRef<"span">, "children"> {}
const FormError = forwardRef<HTMLSpanElement, FormErrorProps>((props, ref) => {
const [variantProps, otherPropsCompressed] =
resolveFormErrorVariantProps(props);
const { asChild, ...otherPropsExtracted } = otherPropsCompressed;
const item = useContext(FormItemContext);
const Comp = asChild ? Slot : "span";
return item.invalid ? (
<Comp
ref={ref}
className={formErrorVariant(variantProps)}
{...otherPropsExtracted}
>
{item.invalid}
</Comp>
) : null;
});
FormError.displayName = "FormError";
export { FormItem, FormLabel, FormHelper, FormError };

30
src/pswui/components/Input.tsx
View File

@ -1,38 +1,37 @@
import { type AsChild, Slot, type VariantProps, vcn } from "@pswui-lib"; import { type VariantProps, vcn } from "@pswui-lib";
import React from "react"; import React from "react";
const inputColors = { const inputColors = {
background: { background: {
default: "bg-neutral-50 dark:bg-neutral-900", default: "bg-neutral-50 dark:bg-neutral-900",
hover: hover: "hover:bg-neutral-100 dark:hover:bg-neutral-800",
"hover:bg-neutral-100 dark:hover:bg-neutral-800 has-[input:hover]:bg-neutral-100 dark:has-[input:hover]:bg-neutral-800",
invalid: invalid:
"invalid:bg-red-100 dark:invalid:bg-red-900 has-[input:invalid]:bg-red-100 dark:has-[input:invalid]:bg-red-900", "invalid:bg-red-100 invalid:dark:bg-red-900 has-[input:invalid]:bg-red-100 dark:has-[input:invalid]:bg-red-900",
invalidHover: invalidHover:
"hover:invalid:bg-red-200 dark:hover:invalid:bg-red-800 has-[input:invalid:hover]:bg-red-200 dark:has-[input:invalid:hover]:bg-red-800", "hover:invalid:bg-red-200 dark:hover:invalid:bg-red-800 has-[input:invalid:hover]:bg-red-200 dark:has-[input:invalid:hover]:bg-red-800",
}, },
border: { border: {
default: "border-neutral-400 dark:border-neutral-600", default: "border-neutral-400 dark:border-neutral-600",
invalid: invalid:
"invalid:border-red-400 dark:invalid:border-red-600 has-[input:invalid]:border-red-400 dark:has-[input:invalid]:border-red-600", "invalid:border-red-400 invalid:dark:border-red-600 has-[input:invalid]:border-red-400 dark:has-[input:invalid]:border-red-600",
}, },
ring: { ring: {
default: "ring-transparent focus-within:ring-current", default: "ring-transparent focus-within:ring-current",
invalid: invalid:
"invalid:focus-within:ring-red-400 dark:invalid:focus-within:ring-red-600 has-[input:invalid]:focus-within:ring-red-400 dark:has-[input:invalid]:focus-within:ring-red-600", "invalid:focus-within:ring-red-400 invalid:focus-within:dark:ring-red-600 has-[input:invalid]:focus-within:ring-red-400 dark:has-[input:invalid]:focus-within:ring-red-600",
}, },
}; };
const [inputVariant, resolveInputVariantProps] = vcn({ const [inputVariant, resolveInputVariantProps] = vcn({
base: `rounded-md p-2 border ring-1 outline-hidden transition-all duration-200 [appearance:textfield] disabled:brightness-50 disabled:saturate-0 disabled:cursor-not-allowed ${inputColors.background.default} ${inputColors.background.hover} ${inputColors.border.default} ${inputColors.ring.default} ${inputColors.background.invalid} ${inputColors.background.invalidHover} ${inputColors.border.invalid} ${inputColors.ring.invalid} [&:has(input)]:flex`, base: `rounded-md p-2 border ring-1 outline-none transition-all duration-200 [appearance:textfield] disabled:brightness-50 disabled:saturate-0 disabled:cursor-not-allowed ${inputColors.background.default} ${inputColors.background.hover} ${inputColors.border.default} ${inputColors.ring.default} ${inputColors.background.invalid} ${inputColors.background.invalidHover} ${inputColors.border.invalid} ${inputColors.ring.invalid} [&:has(input)]:flex [&:has(input)]:w-fit`,
variants: { variants: {
unstyled: { unstyled: {
true: "bg-transparent border-none p-0 ring-0 hover:bg-transparent invalid:hover:bg-transparent invalid:focus-within:bg-transparent invalid:focus-within:ring-0", true: "bg-transparent border-none p-0 ring-0 hover:bg-transparent invalid:hover:bg-transparent invalid:focus-within:bg-transparent invalid:focus-within:ring-0",
false: "", false: "",
}, },
full: { full: {
true: "[&:has(input)]:w-full w-full", true: "w-full",
false: "[&:has(input)]:w-fit w-fit", false: "w-fit",
}, },
}, },
defaults: { defaults: {
@ -43,8 +42,7 @@ const [inputVariant, resolveInputVariantProps] = vcn({
interface InputFrameProps interface InputFrameProps
extends VariantProps<typeof inputVariant>, extends VariantProps<typeof inputVariant>,
React.ComponentPropsWithoutRef<"label">, React.ComponentPropsWithoutRef<"label"> {
AsChild {
children?: React.ReactNode; children?: React.ReactNode;
} }
@ -52,22 +50,19 @@ const InputFrame = React.forwardRef<HTMLLabelElement, InputFrameProps>(
(props, ref) => { (props, ref) => {
const [variantProps, otherPropsCompressed] = const [variantProps, otherPropsCompressed] =
resolveInputVariantProps(props); resolveInputVariantProps(props);
const { children, asChild, ...otherPropsExtracted } = otherPropsCompressed; const { children, ...otherPropsExtracted } = otherPropsCompressed;
const Comp = asChild ? Slot : "label";
return ( return (
<Comp <label
ref={ref} ref={ref}
className={`group/input-frame ${inputVariant(variantProps)}`} className={`group/input-frame ${inputVariant(variantProps)}`}
{...otherPropsExtracted} {...otherPropsExtracted}
> >
{children} {children}
</Comp> </label>
); );
}, },
); );
InputFrame.displayName = "InputFrame";
interface InputProps interface InputProps
extends VariantProps<typeof inputVariant>, extends VariantProps<typeof inputVariant>,
@ -118,6 +113,5 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
/> />
); );
}); });
Input.displayName = "Input";
export { InputFrame, Input }; export { InputFrame, Input };

1
src/pswui/components/Label.tsx
View File

@ -29,6 +29,5 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>((props, ref) => {
/> />
); );
}); });
Label.displayName = "Label";
export { Label }; export { Label };

13
src/pswui/components/Popover.tsx
View File

@ -65,7 +65,7 @@ const popoverColors = {
}; };
const [popoverContentVariant, resolvePopoverContentVariantProps] = vcn({ const [popoverContentVariant, resolvePopoverContentVariantProps] = vcn({
base: `absolute transition-all duration-150 border rounded-lg p-0.5 z-10 *:w-full ${popoverColors.background} ${popoverColors.border}`, base: `absolute transition-all duration-150 border rounded-lg p-0.5 [&>*]:w-full z-10 ${popoverColors.background} ${popoverColors.border}`,
variants: { variants: {
direction: { direction: {
row: "", row: "",
@ -200,7 +200,7 @@ const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
(props, ref) => { (props, ref) => {
const [variantProps, otherPropsCompressed] = const [variantProps, otherPropsCompressed] =
resolvePopoverContentVariantProps(props); resolvePopoverContentVariantProps(props);
const { children, asChild, ...otherPropsExtracted } = otherPropsCompressed; const { children, ...otherPropsExtracted } = otherPropsCompressed;
const [state, setState] = useContext(PopoverContext); const [state, setState] = useContext(PopoverContext);
const internalRef = useRef<HTMLDivElement | null>(null); const internalRef = useRef<HTMLDivElement | null>(null);
@ -221,16 +221,14 @@ const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
}; };
}, [state.controlled, setState]); }, [state.controlled, setState]);
const Comp = asChild ? Slot : "div";
return ( return (
<Comp <div
{...otherPropsExtracted} {...otherPropsExtracted}
className={popoverContentVariant({ className={popoverContentVariant({
...variantProps, ...variantProps,
opened: state.opened, opened: state.opened,
})} })}
ref={(el: HTMLDivElement) => { ref={(el) => {
internalRef.current = el; internalRef.current = el;
if (typeof ref === "function") { if (typeof ref === "function") {
ref(el); ref(el);
@ -240,10 +238,9 @@ const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
}} }}
> >
{children} {children}
</Comp> </div>
); );
}, },
); );
PopoverContent.displayName = "PopoverContent";
export { Popover, PopoverTrigger, PopoverContent }; export { Popover, PopoverTrigger, PopoverContent };

1
src/pswui/components/Switch.tsx
View File

@ -80,6 +80,5 @@ const Switch = React.forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
</label> </label>
); );
}); });
Switch.displayName = "Switch";
export { Switch }; export { Switch };

2
src/pswui/components/Tabs/Component.tsx
View File

@ -39,7 +39,7 @@ const TabList = (props: TabListProps) => {
}; };
const [TabTriggerVariant, resolveTabTriggerVariantProps] = vcn({ const [TabTriggerVariant, resolveTabTriggerVariantProps] = vcn({
base: "py-1.5 rounded-md grow transition-all text-sm", base: "py-1.5 rounded-md flex-grow transition-all text-sm",
variants: { variants: {
active: { active: {
true: "bg-white/100 dark:bg-black/100 text-black dark:text-white", true: "bg-white/100 dark:bg-black/100 text-black dark:text-white",

7
src/pswui/components/Toast/Component.tsx
View File

@ -1,4 +1,4 @@
import { type VariantProps, useDocument, vcn } from "@pswui-lib"; import { type VariantProps, vcn } from "@pswui-lib";
import React, { useEffect, useId, useRef } from "react"; import React, { useEffect, useId, useRef } from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
@ -168,10 +168,6 @@ const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
}; };
}, [defaultOption]); }, [defaultOption]);
const document = useDocument();
if (!document) return null;
const toasterInstance = document.querySelector("div[data-toaster-root]"); const toasterInstance = document.querySelector("div[data-toaster-root]");
if (toasterInstance && id !== toasterInstance.id) { if (toasterInstance && id !== toasterInstance.id) {
if (process.env.NODE_ENV === "development" && !muteDuplicationWarning) { if (process.env.NODE_ENV === "development" && !muteDuplicationWarning) {
@ -212,6 +208,5 @@ const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>((props, ref) => {
</> </>
); );
}); });
Toaster.displayName = "Toaster";
export { Toaster }; export { Toaster };

3
src/pswui/components/Tooltip.tsx
View File

@ -71,7 +71,6 @@ const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>((props, ref) => {
</TooltipContext.Provider> </TooltipContext.Provider>
); );
}); });
Tooltip.displayName = "Tooltip";
const tooltipContentColors = { const tooltipContentColors = {
variants: { variants: {
@ -140,12 +139,10 @@ const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(
...variantProps, ...variantProps,
position: contextState.position, position: contextState.position,
})} })}
role="tooltip"
{...rest} {...rest}
/> />
); );
}, },
); );
TooltipContent.displayName = "TooltipContent";
export { Tooltip, TooltipContent }; export { Tooltip, TooltipContent };

5
src/pswui/lib/Slot.tsx
View File

@ -85,10 +85,7 @@ export const Slot = React.forwardRef<
return null; return null;
} }
return React.cloneElement(children, { return React.cloneElement(children, {
...mergeReactProps( ...mergeReactProps(safeSlotProps, children.props),
safeSlotProps,
children.props as Record<string, unknown>,
),
ref: combinedRef([ ref: combinedRef([
ref, ref,
(children as unknown as { ref: React.Ref<HTMLElement> }).ref, (children as unknown as { ref: React.Ref<HTMLElement> }).ref,

2
src/pswui/lib/index.ts
View File

@ -1,4 +1,2 @@
export * from "./vcn"; export * from "./vcn";
export * from "./Slot"; export * from "./Slot";
export * from "./useDocument";
export * from "./useAnimatedMount";

85
src/pswui/lib/useAnimatedMount.ts
View File

@ -1,85 +0,0 @@
import { type MutableRefObject, useCallback, useEffect, useState } from "react";
function getCalculatedTransitionDuration(
ref: MutableRefObject<HTMLElement>,
): number {
let transitionDuration: {
value: number;
unit: string;
} | null;
if (ref.current.computedStyleMap !== undefined) {
transitionDuration = ref.current
.computedStyleMap()
.get("transition-duration") as { value: number; unit: string };
} else {
const style = /(\d+(\.\d+)?)(.+)/.exec(
window.getComputedStyle(ref.current).transitionDuration,
);
if (!style) return 0;
transitionDuration = {
value: Number.parseFloat(style[1] ?? "0"),
unit: style[3] ?? style[2] ?? "s",
};
}
return (
transitionDuration.value *
({
s: 1000,
ms: 1,
}[transitionDuration.unit] ?? 1)
);
}
/*
* isMounted: true isRendered: true isRendered: false isMounted: false
* Component Mount Component Appear Component Disappear Component Unmount
* v v v v
* |-|=================|------------------------|======================|-|
*/
function useAnimatedMount(
visible: boolean,
ref: MutableRefObject<HTMLElement | null>,
callbacks?: { onMount: () => void; onUnmount: () => void },
) {
const [state, setState] = useState<{
isMounted: boolean;
isRendered: boolean;
}>({ isMounted: visible, isRendered: visible });
const umountCallback = useCallback(() => {
setState((p) => ({ ...p, isRendered: false }));
const calculatedTransitionDuration = ref.current
? getCalculatedTransitionDuration(ref as MutableRefObject<HTMLElement>)
: 0;
setTimeout(() => {
setState((p) => ({ ...p, isMounted: false }));
callbacks?.onUnmount?.();
}, calculatedTransitionDuration);
}, [ref, callbacks]);
const mountCallback = useCallback(() => {
setState((p) => ({ ...p, isMounted: true }));
callbacks?.onMount?.();
requestAnimationFrame(function onMount() {
if (!ref.current) return requestAnimationFrame(onMount);
setState((p) => ({ ...p, isRendered: true }));
});
}, [ref.current, callbacks]);
useEffect(() => {
console.log(state);
if (!visible && state.isRendered) {
umountCallback();
} else if (visible && !state.isMounted) {
mountCallback();
}
}, [state, visible, mountCallback, umountCallback]);
return state;
}
export { getCalculatedTransitionDuration, useAnimatedMount };

21
src/pswui/lib/useDocument.ts
View File

@ -1,21 +0,0 @@
"use client";
import { useEffect, useState } from "react";
/**
* This hook allows components to use `document` as like they're always in the client side.
* Return undefined if there is no `document` (which represents it's server side) or initial render(to avoid hydration error).
*/
function useDocument(): undefined | Document {
const [initialRender, setInitialState] = useState(true);
useEffect(() => {
setInitialState(false);
}, []);
if (typeof document === "undefined" || initialRender) return undefined;
return document;
}
export { useDocument };

1
src/pswui/lib/vcn.ts
View File

@ -270,7 +270,6 @@ export function vcn<
for (const [variantName, variantKey] of Object.entries( for (const [variantName, variantKey] of Object.entries(
otherVariantProps, otherVariantProps,
) as VariantKVEntry<V>) { ) as VariantKVEntry<V>) {
if (typeof variantKey === "undefined") continue;
kv[variantName] = variantKey; kv[variantName] = variantKey;
} }

41
src/tailwind.css
View File

@ -1,40 +1,7 @@
@import url('https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css') @import url("https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css");
layer(base); @tailwind base;
@import 'tailwindcss'; @tailwind components;
@tailwind utilities;
@plugin '@tailwindcss/typography';
@plugin 'tailwind-scrollbar';
@source '../{components,stories,src}/**/*.{js,jsx,ts,tsx,css,mdx}';
@custom-variant dark {
@media (prefers-color-scheme: dark) {
&:is(.system *) {
@slot;
}
}
&:is(.dark *) {
@slot;
}
}
/*
The default border color has changed to `currentColor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}
@layer base { @layer base {
:root { :root {

15
tailwind.config.js Normal file
View File

@ -0,0 +1,15 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./{components,stories,src}/**/*.{js,jsx,ts,tsx,css,mdx}"],
darkMode: [
"variant",
[
"@media (prefers-color-scheme: dark) { &:is(.system *) }",
"&:is(.dark *)",
],
],
theme: {
extend: {},
},
plugins: [require("@tailwindcss/typography"), require("tailwind-scrollbar")],
};

8
vite.config.ts
View File

@ -2,10 +2,10 @@ import { resolve } from "node:path";
import mdx from "@mdx-js/rollup"; import mdx from "@mdx-js/rollup";
import withToc from "@stefanprobst/rehype-extract-toc"; import withToc from "@stefanprobst/rehype-extract-toc";
import withTocExport from "@stefanprobst/rehype-extract-toc/mdx"; import withTocExport from "@stefanprobst/rehype-extract-toc/mdx";
import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react"; import react from "@vitejs/plugin-react";
import withSlug from "rehype-slug"; import withSlug from "rehype-slug";
import remarkGfm from "remark-gfm"; import remarkGfm from "remark-gfm";
import tailwindcss from "tailwindcss";
import { defineConfig } from "vite"; import { defineConfig } from "vite";
import dynamicImport from "vite-plugin-dynamic-import"; import dynamicImport from "vite-plugin-dynamic-import";
@ -13,13 +13,17 @@ import dynamicImport from "vite-plugin-dynamic-import";
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
react(), react(),
tailwindcss(),
mdx({ mdx({
rehypePlugins: [withSlug, withToc, withTocExport], rehypePlugins: [withSlug, withToc, withTocExport],
remarkPlugins: [remarkGfm], remarkPlugins: [remarkGfm],
}), }),
dynamicImport(), dynamicImport(),
], ],
css: {
postcss: {
plugins: [tailwindcss()],
},
},
resolve: { resolve: {
alias: { alias: {
"@pswui": resolve(__dirname, "./src/pswui/components"), "@pswui": resolve(__dirname, "./src/pswui/components"),

4020
yarn.lock
View File

File diff suppressed because it is too large Load Diff