mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-13 02:41:34 +00:00
Compare commits
1 Commits
shadcn/cod
...
shadcn/fix
| Author | SHA1 | Date | |
|---|---|---|---|
|
86479e0a30 |
125
.github/workflows/code-format.yml
vendored
125
.github/workflows/code-format.yml
vendored
@@ -1,125 +0,0 @@
|
||||
name: Code format
|
||||
|
||||
on:
|
||||
workflow_run:
|
||||
workflows: ["Code check"]
|
||||
types:
|
||||
- completed
|
||||
|
||||
permissions:
|
||||
actions: read
|
||||
contents: write
|
||||
pull-requests: read
|
||||
|
||||
jobs:
|
||||
format:
|
||||
if: |
|
||||
github.event.workflow_run.conclusion == 'failure' &&
|
||||
github.event.workflow_run.event == 'pull_request'
|
||||
runs-on: ubuntu-latest
|
||||
name: Run pnpm format:write
|
||||
steps:
|
||||
- name: Inspect failed workflow run
|
||||
id: meta
|
||||
uses: actions/github-script@v7
|
||||
with:
|
||||
script: |
|
||||
const pr = context.payload.workflow_run.pull_requests[0]
|
||||
|
||||
if (!pr) {
|
||||
core.notice("Skipping because the failed run is not attached to a pull request.")
|
||||
core.setOutput("should_run", "false")
|
||||
return
|
||||
}
|
||||
|
||||
const { data: pullRequest } = await github.rest.pulls.get({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
pull_number: pr.number,
|
||||
})
|
||||
|
||||
const { data: jobs } = await github.rest.actions.listJobsForWorkflowRun({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
run_id: context.payload.workflow_run.id,
|
||||
per_page: 100,
|
||||
})
|
||||
|
||||
const formatJob = jobs.jobs.find((job) => job.name === "pnpm format:check")
|
||||
const sameRepo =
|
||||
pullRequest.head.repo.full_name === `${context.repo.owner}/${context.repo.repo}`
|
||||
const shouldRun = formatJob?.conclusion === "failure" && sameRepo
|
||||
|
||||
if (!formatJob) {
|
||||
core.notice("Skipping because the format job could not be found in the failed run.")
|
||||
} else if (formatJob.conclusion !== "failure") {
|
||||
core.notice(
|
||||
`Skipping because the format job concluded with "${formatJob.conclusion}".`
|
||||
)
|
||||
}
|
||||
|
||||
if (!sameRepo) {
|
||||
core.notice(
|
||||
`Skipping PR #${pullRequest.number} because its head branch lives in ${pullRequest.head.repo.full_name}.`
|
||||
)
|
||||
}
|
||||
|
||||
core.setOutput("head_ref", pullRequest.head.ref)
|
||||
core.setOutput("should_run", shouldRun ? "true" : "false")
|
||||
|
||||
- name: Checkout pull request branch
|
||||
if: steps.meta.outputs.should_run == 'true'
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
ref: ${{ steps.meta.outputs.head_ref }}
|
||||
|
||||
- name: Install Node.js
|
||||
if: steps.meta.outputs.should_run == 'true'
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20
|
||||
|
||||
- name: Install pnpm
|
||||
if: steps.meta.outputs.should_run == 'true'
|
||||
uses: pnpm/action-setup@v4
|
||||
with:
|
||||
version: 9.0.6
|
||||
run_install: false
|
||||
|
||||
- name: Get pnpm store directory
|
||||
if: steps.meta.outputs.should_run == 'true'
|
||||
id: pnpm-cache
|
||||
run: |
|
||||
echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: Setup pnpm cache
|
||||
if: steps.meta.outputs.should_run == 'true'
|
||||
uses: actions/cache@v4
|
||||
with:
|
||||
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
|
||||
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-pnpm-store-
|
||||
|
||||
- name: Install dependencies
|
||||
if: steps.meta.outputs.should_run == 'true'
|
||||
run: pnpm install
|
||||
|
||||
- name: Apply formatting
|
||||
if: steps.meta.outputs.should_run == 'true'
|
||||
run: pnpm format:write
|
||||
|
||||
- name: Commit formatting changes
|
||||
if: steps.meta.outputs.should_run == 'true'
|
||||
run: |
|
||||
if git diff --quiet; then
|
||||
echo "No formatting changes to commit."
|
||||
exit 0
|
||||
fi
|
||||
|
||||
git config user.name "github-actions[bot]"
|
||||
git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
|
||||
git add -A
|
||||
git commit -m "style: apply automated formatting"
|
||||
git push origin HEAD:${{ steps.meta.outputs.head_ref }}
|
||||
78
.github/workflows/deprecated.yml
vendored
Normal file
78
.github/workflows/deprecated.yml
vendored
Normal file
@@ -0,0 +1,78 @@
|
||||
name: Deprecated
|
||||
|
||||
on:
|
||||
pull_request_target:
|
||||
types: [opened, synchronize]
|
||||
|
||||
permissions:
|
||||
issues: write
|
||||
contents: read
|
||||
pull-requests: write
|
||||
|
||||
jobs:
|
||||
deprecated:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout PR
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
ref: ${{ github.event.pull_request.head.sha }}
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Get changed files
|
||||
id: changed-files
|
||||
uses: tj-actions/changed-files@v46
|
||||
with:
|
||||
files: |
|
||||
apps/www/**
|
||||
files_ignore: |
|
||||
apps/www/public/r/**
|
||||
base_sha: ${{ github.event.pull_request.base.sha }}
|
||||
sha: ${{ github.event.pull_request.head.sha }}
|
||||
|
||||
- name: Comment on PR if www files changed
|
||||
if: steps.changed-files.outputs.any_changed == 'true'
|
||||
uses: actions/github-script@v7
|
||||
with:
|
||||
github-token: ${{ secrets.GITHUB_TOKEN }}
|
||||
script: |
|
||||
const changedFiles = `${{ steps.changed-files.outputs.all_changed_files }}`.split(' ');
|
||||
const wwwFiles = changedFiles.filter(file =>
|
||||
file.startsWith('apps/www/') &&
|
||||
!file.startsWith('apps/www/public/r/') &&
|
||||
file !== 'apps/www/package.json'
|
||||
);
|
||||
|
||||
if (wwwFiles.length > 0) {
|
||||
const comment = `Looks like this PR modifies files in \`apps/www\`, which is deprecated.
|
||||
|
||||
Consider applying the change to \`apps/v4\` if relevant.`;
|
||||
|
||||
await github.rest.issues.createComment({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
issue_number: context.issue.number,
|
||||
body: comment
|
||||
});
|
||||
|
||||
// Add deprecated label
|
||||
await github.rest.issues.addLabels({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
issue_number: context.issue.number,
|
||||
labels: ['deprecated']
|
||||
});
|
||||
} else {
|
||||
// Remove deprecated label if no www files are changed
|
||||
try {
|
||||
await github.rest.issues.removeLabel({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
issue_number: context.issue.number,
|
||||
name: 'deprecated'
|
||||
});
|
||||
} catch (error) {
|
||||
// Label doesn't exist, which is fine
|
||||
console.log('Deprecated label not found, skipping removal');
|
||||
}
|
||||
}
|
||||
40
.github/workflows/validate-registries.yml
vendored
40
.github/workflows/validate-registries.yml
vendored
@@ -16,7 +16,7 @@ jobs:
|
||||
check-registry-sync:
|
||||
if: github.event_name == 'pull_request'
|
||||
runs-on: ubuntu-latest
|
||||
name: check-registry-sync
|
||||
name: Check registry sync
|
||||
permissions:
|
||||
contents: read
|
||||
pull-requests: write
|
||||
@@ -66,44 +66,6 @@ jobs:
|
||||
with:
|
||||
node-version: 20
|
||||
|
||||
- name: Block reserved registry namespaces
|
||||
env:
|
||||
RESERVED_NAMESPACES: "@shadcn,@ui,@blocks,@components,@block,@component,@util,@utils,@registry,@lib,@hook,@hooks,@theme,@themes,@chart,@charts"
|
||||
run: |
|
||||
node <<'EOF'
|
||||
const fs = require("node:fs")
|
||||
|
||||
const files = [
|
||||
"apps/v4/public/r/registries.json",
|
||||
"apps/v4/registry/directory.json",
|
||||
]
|
||||
const reservedNamespaces = new Set(
|
||||
process.env.RESERVED_NAMESPACES.split(",").filter(Boolean)
|
||||
)
|
||||
|
||||
function readNames(filePath) {
|
||||
return JSON.parse(fs.readFileSync(filePath, "utf8")).map(
|
||||
(entry) => entry.name
|
||||
)
|
||||
}
|
||||
|
||||
const violations = files.flatMap((filePath) => {
|
||||
return readNames(filePath)
|
||||
.filter((name) => reservedNamespaces.has(name))
|
||||
.map((name) => `${filePath}: ${name}`)
|
||||
})
|
||||
|
||||
if (violations.length > 0) {
|
||||
console.error("Reserved registry namespaces are not allowed:")
|
||||
|
||||
for (const violation of violations) {
|
||||
console.error(`- ${violation}`)
|
||||
}
|
||||
|
||||
process.exit(1)
|
||||
}
|
||||
EOF
|
||||
|
||||
- uses: pnpm/action-setup@v4
|
||||
name: Install pnpm
|
||||
id: pnpm-install
|
||||
|
||||
@@ -5,4 +5,3 @@ build
|
||||
.contentlayer
|
||||
**/fixtures
|
||||
deprecated
|
||||
apps/v4/registry/styles/**/*.css
|
||||
|
||||
@@ -5,4 +5,3 @@ build
|
||||
.contentlayer
|
||||
registry/__index__.tsx
|
||||
content/docs/components/calendar.mdx
|
||||
registry/styles/**/*.css
|
||||
|
||||
@@ -82,11 +82,6 @@ export function MenuAccentPicker({
|
||||
key={accent.value}
|
||||
value={accent.value}
|
||||
closeOnClick={isMobile}
|
||||
disabled={
|
||||
accent.value === "bold" &&
|
||||
(params.menuColor === "default-translucent" ||
|
||||
params.menuColor === "inverted-translucent")
|
||||
}
|
||||
>
|
||||
{accent.label}
|
||||
</PickerRadioItem>
|
||||
|
||||
@@ -6,6 +6,7 @@ import {
|
||||
buildRegistryTheme,
|
||||
DEFAULT_CONFIG,
|
||||
type DesignSystemConfig,
|
||||
type RadiusValue,
|
||||
} from "@/registry/config"
|
||||
import { useIframeMessageListener } from "@/app/(create)/hooks/use-iframe-sync"
|
||||
import { FONTS } from "@/app/(create)/lib/fonts"
|
||||
@@ -14,46 +15,6 @@ import {
|
||||
type DesignSystemSearchParams,
|
||||
} from "@/app/(create)/lib/search-params"
|
||||
|
||||
const THEME_STYLE_ELEMENT_ID = "design-system-theme-vars"
|
||||
const MANAGED_BODY_CLASS_PREFIXES = ["style-", "base-color-"] as const
|
||||
|
||||
type RegistryThemeCssVars = NonNullable<
|
||||
ReturnType<typeof buildRegistryTheme>["cssVars"]
|
||||
>
|
||||
|
||||
function removeManagedBodyClasses(body: Element) {
|
||||
for (const className of Array.from(body.classList)) {
|
||||
if (
|
||||
MANAGED_BODY_CLASS_PREFIXES.some((prefix) => className.startsWith(prefix))
|
||||
) {
|
||||
body.classList.remove(className)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function buildCssRule(selector: string, cssVars?: Record<string, string>) {
|
||||
const declarations = Object.entries(cssVars ?? {})
|
||||
.filter(([, value]) => Boolean(value))
|
||||
.map(([key, value]) => ` --${key}: ${value};`)
|
||||
.join("\n")
|
||||
|
||||
if (!declarations) {
|
||||
return `${selector} {}\n`
|
||||
}
|
||||
|
||||
return `${selector} {\n${declarations}\n}\n`
|
||||
}
|
||||
|
||||
function buildThemeCssText(cssVars: RegistryThemeCssVars) {
|
||||
return [
|
||||
buildCssRule(":root", {
|
||||
...(cssVars.theme ?? {}),
|
||||
...(cssVars.light ?? {}),
|
||||
}),
|
||||
buildCssRule(".dark", cssVars.dark),
|
||||
].join("\n")
|
||||
}
|
||||
|
||||
export function DesignSystemProvider({
|
||||
children,
|
||||
}: {
|
||||
@@ -63,38 +24,19 @@ export function DesignSystemProvider({
|
||||
shallow: true, // No need to go through the server…
|
||||
history: "replace", // …or push updates into the iframe history.
|
||||
})
|
||||
const [liveSearchParams, setLiveSearchParams] = React.useState(searchParams)
|
||||
const [isReady, setIsReady] = React.useState(false)
|
||||
const { style, theme, font, baseColor, menuAccent, menuColor, radius } =
|
||||
searchParams
|
||||
liveSearchParams
|
||||
const effectiveRadius = style === "lyra" ? "none" : radius
|
||||
const selectedFont = React.useMemo(
|
||||
() => FONTS.find((fontOption) => fontOption.value === font),
|
||||
[font]
|
||||
)
|
||||
const initialFontSansRef = React.useRef<string | null>(null)
|
||||
|
||||
React.useEffect(() => {
|
||||
initialFontSansRef.current =
|
||||
document.documentElement.style.getPropertyValue("--font-sans")
|
||||
|
||||
return () => {
|
||||
removeManagedBodyClasses(document.body)
|
||||
document.getElementById(THEME_STYLE_ELEMENT_ID)?.remove()
|
||||
|
||||
if (initialFontSansRef.current) {
|
||||
document.documentElement.style.setProperty(
|
||||
"--font-sans",
|
||||
initialFontSansRef.current
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
document.documentElement.style.removeProperty("--font-sans")
|
||||
}
|
||||
}, [])
|
||||
setLiveSearchParams(searchParams)
|
||||
}, [searchParams])
|
||||
|
||||
const handleDesignSystemMessage = React.useCallback(
|
||||
(nextParams: DesignSystemSearchParams) => {
|
||||
setLiveSearchParams(nextParams)
|
||||
setSearchParams(nextParams)
|
||||
},
|
||||
[setSearchParams]
|
||||
@@ -104,7 +46,11 @@ export function DesignSystemProvider({
|
||||
|
||||
React.useEffect(() => {
|
||||
if (style === "lyra" && radius !== "none") {
|
||||
setSearchParams({ radius: "none" })
|
||||
setLiveSearchParams((prev) => ({
|
||||
...prev,
|
||||
radius: "none",
|
||||
}))
|
||||
setSearchParams({ radius: "none" as RadiusValue })
|
||||
}
|
||||
}, [style, radius, setSearchParams])
|
||||
|
||||
@@ -117,19 +63,27 @@ export function DesignSystemProvider({
|
||||
const body = document.body
|
||||
|
||||
// Iterate over a snapshot so removals do not affect traversal.
|
||||
removeManagedBodyClasses(body)
|
||||
Array.from(body.classList).forEach((className) => {
|
||||
if (
|
||||
className.startsWith("style-") ||
|
||||
className.startsWith("base-color-")
|
||||
) {
|
||||
body.classList.remove(className)
|
||||
}
|
||||
})
|
||||
body.classList.add(`style-${style}`, `base-color-${baseColor}`)
|
||||
|
||||
// Update font.
|
||||
// Always set --font-sans for the preview so the selected font is visible.
|
||||
// The font type (sans/serif/mono) is metadata for the CLI updater.
|
||||
const selectedFont = FONTS.find((f) => f.value === font)
|
||||
if (selectedFont) {
|
||||
const fontFamily = selectedFont.font.style.fontFamily
|
||||
document.documentElement.style.setProperty("--font-sans", fontFamily)
|
||||
}
|
||||
|
||||
setIsReady(true)
|
||||
}, [style, theme, font, baseColor, selectedFont])
|
||||
}, [style, theme, font, baseColor])
|
||||
|
||||
const registryTheme = React.useMemo(() => {
|
||||
if (!baseColor || !theme || !menuAccent || !effectiveRadius) {
|
||||
@@ -153,83 +107,69 @@ export function DesignSystemProvider({
|
||||
return
|
||||
}
|
||||
|
||||
const styleId = "design-system-theme-vars"
|
||||
let styleElement = document.getElementById(
|
||||
THEME_STYLE_ELEMENT_ID
|
||||
styleId
|
||||
) as HTMLStyleElement | null
|
||||
|
||||
if (!styleElement) {
|
||||
styleElement = document.createElement("style")
|
||||
styleElement.id = THEME_STYLE_ELEMENT_ID
|
||||
styleElement.id = styleId
|
||||
document.head.appendChild(styleElement)
|
||||
}
|
||||
|
||||
styleElement.textContent = buildThemeCssText(registryTheme.cssVars)
|
||||
const {
|
||||
light: lightVars,
|
||||
dark: darkVars,
|
||||
theme: themeVars,
|
||||
} = registryTheme.cssVars
|
||||
|
||||
let cssText = ":root {\n"
|
||||
// Add theme vars (shared across light/dark).
|
||||
if (themeVars) {
|
||||
Object.entries(themeVars).forEach(([key, value]) => {
|
||||
if (value) {
|
||||
cssText += ` --${key}: ${value};\n`
|
||||
}
|
||||
})
|
||||
}
|
||||
// Add light mode vars.
|
||||
if (lightVars) {
|
||||
Object.entries(lightVars).forEach(([key, value]) => {
|
||||
if (value) {
|
||||
cssText += ` --${key}: ${value};\n`
|
||||
}
|
||||
})
|
||||
}
|
||||
cssText += "}\n\n"
|
||||
|
||||
cssText += ".dark {\n"
|
||||
if (darkVars) {
|
||||
Object.entries(darkVars).forEach(([key, value]) => {
|
||||
if (value) {
|
||||
cssText += ` --${key}: ${value};\n`
|
||||
}
|
||||
})
|
||||
}
|
||||
cssText += "}\n"
|
||||
|
||||
styleElement.textContent = cssText
|
||||
}, [registryTheme])
|
||||
|
||||
// Handle menu color inversion by adding/removing dark class to elements with cn-menu-target.
|
||||
// useLayoutEffect to apply classes synchronously before paint, avoiding flash.
|
||||
React.useLayoutEffect(() => {
|
||||
React.useEffect(() => {
|
||||
if (!menuColor) {
|
||||
return
|
||||
}
|
||||
|
||||
const isInvertedMenu =
|
||||
menuColor === "inverted" || menuColor === "inverted-translucent"
|
||||
const isTranslucentMenu =
|
||||
menuColor === "default-translucent" ||
|
||||
menuColor === "inverted-translucent"
|
||||
let frameId = 0
|
||||
|
||||
const updateMenuElements = () => {
|
||||
const allElements = document.querySelectorAll<HTMLElement>(
|
||||
".cn-menu-target, [data-menu-translucent]"
|
||||
)
|
||||
|
||||
if (allElements.length === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
// Disable transitions while toggling classes.
|
||||
allElements.forEach((element) => {
|
||||
element.style.transition = "none"
|
||||
})
|
||||
|
||||
allElements.forEach((element) => {
|
||||
if (element.classList.contains("cn-menu-target")) {
|
||||
if (isInvertedMenu) {
|
||||
element.classList.add("dark")
|
||||
} else {
|
||||
element.classList.remove("dark")
|
||||
}
|
||||
const menuElements = document.querySelectorAll(".cn-menu-target")
|
||||
menuElements.forEach((element) => {
|
||||
if (menuColor === "inverted") {
|
||||
element.classList.add("dark")
|
||||
} else {
|
||||
element.classList.remove("dark")
|
||||
}
|
||||
|
||||
// When translucent is enabled, move from data-attr to class so styles apply.
|
||||
// When disabled, move back to a data-attr so the element stays queryable
|
||||
// for future toggles without losing its identity as a menu element.
|
||||
if (isTranslucentMenu) {
|
||||
element.classList.add("cn-menu-translucent")
|
||||
element.removeAttribute("data-menu-translucent")
|
||||
} else if (element.classList.contains("cn-menu-translucent")) {
|
||||
element.classList.remove("cn-menu-translucent")
|
||||
element.setAttribute("data-menu-translucent", "")
|
||||
}
|
||||
})
|
||||
|
||||
// Force a reflow, then re-enable transitions.
|
||||
void document.body.offsetHeight
|
||||
allElements.forEach((element) => {
|
||||
element.style.transition = ""
|
||||
})
|
||||
}
|
||||
|
||||
const scheduleMenuUpdate = () => {
|
||||
if (frameId) {
|
||||
return
|
||||
}
|
||||
|
||||
frameId = window.requestAnimationFrame(() => {
|
||||
frameId = 0
|
||||
updateMenuElements()
|
||||
})
|
||||
}
|
||||
|
||||
@@ -238,7 +178,7 @@ export function DesignSystemProvider({
|
||||
|
||||
// Watch for new menu elements being added to the DOM.
|
||||
const observer = new MutationObserver(() => {
|
||||
scheduleMenuUpdate()
|
||||
updateMenuElements()
|
||||
})
|
||||
|
||||
observer.observe(document.body, {
|
||||
@@ -248,9 +188,6 @@ export function DesignSystemProvider({
|
||||
|
||||
return () => {
|
||||
observer.disconnect()
|
||||
if (frameId) {
|
||||
window.cancelAnimationFrame(frameId)
|
||||
}
|
||||
}
|
||||
}, [menuColor])
|
||||
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Menu02Icon } from "@hugeicons/core-free-icons"
|
||||
import { HugeiconsIcon } from "@hugeicons/react"
|
||||
import { useTheme } from "next-themes"
|
||||
|
||||
import { useMounted } from "@/hooks/use-mounted"
|
||||
@@ -12,37 +10,99 @@ import {
|
||||
Picker,
|
||||
PickerContent,
|
||||
PickerGroup,
|
||||
PickerLabel,
|
||||
PickerRadioGroup,
|
||||
PickerRadioItem,
|
||||
PickerSeparator,
|
||||
PickerTrigger,
|
||||
} from "@/app/(create)/components/picker"
|
||||
import {
|
||||
isTranslucentMenuColor,
|
||||
useDesignSystemSearchParams,
|
||||
} from "@/app/(create)/lib/search-params"
|
||||
import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
|
||||
|
||||
type ColorChoice = "default" | "inverted"
|
||||
type SurfaceChoice = "solid" | "translucent"
|
||||
|
||||
function getMenuColorValue(
|
||||
color: ColorChoice,
|
||||
translucent: boolean
|
||||
): MenuColorValue {
|
||||
if (color === "default") {
|
||||
return translucent ? "default-translucent" : "default"
|
||||
}
|
||||
|
||||
return translucent ? "inverted-translucent" : "inverted"
|
||||
}
|
||||
|
||||
const MENU_OPTIONS: { value: MenuColorValue; label: string }[] = [
|
||||
{ value: "default", label: "Default / Solid" },
|
||||
{ value: "default-translucent", label: "Default / Translucent" },
|
||||
{ value: "inverted", label: "Inverted / Solid" },
|
||||
{ value: "inverted-translucent", label: "Inverted / Translucent" },
|
||||
]
|
||||
const MENU_OPTIONS = [
|
||||
{
|
||||
value: "default" as const,
|
||||
label: "Default",
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="128"
|
||||
height="128"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
role="img"
|
||||
stroke="currentColor"
|
||||
className="size-4 text-foreground"
|
||||
>
|
||||
<path
|
||||
d="M2 11.5C2 7.02166 2 4.78249 3.39124 3.39124C4.78249 2 7.02166 2 11.5 2C15.9783 2 18.2175 2 19.6088 3.39124C21 4.78249 21 7.02166 21 11.5C21 15.9783 21 18.2175 19.6088 19.6088C18.2175 21 15.9783 21 11.5 21C7.02166 21 4.78249 21 3.39124 19.6088C2 18.2175 2 15.9783 2 11.5Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<path
|
||||
d="M8.5 11.5L14.5001 11.5"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.5 15H13.5"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.5 8H15.5"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: "inverted" as const,
|
||||
label: "Inverted",
|
||||
icon: (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="128"
|
||||
height="128"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
role="img"
|
||||
className="size-4 fill-background"
|
||||
>
|
||||
<path
|
||||
d="M2 11.5C2 7.02166 2 4.78249 3.39124 3.39124C4.78249 2 7.02166 2 11.5 2C15.9783 2 18.2175 2 19.6088 3.39124C21 4.78249 21 7.02166 21 11.5C21 15.9783 21 18.2175 19.6088 19.6088C18.2175 21 15.9783 21 11.5 21C7.02166 21 4.78249 21 3.39124 19.6088C2 18.2175 2 15.9783 2 11.5Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<path
|
||||
d="M8.5 11.5L14.5001 11.5"
|
||||
stroke="var(--foreground)"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9.5 15H13.5"
|
||||
stroke="var(--foreground)"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.5 8H15.5"
|
||||
stroke="var(--foreground)"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
] as const
|
||||
|
||||
export function MenuColorPicker({
|
||||
isMobile,
|
||||
@@ -51,69 +111,25 @@ export function MenuColorPicker({
|
||||
isMobile: boolean
|
||||
anchorRef: React.RefObject<HTMLDivElement | null>
|
||||
}) {
|
||||
const [params, setParams] = useDesignSystemSearchParams()
|
||||
const { resolvedTheme } = useTheme()
|
||||
const mounted = useMounted()
|
||||
const lastSolidMenuAccentRef = React.useRef(params.menuAccent)
|
||||
const isDark = mounted && resolvedTheme === "dark"
|
||||
const [params, setParams] = useDesignSystemSearchParams()
|
||||
const currentMenu = MENU_OPTIONS.find(
|
||||
(menu) => menu.value === params.menuColor
|
||||
)
|
||||
const colorChoice: ColorChoice =
|
||||
params.menuColor === "inverted" ||
|
||||
params.menuColor === "inverted-translucent"
|
||||
? "inverted"
|
||||
: "default"
|
||||
const surfaceChoice: SurfaceChoice =
|
||||
params.menuColor === "default-translucent" ||
|
||||
params.menuColor === "inverted-translucent"
|
||||
? "translucent"
|
||||
: "solid"
|
||||
|
||||
React.useEffect(() => {
|
||||
if (surfaceChoice === "solid") {
|
||||
lastSolidMenuAccentRef.current = params.menuAccent
|
||||
}
|
||||
}, [params.menuAccent, surfaceChoice])
|
||||
|
||||
const setColor = (color: ColorChoice) => {
|
||||
const nextMenuColor = getMenuColorValue(
|
||||
color,
|
||||
surfaceChoice === "translucent"
|
||||
)
|
||||
|
||||
setParams({
|
||||
menuColor: nextMenuColor,
|
||||
...(isTranslucentMenuColor(nextMenuColor) && { menuAccent: "subtle" }),
|
||||
})
|
||||
}
|
||||
|
||||
const setSurface = (choice: SurfaceChoice) => {
|
||||
const isTranslucent = choice === "translucent"
|
||||
const nextMenuColor = getMenuColorValue(colorChoice, isTranslucent)
|
||||
|
||||
setParams({
|
||||
menuColor: nextMenuColor,
|
||||
menuAccent: isTranslucent ? "subtle" : lastSolidMenuAccentRef.current,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="group/picker relative">
|
||||
<Picker>
|
||||
<PickerTrigger>
|
||||
<PickerTrigger disabled={mounted && resolvedTheme === "dark"}>
|
||||
<div className="flex flex-col justify-start text-left">
|
||||
<div className="text-xs text-muted-foreground">Menu</div>
|
||||
<div className="text-xs text-muted-foreground">Menu Color</div>
|
||||
<div className="text-sm font-medium text-foreground">
|
||||
{currentMenu?.label}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none md:right-2.5">
|
||||
<HugeiconsIcon
|
||||
icon={Menu02Icon}
|
||||
strokeWidth={2}
|
||||
className="size-4"
|
||||
/>
|
||||
{currentMenu?.icon}
|
||||
</div>
|
||||
</PickerTrigger>
|
||||
<PickerContent
|
||||
@@ -121,43 +137,24 @@ export function MenuColorPicker({
|
||||
side={isMobile ? "top" : "right"}
|
||||
align={isMobile ? "center" : "start"}
|
||||
>
|
||||
<PickerGroup>
|
||||
<PickerLabel>Color</PickerLabel>
|
||||
<PickerRadioGroup
|
||||
value={colorChoice}
|
||||
onValueChange={(value) => {
|
||||
setColor(value as ColorChoice)
|
||||
}}
|
||||
>
|
||||
<PickerRadioItem value="default" closeOnClick={isMobile}>
|
||||
Default
|
||||
</PickerRadioItem>
|
||||
<PickerRadioItem
|
||||
value="inverted"
|
||||
closeOnClick={isMobile}
|
||||
disabled={isDark}
|
||||
>
|
||||
Inverted
|
||||
</PickerRadioItem>
|
||||
</PickerRadioGroup>
|
||||
</PickerGroup>
|
||||
<PickerSeparator />
|
||||
<PickerGroup>
|
||||
<PickerLabel>Appearance</PickerLabel>
|
||||
<PickerRadioGroup
|
||||
value={surfaceChoice}
|
||||
onValueChange={(value) => {
|
||||
setSurface(value as SurfaceChoice)
|
||||
}}
|
||||
>
|
||||
<PickerRadioItem value="solid" closeOnClick={isMobile}>
|
||||
Solid
|
||||
</PickerRadioItem>
|
||||
<PickerRadioItem value="translucent" closeOnClick={isMobile}>
|
||||
Translucent
|
||||
</PickerRadioItem>
|
||||
</PickerRadioGroup>
|
||||
</PickerGroup>
|
||||
<PickerRadioGroup
|
||||
value={currentMenu?.value}
|
||||
onValueChange={(value) => {
|
||||
setParams({ menuColor: value as MenuColorValue })
|
||||
}}
|
||||
>
|
||||
<PickerGroup>
|
||||
{MENU_OPTIONS.map((menu) => (
|
||||
<PickerRadioItem
|
||||
key={menu.value}
|
||||
value={menu.value}
|
||||
closeOnClick={isMobile}
|
||||
>
|
||||
{menu.label}
|
||||
</PickerRadioItem>
|
||||
))}
|
||||
</PickerGroup>
|
||||
</PickerRadioGroup>
|
||||
</PickerContent>
|
||||
</Picker>
|
||||
<LockButton
|
||||
|
||||
@@ -18,10 +18,7 @@ import {
|
||||
RANDOMIZE_BIASES,
|
||||
type RandomizeContext,
|
||||
} from "@/app/(create)/lib/randomize-biases"
|
||||
import {
|
||||
isTranslucentMenuColor,
|
||||
useDesignSystemSearchParams,
|
||||
} from "@/app/(create)/lib/search-params"
|
||||
import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
|
||||
|
||||
function randomItem<T>(array: readonly T[]): T {
|
||||
return array[Math.floor(Math.random() * array.length)]
|
||||
@@ -71,25 +68,12 @@ export function useRandom() {
|
||||
const selectedIconLibrary = locks.has("iconLibrary")
|
||||
? paramsRef.current.iconLibrary
|
||||
: randomItem(Object.values(iconLibraries)).name
|
||||
const lockedMenuAccent = locks.has("menuAccent")
|
||||
const selectedMenuAccent = locks.has("menuAccent")
|
||||
? paramsRef.current.menuAccent
|
||||
: undefined
|
||||
const availableMenuColors =
|
||||
!locks.has("menuColor") && lockedMenuAccent === "bold"
|
||||
? MENU_COLORS.filter((menuColor) => {
|
||||
return !isTranslucentMenuColor(menuColor.value)
|
||||
})
|
||||
: MENU_COLORS
|
||||
: randomItem(MENU_ACCENTS).value
|
||||
const selectedMenuColor = locks.has("menuColor")
|
||||
? paramsRef.current.menuColor
|
||||
: randomItem(availableMenuColors).value
|
||||
const selectedMenuAccent =
|
||||
locks.has("menuAccent") || isTranslucentMenuColor(selectedMenuColor)
|
||||
? paramsRef.current.menuAccent === "bold" &&
|
||||
isTranslucentMenuColor(selectedMenuColor)
|
||||
? "subtle"
|
||||
: paramsRef.current.menuAccent
|
||||
: randomItem(MENU_ACCENTS).value
|
||||
: randomItem(MENU_COLORS).value
|
||||
|
||||
context.theme = selectedTheme
|
||||
context.font = selectedFont
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { NextResponse, type NextRequest } from "next/server"
|
||||
import { track } from "@vercel/analytics/server"
|
||||
import { encodePreset, isPresetCode } from "shadcn/preset"
|
||||
import { registryItemSchema } from "shadcn/schema"
|
||||
|
||||
import { buildRegistryBase } from "@/registry/config"
|
||||
@@ -15,22 +14,6 @@ export async function GET(request: NextRequest) {
|
||||
return NextResponse.json({ error: result.error }, { status: 400 })
|
||||
}
|
||||
|
||||
// Use the preset code from the URL if provided, otherwise encode one.
|
||||
const presetParam = searchParams.get("preset")
|
||||
const presetCode =
|
||||
presetParam && isPresetCode(presetParam)
|
||||
? presetParam
|
||||
: encodePreset({
|
||||
style: result.data.style,
|
||||
baseColor: result.data.baseColor,
|
||||
theme: result.data.theme,
|
||||
iconLibrary: result.data.iconLibrary,
|
||||
font: result.data.font,
|
||||
radius: result.data.radius,
|
||||
menuAccent: result.data.menuAccent,
|
||||
menuColor: result.data.menuColor,
|
||||
} as Parameters<typeof encodePreset>[0])
|
||||
|
||||
const registryBase = buildRegistryBase(result.data)
|
||||
const parseResult = registryItemSchema.safeParse(registryBase)
|
||||
|
||||
@@ -44,12 +27,10 @@ export async function GET(request: NextRequest) {
|
||||
)
|
||||
}
|
||||
|
||||
if (searchParams.get("track") === "1") {
|
||||
track("create_app", {
|
||||
...result.data,
|
||||
preset: presetCode,
|
||||
})
|
||||
}
|
||||
track("create_app", {
|
||||
...result.data,
|
||||
preset: searchParams.get("preset") ?? "",
|
||||
})
|
||||
|
||||
return NextResponse.json(parseResult.data)
|
||||
} catch (error) {
|
||||
|
||||
@@ -118,46 +118,6 @@ export type DesignSystemSearchParams = inferParserType<
|
||||
typeof designSystemSearchParams
|
||||
>
|
||||
|
||||
export function isTranslucentMenuColor(
|
||||
menuColor?: MenuColorValue | null
|
||||
): menuColor is "default-translucent" | "inverted-translucent" {
|
||||
return (
|
||||
menuColor === "default-translucent" || menuColor === "inverted-translucent"
|
||||
)
|
||||
}
|
||||
|
||||
function normalizePartialDesignSystemParams(
|
||||
params: Partial<DesignSystemSearchParams>
|
||||
): Partial<DesignSystemSearchParams> {
|
||||
if (
|
||||
params.menuAccent === "bold" &&
|
||||
isTranslucentMenuColor(params.menuColor ?? undefined)
|
||||
) {
|
||||
return {
|
||||
...params,
|
||||
menuAccent: "subtle",
|
||||
}
|
||||
}
|
||||
|
||||
return params
|
||||
}
|
||||
|
||||
function normalizeDesignSystemParams(
|
||||
params: DesignSystemSearchParams
|
||||
): DesignSystemSearchParams {
|
||||
if (
|
||||
params.menuAccent === "bold" &&
|
||||
isTranslucentMenuColor(params.menuColor)
|
||||
) {
|
||||
return {
|
||||
...params,
|
||||
menuAccent: "subtle",
|
||||
}
|
||||
}
|
||||
|
||||
return params
|
||||
}
|
||||
|
||||
// Wraps nuqs useQueryStates with transparent preset encoding/decoding.
|
||||
// - Reads: if ?preset=CODE is in the URL, decodes it and returns individual values.
|
||||
// - Writes: when design system params are set, encodes them into a preset code.
|
||||
@@ -169,16 +129,15 @@ export function useDesignSystemSearchParams(options: Options = {}) {
|
||||
})
|
||||
|
||||
// If preset param exists, decode it and overlay on raw params.
|
||||
const params = React.useMemo(
|
||||
() =>
|
||||
rawParams.preset && isPresetCode(rawParams.preset)
|
||||
? normalizeDesignSystemParams({
|
||||
...rawParams,
|
||||
...(decodePreset(rawParams.preset) ?? {}),
|
||||
})
|
||||
: normalizeDesignSystemParams(rawParams),
|
||||
[rawParams]
|
||||
)
|
||||
const params = React.useMemo(() => {
|
||||
if (rawParams.preset && isPresetCode(rawParams.preset)) {
|
||||
const decoded = decodePreset(rawParams.preset)
|
||||
if (decoded) {
|
||||
return { ...rawParams, ...decoded }
|
||||
}
|
||||
}
|
||||
return rawParams
|
||||
}, [rawParams])
|
||||
|
||||
// Use ref so setParams callback stays stable across renders.
|
||||
const paramsRef = React.useRef(params)
|
||||
@@ -197,9 +156,8 @@ export function useDesignSystemSearchParams(options: Options = {}) {
|
||||
) => Partial<DesignSystemSearchParams>),
|
||||
setOptions?: Options
|
||||
) => {
|
||||
const resolvedUpdates = normalizePartialDesignSystemParams(
|
||||
const resolvedUpdates =
|
||||
typeof updates === "function" ? updates(paramsRef.current) : updates
|
||||
)
|
||||
|
||||
const hasDesignSystemUpdate = DESIGN_SYSTEM_KEYS.some(
|
||||
(key) => key in resolvedUpdates
|
||||
@@ -211,10 +169,7 @@ export function useDesignSystemSearchParams(options: Options = {}) {
|
||||
}
|
||||
|
||||
// Merge current decoded values with updates.
|
||||
const merged = normalizeDesignSystemParams({
|
||||
...paramsRef.current,
|
||||
...resolvedUpdates,
|
||||
})
|
||||
const merged = { ...paramsRef.current, ...resolvedUpdates }
|
||||
|
||||
// Encode design system fields into a preset code.
|
||||
// Cast needed: merged values may include null from nuqs resets,
|
||||
|
||||
@@ -28,7 +28,7 @@ export async function StarsCount() {
|
||||
const formattedCount =
|
||||
json.stargazers_count >= 1000
|
||||
? `${Math.round(json.stargazers_count / 1000)}k`
|
||||
: json.stargazers_count?.toLocaleString()
|
||||
: json.stargazers_count.toLocaleString()
|
||||
|
||||
return (
|
||||
<span className="w-fit text-xs text-muted-foreground tabular-nums">
|
||||
|
||||
@@ -6,7 +6,7 @@ date: 2026-03-06
|
||||
|
||||
We're releasing version 4 of shadcn/cli. More capable, easier to use. Built for you and your coding agents. Here's everything new.
|
||||
|
||||
## shadcn/skills
|
||||
### shadcn/skills
|
||||
|
||||
shadcn/skills gives coding agents the context they need to work with your components and registry correctly. It covers both Radix and Base UI primitives, updated APIs, component patterns and registry workflows. The skill also knows how to use the shadcn CLI, when to invoke it and which flags to pass. Agents make fewer mistakes and produce code that actually matches your design system.
|
||||
|
||||
@@ -20,7 +20,7 @@ You can ask your agent things like:
|
||||
npx skills add shadcn/ui
|
||||
```
|
||||
|
||||
## Introducing --preset
|
||||
### Introducing --preset
|
||||
|
||||
A preset packs your entire design system config into a short code. Colors, theme, icon library, fonts, radius. One string, everything included.
|
||||
|
||||
@@ -32,7 +32,7 @@ npx shadcn@latest init --preset a1Dg5eFl
|
||||
|
||||
Use it to scaffold projects from custom config, share with your team or publish in your registry. Drop it in prompts so your agent knows where to start. Use it across Claude, Codex, v0, Replit. Take your preset with you.
|
||||
|
||||
## Switching presets
|
||||
### Switching presets
|
||||
|
||||
When you're working on a new app, it can take a few tries to find something you like so we've made switching presets really easy. Run init --preset in your app, and the cli will take care of reconfiguring everything including your components.
|
||||
|
||||
@@ -40,18 +40,18 @@ When you're working on a new app, it can take a few tries to find something you
|
||||
npx shadcn@latest init --preset ad3qkJ7
|
||||
```
|
||||
|
||||
## Skills + Presets
|
||||
### Skills + Presets
|
||||
|
||||
Your agent knows how to use presets. Scaffold a project, switch design systems, try something new.
|
||||
|
||||
- "create a new next app using --preset adtk27v"
|
||||
- "let's try --preset adtk27v"
|
||||
|
||||
## New shadcn/create
|
||||
### New shadcn/create
|
||||
|
||||
To help you build custom presets, we rebuilt [shadcn/create](/create). It now includes a library of UI components you can use to preview your presets. See how your colors, fonts and radius apply to real components before you start building.
|
||||
|
||||
## New --dry-run, --diff, and --view flags
|
||||
### New --dry-run, --diff, and --view flags
|
||||
|
||||
Inspect what a registry will add to your project before anything gets written. Review the payload yourself or pipe it to your coding agent for a second look.
|
||||
|
||||
@@ -61,7 +61,7 @@ npx shadcn@latest add button --diff
|
||||
npx shadcn@latest add button --view
|
||||
```
|
||||
|
||||
## Updating primitives
|
||||
### Updating primitives
|
||||
|
||||
You can use the `--diff` flag to check for registry updates. Or ask your agent: "check for updates from @shadcn and merge with my local changes".
|
||||
|
||||
@@ -69,7 +69,7 @@ You can use the `--diff` flag to check for registry updates. Or ask your agent:
|
||||
npx shadcn@latest add button --diff
|
||||
```
|
||||
|
||||
## shadcn init --template
|
||||
### shadcn init --template
|
||||
|
||||
`shadcn init` now scaffolds full project templates for Next.js, Vite, Laravel, React Router, Astro and TanStack Start. Dark mode included for Next.js and Vite.
|
||||
|
||||
@@ -91,7 +91,7 @@ Use `--monorepo` to set up a monorepo.
|
||||
npx shadcn@latest init -t next --monorepo
|
||||
```
|
||||
|
||||
## shadcn init --base
|
||||
### shadcn init --base
|
||||
|
||||
Pick your primitives. Use `--base` to start a project with Radix or Base UI.
|
||||
|
||||
@@ -99,7 +99,7 @@ Pick your primitives. Use `--base` to start a project with Radix or Base UI.
|
||||
npx shadcn@latest init --base radix
|
||||
```
|
||||
|
||||
## shadcn info
|
||||
### shadcn info
|
||||
|
||||
The `info` command now shows the full picture: framework, version, CSS vars, which components are installed, and where to find docs and examples for every component. Great for giving coding agents the context they need to work with your project.
|
||||
|
||||
@@ -107,7 +107,7 @@ The `info` command now shows the full picture: framework, version, CSS vars, whi
|
||||
npx shadcn@latest info
|
||||
```
|
||||
|
||||
## shadcn docs
|
||||
### shadcn docs
|
||||
|
||||
Get docs, code and examples for any UI component right from the CLI. Gives your coding agent the context to use your primitives correctly.
|
||||
|
||||
@@ -120,7 +120,7 @@ combobox
|
||||
- api https://base-ui.com/react/components/combobox
|
||||
```
|
||||
|
||||
## registry:base and registry:font
|
||||
### registry:base and registry:font
|
||||
|
||||
Registries can now distribute an entire design system as a single payload using `registry:base`. Components, dependencies, CSS vars, fonts, config. One install, everything set up.
|
||||
|
||||
|
||||
@@ -16,13 +16,13 @@ description: Install and configure shadcn/ui for TanStack Start.
|
||||
Run the following command to create a new TanStack Start project with shadcn/ui:
|
||||
|
||||
```bash
|
||||
npx shadcn@latest init -t start
|
||||
npx shadcn@latest init -t tanstack
|
||||
```
|
||||
|
||||
**For a monorepo project, use `--monorepo` flag:**
|
||||
|
||||
```bash
|
||||
npx shadcn@latest init -t start --monorepo
|
||||
npx shadcn@latest init -t tanstack --monorepo
|
||||
```
|
||||
|
||||
### Add Components
|
||||
|
||||
@@ -325,8 +325,7 @@ A `registry:font` item installs a Google Font. The `font` field is required and
|
||||
"provider": "google",
|
||||
"import": "Inter",
|
||||
"variable": "--font-sans",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/inter"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -344,8 +343,7 @@ A `registry:font` item installs a Google Font. The `font` field is required and
|
||||
"import": "JetBrains_Mono",
|
||||
"variable": "--font-mono",
|
||||
"weight": ["400", "500", "600", "700"],
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/jetbrains-mono"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -362,8 +360,7 @@ A `registry:font` item installs a Google Font. The `font` field is required and
|
||||
"provider": "google",
|
||||
"import": "Lora",
|
||||
"variable": "--font-serif",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/lora"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -383,8 +380,7 @@ Use the `selector` field to apply a font to specific CSS selectors instead of gl
|
||||
"import": "Playfair_Display",
|
||||
"variable": "--font-heading",
|
||||
"subsets": ["latin"],
|
||||
"selector": "h1, h2, h3, h4, h5, h6",
|
||||
"dependency": "@fontsource-variable/playfair-display"
|
||||
"selector": "h1, h2, h3, h4, h5, h6"
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -399,24 +395,24 @@ A `registry:base` item is a complete design system base. It defines the full set
|
||||
|
||||
The `config` field accepts the following properties (all optional):
|
||||
|
||||
| Property | Type | Description |
|
||||
| -------------------- | ---------------------------------------------------------------------------- | --------------------------------------------------------------- |
|
||||
| `style` | `string` | The style name for the base. |
|
||||
| `iconLibrary` | `string` | The icon library to use (e.g. `lucide`). |
|
||||
| `rsc` | `boolean` | Whether to enable React Server Components. Defaults to `false`. |
|
||||
| `tsx` | `boolean` | Whether to use TypeScript. Defaults to `true`. |
|
||||
| `rtl` | `boolean` | Whether to enable right-to-left support. Defaults to `false`. |
|
||||
| `menuColor` | `"default" \| "inverted" \| "default-translucent" \| "inverted-translucent"` | The menu color scheme. Defaults to `"default"`. |
|
||||
| `menuAccent` | `"subtle" \| "bold"` | The menu accent style. Defaults to `"subtle"`. |
|
||||
| `tailwind.baseColor` | `string` | The base color name (e.g. `neutral`, `slate`, `zinc`). |
|
||||
| `tailwind.css` | `string` | Path to the Tailwind CSS file. |
|
||||
| `tailwind.prefix` | `string` | A prefix to add to all Tailwind classes. |
|
||||
| `aliases.components` | `string` | Import alias for components. |
|
||||
| `aliases.utils` | `string` | Import alias for utilities. |
|
||||
| `aliases.ui` | `string` | Import alias for UI components. |
|
||||
| `aliases.lib` | `string` | Import alias for lib. |
|
||||
| `aliases.hooks` | `string` | Import alias for hooks. |
|
||||
| `registries` | `Record<string, string \| object>` | Custom registry URLs. Keys must start with `@`. |
|
||||
| Property | Type | Description |
|
||||
| -------------------- | ---------------------------------- | --------------------------------------------------------------- |
|
||||
| `style` | `string` | The style name for the base. |
|
||||
| `iconLibrary` | `string` | The icon library to use (e.g. `lucide`). |
|
||||
| `rsc` | `boolean` | Whether to enable React Server Components. Defaults to `false`. |
|
||||
| `tsx` | `boolean` | Whether to use TypeScript. Defaults to `true`. |
|
||||
| `rtl` | `boolean` | Whether to enable right-to-left support. Defaults to `false`. |
|
||||
| `menuColor` | `"default" \| "inverted"` | The menu color scheme. Defaults to `"default"`. |
|
||||
| `menuAccent` | `"subtle" \| "bold"` | The menu accent style. Defaults to `"subtle"`. |
|
||||
| `tailwind.baseColor` | `string` | The base color name (e.g. `neutral`, `slate`, `zinc`). |
|
||||
| `tailwind.css` | `string` | Path to the Tailwind CSS file. |
|
||||
| `tailwind.prefix` | `string` | A prefix to add to all Tailwind classes. |
|
||||
| `aliases.components` | `string` | Import alias for components. |
|
||||
| `aliases.utils` | `string` | Import alias for utilities. |
|
||||
| `aliases.ui` | `string` | Import alias for UI components. |
|
||||
| `aliases.lib` | `string` | Import alias for lib. |
|
||||
| `aliases.hooks` | `string` | Import alias for hooks. |
|
||||
| `registries` | `Record<string, string \| object>` | Custom registry URLs. Keys must start with `@`. |
|
||||
|
||||
```json title="custom-base.json" showLineNumbers
|
||||
{
|
||||
|
||||
@@ -339,34 +339,6 @@ Environment variables are added to the `.env.local` or `.env` file. Existing var
|
||||
|
||||
</Callout>
|
||||
|
||||
### font
|
||||
|
||||
The `font` property is required for `registry:font` items. It configures the font family, provider, import name, CSS variable, and the npm package to install for non-Next.js projects.
|
||||
|
||||
```json title="registry-item.json" showLineNumbers
|
||||
{
|
||||
"font": {
|
||||
"family": "'Inter Variable', sans-serif",
|
||||
"provider": "google",
|
||||
"import": "Inter",
|
||||
"variable": "--font-sans",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/inter"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
| Property | Type | Required | Description |
|
||||
| ------------ | ---------- | -------- | ----------------------------------------------------------------------------------------- |
|
||||
| `family` | `string` | Yes | The CSS font-family value. |
|
||||
| `provider` | `string` | Yes | The font provider. Currently only `google` is supported. |
|
||||
| `import` | `string` | Yes | The import name for the font from `next/font/google`. |
|
||||
| `variable` | `string` | Yes | The CSS variable name for the font (e.g., `--font-sans`, `--font-mono`). |
|
||||
| `weight` | `string[]` | No | Array of font weights to include. |
|
||||
| `subsets` | `string[]` | No | Array of font subsets to include. |
|
||||
| `selector` | `string` | No | CSS selector to apply the font to. Defaults to `html`. |
|
||||
| `dependency` | `string` | No | The npm package to install for non-Next.js projects (e.g., `@fontsource-variable/inter`). |
|
||||
|
||||
### docs
|
||||
|
||||
Use `docs` to show custom documentation or message when installing your registry item via the CLI.
|
||||
|
||||
@@ -5,7 +5,7 @@ import { Button as ButtonPrimitive } from "@base-ui/react/button"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
|
||||
@@ -110,7 +110,7 @@ function ComboboxContent({
|
||||
data-slot="combobox-content"
|
||||
data-chips={!!anchor}
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -52,7 +52,7 @@ function ContextMenuContent({
|
||||
<ContextMenuPrimitive.Popup
|
||||
data-slot="context-menu-content"
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"cn-menu-target z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -147,7 +147,7 @@ function ContextMenuSubContent({
|
||||
return (
|
||||
<ContextMenuContent
|
||||
data-slot="context-menu-sub-content"
|
||||
className="cn-menu-target cn-menu-translucent shadow-lg"
|
||||
className="shadow-lg"
|
||||
side="inline-end"
|
||||
{...props}
|
||||
/>
|
||||
|
||||
@@ -41,7 +41,7 @@ function DropdownMenuContent({
|
||||
<MenuPrimitive.Popup
|
||||
data-slot="dropdown-menu-content"
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -138,7 +138,7 @@ function DropdownMenuSubContent({
|
||||
<DropdownMenuContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
align={align}
|
||||
|
||||
@@ -26,7 +26,7 @@ function Menubar({ className, ...props }: MenubarPrimitive.Props) {
|
||||
<MenubarPrimitive
|
||||
data-slot="menubar"
|
||||
className={cn(
|
||||
"flex h-8 items-center gap-0.5 rounded-lg border p-[3px]",
|
||||
"flex h-8 items-center gap-0.5 rounded-lg border bg-background p-[3px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -80,7 +80,7 @@ function MenubarContent({
|
||||
alignOffset={alignOffset}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent min-w-36 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
|
||||
"cn-menu-target min-w-36 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -255,7 +255,7 @@ function MenubarSubContent({
|
||||
<DropdownMenuSubContent
|
||||
data-slot="menubar-sub-content"
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -83,7 +83,7 @@ function SelectContent({
|
||||
data-slot="select-content"
|
||||
data-align-trigger={alignItemWithTrigger}
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -5,7 +5,7 @@ import { Button as ButtonPrimitive } from "@base-ui/react/button"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
|
||||
@@ -110,7 +110,7 @@ function ComboboxContent({
|
||||
data-slot="combobox-content"
|
||||
data-chips={!!anchor}
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -52,7 +52,7 @@ function ContextMenuContent({
|
||||
<ContextMenuPrimitive.Popup
|
||||
data-slot="context-menu-content"
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"cn-menu-target z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -147,7 +147,7 @@ function ContextMenuSubContent({
|
||||
return (
|
||||
<ContextMenuContent
|
||||
data-slot="context-menu-sub-content"
|
||||
className="cn-menu-target cn-menu-translucent shadow-lg"
|
||||
className="shadow-lg"
|
||||
side="right"
|
||||
{...props}
|
||||
/>
|
||||
|
||||
@@ -41,7 +41,7 @@ function DropdownMenuContent({
|
||||
<MenuPrimitive.Popup
|
||||
data-slot="dropdown-menu-content"
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -138,7 +138,7 @@ function DropdownMenuSubContent({
|
||||
<DropdownMenuContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
align={align}
|
||||
|
||||
@@ -26,7 +26,7 @@ function Menubar({ className, ...props }: MenubarPrimitive.Props) {
|
||||
<MenubarPrimitive
|
||||
data-slot="menubar"
|
||||
className={cn(
|
||||
"flex h-8 items-center gap-0.5 rounded-lg border p-[3px]",
|
||||
"flex h-8 items-center gap-0.5 rounded-lg border bg-background p-[3px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -80,7 +80,7 @@ function MenubarContent({
|
||||
alignOffset={alignOffset}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent min-w-36 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
|
||||
"cn-menu-target min-w-36 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -255,7 +255,7 @@ function MenubarSubContent({
|
||||
<DropdownMenuSubContent
|
||||
data-slot="menubar-sub-content"
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -83,7 +83,7 @@ function SelectContent({
|
||||
data-slot="select-content"
|
||||
data-align-trigger={alignItemWithTrigger}
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { Slot } from "radix-ui"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
|
||||
@@ -112,7 +112,7 @@ function ComboboxContent({
|
||||
data-slot="combobox-content"
|
||||
data-chips={!!anchor}
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -68,7 +68,7 @@ function ContextMenuContent({
|
||||
<ContextMenuPrimitive.Content
|
||||
data-slot="context-menu-content"
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -132,7 +132,7 @@ function ContextMenuSubContent({
|
||||
<ContextMenuPrimitive.SubContent
|
||||
data-slot="context-menu-sub-content"
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"cn-menu-target z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -43,7 +43,7 @@ function DropdownMenuContent({
|
||||
sideOffset={sideOffset}
|
||||
align={align}
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -245,7 +245,7 @@ function DropdownMenuSubContent({
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"cn-menu-target z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -13,7 +13,7 @@ function Menubar({
|
||||
<MenubarPrimitive.Root
|
||||
data-slot="menubar"
|
||||
className={cn(
|
||||
"flex h-8 items-center gap-0.5 rounded-lg border p-[3px]",
|
||||
"flex h-8 items-center gap-0.5 rounded-lg border bg-background p-[3px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -78,7 +78,7 @@ function MenubarContent({
|
||||
alignOffset={alignOffset}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
|
||||
"cn-menu-target z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -255,7 +255,7 @@ function MenubarSubContent({
|
||||
<MenubarPrimitive.SubContent
|
||||
data-slot="menubar-sub-content"
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"cn-menu-target z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -69,7 +69,7 @@ function SelectContent({
|
||||
data-slot="select-content"
|
||||
data-align-trigger={position === "item-aligned"}
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
position === "popper" &&
|
||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 rtl:data-[side=left]:translate-x-1 rtl:data-[side=right]:-translate-x-1",
|
||||
className
|
||||
|
||||
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { Slot } from "radix-ui"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
|
||||
@@ -112,7 +112,7 @@ function ComboboxContent({
|
||||
data-slot="combobox-content"
|
||||
data-chips={!!anchor}
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -68,7 +68,7 @@ function ContextMenuContent({
|
||||
<ContextMenuPrimitive.Content
|
||||
data-slot="context-menu-content"
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -132,7 +132,7 @@ function ContextMenuSubContent({
|
||||
<ContextMenuPrimitive.SubContent
|
||||
data-slot="context-menu-sub-content"
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"cn-menu-target z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -43,7 +43,7 @@ function DropdownMenuContent({
|
||||
sideOffset={sideOffset}
|
||||
align={align}
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -245,7 +245,7 @@ function DropdownMenuSubContent({
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"cn-menu-target z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -13,7 +13,7 @@ function Menubar({
|
||||
<MenubarPrimitive.Root
|
||||
data-slot="menubar"
|
||||
className={cn(
|
||||
"flex h-8 items-center gap-0.5 rounded-lg border p-[3px]",
|
||||
"flex h-8 items-center gap-0.5 rounded-lg border bg-background p-[3px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -78,7 +78,7 @@ function MenubarContent({
|
||||
alignOffset={alignOffset}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
|
||||
"cn-menu-target z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -255,7 +255,7 @@ function MenubarSubContent({
|
||||
<MenubarPrimitive.SubContent
|
||||
data-slot="menubar-sub-content"
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"cn-menu-target z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -69,7 +69,7 @@ function SelectContent({
|
||||
data-slot="select-content"
|
||||
data-align-trigger={position === "item-aligned"}
|
||||
className={cn(
|
||||
"cn-menu-target cn-menu-translucent relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
"cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
position === "popper" &&
|
||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||
className
|
||||
|
||||
@@ -76,7 +76,7 @@
|
||||
"rehype-pretty-code": "^0.14.1",
|
||||
"rimraf": "^6.0.1",
|
||||
"server-only": "^0.0.1",
|
||||
"shadcn": "4.0.8",
|
||||
"shadcn": "4.0.2",
|
||||
"shiki": "^1.10.1",
|
||||
"sonner": "^2.0.0",
|
||||
"swr": "^2.3.6",
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
"muted-foreground": "oklch(0.556 0 0)",
|
||||
"accent": "oklch(0.97 0 0)",
|
||||
"accent-foreground": "oklch(0.205 0 0)",
|
||||
"destructive": "oklch(0.577 0.245 27.325)",
|
||||
"destructive": "oklch(0.58 0.22 27)",
|
||||
"border": "oklch(0.922 0 0)",
|
||||
"input": "oklch(0.922 0 0)",
|
||||
"ring": "oklch(0.708 0 0)",
|
||||
@@ -41,13 +41,13 @@
|
||||
"card-foreground": "oklch(0.985 0 0)",
|
||||
"popover": "oklch(0.205 0 0)",
|
||||
"popover-foreground": "oklch(0.985 0 0)",
|
||||
"primary": "oklch(0.922 0 0)",
|
||||
"primary": "oklch(0.87 0.00 0)",
|
||||
"primary-foreground": "oklch(0.205 0 0)",
|
||||
"secondary": "oklch(0.269 0 0)",
|
||||
"secondary-foreground": "oklch(0.985 0 0)",
|
||||
"muted": "oklch(0.269 0 0)",
|
||||
"muted-foreground": "oklch(0.708 0 0)",
|
||||
"accent": "oklch(0.269 0 0)",
|
||||
"accent": "oklch(0.371 0 0)",
|
||||
"accent-foreground": "oklch(0.985 0 0)",
|
||||
"destructive": "oklch(0.704 0.191 22.216)",
|
||||
"border": "oklch(1 0 0 / 10%)",
|
||||
@@ -84,7 +84,7 @@
|
||||
"muted-foreground": "oklch(0.556 0 0)",
|
||||
"accent": "oklch(0.97 0 0)",
|
||||
"accent-foreground": "oklch(0.205 0 0)",
|
||||
"destructive": "oklch(0.577 0.245 27.325)",
|
||||
"destructive": "oklch(0.58 0.22 27)",
|
||||
"border": "oklch(0.922 0 0)",
|
||||
"input": "oklch(0.922 0 0)",
|
||||
"ring": "oklch(0.708 0 0)",
|
||||
@@ -110,13 +110,13 @@
|
||||
"card-foreground": "oklch(0.985 0 0)",
|
||||
"popover": "oklch(0.205 0 0)",
|
||||
"popover-foreground": "oklch(0.985 0 0)",
|
||||
"primary": "oklch(0.922 0 0)",
|
||||
"primary": "oklch(0.87 0.00 0)",
|
||||
"primary-foreground": "oklch(0.205 0 0)",
|
||||
"secondary": "oklch(0.269 0 0)",
|
||||
"secondary-foreground": "oklch(0.985 0 0)",
|
||||
"muted": "oklch(0.269 0 0)",
|
||||
"muted-foreground": "oklch(0.708 0 0)",
|
||||
"accent": "oklch(0.269 0 0)",
|
||||
"accent": "oklch(0.371 0 0)",
|
||||
"accent-foreground": "oklch(0.985 0 0)",
|
||||
"destructive": "oklch(0.704 0.191 22.216)",
|
||||
"border": "oklch(1 0 0 / 10%)",
|
||||
@@ -153,7 +153,7 @@
|
||||
"muted-foreground": "oklch(0.556 0 0)",
|
||||
"accent": "oklch(0.97 0 0)",
|
||||
"accent-foreground": "oklch(0.205 0 0)",
|
||||
"destructive": "oklch(0.577 0.245 27.325)",
|
||||
"destructive": "oklch(0.58 0.22 27)",
|
||||
"border": "oklch(0.922 0 0)",
|
||||
"input": "oklch(0.922 0 0)",
|
||||
"ring": "oklch(0.708 0 0)",
|
||||
@@ -179,13 +179,13 @@
|
||||
"card-foreground": "oklch(0.985 0 0)",
|
||||
"popover": "oklch(0.205 0 0)",
|
||||
"popover-foreground": "oklch(0.985 0 0)",
|
||||
"primary": "oklch(0.922 0 0)",
|
||||
"primary": "oklch(0.87 0.00 0)",
|
||||
"primary-foreground": "oklch(0.205 0 0)",
|
||||
"secondary": "oklch(0.269 0 0)",
|
||||
"secondary-foreground": "oklch(0.985 0 0)",
|
||||
"muted": "oklch(0.269 0 0)",
|
||||
"muted-foreground": "oklch(0.708 0 0)",
|
||||
"accent": "oklch(0.269 0 0)",
|
||||
"accent": "oklch(0.371 0 0)",
|
||||
"accent-foreground": "oklch(0.985 0 0)",
|
||||
"destructive": "oklch(0.704 0.191 22.216)",
|
||||
"border": "oklch(1 0 0 / 10%)",
|
||||
@@ -207,5 +207,5 @@
|
||||
}
|
||||
},
|
||||
"inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n ",
|
||||
"cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: oklch(1 0 0);\n --foreground: oklch(0.145 0 0);\n --card: oklch(1 0 0);\n --card-foreground: oklch(0.145 0 0);\n --popover: oklch(1 0 0);\n --popover-foreground: oklch(0.145 0 0);\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --secondary: oklch(0.97 0 0);\n --secondary-foreground: oklch(0.205 0 0);\n --muted: oklch(0.97 0 0);\n --muted-foreground: oklch(0.556 0 0);\n --accent: oklch(0.97 0 0);\n --accent-foreground: oklch(0.205 0 0);\n --destructive: oklch(0.577 0.245 27.325);\n --border: oklch(0.922 0 0);\n --input: oklch(0.922 0 0);\n --ring: oklch(0.708 0 0);\n --chart-1: oklch(0.809 0.105 251.813);\n --chart-2: oklch(0.623 0.214 259.815);\n --chart-3: oklch(0.546 0.245 262.881);\n --chart-4: oklch(0.488 0.243 264.376);\n --chart-5: oklch(0.424 0.199 265.638);\n --radius: 0.625rem;\n }\n\n .dark {\n --background: oklch(0.145 0 0);\n --foreground: oklch(0.985 0 0);\n --card: oklch(0.205 0 0);\n --card-foreground: oklch(0.985 0 0);\n --popover: oklch(0.205 0 0);\n --popover-foreground: oklch(0.985 0 0);\n --primary: oklch(0.922 0 0);\n --primary-foreground: oklch(0.205 0 0);\n --secondary: oklch(0.269 0 0);\n --secondary-foreground: oklch(0.985 0 0);\n --muted: oklch(0.269 0 0);\n --muted-foreground: oklch(0.708 0 0);\n --accent: oklch(0.269 0 0);\n --accent-foreground: oklch(0.985 0 0);\n --destructive: oklch(0.704 0.191 22.216);\n --border: oklch(1 0 0 / 10%);\n --input: oklch(1 0 0 / 15%);\n --ring: oklch(0.556 0 0);\n --chart-1: oklch(0.809 0.105 251.813);\n --chart-2: oklch(0.623 0.214 259.815);\n --chart-3: oklch(0.546 0.245 262.881);\n --chart-4: oklch(0.488 0.243 264.376);\n --chart-5: oklch(0.424 0.199 265.638);\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}"
|
||||
"cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: oklch(1 0 0);\n --foreground: oklch(0.145 0 0);\n --card: oklch(1 0 0);\n --card-foreground: oklch(0.145 0 0);\n --popover: oklch(1 0 0);\n --popover-foreground: oklch(0.145 0 0);\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --secondary: oklch(0.97 0 0);\n --secondary-foreground: oklch(0.205 0 0);\n --muted: oklch(0.97 0 0);\n --muted-foreground: oklch(0.556 0 0);\n --accent: oklch(0.97 0 0);\n --accent-foreground: oklch(0.205 0 0);\n --destructive: oklch(0.58 0.22 27);\n --border: oklch(0.922 0 0);\n --input: oklch(0.922 0 0);\n --ring: oklch(0.708 0 0);\n --chart-1: oklch(0.809 0.105 251.813);\n --chart-2: oklch(0.623 0.214 259.815);\n --chart-3: oklch(0.546 0.245 262.881);\n --chart-4: oklch(0.488 0.243 264.376);\n --chart-5: oklch(0.424 0.199 265.638);\n --radius: 0.625rem;\n }\n\n .dark {\n --background: oklch(0.145 0 0);\n --foreground: oklch(0.985 0 0);\n --card: oklch(0.205 0 0);\n --card-foreground: oklch(0.985 0 0);\n --popover: oklch(0.205 0 0);\n --popover-foreground: oklch(0.985 0 0);\n --primary: oklch(0.87 0.00 0);\n --primary-foreground: oklch(0.205 0 0);\n --secondary: oklch(0.269 0 0);\n --secondary-foreground: oklch(0.985 0 0);\n --muted: oklch(0.269 0 0);\n --muted-foreground: oklch(0.708 0 0);\n --accent: oklch(0.371 0 0);\n --accent-foreground: oklch(0.985 0 0);\n --destructive: oklch(0.704 0.191 22.216);\n --border: oklch(1 0 0 / 10%);\n --input: oklch(1 0 0 / 15%);\n --ring: oklch(0.556 0 0);\n --chart-1: oklch(0.809 0.105 251.813);\n --chart-2: oklch(0.623 0.214 259.815);\n --chart-3: oklch(0.546 0.245 262.881);\n --chart-4: oklch(0.488 0.243 264.376);\n --chart-5: oklch(0.424 0.199 265.638);\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}"
|
||||
}
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
"@basecn": "https://basecn.dev/r/{name}.json",
|
||||
"@better-upload": "https://better-upload.com/r/{name}.json",
|
||||
"@billingsdk": "https://billingsdk.com/r/{name}.json",
|
||||
"@blocks-so": "https://blocks.so/r/{name}.json",
|
||||
"@blocks": "https://blocks.so/r/{name}.json",
|
||||
"@bucharitesh": "https://bucharitesh.in/r/{name}.json",
|
||||
"@bundui": "https://bundui.io/r/{name}.json",
|
||||
"@cardcn": "https://cardcn.dev/r/{name}.json",
|
||||
@@ -41,7 +41,7 @@
|
||||
"@gaia": "https://ui.heygaia.io/r/{name}.json",
|
||||
"@glass-ui": "https://glass-ui.crenspire.com/r/{name}.json",
|
||||
"@heseui": "https://www.heseui.com/r/{name}.json",
|
||||
"@shadcnhooks": "https://shadcn-hooks.com/r/{name}.json",
|
||||
"@hooks": "https://shadcn-hooks.com/r/{name}.json",
|
||||
"@intentui": "https://intentui.com/r/{name}",
|
||||
"@kibo-ui": "https://www.kibo-ui.com/r/{name}.json",
|
||||
"@kanpeki": "https://kanpeki.vercel.app/r/{name}.json",
|
||||
|
||||
@@ -43,8 +43,8 @@
|
||||
},
|
||||
{
|
||||
"name": "@agents-ui",
|
||||
"homepage": "https://livekit.com/ui",
|
||||
"url": "https://livekit.com/ui/r/{name}.json",
|
||||
"homepage": "https://livekit.io/ui",
|
||||
"url": "https://livekit.io/ui/r/{name}.json",
|
||||
"description": "This is a shadcn/ui component registry that distributes copy-paste React components for building LiveKit AI Agent interfaces."
|
||||
},
|
||||
{
|
||||
@@ -114,7 +114,7 @@
|
||||
"description": "BillingSDK is an open-source React and Next.js component library for SaaS billing and payments. It offers ready-to-use, customizable components for subscriptions, invoices, usage-based pricing and billing - fully compatible with Dodo Payments and Stripe."
|
||||
},
|
||||
{
|
||||
"name": "@blocks-so",
|
||||
"name": "@blocks",
|
||||
"homepage": "https://blocks.so",
|
||||
"url": "https://blocks.so/r/{name}.json",
|
||||
"description": "A set of clean, modern application building blocks for you in your applications. Free and Open Source"
|
||||
@@ -252,7 +252,7 @@
|
||||
"description": "Ready-to-use foundation components/blocks built on top of shadcn/ui."
|
||||
},
|
||||
{
|
||||
"name": "@shadcnhooks",
|
||||
"name": "@hooks",
|
||||
"homepage": "https://shadcn-hooks.com",
|
||||
"url": "https://shadcn-hooks.com/r/{name}.json",
|
||||
"description": "A comprehensive React Hooks Collection built with Shadcn."
|
||||
@@ -269,12 +269,6 @@
|
||||
"url": "https://intentui.com/r/{name}",
|
||||
"description": "Accessible React component library to copy, customize, and own your UI."
|
||||
},
|
||||
{
|
||||
"name": "@jalco",
|
||||
"homepage": "https://ui.justinlevine.me",
|
||||
"url": "https://ui.justinlevine.me/r/{name}.json",
|
||||
"description": "A curated collection of GitHub-integrated, documentation, and developer-facing components. Self-contained, zero-dependency, and production-ready."
|
||||
},
|
||||
{
|
||||
"name": "@kibo-ui",
|
||||
"homepage": "https://www.kibo-ui.com/",
|
||||
@@ -287,12 +281,6 @@
|
||||
"url": "https://kanpeki.vercel.app/r/{name}.json",
|
||||
"description": "A set of perfect-designed components built on top of React Aria and Motion."
|
||||
},
|
||||
{
|
||||
"name": "@kapwa",
|
||||
"homepage": "https://kapwa-two.vercel.app",
|
||||
"url": "https://kapwa-two.vercel.app/r/{name}.json",
|
||||
"description": "Cleanly designed components purposely built for open-source government portals."
|
||||
},
|
||||
{
|
||||
"name": "@kokonutui",
|
||||
"homepage": "https://kokonutui.com",
|
||||
@@ -389,12 +377,6 @@
|
||||
"url": "https://www.neobrutalism.dev/r/{name}.json",
|
||||
"description": "A collection of neobrutalism-styled components based on shadcn/ui"
|
||||
},
|
||||
{
|
||||
"name": "@nessra-ui",
|
||||
"homepage": "https://nessra-ui.vercel.app",
|
||||
"url": "https://nessra-ui.vercel.app/r/{name}.json",
|
||||
"description": "Beautiful, accessible components built with Tailwind CSS v4 and Radix UI. Includes auth blocks, data tables, and TanStack Form integration."
|
||||
},
|
||||
{
|
||||
"name": "@nexus-elements",
|
||||
"homepage": "https://elements.nexus.availproject.org/docs/view-components",
|
||||
@@ -425,12 +407,6 @@
|
||||
"url": "https://ui.pacekit.dev/r/{name}.json",
|
||||
"description": "Carefully built UI blocks for real apps and dashboards, designed to integrate smoothly from early ideas to production releases."
|
||||
},
|
||||
{
|
||||
"name": "@pacekit-gsap",
|
||||
"homepage": "https://gsap.pacekit.dev",
|
||||
"url": "https://gsap.pacekit.dev/r/{name}.json",
|
||||
"description": "Animated GSAP components crafted for smooth interaction and rich detail."
|
||||
},
|
||||
{
|
||||
"name": "@pastecn",
|
||||
"homepage": "https://pastecn.com",
|
||||
@@ -551,18 +527,6 @@
|
||||
"url": "https://shadcndesign-free.vercel.app/r/{name}.json",
|
||||
"description": "A growing collection of high-quality blocks and themes for shadcn/ui."
|
||||
},
|
||||
{
|
||||
"name": "@shadcnmaps",
|
||||
"homepage": "https://shadcnmaps.com",
|
||||
"url": "https://shadcnmaps.com/r/{name}.json",
|
||||
"description": "Beautiful map components powered by pure SVG."
|
||||
},
|
||||
{
|
||||
"name": "@shadcnstore",
|
||||
"homepage": "https://www.shadcnstore.com",
|
||||
"url": "https://shadcnstore.com/r/{name}.json",
|
||||
"description": "A growing collection of shadcn/ui components, blocks, and templates for building modern web apps."
|
||||
},
|
||||
{
|
||||
"name": "@shadcn-map",
|
||||
"homepage": "https://shadcn-map.vercel.app",
|
||||
@@ -575,12 +539,6 @@
|
||||
"url": "https://shadcnstudio.com/r/{name}.json",
|
||||
"description": "An open-source set of shadcn/ui components, blocks, and templates with a powerful theme generator."
|
||||
},
|
||||
{
|
||||
"name": "@waves-cn",
|
||||
"homepage": "https://waves-cn.vercel.app",
|
||||
"url": "https://waves-cn.vercel.app/r/{name}.json",
|
||||
"description": "A collection of wave players and waveform components built with wavesurfer.js and shadcn/ui."
|
||||
},
|
||||
{
|
||||
"name": "@shadcn-editor",
|
||||
"homepage": "https://shadcn-editor.vercel.app",
|
||||
@@ -887,28 +845,10 @@
|
||||
"url": "https://componentry.fun/r/{name}.json",
|
||||
"description": "Beautiful, interactive React + Tailwind components for modern product UIs."
|
||||
},
|
||||
{
|
||||
"name": "@paletteui",
|
||||
"homepage": "https://paletteui.xyz",
|
||||
"url": "https://paletteui.xyz/r/{name}.json",
|
||||
"description": "Curated OKLCH color themes for shadcn/ui + visual theme editor with CSS, Tailwind v4, and Figma export."
|
||||
},
|
||||
{
|
||||
"name": "@fluid",
|
||||
"homepage": "https://www.fluidfunctionalism.com",
|
||||
"url": "https://www.fluidfunctionalism.com/r/{name}.json",
|
||||
"description": "Fluid components used exclusively in service of functional clarity. Proximity hover, spring animations, font-weight transitions, and animated focus rings."
|
||||
},
|
||||
{
|
||||
"name": "@gammaui",
|
||||
"homepage": "https://www.gammaui.com",
|
||||
"url": "https://www.gammaui.com/r/{name}.json",
|
||||
"description": "Beautifully designed landing page components built with React & Tailwind CSS & Motion."
|
||||
},
|
||||
{
|
||||
"name": "@flx",
|
||||
"homepage": "https://ui.flexnative.com",
|
||||
"url": "https://ui.flexnative.com/r/{name}.json",
|
||||
"description": "A collection of customizable UI blocks with interactive live previews"
|
||||
}
|
||||
]
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-lyra/ui/button.tsx",
|
||||
"content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nconst buttonVariants = cva(\n \"group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n outline:\n \"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n ghost:\n \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n destructive:\n \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default:\n \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n xs: \"h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n icon: \"size-8\",\n \"icon-xs\": \"size-6 rounded-none [&_svg:not([class*='size-'])]:size-3\",\n \"icon-sm\": \"size-7 rounded-none\",\n \"icon-lg\": \"size-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n return (\n <ButtonPrimitive\n data-slot=\"button\"\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n />\n )\n}\n\nexport { Button, buttonVariants }\n",
|
||||
"content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nconst buttonVariants = cva(\n \"group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n outline:\n \"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n ghost:\n \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n destructive:\n \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default:\n \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n xs: \"h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n icon: \"size-8\",\n \"icon-xs\": \"size-6 rounded-none [&_svg:not([class*='size-'])]:size-3\",\n \"icon-sm\": \"size-7 rounded-none\",\n \"icon-lg\": \"size-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n return (\n <ButtonPrimitive\n data-slot=\"button\"\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n />\n )\n}\n\nexport { Button, buttonVariants }\n",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
],
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-sans",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/dm-sans"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-sans",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/figtree"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-mono",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/geist-mono"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-sans",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/geist"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-sans",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/inter"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-mono",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/jetbrains-mono"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-serif",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/lora"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-serif",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/merriweather"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -7,7 +7,6 @@
|
||||
"family": "'Noto Sans Variable', sans-serif",
|
||||
"provider": "google",
|
||||
"import": "Noto_Sans",
|
||||
"variable": "--font-sans",
|
||||
"dependency": "@fontsource-variable/noto-sans"
|
||||
"variable": "--font-sans"
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-serif",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/noto-serif"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -7,7 +7,6 @@
|
||||
"family": "'Nunito Sans Variable', sans-serif",
|
||||
"provider": "google",
|
||||
"import": "Nunito_Sans",
|
||||
"variable": "--font-sans",
|
||||
"dependency": "@fontsource-variable/nunito-sans"
|
||||
"variable": "--font-sans"
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-sans",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/outfit"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-serif",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/playfair-display"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-sans",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/public-sans"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-sans",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/raleway"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-serif",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/roboto-slab"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-sans",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/roboto"
|
||||
]
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -2838,8 +2838,7 @@
|
||||
"provider": "google",
|
||||
"import": "Geist",
|
||||
"variable": "--font-sans",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/geist"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -2851,8 +2850,7 @@
|
||||
"provider": "google",
|
||||
"import": "Inter",
|
||||
"variable": "--font-sans",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/inter"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -2863,8 +2861,7 @@
|
||||
"family": "'Noto Sans Variable', sans-serif",
|
||||
"provider": "google",
|
||||
"import": "Noto_Sans",
|
||||
"variable": "--font-sans",
|
||||
"dependency": "@fontsource-variable/noto-sans"
|
||||
"variable": "--font-sans"
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -2875,8 +2872,7 @@
|
||||
"family": "'Nunito Sans Variable', sans-serif",
|
||||
"provider": "google",
|
||||
"import": "Nunito_Sans",
|
||||
"variable": "--font-sans",
|
||||
"dependency": "@fontsource-variable/nunito-sans"
|
||||
"variable": "--font-sans"
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -2888,8 +2884,7 @@
|
||||
"provider": "google",
|
||||
"import": "Figtree",
|
||||
"variable": "--font-sans",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/figtree"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -2901,8 +2896,7 @@
|
||||
"provider": "google",
|
||||
"import": "Roboto",
|
||||
"variable": "--font-sans",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/roboto"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -2914,8 +2908,7 @@
|
||||
"provider": "google",
|
||||
"import": "Raleway",
|
||||
"variable": "--font-sans",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/raleway"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -2927,8 +2920,7 @@
|
||||
"provider": "google",
|
||||
"import": "DM_Sans",
|
||||
"variable": "--font-sans",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/dm-sans"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -2940,8 +2932,7 @@
|
||||
"provider": "google",
|
||||
"import": "Public_Sans",
|
||||
"variable": "--font-sans",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/public-sans"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -2953,8 +2944,7 @@
|
||||
"provider": "google",
|
||||
"import": "Outfit",
|
||||
"variable": "--font-sans",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/outfit"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -2966,8 +2956,7 @@
|
||||
"provider": "google",
|
||||
"import": "JetBrains_Mono",
|
||||
"variable": "--font-mono",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/jetbrains-mono"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -2979,8 +2968,7 @@
|
||||
"provider": "google",
|
||||
"import": "Geist_Mono",
|
||||
"variable": "--font-mono",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/geist-mono"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -2992,8 +2980,7 @@
|
||||
"provider": "google",
|
||||
"import": "Noto_Serif",
|
||||
"variable": "--font-serif",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/noto-serif"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -3005,8 +2992,7 @@
|
||||
"provider": "google",
|
||||
"import": "Roboto_Slab",
|
||||
"variable": "--font-serif",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/roboto-slab"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -3018,8 +3004,7 @@
|
||||
"provider": "google",
|
||||
"import": "Merriweather",
|
||||
"variable": "--font-serif",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/merriweather"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -3031,8 +3016,7 @@
|
||||
"provider": "google",
|
||||
"import": "Lora",
|
||||
"variable": "--font-serif",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/lora"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -3044,8 +3028,7 @@
|
||||
"provider": "google",
|
||||
"import": "Playfair_Display",
|
||||
"variable": "--font-serif",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/playfair-display"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -4,7 +4,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-maia/ui/button.tsx",
|
||||
"content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nconst buttonVariants = cva(\n \"group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n outline:\n \"border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n ghost:\n \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n destructive:\n \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default:\n \"h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5\",\n xs: \"h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n lg: \"h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n icon: \"size-9\",\n \"icon-xs\": \"size-6 [&_svg:not([class*='size-'])]:size-3\",\n \"icon-sm\": \"size-8\",\n \"icon-lg\": \"size-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n return (\n <ButtonPrimitive\n data-slot=\"button\"\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n />\n )\n}\n\nexport { Button, buttonVariants }\n",
|
||||
"content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nconst buttonVariants = cva(\n \"group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n outline:\n \"border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n ghost:\n \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n destructive:\n \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default:\n \"h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5\",\n xs: \"h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n lg: \"h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n icon: \"size-9\",\n \"icon-xs\": \"size-6 [&_svg:not([class*='size-'])]:size-3\",\n \"icon-sm\": \"size-8\",\n \"icon-lg\": \"size-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n return (\n <ButtonPrimitive\n data-slot=\"button\"\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n />\n )\n}\n\nexport { Button, buttonVariants }\n",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
],
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-sans",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/dm-sans"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-sans",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/figtree"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-mono",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/geist-mono"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-sans",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/geist"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-sans",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/inter"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-mono",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/jetbrains-mono"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-serif",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/lora"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-serif",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/merriweather"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -7,7 +7,6 @@
|
||||
"family": "'Noto Sans Variable', sans-serif",
|
||||
"provider": "google",
|
||||
"import": "Noto_Sans",
|
||||
"variable": "--font-sans",
|
||||
"dependency": "@fontsource-variable/noto-sans"
|
||||
"variable": "--font-sans"
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-serif",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/noto-serif"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -7,7 +7,6 @@
|
||||
"family": "'Nunito Sans Variable', sans-serif",
|
||||
"provider": "google",
|
||||
"import": "Nunito_Sans",
|
||||
"variable": "--font-sans",
|
||||
"dependency": "@fontsource-variable/nunito-sans"
|
||||
"variable": "--font-sans"
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-sans",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/outfit"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-serif",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/playfair-display"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-sans",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/public-sans"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-sans",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/raleway"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-serif",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/roboto-slab"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-sans",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/roboto"
|
||||
]
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -2838,8 +2838,7 @@
|
||||
"provider": "google",
|
||||
"import": "Geist",
|
||||
"variable": "--font-sans",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/geist"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -2851,8 +2850,7 @@
|
||||
"provider": "google",
|
||||
"import": "Inter",
|
||||
"variable": "--font-sans",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/inter"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -2863,8 +2861,7 @@
|
||||
"family": "'Noto Sans Variable', sans-serif",
|
||||
"provider": "google",
|
||||
"import": "Noto_Sans",
|
||||
"variable": "--font-sans",
|
||||
"dependency": "@fontsource-variable/noto-sans"
|
||||
"variable": "--font-sans"
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -2875,8 +2872,7 @@
|
||||
"family": "'Nunito Sans Variable', sans-serif",
|
||||
"provider": "google",
|
||||
"import": "Nunito_Sans",
|
||||
"variable": "--font-sans",
|
||||
"dependency": "@fontsource-variable/nunito-sans"
|
||||
"variable": "--font-sans"
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -2888,8 +2884,7 @@
|
||||
"provider": "google",
|
||||
"import": "Figtree",
|
||||
"variable": "--font-sans",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/figtree"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -2901,8 +2896,7 @@
|
||||
"provider": "google",
|
||||
"import": "Roboto",
|
||||
"variable": "--font-sans",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/roboto"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -2914,8 +2908,7 @@
|
||||
"provider": "google",
|
||||
"import": "Raleway",
|
||||
"variable": "--font-sans",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/raleway"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -2927,8 +2920,7 @@
|
||||
"provider": "google",
|
||||
"import": "DM_Sans",
|
||||
"variable": "--font-sans",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/dm-sans"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -2940,8 +2932,7 @@
|
||||
"provider": "google",
|
||||
"import": "Public_Sans",
|
||||
"variable": "--font-sans",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/public-sans"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -2953,8 +2944,7 @@
|
||||
"provider": "google",
|
||||
"import": "Outfit",
|
||||
"variable": "--font-sans",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/outfit"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -2966,8 +2956,7 @@
|
||||
"provider": "google",
|
||||
"import": "JetBrains_Mono",
|
||||
"variable": "--font-mono",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/jetbrains-mono"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -2979,8 +2968,7 @@
|
||||
"provider": "google",
|
||||
"import": "Geist_Mono",
|
||||
"variable": "--font-mono",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/geist-mono"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -2992,8 +2980,7 @@
|
||||
"provider": "google",
|
||||
"import": "Noto_Serif",
|
||||
"variable": "--font-serif",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/noto-serif"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -3005,8 +2992,7 @@
|
||||
"provider": "google",
|
||||
"import": "Roboto_Slab",
|
||||
"variable": "--font-serif",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/roboto-slab"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -3018,8 +3004,7 @@
|
||||
"provider": "google",
|
||||
"import": "Merriweather",
|
||||
"variable": "--font-serif",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/merriweather"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -3031,8 +3016,7 @@
|
||||
"provider": "google",
|
||||
"import": "Lora",
|
||||
"variable": "--font-serif",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/lora"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -3044,8 +3028,7 @@
|
||||
"provider": "google",
|
||||
"import": "Playfair_Display",
|
||||
"variable": "--font-serif",
|
||||
"subsets": ["latin"],
|
||||
"dependency": "@fontsource-variable/playfair-display"
|
||||
"subsets": ["latin"]
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -4,7 +4,7 @@
|
||||
"files": [
|
||||
{
|
||||
"path": "registry/base-mira/ui/button.tsx",
|
||||
"content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nconst buttonVariants = cva(\n \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n outline:\n \"border-border hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-input/30\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n ghost:\n \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n destructive:\n \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default:\n \"h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n xs: \"h-5 gap-1 rounded-sm px-2 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-2.5\",\n sm: \"h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n lg: \"h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4\",\n icon: \"size-7 [&_svg:not([class*='size-'])]:size-3.5\",\n \"icon-xs\": \"size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5\",\n \"icon-sm\": \"size-6 [&_svg:not([class*='size-'])]:size-3\",\n \"icon-lg\": \"size-8 [&_svg:not([class*='size-'])]:size-4\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n return (\n <ButtonPrimitive\n data-slot=\"button\"\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n />\n )\n}\n\nexport { Button, buttonVariants }\n",
|
||||
"content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nconst buttonVariants = cva(\n \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n outline:\n \"border-border hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-input/30\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n ghost:\n \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n destructive:\n \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default:\n \"h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n xs: \"h-5 gap-1 rounded-sm px-2 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-2.5\",\n sm: \"h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n lg: \"h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4\",\n icon: \"size-7 [&_svg:not([class*='size-'])]:size-3.5\",\n \"icon-xs\": \"size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5\",\n \"icon-sm\": \"size-6 [&_svg:not([class*='size-'])]:size-3\",\n \"icon-lg\": \"size-8 [&_svg:not([class*='size-'])]:size-4\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n return (\n <ButtonPrimitive\n data-slot=\"button\"\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n />\n )\n}\n\nexport { Button, buttonVariants }\n",
|
||||
"type": "registry:ui"
|
||||
}
|
||||
],
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-sans",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/dm-sans"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-sans",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/figtree"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-mono",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/geist-mono"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@
|
||||
"variable": "--font-sans",
|
||||
"subsets": [
|
||||
"latin"
|
||||
],
|
||||
"dependency": "@fontsource-variable/geist"
|
||||
]
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user