[pull] master from supabase:master

.claude/skills/studio-mock-api-tests/SKILL.md

@@ -99,7 +99,7 @@ response: () => HttpResponse.json<MyResponse>({}, { status: 201 })
 
 ### 3. Submit buttons in Sheets/Modals need `fireEvent.click`
 
-The convention `<Button form={FORM_ID} htmlType="submit" />` (button
+The convention `<Button form={FORM_ID} type="submit" />` (button
 outside the form, associated by id) doesn't reliably trigger submission
 under `userEvent.click` in jsdom. Use `fireEvent.click` for the submit
 button. Continue to use `userEvent.type` for inputs.

apps/design-system/components/code-block-wrapper.tsx

@@ -35,7 +35,7 @@ export function CodeBlockWrapper({
           )}
         >
           <CollapsibleTrigger asChild>
-            <Button type="secondary" className="h-8 text-xs">
+            <Button variant="secondary" className="h-8 text-xs">
               {isOpened ? 'Collapse' : expandButtonTitle}
             </Button>
           </CollapsibleTrigger>

apps/design-system/components/command-menu.tsx

@@ -54,7 +54,7 @@ export function CommandMenu({ ...props }: DialogProps) {
   return (
     <>
       <Button
-        type="outline"
+        variant="outline"
         className={cn(
           `lg:flex hidden relative h-8 w-full justify-start rounded-lg bg-background text-sm font-normal text-foreground-muted shadow-none sm:pr-12 md:w-40 lg:w-64 hover:border-foreground-muted hover:bg-surface-100 hover:text-foreground-lighter
           `
@@ -69,7 +69,7 @@ export function CommandMenu({ ...props }: DialogProps) {
         </kbd>
       </Button>
       <Button
-        type="text"
+        variant="text"
         size="tiny"
         className="px-1 group lg:hidden"
         onClick={() => setOpen(true)}

apps/design-system/components/component-preview.tsx

@@ -125,7 +125,7 @@ export function ComponentPreview({
               <Button
                 className="rounded-full"
                 onClick={() => setExpandState(!expand)}
-                type="default"
+                variant="default"
                 icon={<Expand className="text-foreground-lighter" />}
               >
                 {expand ? 'Collapse code' : 'Expand code'}

apps/design-system/components/copy-button.tsx

@@ -49,7 +49,7 @@ export function CopyButton({
   return (
     <Button
       size="small"
-      type="outline"
+      variant="outline"
       className={cn(
         'relative z-10 h-6 w-6 text-foreground-muted hover:bg-surface-100 hover:text-foreground p-0',
         className
@@ -106,7 +106,7 @@ export function CopyWithClassNames({
       <DropdownMenuTrigger asChild>
         <Button
           size="small"
-          type="outline"
+          variant="outline"
           className={cn(
             'relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50',
             className

apps/design-system/components/source-panel.tsx

@@ -111,7 +111,7 @@ const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> &
               <div className="flex items-center gap-2 justify-end">
                 {doc.links?.doc && (
                   <Button
-                    type="outline"
+                    variant="outline"
                     className="rounded-full"
                     icon={<ExternalLink className="text-foreground-muted" strokeWidth={1} />}
                   >
@@ -128,7 +128,7 @@ const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> &
                 )}
                 {doc.links?.api && (
                   <Button
-                    type="outline"
+                    variant="outline"
                     className="rounded-full"
                     icon={<ExternalLink className="text-foreground-muted" strokeWidth={1} />}
                   >
@@ -205,7 +205,7 @@ const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> &
                 <div className="flex items-center gap-2 justify-end">
                   {doc.links?.doc && (
                     <Button
-                      type="outline"
+                      variant="outline"
                       className="rounded-full"
                       icon={<ExternalLink className="text-foreground-muted" strokeWidth={1} />}
                     >
@@ -222,7 +222,7 @@ const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> &
                   )}
                   {doc.links?.api && (
                     <Button
-                      type="outline"
+                      variant="outline"
                       className="rounded-full"
                       icon={<ExternalLink className="text-foreground-muted" strokeWidth={1} />}
                     >
@@ -268,7 +268,7 @@ const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> &
                 <div className="flex items-center gap-2 justify-end">
                   {doc.links?.doc && (
                     <Button
-                      type="outline"
+                      variant="outline"
                       className="rounded-full"
                       icon={<ExternalLink className="text-foreground-muted" strokeWidth={1} />}
                     >
@@ -279,7 +279,7 @@ const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> &
                   )}
                   {doc.links?.api && (
                     <Button
-                      type="outline"
+                      variant="outline"
                       className="rounded-full"
                       icon={<ExternalLink className="text-foreground-muted" strokeWidth={1} />}
                     >

apps/design-system/components/theme-switcher-dropdown.tsx

@@ -40,7 +40,7 @@ const ThemeSwitcherDropdown = () => {
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button
-            type="text"
+            variant="text"
             size="tiny"
             className="px-1 group"
             icon={

apps/design-system/components/top-navigation.tsx

@@ -18,7 +18,7 @@ export const TopNavigation = () => {
         <div className="max-w-site w-full flex flex-row items-center gap-6 mx-auto md:px-6 px-4 justify-between">
           <div className="flex items-center gap-2">
             <Button
-              type="text"
+              variant="text"
               size="tiny"
               className="px-1 md:hidden"
               onClick={toggle}

apps/design-system/content/docs/components/button.mdx

@@ -14,11 +14,9 @@ import { Button } from '@/components/ui/button'
 ```
 
 ```tsx
-<Button type="outline">Button</Button>
+<Button variant="outline">Button</Button>
 ```
 
-_It is likely that the `type` prop will be changed to `variant` in the future._
-
 ## Link
 
 You can use the `buttonVariants` helper to create a link that looks like a button.
@@ -47,9 +45,9 @@ Use the `size` prop to determine the size of the button.
 
 <ComponentPreview name="button-sizes" />
 
-### Types
+### Variants
 
-These are all the different `type` variations.
+These are all the different `variant` variations.
 
 #### Primary
 
@@ -61,15 +59,15 @@ Used for data insertion actions, confirming purchases, strong positive actions.
 
 Used for opening dialogs, navigating to pages, and other non CRUD actions.
 
-This `type` will probably be the most used button type.
-It will probably be changed to be the default type in future.
+This `variant` will probably be the most used button variant.
+It will probably be changed to be the default variant in future.
 
 <ComponentPreview name="button-default" />
 
 #### Secondary
 
 Can be used for signaling a data or config change, but not as serious as a primary button.
-For destructive or side effect actions, use the `destructive` or `warning` type.
+For destructive or side effect actions, use the `destructive` or `warning` variant.
 
 <ComponentPreview name="button-secondary" />
 
@@ -83,7 +81,7 @@ Used for actions that might have a side effect, but not as serious as a destruct
 
 Used for actions that will have a serious destructive side effect, like deleting data.
 
-prop `type` will probably be changed to `destructive` in the future.
+prop `variant` will probably be changed to `destructive` in the future.
 
 <ComponentPreview name="button-destructive" />
 
@@ -97,7 +95,7 @@ Used for secondary actions, or actions that are not as important as the primary
 
 Used for actions that are not as important as the primary action, or for actions that are not as important as the primary action.
 
-prop `type` will probably be changed to `ghost` in the future.
+prop `variant` will probably be changed to `ghost` in the future.
 
 <ComponentPreview name="button-ghost" />
 

apps/design-system/content/docs/fragments/inner-side-menu.mdx

@@ -118,7 +118,7 @@ Use the `actions` prop to add any actions like a `<Button />`.
   title="No functions found"
   description="Create your first serverless function to get started."
   actions={
-    <Button type="default" onClick={createAction}>
+    <Button variant="default" onClick={createAction}>
       Create Function
     </Button>
   }

apps/design-system/content/docs/fragments/page-breadcrumbs.mdx

@@ -24,7 +24,7 @@ import { PageBreadcrumbs, PageBreadcrumbsActions } from 'ui-patterns/PageBreadcr
 <PageBreadcrumbs
   actions={
     <PageBreadcrumbsActions>
-      <Button type="primary" size="tiny">
+      <Button variant="primary" size="tiny">
         Create
       </Button>
     </PageBreadcrumbsActions>

apps/design-system/content/docs/fragments/page-header.mdx

@@ -44,7 +44,7 @@ Compound header for page context: optional icon, title, description, and aside a
       <PageHeaderDescription>Manage email templates for your project.</PageHeaderDescription>
     </PageHeaderSummary>
     <PageHeaderAside>
-      <Button type="primary" size="tiny">
+      <Button variant="primary" size="tiny">
         Create template
       </Button>
     </PageHeaderAside>

apps/design-system/content/docs/fragments/text-confirm-dialog.mdx

@@ -29,7 +29,7 @@ export default function TextConfirmDialogDemo() {
 
   return (
     <>
-      <Button type="danger" onClick={() => setVisible(true)}>
+      <Button variant="danger" onClick={() => setVisible(true)}>
         Show Text Confirm Dialog
       </Button>
 

apps/design-system/content/docs/ui-patterns/modality.mdx

@@ -116,7 +116,7 @@ const { confirmOnClose, handleOpenChange, modalProps } = useConfirmOnClose({
 
 <Sheet open={visible} onOpenChange={handleOpenChange}>
   ...
-  <Button type="default" onClick={confirmOnClose}>
+  <Button variant="default" onClick={confirmOnClose}>
     Cancel
   </Button>
   ...

apps/design-system/registry/default/block/chart-composed-states.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { BarChart2, ExternalLink } from 'lucide-react'
-import { Badge } from 'ui'
+import { Badge, CriticalIcon } from 'ui'
 import {
   Chart,
   ChartActions,
@@ -44,6 +44,35 @@ export default function ChartComposedStates() {
         </ChartCard>
       </Chart>
 
+      <Chart isErrored={true}>
+        <ChartCard>
+          <ChartHeader>
+            <ChartTitle tooltip="This is a tooltip">Response Errors</ChartTitle>
+            <ChartActions actions={actions} />
+          </ChartHeader>
+          <ChartContent
+            isEmpty={true}
+            errorState={
+              <ChartEmptyState
+                icon={<CriticalIcon />}
+                title="Some error happened"
+                description="Error happened why trying to fetch data. Please try again later."
+              />
+            }
+            emptyState={
+              <ChartEmptyState
+                icon={<BarChart2 size={20} />}
+                title="No data to show"
+                description="It may take up to 24 hours for data to refresh"
+              />
+            }
+            loadingState={<ChartLoadingState />}
+          >
+            My chart here...
+          </ChartContent>
+        </ChartCard>
+      </Chart>
+
       <Chart>
         <ChartCard>
           <ChartHeader>

apps/design-system/registry/default/example/admonition-button.tsx

@@ -10,14 +10,14 @@ export default function AdmonitionDemo() {
         title="Set up custom SMTP"
         description="You’re using the built-in email service. This service has rate limits and is not meant to be
         used for production apps."
-        actions={<Button type="default">Set up SMTP</Button>}
+        actions={<Button variant="default">Set up SMTP</Button>}
       />
       <Admonition
         type="destructive"
         layout="horizontal"
         title="Deleting this organization will also remove its projects"
         description="Make sure you have made a backup of your projects if you want to keep your data."
-        actions={<Button type="danger">Delete organization</Button>}
+        actions={<Button variant="danger">Delete organization</Button>}
       />
     </div>
   )

apps/design-system/registry/default/example/admonition-demo.tsx

@@ -9,7 +9,7 @@ export default function AdmonitionDemo() {
       title="OAuth Server is disabled"
       description="Enable OAuth Server to make your project act as an identity provider for
             third-party applications."
-      actions={<Button type="default">OAuth Server Settings</Button>}
+      actions={<Button variant="default">OAuth Server Settings</Button>}
     />
   )
 }

apps/design-system/registry/default/example/admonition-responsive.tsx

@@ -8,7 +8,7 @@ export default function AdmonitionDemo() {
       layout="responsive"
       title="Disk management has moved"
       description="Disk management is now handled alongside Project Compute on the Compute and Disk page."
-      actions={<Button type="default">Go to Compute and Disk</Button>}
+      actions={<Button variant="default">Go to Compute and Disk</Button>}
     />
   )
 }

apps/design-system/registry/default/example/alert-dialog-async-error.tsx

@@ -36,7 +36,7 @@ export default function AlertDialogAsyncError() {
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Button type="outline">Show Alert Dialog</Button>
+        <Button variant="outline">Show Alert Dialog</Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>

apps/design-system/registry/default/example/alert-dialog-async.tsx

@@ -19,7 +19,7 @@ export default function AlertDialogAsync() {
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Button type="outline">Show Alert Dialog</Button>
+        <Button variant="outline">Show Alert Dialog</Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>

apps/design-system/registry/default/example/alert-dialog-close-only.tsx

@@ -14,7 +14,7 @@ export default function AlertDialogCloseOnly() {
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Button type="outline">Show Alert Dialog</Button>
+        <Button variant="outline">Show Alert Dialog</Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>

apps/design-system/registry/default/example/alert-dialog-demo.tsx

@@ -15,7 +15,7 @@ export default function AlertDialogDemo() {
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Button type="outline">Show Alert Dialog</Button>
+        <Button variant="outline">Show Alert Dialog</Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>

apps/design-system/registry/default/example/alert-dialog-destructive.tsx

@@ -15,7 +15,7 @@ export default function AlertDialogDestructive() {
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Button type="danger">Show Alert Dialog</Button>
+        <Button variant="danger">Show Alert Dialog</Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>

apps/design-system/registry/default/example/alert-dialog-warning.tsx

@@ -15,7 +15,7 @@ export default function AlertDialogWarning() {
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>
-        <Button type="warning">Show Alert Dialog</Button>
+        <Button variant="warning">Show Alert Dialog</Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>

apps/design-system/registry/default/example/button-default.tsx

@@ -4,14 +4,14 @@ import { Button } from 'ui'
 export default function ButtonDemo() {
   return (
     <div className="flex gap-3">
-      <Button type="default">Button rest</Button>
-      <Button type="default" loading>
+      <Button variant="default">Button rest</Button>
+      <Button variant="default" loading>
         Button loading
       </Button>
-      <Button type="default" icon={<Mail />}>
+      <Button variant="default" icon={<Mail />}>
         Button icon
       </Button>
-      <Button type="default" iconRight={<Mail />}>
+      <Button variant="default" iconRight={<Mail />}>
         Button iconRight
       </Button>
     </div>