Skip to content

[pull] main from shadcn-ui:main #507

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Merged
pull merged 1 commit into from
Aug 18, 2026
Merged

[pull] main from shadcn-ui:main #507

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions apps/v4/registry/bases/aria/examples/questionnaire-example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,17 +80,72 @@ const taskItems = [
},
] as const

const planItems = [
{
choices: [
{ value: "plus" },
{ value: "pro" },
{ value: "enterprise", disabled: true },
],
name: "plan",
required: true,
},
] as const

export default function QuestionnaireExample() {
return (
<ExampleWrapper>
<QuestionnaireStandalone />
<QuestionnaireCard />
<QuestionnaireDialog />
<QuestionnaireNoDescription />
<QuestionnaireDisabled />
</ExampleWrapper>
)
}

function QuestionnaireDisabled() {
return (
<Example title="Disabled" containerClassName="md:col-span-2">
<Questionnaire
className="mx-auto max-w-lg"
defaultItem="plan"
items={planItems}
onSubmit={handleSubmit}
>
<QuestionnaireItem name="plan" required>
<QuestionnaireTitle>Choose a plan</QuestionnaireTitle>
<QuestionnaireDescription>
Enterprise is not available on your account.
</QuestionnaireDescription>
<QuestionnaireChoices>
<QuestionnaireChoice value="plus">
<span className="font-medium">Plus</span>
<QuestionnaireChoiceDescription>
For individuals and small teams
</QuestionnaireChoiceDescription>
</QuestionnaireChoice>
<QuestionnaireChoice value="pro">
<span className="font-medium">Pro</span>
<QuestionnaireChoiceDescription>
For growing businesses
</QuestionnaireChoiceDescription>
</QuestionnaireChoice>
<QuestionnaireChoice value="enterprise" disabled>
<span className="font-medium">Enterprise</span>
<QuestionnaireChoiceDescription>
For large teams and enterprises
</QuestionnaireChoiceDescription>
</QuestionnaireChoice>
</QuestionnaireChoices>
<QuestionnaireError />
</QuestionnaireItem>
<QuestionnaireNavigation />
</Questionnaire>
</Example>
)
}

