rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-06-25 21:56:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
shadcn
2026-03-05 16:40:21 +04:00
parent 3c5f594b94
commit 257448bead
13 changed files with 299 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/v4/public/r/styles/base-lyra/demo.json
View File

File diff suppressed because one or more lines are too long

2
apps/v4/public/r/styles/base-maia/demo.json
View File

File diff suppressed because one or more lines are too long

2
apps/v4/public/r/styles/base-mira/demo.json
View File

File diff suppressed because one or more lines are too long

2
apps/v4/public/r/styles/base-nova/demo.json
View File

File diff suppressed because one or more lines are too long

2
apps/v4/public/r/styles/base-vega/demo.json
View File

File diff suppressed because one or more lines are too long

2
apps/v4/public/r/styles/radix-lyra/demo.json
View File

File diff suppressed because one or more lines are too long

2
apps/v4/public/r/styles/radix-maia/demo.json
View File

File diff suppressed because one or more lines are too long

2
apps/v4/public/r/styles/radix-mira/demo.json
View File

File diff suppressed because one or more lines are too long

2
apps/v4/public/r/styles/radix-nova/demo.json
View File

File diff suppressed because one or more lines are too long

2
apps/v4/public/r/styles/radix-vega/demo.json
View File

File diff suppressed because one or more lines are too long

274
apps/v4/registry/bases/base/examples/demo.tsx
View File

