Skip to content

feat: set a tailwind prefix (lsd) to prevent conflicts where lib is used #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nipsysdev merged 3 commits into from
Dec 24, 2025
Merged

feat: set a tailwind prefix (lsd) to prevent conflicts where lib is used #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
02c4c31
feat: set a tailwind prefix (lsd) to prevent conflicts where this UI …
nipsysdev Dec 24, 2025
840155d
chore: bump packages
nipsysdev Dec 24, 2025
5755d36
chore: fix lint issues
nipsysdev Dec 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion biome.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"$schema": "https://biomejs.dev/schemas/2.2.5/schema.json",
"$schema": "https://biomejs.dev/schemas/2.3.10/schema.json",
"vcs": {
"enabled": true,
"clientKind": "git",
Expand All @@ -22,6 +22,9 @@
"level": "off",
"options": {}
}
},
"complexity": {
"noImportantStyles": "off"
}
}
},
Expand All @@ -37,5 +40,10 @@
"organizeImports": "on"
}
}
},
"css": {
"parser": {
"tailwindDirectives": true
}
}
}
30 changes: 15 additions & 15 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,48 +37,48 @@
"@radix-ui/react-alert-dialog": "^1.1.15",
"@radix-ui/react-checkbox": "^1.3.3",
"@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-label": "^2.1.7",
"@radix-ui/react-label": "^2.1.8",
"@radix-ui/react-popover": "^1.1.15",
"@radix-ui/react-progress": "^1.1.7",
"@radix-ui/react-progress": "^1.1.8",
"@radix-ui/react-scroll-area": "^1.2.10",
"@radix-ui/react-select": "^2.2.6",
"@radix-ui/react-separator": "^1.1.7",
"@radix-ui/react-slot": "^1.2.3",
"@radix-ui/react-separator": "^1.1.8",
"@radix-ui/react-slot": "^1.2.4",
"@radix-ui/react-switch": "^1.2.6",
"@radix-ui/react-tabs": "^1.1.13",
"@radix-ui/react-toggle": "^1.1.10",
"@radix-ui/react-toggle-group": "^1.1.11",
"@radix-ui/react-tooltip": "^1.2.8",
"@tailwindcss/vite": "^4.1.14",
"@tailwindcss/vite": "^4.1.18",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"cmdk": "^1.1.1",
"lucide-react": "^0.477.0",
"next-themes": "^0.4.6",
"sonner": "^2.0.7",
"tailwind-merge": "^3.3.1",
"tailwindcss": "^4.1.14",
"tailwind-merge": "^3.4.0",
"tailwindcss": "^4.1.18",
"tw-animate-css": "^1.4.0"
},
"peerDependencies": {
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@biomejs/biome": "2.2.5",
"@commitlint/cli": "^20.1.0",
"@commitlint/config-conventional": "^20.0.0",
"@types/node": "^22.18.8",
"@types/react": "^19.2.0",
"@types/react-dom": "^19.2.0",
"@biomejs/biome": "^2.3.10",
"@commitlint/cli": "^20.2.0",
"@commitlint/config-conventional": "^20.2.0",
"@types/node": "^22.19.3",
"@types/react": "^19.2.7",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react-swc": "^3.11.0",
"glob": "^11.0.3",
"glob": "^11.1.0",
"globals": "^15.15.0",
"lefthook": "^1.13.6",
"react-cosmos": "^6.2.3",
"react-cosmos-plugin-vite": "^6.2.0",
"typescript": "~5.7.3",
"vite": "^6.3.6",
"vite": "^6.4.1",
"vite-plugin-dts": "^4.5.4",
"vite-plugin-lib-inject-css": "^2.2.2"
}
Expand Down
2,292 changes: 1,164 additions & 1,128 deletions pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions src/__cosmos__/code-block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ export function CodeBlock({ className, code, ...props }: CodeBlockProps) {
return (
<pre
className={cn(
'overflow-x-auto rounded-md bg-lsd-surface-secondary p-4 text-sm text-lsd-text-primary',
'lsd:overflow-x-auto lsd:rounded-md lsd:bg-lsd-surface-secondary lsd:p-4 lsd:text-sm lsd:text-lsd-text-primary',
className,
)}
{...props}
>
<code className="font-mono">{code}</code>
<code className="lsd:font-mono">{code}</code>
</pre>
);
}
4 changes: 2 additions & 2 deletions src/__cosmos__/code-example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ interface CodeExampleProps {
code: string;
}

