@superblocksteam/vite-plugin-file-sync 2.0.162 → 2.0.163-next.1

package/dist/migration-templates/app-fullstack/client/components/ui/area-chart.tsx

@@ -245,132 +245,42 @@ const AreaChart = ({ className, ...props }: ComponentProps) => {
 
 const properties = {
   general: Section.category(PropsCategory.Content).children({
-    data: Prop.array<any>()
-      .propertiesPanel({
-        label: "Data",
-        description: "Array of data objects for the area chart",
-        controlType: "FUNCTION_CODE_EDITOR",
-        isJSConvertible: false,
-      })
-      .docs({
-        description:
-          "Array of objects where each object represents a data point with X-axis and Y-axis values. Each object should contain the xAxisKey property and properties for each data series defined in categories. Example: [{month: 'January', desktop: 186, mobile: 80}, {month: 'February', desktop: 305, mobile: 200}]. Multiple Y-value properties create multiple area series.",
-      }),
+    data: Prop.array<any>().docs({
+      description:
+        "Array of objects where each object represents a data point with X-axis and Y-axis values. Each object should contain the xAxisKey property and properties for each data series defined in categories. Example: [{month: 'January', desktop: 186, mobile: 80}, {month: 'February', desktop: 305, mobile: 200}]. Multiple Y-value properties create multiple area series.",
+    }),
 
-    xAxisKey: Prop.string()
-      .propertiesPanel({
-        label: "X-axis data key",
-        description: " name for X-axis values (categories)",
-        placeholder: "month",
-        controlType: "DROP_DOWN",
-        options: function (this) {
-          if (!this.data || !Array.isArray(this.data) || !this.data.length) {
-            return [];
-          }
-          const keys = Object.keys(this.data[0]);
-          return keys.map((key) => ({
-            label: key,
-            value: key,
-          }));
-        },
-      })
-      .docs({
-        description:
-          "The property name in your data objects that contains the X-axis values (categories, dates, or labels). This determines the horizontal positioning of data points. Should be consistent across all data objects.",
-      }),
+    xAxisKey: Prop.string().docs({
+      description:
+        "The property name in your data objects that contains the X-axis values (categories, dates, or labels). This determines the horizontal positioning of data points. Should be consistent across all data objects.",
+    }),
 
-    categories: Prop.array<string>()
-      .propertiesPanel({
-        label: "Categories",
-        description:
-          "Array of data keys to plot as area series (optional, auto-detects numeric properties if not provided)",
-        controlType: "FUNCTION_CODE_EDITOR",
-        isJSConvertible: false,
-      })
-      .docs({
-        description:
-          "Array of property names from your data objects to plot as separate area series. Example: ['desktop', 'mobile'] will create two area series. Each category should correspond to a numeric property in your data. If not provided, automatically detects all numeric properties (excluding xAxisKey) from the data.",
-      }),
+    categories: Prop.array<string>().docs({
+      description:
+        "Array of property names from your data objects to plot as separate area series. Example: ['desktop', 'mobile'] will create two area series. Each category should correspond to a numeric property in your data. If not provided, automatically detects all numeric properties (excluding xAxisKey) from the data.",
+    }),
 
-    seriesLabels: Prop.any<Record<string, string>>()
-      .propertiesPanel({
-        label: "Series labels",
-        description:
-          "Optional labels for series (optional, defaults to category names)",
-        controlType: "FUNCTION_CODE_EDITOR",
-        isJSConvertible: false,
-      })
-      .docs({
-        description:
-          "Optional object mapping category keys to display labels. Example: {desktop: 'Desktop Users', mobile: 'Mobile Users'}. If not provided, the category keys are used as labels.",
-      }),
+    seriesLabels: Prop.any<Record<string, string>>().docs({
+      description:
+        "Optional object mapping category keys to display labels. Example: {desktop: 'Desktop Users', mobile: 'Mobile Users'}. If not provided, the category keys are used as labels.",
+    }),
 
-    colors: Prop.array<string>()
-      .propertiesPanel({
-        label: "Colors",
-        description: "Array of colors for series (optional)",
-        controlType: "FUNCTION_CODE_EDITOR",
-        isJSConvertible: false,
-      })
-      .docs({
-        description:
-          "Optional array of color values to use for series in order. Can be hex codes, rgb values, or CSS variables like 'var(--chart-1)'. Falls back to theme colors if not provided.",
-      }),
+    colors: Prop.array<string>().docs({
+      description:
+        "Optional array of color values to use for series in order. Can be hex codes, rgb values, or CSS variables like 'var(--chart-1)'. Falls back to theme colors if not provided.",
+    }),
   }),
   appearance: Section.category(PropsCategory.Appearance).children({
-    gridStyle: Prop.string<"solid" | "dashed" | "hidden">().propertiesPanel({
-      label: "Grid style",
-      description: "Style of the chart grid lines",
-      controlType: "DROP_DOWN",
-      options: [
-        { label: "Solid", value: "solid" },
-        { label: "Dashed", value: "dashed" },
-        { label: "Hidden", value: "hidden" },
-      ],
-    }),
-    showXAxis: Prop.boolean().propertiesPanel({
-      label: "Show X-axis",
-      description: "Display X-axis with labels",
-      controlType: "SWITCH",
-    }),
-    showYAxis: Prop.boolean().propertiesPanel({
-      label: "Show Y-axis",
-      description: "Display Y-axis with labels",
-      controlType: "SWITCH",
-    }),
-    showTooltip: Prop.boolean().propertiesPanel({
-      label: "Show tooltip",
-      description: "Display tooltip on hover",
-      controlType: "SWITCH",
-    }),
-    showLegend: Prop.boolean().propertiesPanel({
-      label: "Show legend",
-      description: "Display chart legend",
-      controlType: "SWITCH",
-    }),
-    fillOpacity: Prop.number().propertiesPanel({
-      label: "Fill opacity",
-      description: "Opacity of the area fill (0-1)",
-    }),
-    strokeWidth: Prop.number().propertiesPanel({
-      label: "Stroke width",
-      description: "Width of the area border line",
-    }),
-    useGradient: Prop.boolean().propertiesPanel({
-      label: "Use gradient",
-      description: "Use gradient fill for the area",
-      controlType: "SWITCH",
-    }),
-    showDots: Prop.boolean().propertiesPanel({
-      label: "Show dots",
-      description: "Display dots on the area",
-      controlType: "SWITCH",
-    }),
-    connectNulls: Prop.boolean().propertiesPanel({
-      label: "Connect nulls",
-      description: "Connect nulls with the previous non-null value",
-      controlType: "SWITCH",
-    }),
+    gridStyle: Prop.string<"solid" | "dashed" | "hidden">(),
+    showXAxis: Prop.boolean(),
+    showYAxis: Prop.boolean(),
+    showTooltip: Prop.boolean(),
+    showLegend: Prop.boolean(),
+    fillOpacity: Prop.number(),
+    strokeWidth: Prop.number(),
+    useGradient: Prop.boolean(),
+    showDots: Prop.boolean(),
+    connectNulls: Prop.boolean(),
     areaType: Prop.string<
       | "linear"
       | "bump"
@@ -380,46 +290,16 @@ const properties = {
       | "stepAfter"
       | "natural"
       | "monotone"
-    >()
-      .propertiesPanel({
-        label: "Area type",
-        description: "Type of area to display",
-        controlType: "DROP_DOWN",
-        options: [
-          { label: "Linear", value: "linear" },
-          { label: "Bump", value: "bump" },
-          { label: "Step", value: "step" },
-          { label: "Basis", value: "basis" },
-          { label: "Step Before", value: "stepBefore" },
-          { label: "Step After", value: "stepAfter" },
-          { label: "Natural", value: "natural" },
-          { label: "Monotone", value: "monotone" },
-        ],
-      })
-      .docs({
-        description:
-          "Curve interpolation type for area paths. 'linear' creates straight lines, 'monotone' creates smooth curves that preserve monotonicity, 'natural' creates natural spline curves, 'step' creates step functions, 'basis' creates B-spline curves, 'bump' creates rounded bumps, 'stepBefore' steps before point, 'stepAfter' steps after point.",
-      }),
+    >().docs({
+      description:
+        "Curve interpolation type for area paths. 'linear' creates straight lines, 'monotone' creates smooth curves that preserve monotonicity, 'natural' creates natural spline curves, 'step' creates step functions, 'basis' creates B-spline curves, 'bump' creates rounded bumps, 'stepBefore' steps before point, 'stepAfter' steps after point.",
+    }),
   }),
   interaction: Section.category(PropsCategory.Interaction).children({
-    enableAnimation: Prop.boolean().propertiesPanel({
-      label: "Enable animation",
-      description: "Enable chart animations on load",
-      controlType: "SWITCH",
-    }),
+    enableAnimation: Prop.boolean(),
   }),
   events: Section.category(PropsCategory.EventHandlers).children({
-    onDataClick: Prop.eventHandler().propertiesPanel({
-      label: "onDataClick",
-      description: "Triggered when an area is clicked",
-      computedArgs: [
-        {
-          name: "data",
-          type: "object",
-          description: "The data point that was clicked",
-        },
-      ],
-    }),
+    onDataClick: Prop.eventHandler(),
   }),
 };
 

package/dist/migration-templates/app-fullstack/client/components/ui/aspect-ratio.tsx

@@ -23,11 +23,7 @@ type AspectRatioProps = React.ComponentPropsWithoutRef<typeof AspectRatio>;
 // Properties Definition
 const propertiesDefinition: PropertiesPanelDefinition<AspectRatioProps> = {
   general: Section.category(PropsCategory.Content).children({
-    ratio: Prop.number().propertiesPanel({
-      label: "Aspect ratio",
-      description: "The desired width/height ratio (e.g., 1.777 for 16:9)",
-      placeholder: "1.777",
-    }),
+    ratio: Prop.number(),
   }),
 };
 

package/dist/migration-templates/app-fullstack/client/components/ui/avatar.tsx

@@ -78,14 +78,8 @@ const avatarImagePropertiesDefinition: PropertiesPanelDefinition<
   React.ComponentPropsWithoutRef<typeof AvatarImage>
 > = {
   general: Section.category(PropsCategory.Content).children({
-    src: Prop.string().propertiesPanel({
-      label: "Image source",
-      description: "URL of the avatar image",
-    }),
-    alt: Prop.string().propertiesPanel({
-      label: "Alt text",
-      description: "Alternative text for the avatar image",
-    }),
+    src: Prop.string(),
+    alt: Prop.string(),
   }),
 };
 
@@ -94,18 +88,10 @@ const avatarFallbackPropertiesDefinition: PropertiesPanelDefinition<
   React.ComponentPropsWithoutRef<typeof AvatarFallback>
 > = {
   general: Section.category(PropsCategory.Content).children({
-    children: Prop.jsx().propertiesPanel({
-      label: "Fallback content",
-      description:
-        "Content to display when image fails to load (typically initials)",
-    }),
+    children: Prop.jsx(),
   }),
   interaction: Section.category(PropsCategory.Interaction).children({
-    delayMs: Prop.number().propertiesPanel({
-      label: "Delay (ms)",
-      description:
-        "How long to wait before showing the fallback. This is useful to only show the fallback for those with slower connections.",
-    }),
+    delayMs: Prop.number(),
   }),
 };
 

package/dist/migration-templates/app-fullstack/client/components/ui/badge.tsx

@@ -90,41 +90,18 @@ type BadgeVariant = NonNullable<BadgeVariantProps["variant"]>;
 // Properties Definition
 const propertiesDefinition: PropertiesPanelDefinition<BadgeProps> = {
   general: Section.category(PropsCategory.Content).children({
-    children: Prop.jsx().propertiesPanel({
-      label: "Children",
-      description: "The content of the badge",
+    children: Prop.jsx(),
+    icon: Prop.any<JSX.Element | IconName>().docs({
+      description:
+        "The icon to display in the component. You can use the Lucide icon library to find the icon you want.",
     }),
-    icon: Prop.any<JSX.Element | IconName>()
-      .propertiesPanel({
-        label: "Icon",
-        visibility: "SHOW_NAME",
-        defaultOnAdd: "info",
-        controlType: "ICON_SELECTOR",
-      })
-      .docs({
-        description:
-          "The icon to display in the component. You can use the Lucide icon library to find the icon you want.",
-      }),
   }),
   appearance: Section.category(PropsCategory.Appearance).children({
-    variant: Prop.string<BadgeVariant>().propertiesPanel({
-      label: "Variant",
-      controlType: "DROP_DOWN",
-      description: "The visual style of the badge",
-      options: [
-        { label: "Default", value: "default" },
-        { label: "Secondary", value: "secondary" },
-        { label: "Destructive", value: "destructive" },
-        { label: "Outline", value: "outline" },
-      ],
-    }),
+    variant: Prop.string<BadgeVariant>(),
   }),
 
   events: Section.category(PropsCategory.EventHandlers).children({
-    onClick: Prop.eventHandler().propertiesPanel({
-      label: "onClick",
-      description: "Triggered when the badge is clicked",
-    }),
+    onClick: Prop.eventHandler(),
   }),
 };
 

package/dist/migration-templates/app-fullstack/client/components/ui/bar-chart.tsx

@@ -198,186 +198,60 @@ const BarChart = ({ className, ...props }: ComponentProps) => {
 
 const properties = {
   general: Section.category(PropsCategory.Content).children({
-    data: Prop.array<any>()
-      .propertiesPanel({
-        label: "Data",
-        description: "Array of data objects for the bar chart",
-        controlType: "FUNCTION_CODE_EDITOR",
-        isJSConvertible: false,
-      })
-      .docs({
-        description:
-          "Array of objects where each object represents a category with X-axis value and Y-axis values for each data series. Each object should contain the xAxisKey property and properties for each bar series defined in categories. Example: [{month: 'January', desktop: 186, mobile: 80}, {month: 'February', desktop: 305, mobile: 200}]. Multiple Y-value properties create multiple bar series (grouped or stacked).",
-      }),
+    data: Prop.array<any>().docs({
+      description:
+        "Array of objects where each object represents a category with X-axis value and Y-axis values for each data series. Each object should contain the xAxisKey property and properties for each bar series defined in categories. Example: [{month: 'January', desktop: 186, mobile: 80}, {month: 'February', desktop: 305, mobile: 200}]. Multiple Y-value properties create multiple bar series (grouped or stacked).",
+    }),
 
-    xAxisKey: Prop.string()
-      .propertiesPanel({
-        label: "X-axis data key",
-        description: " name for X-axis values (categories)",
-        placeholder: "category",
-        controlType: "DROP_DOWN",
-        options: function (this) {
-          if (!this.data || !Array.isArray(this.data) || !this.data.length) {
-            return [];
-          }
-          return Object.keys(this.data[0]).map((key) => ({
-            label: key,
-            value: key,
-          }));
-        },
-      })
-      .docs({
-        description:
-          "The property name in your data objects that contains the X-axis values (categories, labels, or identifiers). This determines the horizontal grouping of bars and should be consistent across all data objects.",
-      }),
+    xAxisKey: Prop.string().docs({
+      description:
+        "The property name in your data objects that contains the X-axis values (categories, labels, or identifiers). This determines the horizontal grouping of bars and should be consistent across all data objects.",
+    }),
 
-    categories: Prop.array<string>()
-      .propertiesPanel({
-        label: "Categories",
-        description:
-          "Array of data keys to plot as bar series (optional, auto-detects numeric properties if not provided)",
-        controlType: "FUNCTION_CODE_EDITOR",
-        isJSConvertible: false,
-      })
-      .docs({
-        description:
-          "Array of property names from your data objects to plot as separate bar series. Example: ['desktop', 'mobile'] will create two bar series. Each category should correspond to a numeric property in your data. If not provided, automatically detects all numeric properties (excluding xAxisKey) from the data.",
-      }),
+    categories: Prop.array<string>().docs({
+      description:
+        "Array of property names from your data objects to plot as separate bar series. Example: ['desktop', 'mobile'] will create two bar series. Each category should correspond to a numeric property in your data. If not provided, automatically detects all numeric properties (excluding xAxisKey) from the data.",
+    }),
 
-    seriesLabels: Prop.any<Record<string, string>>()
-      .propertiesPanel({
-        label: "Series labels",
-        description:
-          "Optional labels for series (optional, defaults to category names)",
-        controlType: "FUNCTION_CODE_EDITOR",
-        isJSConvertible: false,
-      })
-      .docs({
-        description:
-          "Optional object mapping category keys to display labels. Example: {desktop: 'Desktop Users', mobile: 'Mobile Users'}. If not provided, the category keys are used as labels.",
-      }),
+    seriesLabels: Prop.any<Record<string, string>>().docs({
+      description:
+        "Optional object mapping category keys to display labels. Example: {desktop: 'Desktop Users', mobile: 'Mobile Users'}. If not provided, the category keys are used as labels.",
+    }),
 
-    colors: Prop.array<string>()
-      .propertiesPanel({
-        label: "Colors",
-        description: "Array of colors for series (optional)",
-        controlType: "FUNCTION_CODE_EDITOR",
-        isJSConvertible: false,
-      })
-      .docs({
-        description:
-          "Optional array of color values to use for series in order. Can be hex codes, rgb values, or CSS variables like 'var(--chart-1)'. Falls back to theme colors if not provided.",
-      }),
+    colors: Prop.array<string>().docs({
+      description:
+        "Optional array of color values to use for series in order. Can be hex codes, rgb values, or CSS variables like 'var(--chart-1)'. Falls back to theme colors if not provided.",
+    }),
 
-    stackIds: Prop.any<Record<string, string>>()
-      .propertiesPanel({
-        label: "Stack IDs",
-        description: "Optional stack IDs for grouping bars (optional)",
-        controlType: "FUNCTION_CODE_EDITOR",
-        isJSConvertible: false,
-      })
-      .docs({
-        description:
-          "Optional object mapping category keys to stack IDs. Bars with the same stack ID will be stacked together. Example: {desktop: 'stack1', mobile: 'stack1'} stacks desktop and mobile bars.",
-      }),
+    stackIds: Prop.any<Record<string, string>>().docs({
+      description:
+        "Optional object mapping category keys to stack IDs. Bars with the same stack ID will be stacked together. Example: {desktop: 'stack1', mobile: 'stack1'} stacks desktop and mobile bars.",
+    }),
   }),
   appearance: Section.category(PropsCategory.Appearance).children({
-    layout: Prop.string<"vertical" | "horizontal">()
-      .propertiesPanel({
-        label: "Layout",
-        description: "Orientation of the bars",
-        controlType: "DROP_DOWN",
-        options: [
-          { label: "Vertical", value: "vertical" },
-          { label: "Horizontal", value: "horizontal" },
-        ],
-      })
-      .docs({
-        description:
-          "Chart orientation. 'vertical' creates bars that extend upward from bottom (categories on X-axis, values on Y-axis). 'horizontal' creates bars that extend rightward from left (categories on Y-axis, values on X-axis). Layout affects axis configuration and bar positioning.",
-      }),
-
-    gridStyle: Prop.string<"solid" | "dashed" | "hidden">().propertiesPanel({
-      label: "Grid style",
-      description: "Style of the chart grid lines",
-      controlType: "DROP_DOWN",
-      options: [
-        { label: "Solid", value: "solid" },
-        { label: "Dashed", value: "dashed" },
-        { label: "Hidden", value: "hidden" },
-      ],
-    }),
-    showXAxis: Prop.boolean().propertiesPanel({
-      label: "Show X-axis",
-      description: "Display X-axis with labels",
-      controlType: "SWITCH",
+    layout: Prop.string<"vertical" | "horizontal">().docs({
+      description:
+        "Chart orientation. 'vertical' creates bars that extend upward from bottom (categories on X-axis, values on Y-axis). 'horizontal' creates bars that extend rightward from left (categories on Y-axis, values on X-axis). Layout affects axis configuration and bar positioning.",
     }),
-    showYAxis: Prop.boolean().propertiesPanel({
-      label: "Show Y-axis",
-      description: "Display Y-axis with labels",
-      controlType: "SWITCH",
-    }),
-    showTooltip: Prop.boolean().propertiesPanel({
-      label: "Show tooltip",
-      description: "Display tooltip on hover",
-      controlType: "SWITCH",
-    }),
-    showLegend: Prop.boolean().propertiesPanel({
-      label: "Show legend",
-      description: "Display chart legend",
-      controlType: "SWITCH",
-    }),
-    barSize: Prop.number().propertiesPanel({
-      label: "Bar size",
-      description: "Width/height of the bars",
-      visibility: "SHOW_NAME",
-      defaultOnAdd: 40,
-    }),
-    barRadius: Prop.number().propertiesPanel({
-      label: "Bar radius",
-      description: "Border radius of the bars for rounded corners",
-      visibility: "SHOW_NAME",
-      defaultOnAdd: 0,
-    }),
-    showBarLabels: Prop.boolean().propertiesPanel({
-      label: "Show bar labels",
-      description: "Display value labels on bars",
-      controlType: "SWITCH",
+
+    gridStyle: Prop.string<"solid" | "dashed" | "hidden">(),
+    showXAxis: Prop.boolean(),
+    showYAxis: Prop.boolean(),
+    showTooltip: Prop.boolean(),
+    showLegend: Prop.boolean(),
+    barSize: Prop.number(),
+    barRadius: Prop.number(),
+    showBarLabels: Prop.boolean(),
+    stackOffset: Prop.string<"none" | "expand">().docs({
+      description:
+        "Stacking behavior for bars with matching stackId. 'none' shows actual values with bars stacked to their natural heights. 'expand' normalizes all stacked bars to 100% height, showing relative proportions rather than absolute values. Only affects bars that share the same stackId.",
     }),
-    stackOffset: Prop.string<"none" | "expand">()
-      .propertiesPanel({
-        label: "Stack offset",
-        description: "Type of stacking for multiple series (expand = 100%)",
-        controlType: "DROP_DOWN",
-        options: [
-          { label: "None", value: "none" },
-          { label: "Expand (100%)", value: "expand" },
-        ],
-      })
-      .docs({
-        description:
-          "Stacking behavior for bars with matching stackId. 'none' shows actual values with bars stacked to their natural heights. 'expand' normalizes all stacked bars to 100% height, showing relative proportions rather than absolute values. Only affects bars that share the same stackId.",
-      }),
   }),
   interaction: Section.category(PropsCategory.Interaction).children({
-    enableAnimation: Prop.boolean().propertiesPanel({
-      label: "Enable animation",
-      description: "Enable chart animations on load",
-      controlType: "SWITCH",
-    }),
+    enableAnimation: Prop.boolean(),
   }),
   events: Section.category(PropsCategory.EventHandlers).children({
-    onDataClick: Prop.eventHandler().propertiesPanel({
-      label: "onDataClick",
-      description: "Triggered when a bar is clicked",
-      computedArgs: [
-        {
-          name: "data",
-          type: "object",
-          description: "The data point that was clicked",
-        },
-      ],
-    }),
+    onDataClick: Prop.eventHandler(),
   }),
 };
 

package/dist/migration-templates/app-fullstack/client/components/ui/breadcrumb.tsx

@@ -140,10 +140,7 @@ const Breadcrumb = ({
 // Properties Definition
 const propertiesDefinition: PropertiesPanelDefinition<BreadcrumbProps> = {
   general: Section.category(PropsCategory.Content).children({
-    children: Prop.jsx().propertiesPanel({
-      label: "Items",
-      description: "The items to display",
-    }),
+    children: Prop.jsx(),
   }),
 };
 

package/dist/migration-templates/app-fullstack/client/components/ui/button.tsx

@@ -87,81 +87,22 @@ type ButtonVariantProps = VariantProps<typeof buttonVariants>;
 // Properties Definition
 const propertiesDefinition: PropertiesPanelDefinition<ButtonProps> = {
   general: Section.category(PropsCategory.Content).children({
-    children: Prop.jsx().propertiesPanel({
-      label: "Text",
-    }),
+    children: Prop.jsx(),
   }),
 
   appearance: Section.category(PropsCategory.Appearance).children({
     variant: Prop.string<
       "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
-    >().propertiesPanel({
-      label: "Variant",
-      controlType: "DROP_DOWN",
-      options: [
-        {
-          label: "Default",
-          value: "default",
-        },
-        {
-          label: "Destructive",
-          value: "destructive",
-        },
-        {
-          label: "Outline",
-          value: "outline",
-        },
-        {
-          label: "Secondary",
-          value: "secondary",
-        },
-        {
-          label: "Ghost",
-          value: "ghost",
-        },
-        {
-          label: "Link",
-          value: "link",
-        },
-      ],
-    }),
-    size: Prop.string<"default" | "sm" | "lg" | "icon">().propertiesPanel({
-      label: "Size",
-      controlType: "DROP_DOWN",
-      options: [
-        {
-          label: "Default",
-          value: "default",
-        },
-        {
-          label: "Small",
-          value: "sm",
-        },
-        {
-          label: "Large",
-          value: "lg",
-        },
-        {
-          label: "Icon",
-          value: "icon",
-        },
-      ],
-    }),
+    >(),
+    size: Prop.string<"default" | "sm" | "lg" | "icon">(),
   }),
 
   interaction: Section.category(PropsCategory.Interaction).children({
-    disabled: Prop.boolean().propertiesPanel({
-      label: "Disabled",
-      controlType: "SWITCH",
-      description: "Whether the button is disabled",
-    }),
+    disabled: Prop.boolean(),
   }),
 
   events: Section.category(PropsCategory.EventHandlers).children({
-    onClick: Prop.eventHandler().propertiesPanel({
-      label: "onClick",
-      description: "Triggered when the button is clicked",
-    }),
+    onClick: Prop.eventHandler(),
   }),
 };