function QuestionnaireNoDescription() {
return (
<Example title="No description" containerClassName="md:col-span-2">
Expand Down
55 changes: 55 additions & 0 deletions apps/v4/registry/bases/base/examples/questionnaire-example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,17 +81,72 @@ const taskItems = [
},
] as const

const planItems = [
{
choices: [
{ value: "plus" },
{ value: "pro" },
{ value: "enterprise", disabled: true },
],
name: "plan",
required: true,
},
] as const

export default function QuestionnaireExample() {
return (
<ExampleWrapper>
<QuestionnaireStandalone />
<QuestionnaireCard />
<QuestionnaireDialog />
<QuestionnaireNoDescription />
<QuestionnaireDisabled />
</ExampleWrapper>
)
}

function QuestionnaireDisabled() {
return (
<Example title="Disabled" containerClassName="md:col-span-2">
<Questionnaire
className="mx-auto max-w-lg"
defaultItem="plan"
items={planItems}
onSubmit={handleSubmit}
>
<QuestionnaireItem name="plan" required>
<QuestionnaireTitle>Choose a plan</QuestionnaireTitle>
<QuestionnaireDescription>
Enterprise is not available on your account.
</QuestionnaireDescription>
<QuestionnaireChoices>
<QuestionnaireChoice value="plus">
<span className="font-medium">Plus</span>
<QuestionnaireChoiceDescription>
For individuals and small teams
</QuestionnaireChoiceDescription>
</QuestionnaireChoice>
<QuestionnaireChoice value="pro">
<span className="font-medium">Pro</span>
<QuestionnaireChoiceDescription>
For growing businesses
</QuestionnaireChoiceDescription>
</QuestionnaireChoice>
<QuestionnaireChoice value="enterprise" disabled>
<span className="font-medium">Enterprise</span>
<QuestionnaireChoiceDescription>
For large teams and enterprises
</QuestionnaireChoiceDescription>
</QuestionnaireChoice>
</QuestionnaireChoices>
<QuestionnaireError />
</QuestionnaireItem>
<QuestionnaireNavigation />
</Questionnaire>
</Example>
)
}

function QuestionnaireNoDescription() {
return (
<Example title="No description" containerClassName="md:col-span-2">
Expand Down
55 changes: 55 additions & 0 deletions apps/v4/registry/bases/radix/examples/questionnaire-example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,17 +81,72 @@ const taskItems = [
},
] as const

const planItems = [
{
choices: [
{ value: "plus" },
{ value: "pro" },
{ value: "enterprise", disabled: true },
],
name: "plan",
required: true,
},
] as const

export default function QuestionnaireExample() {
return (
<ExampleWrapper>
<QuestionnaireStandalone />
<QuestionnaireCard />
<QuestionnaireDialog />
<QuestionnaireNoDescription />
<QuestionnaireDisabled />
</ExampleWrapper>
)
}

function QuestionnaireDisabled() {
return (
<Example title="Disabled" containerClassName="md:col-span-2">
<Questionnaire
className="mx-auto max-w-lg"
defaultItem="plan"
items={planItems}
onSubmit={handleSubmit}
>
<QuestionnaireItem name="plan" required>
<QuestionnaireTitle>Choose a plan</QuestionnaireTitle>
<QuestionnaireDescription>
Enterprise is not available on your account.
</QuestionnaireDescription>
<QuestionnaireChoices>
<QuestionnaireChoice value="plus">
<span className="font-medium">Plus</span>
<QuestionnaireChoiceDescription>
For individuals and small teams
</QuestionnaireChoiceDescription>
</QuestionnaireChoice>
<QuestionnaireChoice value="pro">
<span className="font-medium">Pro</span>
<QuestionnaireChoiceDescription>
For growing businesses
</QuestionnaireChoiceDescription>
</QuestionnaireChoice>
<QuestionnaireChoice value="enterprise" disabled>
<span className="font-medium">Enterprise</span>
<QuestionnaireChoiceDescription>
For large teams and enterprises
</QuestionnaireChoiceDescription>
</QuestionnaireChoice>
</QuestionnaireChoices>
<QuestionnaireError />
</QuestionnaireItem>
<QuestionnaireNavigation />
</Questionnaire>
</Example>
)
}

function QuestionnaireNoDescription() {
return (
<Example title="No description" containerClassName="md:col-span-2">
Expand Down
10 changes: 5 additions & 5 deletions apps/v4/registry/styles/style-luma.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@

/* MARK: Switch */
.cn-switch {
@apply data-checked:bg-primary data-unchecked:bg-input/90 data-checked:border-primary border-2 data-unchecked:border-transparent focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 shrink-0 rounded-full focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-5 data-[size=default]:w-11 data-[size=sm]:h-4 data-[size=sm]:w-7;
@apply data-checked:bg-primary data-unchecked:bg-input/90 data-checked:border-primary border-2 data-unchecked:border-transparent focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 shrink-0 rounded-full focus-visible:ring-3 aria-invalid:ring-3 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:data-unchecked:border-transparent group-has-[:focus-visible]/field-label:data-checked:border-primary data-[size=default]:h-5 data-[size=default]:w-11 data-[size=sm]:h-4 data-[size=sm]:w-7;
}

.cn-switch-aria {
Expand All @@ -39,7 +39,7 @@
}

.cn-radio-group-item {
@apply bg-input/90 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary border-transparent aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex size-4 rounded-full border focus-visible:ring-3 aria-invalid:ring-3;
@apply bg-input/90 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary border-transparent aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex size-4 rounded-full border focus-visible:ring-3 aria-invalid:ring-3 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:border-transparent;
}

.cn-radio-group-item-aria {
Expand All @@ -56,7 +56,7 @@

/* MARK: Checkbox */
.cn-checkbox {
@apply bg-input/90 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary border-transparent aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[5px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3;
@apply bg-input/90 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary border-transparent aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[5px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-transparent group-has-[:focus-visible]/field-label:data-checked:border-primary;
}

.cn-checkbox-aria {
Expand Down Expand Up @@ -390,7 +390,7 @@
}

.cn-field-label {
@apply has-data-checked:bg-input/30 gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-2xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4;
@apply has-data-checked:bg-input/30 gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-2xl has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-input/40 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 *:data-[slot=field]:p-4;
}

.cn-field-label-aria {
Expand Down Expand Up @@ -1616,7 +1616,7 @@
}

.cn-questionnaire-choice {
@apply border-input bg-input/20 hover:bg-input/40 data-checked:border-primary/40 data-checked:bg-primary/10 data-invalid:border-destructive has-[>input:focus-visible]:border-ring has-[>input:focus-visible]:ring-ring/50 gap-2.5 rounded-3xl border px-4 py-3 text-sm has-[>input:focus-visible]:ring-3;
@apply border-input hover:bg-input/40 data-checked:border-primary/40 data-checked:bg-primary/10 data-invalid:border-destructive has-[>input:focus-visible]:border-ring has-[>input:focus-visible]:ring-ring/50 gap-2.5 rounded-3xl border px-4 py-3 text-sm has-[>input:focus-visible]:ring-3;
}

.cn-questionnaire-choice-indicator {
Expand Down
8 changes: 4 additions & 4 deletions apps/v4/registry/styles/style-lyra.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,7 +260,7 @@

/* MARK: Checkbox */
.cn-checkbox {
@apply border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-none border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-1 aria-invalid:ring-1;
@apply border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-none border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-1 aria-invalid:ring-1 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input group-has-[:focus-visible]/field-label:data-checked:border-primary;
}

.cn-checkbox-aria {
Expand Down Expand Up @@ -612,7 +612,7 @@
}

.cn-field-label {
@apply has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-2;
@apply has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 has-[>[data-slot=field]]:has-[:focus-visible]:ring-1 *:data-[slot=field]:p-2;
}

.cn-field-label-aria {
Expand Down Expand Up @@ -945,7 +945,7 @@
}

.cn-radio-group-item {
@apply border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-3 aria-invalid:ring-3;
@apply border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-3 aria-invalid:ring-3 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input group-has-[:focus-visible]/field-label:data-checked:border-primary;
}

.cn-radio-group-item-aria {
Expand Down Expand Up @@ -1223,7 +1223,7 @@

/* MARK: Switch */
.cn-switch {
@apply data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-1 aria-invalid:ring-1 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px];
@apply data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-1 aria-invalid:ring-1 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:border-transparent data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px];
}

.cn-switch-aria {
Expand Down
Loading
Loading