export function CodeExample({ title, children, code }: CodeExampleProps) {
export function CodeExample({ children, code }: CodeExampleProps) {
return (
<div className="space-y-4">
<div className="lsd:space-y-4">
<div>{children}</div>
<Accordion type="single" collapsible>
<AccordionItem value="code">
Expand Down
36 changes: 22 additions & 14 deletions src/__cosmos__/fixtures/Accordion.fixture.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,18 @@ import { CodeExample } from '../code-example';

export default function AccordionFixture() {
return (
<div className="p-8 w-full">
<h2 className="text-2xl font-bold mb-6">Accordion Component</h2>
<div className="lsd:p-8 lsd:w-full">
<h2 className="lsd:text-2xl lsd:font-bold lsd:mb-6">
Accordion Component
</h2>

<div className="max-w-md space-y-4">
<h3 className="text-lg font-semibold mb-2">Ethereum Basics</h3>
<div className="lsd:max-w-md lsd:space-y-4">
<h3 className="lsd:text-lg lsd:font-semibold lsd:mb-2">
Ethereum Basics
</h3>
<CodeExample
title="Single Collapsible Accordion"
code={`<Accordion type="single" collapsible className="w-full">
code={`<Accordion type="single" collapsible className="lsd:w-full">
<AccordionItem value="item-1">
<AccordionTrigger>What is Ethereum?</AccordionTrigger>
<AccordionContent>
Expand Down Expand Up @@ -46,7 +50,7 @@ export default function AccordionFixture() {
</AccordionItem>
</Accordion>`}
>
<Accordion type="single" collapsible className="w-full">
<Accordion type="single" collapsible className="lsd:w-full">
<AccordionItem value="item-1">
<AccordionTrigger>What is Ethereum?</AccordionTrigger>
<AccordionContent>
Expand Down Expand Up @@ -79,11 +83,13 @@ export default function AccordionFixture() {
</CodeExample>
</div>

<div className="max-w-md mt-8 space-y-4">
<h3 className="text-lg font-semibold mb-2">Ethereum Technology</h3>
<div className="lsd:max-w-md lsd:mt-8 lsd:space-y-4">
<h3 className="lsd:text-lg lsd:font-semibold lsd:mb-2">
Ethereum Technology
</h3>
<CodeExample
title="Multiple Open Accordion"
code={`<Accordion type="multiple" className="w-full">
code={`<Accordion type="multiple" className="lsd:w-full">
<AccordionItem value="item-1">
<AccordionTrigger>
What is the Ethereum Virtual Machine (EVM)?
Expand Down Expand Up @@ -117,7 +123,7 @@ export default function AccordionFixture() {
</AccordionItem>
</Accordion>`}
>
<Accordion type="multiple" className="w-full">
<Accordion type="multiple" className="lsd:w-full">
<AccordionItem value="item-1">
<AccordionTrigger>
What is the Ethereum Virtual Machine (EVM)?
Expand Down Expand Up @@ -153,11 +159,13 @@ export default function AccordionFixture() {
</CodeExample>
</div>

<div className="max-w-md mt-8 space-y-4">
<h3 className="text-lg font-semibold mb-2">Ethereum Ecosystem</h3>
<div className="lsd:max-w-md lsd:mt-8 lsd:space-y-4">
<h3 className="lsd:text-lg lsd:font-semibold lsd:mb-2">
Ethereum Ecosystem
</h3>
<CodeExample
title="Accordion with Disabled Item"
code={`<Accordion type="single" collapsible className="w-full">
code={`<Accordion type="single" collapsible className="lsd:w-full">
<AccordionItem value="item-1">
<AccordionTrigger>What are dApps?</AccordionTrigger>
<AccordionContent>
Expand Down Expand Up @@ -189,7 +197,7 @@ export default function AccordionFixture() {
</AccordionItem>
</Accordion>`}
>
<Accordion type="single" collapsible className="w-full">
<Accordion type="single" collapsible className="lsd:w-full">
<AccordionItem value="item-1">
<AccordionTrigger>What are dApps?</AccordionTrigger>
<AccordionContent>
Expand Down
30 changes: 17 additions & 13 deletions src/__cosmos__/fixtures/AlertDialog.fixture.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,22 +21,24 @@ export default function AlertDialogFixture() {
const [showConfirmDialog, setShowConfirmDialog] = useState(false);

return (
<div className="p-8 w-full space-y-8">
<div className="flex justify-end gap-4">
<div className="lsd:p-8 lsd:w-full lsd:space-y-8">
<div className="lsd:flex lsd:justify-end lsd:gap-4">
<ThemeToggle />
<FontToggle />
</div>

<div className="space-y-4">
<h2 className="text-2xl font-bold">Alert Dialog Component</h2>
<p className="text-muted-foreground">
<div className="lsd:space-y-4">
<h2 className="lsd:text-2xl lsd:font-bold">Alert Dialog Component</h2>
<p className="lsd:text-muted-foreground">
A modal dialog that interrupts the user with important content and
expects a response.
</p>
</div>

<div className="space-y-4">
<h2 className="text-xl font-semibold">Using AlertDialogTrigger</h2>
<div className="lsd:space-y-4">
<h2 className="lsd:text-xl lsd:font-semibold">
Using AlertDialogTrigger
</h2>
<CodeExample
title="AlertDialog with Trigger"
code={`<AlertDialog>
Expand Down Expand Up @@ -79,11 +81,13 @@ export default function AlertDialogFixture() {
</CodeExample>
</div>

<div className="space-y-4">
<h2 className="text-xl font-semibold">Using Boolean State Control</h2>
<div className="lsd:space-y-4">
<h2 className="lsd:text-xl lsd:font-semibold">
Using Boolean State Control
</h2>
<CodeExample
title="Controlled AlertDialog Examples"
code={`<div className="flex gap-4">
code={`<div className="lsd:flex lsd:gap-4">
<Button onClick={() => setShowBasicDialog(true)}>
Show Basic Dialog
</Button>
Expand Down Expand Up @@ -130,7 +134,7 @@ export default function AlertDialogFixture() {
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction className="bg-red-600 hover:bg-red-700">
<AlertDialogAction className="lsd:bg-red-600 hover:lsd:bg-red-700">
Delete
</AlertDialogAction>
</AlertDialogFooter>
Expand All @@ -154,7 +158,7 @@ export default function AlertDialogFixture() {
</AlertDialogContent>
</AlertDialog>`}
>
<div className="flex gap-4">
<div className="lsd:flex lsd:gap-4">
<Button onClick={() => setShowBasicDialog(true)}>
Show Basic Dialog
</Button>
Expand Down Expand Up @@ -202,7 +206,7 @@ export default function AlertDialogFixture() {
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction className="bg-red-600 hover:bg-red-700">
<AlertDialogAction className="lsd:bg-red-600 hover:lsd:bg-red-700">
Delete
</AlertDialogAction>
</AlertDialogFooter>
Expand Down
Loading