@@ -1,7 +1,6 @@
"use client"
import * as React from "react"
import { type IconLibraryName } from "shadcn/icons"
import {
AlertDialog,
@@ -51,121 +50,6 @@ import { Switch } from "@/registry/bases/base/ui/switch"
import { Textarea } from "@/registry/bases/base/ui/textarea"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
const PREVIEW_ICONS = [
{
lucide: "CopyIcon",
tabler: "IconCopy",
hugeicons: "Copy01Icon",
phosphor: "CopyIcon",
remixicon: "RiFileCopyLine",
},
{
lucide: "CircleAlertIcon",
tabler: "IconExclamationCircle",
hugeicons: "AlertCircleIcon",
phosphor: "WarningCircleIcon",
remixicon: "RiErrorWarningLine",
},
{
lucide: "TrashIcon",
tabler: "IconTrash",
hugeicons: "Delete02Icon",
phosphor: "TrashIcon",
remixicon: "RiDeleteBinLine",
},
{
lucide: "ShareIcon",
tabler: "IconShare",
hugeicons: "Share03Icon",
phosphor: "ShareIcon",
remixicon: "RiShareLine",
},
{
lucide: "ShoppingBagIcon",
tabler: "IconShoppingBag",
hugeicons: "ShoppingBag01Icon",
phosphor: "BagIcon",
remixicon: "RiShoppingBagLine",
},
{
lucide: "MoreHorizontalIcon",
tabler: "IconDots",
hugeicons: "MoreHorizontalCircle01Icon",
phosphor: "DotsThreeIcon",
remixicon: "RiMoreLine",
},
{
lucide: "Loader2Icon",
tabler: "IconLoader",
hugeicons: "Loading03Icon",
phosphor: "SpinnerIcon",
remixicon: "RiLoaderLine",
},
{
lucide: "PlusIcon",
tabler: "IconPlus",
hugeicons: "PlusSignIcon",
phosphor: "PlusIcon",
remixicon: "RiAddLine",
},
{
lucide: "MinusIcon",
tabler: "IconMinus",
hugeicons: "MinusSignIcon",
phosphor: "MinusIcon",
remixicon: "RiSubtractLine",
},
{
lucide: "ArrowLeftIcon",
tabler: "IconArrowLeft",
hugeicons: "ArrowLeft02Icon",
phosphor: "ArrowLeftIcon",
remixicon: "RiArrowLeftLine",
},
{
lucide: "ArrowRightIcon",
tabler: "IconArrowRight",
hugeicons: "ArrowRight02Icon",
phosphor: "ArrowRightIcon",
remixicon: "RiArrowRightLine",
},
{
lucide: "CheckIcon",
tabler: "IconCheck",
hugeicons: "Tick02Icon",
phosphor: "CheckIcon",
remixicon: "RiCheckLine",
},
{
lucide: "ChevronDownIcon",
tabler: "IconChevronDown",
hugeicons: "ArrowDown01Icon",
phosphor: "CaretDownIcon",
remixicon: "RiArrowDownSLine",
},
{
lucide: "ChevronRightIcon",
tabler: "IconChevronRight",
hugeicons: "ArrowRight01Icon",
phosphor: "CaretRightIcon",
remixicon: "RiArrowRightSLine",
},
{
lucide: "SearchIcon",
tabler: "IconSearch",
hugeicons: "Search01Icon",
phosphor: "MagnifyingGlassIcon",
remixicon: "RiSearchLine",
},
{
lucide: "SettingsIcon",
tabler: "IconSettings",
hugeicons: "Settings01Icon",
phosphor: "GearIcon",
remixicon: "RiSettingsLine",
},
] satisfies Record<IconLibraryName, string>[]
export function Demo() {
const [sliderValue, setSliderValue] = React.useState<number[]>([500])
const handleSliderValueChange = React.useCallback(
@@ -230,20 +114,150 @@ export function Demo() {
<Card>
<CardContent>
<div className="grid grid-cols-8 place-items-center gap-4">
{PREVIEW_ICONS.map((icon, index) => (
<Card
key={index}
className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4"
>
<IconPlaceholder
lucide={icon.lucide}
tabler={icon.tabler}
hugeicons={icon.hugeicons}
phosphor={icon.phosphor}
remixicon={icon.remixicon}
/>
</Card>
))}
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="CopyIcon"
tabler="IconCopy"
hugeicons="Copy01Icon"
phosphor="CopyIcon"
remixicon="RiFileCopyLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="CircleAlertIcon"
tabler="IconExclamationCircle"
hugeicons="AlertCircleIcon"
phosphor="WarningCircleIcon"
remixicon="RiErrorWarningLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="TrashIcon"
tabler="IconTrash"
hugeicons="Delete02Icon"
phosphor="TrashIcon"
remixicon="RiDeleteBinLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="ShareIcon"
tabler="IconShare"
hugeicons="Share03Icon"
phosphor="ShareIcon"
remixicon="RiShareLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="ShoppingBagIcon"
tabler="IconShoppingBag"
hugeicons="ShoppingBag01Icon"
phosphor="BagIcon"
remixicon="RiShoppingBagLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="MoreHorizontalIcon"
tabler="IconDots"
hugeicons="MoreHorizontalCircle01Icon"
phosphor="DotsThreeIcon"
remixicon="RiMoreLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="Loader2Icon"
tabler="IconLoader"
hugeicons="Loading03Icon"
phosphor="SpinnerIcon"
remixicon="RiLoaderLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="PlusIcon"
tabler="IconPlus"
hugeicons="PlusSignIcon"
phosphor="PlusIcon"
remixicon="RiAddLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="MinusIcon"
tabler="IconMinus"
hugeicons="MinusSignIcon"
phosphor="MinusIcon"
remixicon="RiSubtractLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="ArrowLeftIcon"
tabler="IconArrowLeft"
hugeicons="ArrowLeft02Icon"
phosphor="ArrowLeftIcon"
remixicon="RiArrowLeftLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="ArrowRightIcon"
tabler="IconArrowRight"
hugeicons="ArrowRight02Icon"
phosphor="ArrowRightIcon"
remixicon="RiArrowRightLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="CheckIcon"
tabler="IconCheck"
hugeicons="Tick02Icon"
phosphor="CheckIcon"
remixicon="RiCheckLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="ChevronDownIcon"
tabler="IconChevronDown"
hugeicons="ArrowDown01Icon"
phosphor="CaretDownIcon"
remixicon="RiArrowDownSLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="ChevronRightIcon"
tabler="IconChevronRight"
hugeicons="ArrowRight01Icon"
phosphor="CaretRightIcon"
remixicon="RiArrowRightSLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="SearchIcon"
tabler="IconSearch"
hugeicons="Search01Icon"
phosphor="MagnifyingGlassIcon"
remixicon="RiSearchLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="SettingsIcon"
tabler="IconSettings"
hugeicons="Settings01Icon"
phosphor="GearIcon"
remixicon="RiSettingsLine"
/>
</Card>
</div>
</CardContent>
</Card>

274
apps/v4/registry/bases/radix/examples/demo.tsx
View File

@@ -1,7 +1,6 @@
"use client"
import * as React from "react"
import { type IconLibraryName } from "shadcn/icons"
import {
AlertDialog,
@@ -51,121 +50,6 @@ import { Switch } from "@/registry/bases/radix/ui/switch"
import { Textarea } from "@/registry/bases/radix/ui/textarea"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
const PREVIEW_ICONS = [
{
lucide: "CopyIcon",
tabler: "IconCopy",
hugeicons: "Copy01Icon",
phosphor: "CopyIcon",
remixicon: "RiFileCopyLine",
},
{
lucide: "CircleAlertIcon",
tabler: "IconExclamationCircle",
hugeicons: "AlertCircleIcon",
phosphor: "WarningCircleIcon",
remixicon: "RiErrorWarningLine",
},
{
lucide: "TrashIcon",
tabler: "IconTrash",
hugeicons: "Delete02Icon",
phosphor: "TrashIcon",
remixicon: "RiDeleteBinLine",
},
{
lucide: "ShareIcon",
tabler: "IconShare",
hugeicons: "Share03Icon",
phosphor: "ShareIcon",
remixicon: "RiShareLine",
},
{
lucide: "ShoppingBagIcon",
tabler: "IconShoppingBag",
hugeicons: "ShoppingBag01Icon",
phosphor: "BagIcon",
remixicon: "RiShoppingBagLine",
},
{
lucide: "MoreHorizontalIcon",
tabler: "IconDots",
hugeicons: "MoreHorizontalCircle01Icon",
phosphor: "DotsThreeIcon",
remixicon: "RiMoreLine",
},
{
lucide: "Loader2Icon",
tabler: "IconLoader",
hugeicons: "Loading03Icon",
phosphor: "SpinnerIcon",
remixicon: "RiLoaderLine",
},
{
lucide: "PlusIcon",
tabler: "IconPlus",
hugeicons: "PlusSignIcon",
phosphor: "PlusIcon",
remixicon: "RiAddLine",
},
{
lucide: "MinusIcon",
tabler: "IconMinus",
hugeicons: "MinusSignIcon",
phosphor: "MinusIcon",
remixicon: "RiSubtractLine",
},
{
lucide: "ArrowLeftIcon",
tabler: "IconArrowLeft",
hugeicons: "ArrowLeft02Icon",
phosphor: "ArrowLeftIcon",
remixicon: "RiArrowLeftLine",
},
{
lucide: "ArrowRightIcon",
tabler: "IconArrowRight",
hugeicons: "ArrowRight02Icon",
phosphor: "ArrowRightIcon",
remixicon: "RiArrowRightLine",
},
{
lucide: "CheckIcon",
tabler: "IconCheck",
hugeicons: "Tick02Icon",
phosphor: "CheckIcon",
remixicon: "RiCheckLine",
},
{
lucide: "ChevronDownIcon",
tabler: "IconChevronDown",
hugeicons: "ArrowDown01Icon",
phosphor: "CaretDownIcon",
remixicon: "RiArrowDownSLine",
},
{
lucide: "ChevronRightIcon",
tabler: "IconChevronRight",
hugeicons: "ArrowRight01Icon",
phosphor: "CaretRightIcon",
remixicon: "RiArrowRightSLine",
},
{
lucide: "SearchIcon",
tabler: "IconSearch",
hugeicons: "Search01Icon",
phosphor: "MagnifyingGlassIcon",
remixicon: "RiSearchLine",
},
{
lucide: "SettingsIcon",
tabler: "IconSettings",
hugeicons: "Settings01Icon",
phosphor: "GearIcon",
remixicon: "RiSettingsLine",
},
] satisfies Record<IconLibraryName, string>[]
export function Demo() {
const [sliderValue, setSliderValue] = React.useState<number[]>([500])
const handleSliderValueChange = React.useCallback((value: number[]) => {
@@ -223,20 +107,150 @@ export function Demo() {
<Card>
<CardContent>
<div className="grid grid-cols-8 place-items-center gap-4">
{PREVIEW_ICONS.map((icon, index) => (
<Card
key={index}
className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4"
>
<IconPlaceholder
lucide={icon.lucide}
tabler={icon.tabler}
hugeicons={icon.hugeicons}
phosphor={icon.phosphor}
remixicon={icon.remixicon}
/>
</Card>
))}
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="CopyIcon"
tabler="IconCopy"
hugeicons="Copy01Icon"
phosphor="CopyIcon"
remixicon="RiFileCopyLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="CircleAlertIcon"
tabler="IconExclamationCircle"
hugeicons="AlertCircleIcon"
phosphor="WarningCircleIcon"
remixicon="RiErrorWarningLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="TrashIcon"
tabler="IconTrash"
hugeicons="Delete02Icon"
phosphor="TrashIcon"
remixicon="RiDeleteBinLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="ShareIcon"
tabler="IconShare"
hugeicons="Share03Icon"
phosphor="ShareIcon"
remixicon="RiShareLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="ShoppingBagIcon"
tabler="IconShoppingBag"
hugeicons="ShoppingBag01Icon"
phosphor="BagIcon"
remixicon="RiShoppingBagLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="MoreHorizontalIcon"
tabler="IconDots"
hugeicons="MoreHorizontalCircle01Icon"
phosphor="DotsThreeIcon"
remixicon="RiMoreLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="Loader2Icon"
tabler="IconLoader"
hugeicons="Loading03Icon"
phosphor="SpinnerIcon"
remixicon="RiLoaderLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="PlusIcon"
tabler="IconPlus"
hugeicons="PlusSignIcon"
phosphor="PlusIcon"
remixicon="RiAddLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="MinusIcon"
tabler="IconMinus"
hugeicons="MinusSignIcon"
phosphor="MinusIcon"
remixicon="RiSubtractLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="ArrowLeftIcon"
tabler="IconArrowLeft"
hugeicons="ArrowLeft02Icon"
phosphor="ArrowLeftIcon"
remixicon="RiArrowLeftLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="ArrowRightIcon"
tabler="IconArrowRight"
hugeicons="ArrowRight02Icon"
phosphor="ArrowRightIcon"
remixicon="RiArrowRightLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="CheckIcon"
tabler="IconCheck"
hugeicons="Tick02Icon"
phosphor="CheckIcon"
remixicon="RiCheckLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="ChevronDownIcon"
tabler="IconChevronDown"
hugeicons="ArrowDown01Icon"
phosphor="CaretDownIcon"
remixicon="RiArrowDownSLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="ChevronRightIcon"
tabler="IconChevronRight"
hugeicons="ArrowRight01Icon"
phosphor="CaretRightIcon"
remixicon="RiArrowRightSLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="SearchIcon"
tabler="IconSearch"
hugeicons="Search01Icon"
phosphor="MagnifyingGlassIcon"
remixicon="RiSearchLine"
/>
</Card>
<Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
<IconPlaceholder
lucide="SettingsIcon"
tabler="IconSettings"
hugeicons="Settings01Icon"
phosphor="GearIcon"
remixicon="RiSettingsLine"
/>
</Card>
</div>
</CardContent>
</Card>

1
apps/v4/registry/icons/__hugeicons__.ts
View File

@@ -123,6 +123,7 @@ export { Search01Icon } from "@hugeicons/core-free-icons"
export { SearchIcon } from "@hugeicons/core-free-icons"
export { SentIcon } from "@hugeicons/core-free-icons"
export { ServerStackIcon } from "@hugeicons/core-free-icons"
export { Settings01Icon } from "@hugeicons/core-free-icons"
export { Settings05Icon } from "@hugeicons/core-free-icons"
export { SettingsIcon } from "@hugeicons/core-free-icons"
export { Share01Icon } from "@hugeicons/core-free-icons"