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

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

@@ -183,219 +183,67 @@ const RadialBarChart = ({ className, ...props }: ComponentProps) => {
 
 registerComponent(RadialBarChart, {
   general: Section.category(PropsCategory.Content).children({
-    data: Prop.array<any>()
-      .propertiesPanel({
-        label: "Data",
-        description: "Array of data objects for the radial chart",
-        controlType: "FUNCTION_CODE_EDITOR",
-        isJSConvertible: false,
-      })
-      .docs({
-        description:
-          "Array of objects for circular bar visualization. For single radial charts, typically contains one object with category name and value. For stacked radial charts, contains multiple objects representing concentric bars. Example: [{browser: 'Chrome', visitors: 275, color: '#4285F4'}, {browser: 'Safari', visitors: 200}]. Values are often percentages or progress indicators displayed as arc lengths.",
-      }),
-    valueKey: Prop.string()
-      .propertiesPanel({
-        label: "Value data key",
-        description: " name for the values to display",
-        placeholder: "value",
-        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 numeric values determining arc lengths. Values typically represent percentages (0-100), progress (0-1), or absolute numbers that will be proportionally rendered as circular arcs from startAngle to calculated end positions.",
-      }),
-    nameKey: Prop.string()
-      .propertiesPanel({
-        label: "Name data key",
-        description: " name for category names/identifiers",
-        placeholder: "name",
-        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 unique identifiers for each bar. Used to generate consistent colors and match data across renders.",
-      }),
-    labelKey: Prop.string()
-      .propertiesPanel({
-        label: "Label data key",
-        description: " name for display labels (optional, defaults to nameKey)",
-        placeholder: "label",
-        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:
-          "Optional property name for human-readable labels shown in tooltips and legends. If not specified, the nameKey value is used as the label.",
-      }),
-    colorKey: Prop.string()
-      .propertiesPanel({
-        label: "Color data key",
-        description: " name for bar colors (optional)",
-        placeholder: "color",
-        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:
-          "Optional property name in your data objects that contains color values (hex, rgb, or CSS variable). If not specified, colors are auto-assigned from the theme.",
-      }),
-    colors: Prop.array<string>()
-      .propertiesPanel({
-        label: "Colors",
-        description: "Array of colors to use for bars (optional)",
-        controlType: "FUNCTION_CODE_EDITOR",
-        isJSConvertible: false,
-      })
-      .docs({
-        description:
-          "Optional array of color values to use for bars in order. Can be hex codes, rgb values, or CSS variables like 'var(--chart-1)'. Falls back to theme colors if not provided.",
-      }),
+    data: Prop.array<any>().docs({
+      description:
+        "Array of objects for circular bar visualization. For single radial charts, typically contains one object with category name and value. For stacked radial charts, contains multiple objects representing concentric bars. Example: [{browser: 'Chrome', visitors: 275, color: '#4285F4'}, {browser: 'Safari', visitors: 200}]. Values are often percentages or progress indicators displayed as arc lengths.",
+    }),
+    valueKey: Prop.string().docs({
+      description:
+        "The property name in your data objects that contains the numeric values determining arc lengths. Values typically represent percentages (0-100), progress (0-1), or absolute numbers that will be proportionally rendered as circular arcs from startAngle to calculated end positions.",
+    }),
+    nameKey: Prop.string().docs({
+      description:
+        "The property name in your data objects that contains unique identifiers for each bar. Used to generate consistent colors and match data across renders.",
+    }),
+    labelKey: Prop.string().docs({
+      description:
+        "Optional property name for human-readable labels shown in tooltips and legends. If not specified, the nameKey value is used as the label.",
+    }),
+    colorKey: Prop.string().docs({
+      description:
+        "Optional property name in your data objects that contains color values (hex, rgb, or CSS variable). If not specified, colors are auto-assigned from the theme.",
+    }),
+    colors: Prop.array<string>().docs({
+      description:
+        "Optional array of color values to use for bars 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({
-    chartType: Prop.string<"single" | "stacked">()
-      .propertiesPanel({
-        label: "Chart type",
-        description: "Type of radial chart to display",
-        controlType: "DROP_DOWN",
-        options: [
-          { label: "Single", value: "single" },
-          { label: "Stacked", value: "stacked" },
-        ],
-      })
-      .docs({
-        description:
-          "Visual layout of the radial chart. 'single' displays one circular bar (ideal for progress indicators, gauges, or single metrics). 'stacked' displays multiple concentric circular bars (ideal for comparing multiple categories or showing layered data). Single charts often show one data point, while stacked charts display multiple data points as concentric arcs.",
-      }),
-    startAngle: Prop.number()
-      .propertiesPanel({
-        label: "Start angle",
-        description: "Starting angle of the radial chart in degrees",
-      })
-      .docs({
-        description:
-          "Starting position of the radial bars in degrees. 0° = 3 o'clock (right), 90° = 12 o'clock (top), 180° = 9 o'clock (left), 270° = 6 o'clock (bottom). Common values: 90° for top-start, 180° for left-start. Determines where the arc begins drawing. For a single radial chart showing percentage, use start and end angles to control the arc range to show a percentage of the total.",
-      }),
-    endAngle: Prop.number()
-      .propertiesPanel({
-        label: "End angle",
-        description: "Ending angle of the radial chart in degrees",
-      })
-      .docs({
-        description:
-          "Ending position of the radial bars in degrees, defining the full arc sweep. Negative values create clockwise motion. Common combinations: startAngle 90° + endAngle -270° = full circle clockwise from top. startAngle 180° + endAngle 0° = semicircle left to right. The difference determines the total arc range for 100% values.",
-      }),
-    innerRadius: Prop.number()
-      .propertiesPanel({
-        label: "Inner radius",
-        description: "Inner radius of the radial chart",
-      })
-      .docs({
-        description:
-          "Size of the hollow center area in pixels or percentage. Creates the donut-like appearance. Larger values create bigger center areas (useful for center labels). Smaller values create thicker bars. For stacked charts, determines the starting radius of the innermost bar.",
-      }),
-    cornerRadius: Prop.number().propertiesPanel({
-      label: "Corner radius",
-      description: "Radius of rounded corners on bars",
+    chartType: Prop.string<"single" | "stacked">().docs({
+      description:
+        "Visual layout of the radial chart. 'single' displays one circular bar (ideal for progress indicators, gauges, or single metrics). 'stacked' displays multiple concentric circular bars (ideal for comparing multiple categories or showing layered data). Single charts often show one data point, while stacked charts display multiple data points as concentric arcs.",
+    }),
+    startAngle: Prop.number().docs({
+      description:
+        "Starting position of the radial bars in degrees. 0° = 3 o'clock (right), 90° = 12 o'clock (top), 180° = 9 o'clock (left), 270° = 6 o'clock (bottom). Common values: 90° for top-start, 180° for left-start. Determines where the arc begins drawing. For a single radial chart showing percentage, use start and end angles to control the arc range to show a percentage of the total.",
     }),
-    showTooltip: Prop.boolean().propertiesPanel({
-      label: "Show tooltip",
-      description: "Display tooltip on hover",
-      controlType: "SWITCH",
+    endAngle: Prop.number().docs({
+      description:
+        "Ending position of the radial bars in degrees, defining the full arc sweep. Negative values create clockwise motion. Common combinations: startAngle 90° + endAngle -270° = full circle clockwise from top. startAngle 180° + endAngle 0° = semicircle left to right. The difference determines the total arc range for 100% values.",
     }),
-    showLegend: Prop.boolean().propertiesPanel({
-      label: "Show legend",
-      description: "Display chart legend",
-      controlType: "SWITCH",
+    innerRadius: Prop.number().docs({
+      description:
+        "Size of the hollow center area in pixels or percentage. Creates the donut-like appearance. Larger values create bigger center areas (useful for center labels). Smaller values create thicker bars. For stacked charts, determines the starting radius of the innermost bar.",
     }),
-    showBarLabels: Prop.boolean().propertiesPanel({
-      label: "Show bar labels",
-      description: "Display labels on the bars",
-      controlType: "SWITCH",
+    cornerRadius: Prop.number(),
+    showTooltip: Prop.boolean(),
+    showLegend: Prop.boolean(),
+    showBarLabels: Prop.boolean(),
+    showCenterLabel: Prop.boolean(),
+    labelText: Prop.string().docs({
+      description:
+        "Custom text for center label. If empty, automatically displays calculated total (sum for stacked, first value for single). Useful for custom metrics, percentages with % symbols, or descriptive text. Displayed with large, bold styling.",
     }),
-    showCenterLabel: Prop.boolean().propertiesPanel({
-      label: "Show center label",
-      description: "Display label in the center of the chart",
-      controlType: "SWITCH",
+    labelSubtext: Prop.string().docs({
+      description:
+        "Secondary text displayed below the main center label with smaller, muted styling. Typically used for units, descriptions, or context like 'completion', 'users', 'progress', etc. Positioned below the main label for hierarchical information display.",
     }),
-    labelText: Prop.string()
-      .propertiesPanel({
-        label: "Label text",
-        description: "Custom text to display in center (leave empty for auto)",
-        isVisible: function (this: any) {
-          return this.showCenterLabel;
-        },
-      })
-      .docs({
-        description:
-          "Custom text for center label. If empty, automatically displays calculated total (sum for stacked, first value for single). Useful for custom metrics, percentages with % symbols, or descriptive text. Displayed with large, bold styling.",
-      }),
-    labelSubtext: Prop.string()
-      .propertiesPanel({
-        label: "Label subtext",
-        description: "Subtext to display below main label",
-        isVisible: function (this: any) {
-          return this.showCenterLabel;
-        },
-      })
-      .docs({
-        description:
-          "Secondary text displayed below the main center label with smaller, muted styling. Typically used for units, descriptions, or context like 'completion', 'users', 'progress', etc. Positioned below the main label for hierarchical information display.",
-      }),
   }),
   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 radial segment is clicked",
-      computedArgs: [
-        {
-          name: "data",
-          type: "object",
-          description: "The data point that was clicked",
-        },
-      ],
-    }),
+    onDataClick: Prop.eventHandler(),
   }),
 }).editorConfig({ icon: "chart" });
 

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

@@ -160,47 +160,17 @@ type SelectProps = React.ComponentPropsWithoutRef<typeof Select>;
 // Properties Definition
 const propertiesDefinition: PropertiesPanelDefinition<SelectProps> = {
   general: Section.category(PropsCategory.Content).children({
-    value: Prop.string().propertiesPanel({
-      label: "Value",
-      description:
-        "The controlled value of the select. Should be used in conjunction with `onValueChange`",
-    }),
-    defaultValue: Prop.string().propertiesPanel({
-      label: "Default value",
-      description: "The default selected value",
-    }),
+    value: Prop.string(),
+    defaultValue: Prop.string(),
   }),
 
   interaction: Section.category(PropsCategory.Interaction).children({
-    disabled: Prop.boolean().propertiesPanel({
-      label: "Disabled",
-      description: "Whether the select is disabled",
-    }),
+    disabled: Prop.boolean(),
   }),
 
   events: Section.category(PropsCategory.EventHandlers).children({
-    onValueChange: Prop.eventHandler().propertiesPanel({
-      label: "onValueChange",
-      description: "Triggered when the selected value changes",
-      computedArgs: [
-        {
-          name: "value",
-          type: "string",
-          description: "The selected value",
-        },
-      ],
-    }),
-    onOpenChange: Prop.eventHandler().propertiesPanel({
-      label: "onOpenChange",
-      description: "Triggered when the dropdown opens or closes",
-      computedArgs: [
-        {
-          name: "open",
-          type: "boolean",
-          description: "Whether the dropdown is open",
-        },
-      ],
-    }),
+    onValueChange: Prop.eventHandler(),
+    onOpenChange: Prop.eventHandler(),
   }),
 };
 

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

@@ -39,14 +39,7 @@ const propertiesDefinition: PropertiesPanelDefinition<
   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
 > = {
   appearance: Section.category(PropsCategory.Appearance).children({
-    orientation: Prop.string<"horizontal" | "vertical">().propertiesPanel({
-      label: "Orientation",
-      controlType: "DROP_DOWN",
-      options: [
-        { label: "Horizontal", value: "horizontal" },
-        { label: "Vertical", value: "vertical" },
-      ],
-    }),
+    orientation: Prop.string<"horizontal" | "vertical">(),
   }),
 };
 

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

@@ -150,42 +150,19 @@ const propertiesDefinition: PropertiesPanelDefinition<
   React.ComponentPropsWithoutRef<typeof Sheet>
 > = {
   general: Section.category(PropsCategory.Content).children({
-    open: Prop.boolean().propertiesPanel({
-      label: "Open",
-      controlType: "SWITCH",
-      description: "Whether the component is currently open and visible",
-      isRemovable: true,
-      visibility: "SHOW_NAME",
-    }),
+    open: Prop.boolean(),
     children: Prop.jsx(),
   }),
   interaction: Section.category(PropsCategory.Interaction).children({
-    defaultOpen: Prop.boolean().propertiesPanel({
-      label: "Default is open",
-      description: "Whether the component is open by default",
+    defaultOpen: Prop.boolean(),
+    modal: Prop.boolean().docs({
+      description:
+        "When true, interaction with outside elements will be disabled",
     }),
-    modal: Prop.boolean()
-      .propertiesPanel({
-        label: "Modal",
-        description: "Prevent clicking outside from closing the dialog",
-      })
-      .docs({
-        description:
-          "When true, interaction with outside elements will be disabled",
-      }),
   }),
 
   events: Section.category(PropsCategory.EventHandlers).children({
-    onOpenChange: Prop.eventHandler().propertiesPanel({
-      label: "onOpenChange",
-      computedArgs: [
-        {
-          name: "open",
-          type: "boolean",
-          description: "Whether the sheet is open",
-        },
-      ],
-    }),
+    onOpenChange: Prop.eventHandler(),
   }),
 };
 
@@ -211,17 +188,7 @@ const sheetContentPropertiesDefinition: PropertiesPanelDefinition<
     children: Prop.jsx(),
   }),
   appearance: Section.category(PropsCategory.Appearance).children({
-    side: Prop.string<"top" | "right" | "bottom" | "left">().propertiesPanel({
-      label: "Side",
-      controlType: "DROP_DOWN",
-      description: "Which side of the screen the sheet appears from",
-      options: [
-        { label: "Right", value: "right" },
-        { label: "Left", value: "left" },
-        { label: "Top", value: "top" },
-        { label: "Bottom", value: "bottom" },
-      ],
-    }),
+    side: Prop.string<"top" | "right" | "bottom" | "left">(),
   }),
 };
 

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

@@ -888,41 +888,9 @@ function SidebarMenuSubButton({
 // Properties Definition
 const propertiesDefinition: PropertiesPanelDefinition<SidebarProps> = {
   general: Section.category(PropsCategory.Content).children({
-    side: Prop.string<"left" | "right">()
-
-      .propertiesPanel({
-        label: "Side",
-        controlType: "RADIO_BUTTON_GROUP",
-        description: "Which side the sidebar appears on",
-        options: [
-          { label: "Left", value: "left" },
-          { label: "Right", value: "right" },
-        ],
-      }),
-    variant: Prop.string<"sidebar" | "floating" | "inset">()
-
-      .propertiesPanel({
-        label: "Variant",
-        controlType: "DROP_DOWN",
-        description: "Visual style of the sidebar",
-        options: [
-          { label: "Sidebar", value: "sidebar" },
-          { label: "Floating", value: "floating" },
-          { label: "Inset", value: "inset" },
-        ],
-      }),
-    collapsible: Prop.string<"none" | "icon" | "offcanvas">()
-
-      .propertiesPanel({
-        label: "Collapsible behavior",
-        controlType: "DROP_DOWN",
-        description: "How the sidebar behaves when collapsed",
-        options: [
-          { label: "Off-canvas", value: "offcanvas" },
-          { label: "Icon only", value: "icon" },
-          { label: "None", value: "none" },
-        ],
-      }),
+    side: Prop.string<"left" | "right">(),
+    variant: Prop.string<"sidebar" | "floating" | "inset">(),
+    collapsible: Prop.string<"none" | "icon" | "offcanvas">(),
     children: Prop.jsx(),
   }),
 };

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

@@ -82,107 +82,23 @@ const propertiesDefinition: PropertiesPanelDefinition<
   React.ComponentProps<typeof SliderPrimitive.Root>
 > = {
   general: Section.category(PropsCategory.Content).children({
-    value: Prop.array<number>().propertiesPanel({
-      label: "Value",
-      controlType: "INPUT_TEXT",
-      description: "The controlled value of the slider",
-      isRemovable: true,
-      visibility: "SHOW_NAME",
-    }),
-    defaultValue: Prop.array<number>().propertiesPanel({
-      label: "Default value",
-      description:
-        "The default selected option value. Changes to the default selection update the component state",
-      placeholder: "Enter default option value",
-    }),
-    min: Prop.number().propertiesPanel({
-      label: "Min value",
-      description: "The minimum value of the slider",
-      placeholder: "Enter min value",
-      defaultOnAdd: 0,
-      visibility: "SHOW_NAME",
-      isRemovable: true,
-    }),
-    max: Prop.number().propertiesPanel({
-      label: "Max value",
-      description: "The maximum value of the slider",
-      placeholder: "Enter max value",
-      defaultOnAdd: 100,
-      visibility: "SHOW_NAME",
-      isRemovable: true,
-    }),
-    step: Prop.number().propertiesPanel({
-      label: "Step value",
-      description: "The step value of the slider",
-      placeholder: "Enter step value",
-      defaultOnAdd: 1,
-      visibility: "SHOW_NAME",
-      isRemovable: true,
-    }),
-    minStepsBetweenThumbs: Prop.number().propertiesPanel({
-      label: "Min steps between thumbs",
-      description: "The minimum number of steps between multiple thumbs",
-      placeholder: "Enter minimum steps",
-      defaultOnAdd: 0,
-      visibility: "SHOW_NAME",
-      isRemovable: true,
-    }),
+    value: Prop.array<number>(),
+    defaultValue: Prop.array<number>(),
+    min: Prop.number(),
+    max: Prop.number(),
+    step: Prop.number(),
+    minStepsBetweenThumbs: Prop.number(),
   }),
   appearance: Section.category(PropsCategory.Appearance).children({
-    orientation: Prop.string<"horizontal" | "vertical">()
-
-      .propertiesPanel({
-        label: "Orientation",
-        description: "The orientation of the slider",
-        controlType: "RADIO_BUTTON_GROUP",
-        options: [
-          { value: "horizontal", label: "Horizontal" },
-          { value: "vertical", label: "Vertical" },
-        ],
-        visibility: "SHOW_NAME",
-        isRemovable: true,
-        defaultOnAdd: "horizontal",
-      }),
-    inverted: Prop.boolean().propertiesPanel({
-      label: "Inverted",
-      description: "Whether the slider is inverted (reverse direction)",
-      controlType: "SWITCH",
-      visibility: "SHOW_NAME",
-      isRemovable: true,
-      defaultOnAdd: false,
-    }),
+    orientation: Prop.string<"horizontal" | "vertical">(),
+    inverted: Prop.boolean(),
   }),
   interaction: Section.category(PropsCategory.Interaction).children({
-    disabled: Prop.boolean().propertiesPanel({
-      label: "Disabled",
-      description: "Disables user interaction with this component",
-      controlType: "SWITCH",
-    }),
+    disabled: Prop.boolean(),
   }),
   events: Section.category(PropsCategory.EventHandlers).children({
-    onValueChange: Prop.eventHandler().propertiesPanel({
-      label: "onValueChange",
-      description: "Event handler called when the value changes",
-      computedArgs: [
-        {
-          name: "value",
-          type: "array",
-          description: "The new value",
-        },
-      ],
-    }),
-    onValueCommit: Prop.eventHandler().propertiesPanel({
-      label: "onValueCommit",
-      description:
-        "Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service",
-      computedArgs: [
-        {
-          name: "value",
-          type: "array",
-          description: "The new value",
-        },
-      ],
-    }),
+    onValueChange: Prop.eventHandler(),
+    onValueCommit: Prop.eventHandler(),
   }),
 };
 

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

@@ -40,45 +40,18 @@ const propertiesDefinition: PropertiesPanelDefinition<
   React.ComponentProps<typeof SwitchPrimitives.Root>
 > = {
   general: Section.category(PropsCategory.Content).children({
-    checked: Prop.boolean().propertiesPanel({
-      label: "Checked",
-      controlType: "SWITCH",
-      description:
-        "The controlled state of the switch. Must be used in conjunction with `onCheckedChange`",
-      isRemovable: true,
-      visibility: "SHOW_NAME",
+    checked: Prop.boolean(),
+    defaultChecked: Prop.boolean().docs({
+      description: "Use when you do not need to control its pressed state",
     }),
-    defaultChecked: Prop.boolean()
-      .propertiesPanel({
-        label: "Default checked",
-        controlType: "SWITCH",
-        description: "Whether the switch is checked by default",
-      })
-      .docs({
-        description: "Use when you do not need to control its pressed state",
-      }),
   }),
 
   interaction: Section.category(PropsCategory.Interaction).children({
-    disabled: Prop.boolean().propertiesPanel({
-      label: "Disabled",
-      controlType: "SWITCH",
-      description: "Whether the switch is disabled",
-    }),
+    disabled: Prop.boolean(),
   }),
 
   events: Section.category(PropsCategory.EventHandlers).children({
-    onCheckedChange: Prop.eventHandler().propertiesPanel({
-      label: "onChange",
-      description: "Triggered when the switch checked state changes",
-      computedArgs: [
-        {
-          name: "checked",
-          type: "boolean",
-          description: "Whether the switch is checked",
-        },
-      ],
-    }),
+    onCheckedChange: Prop.eventHandler(),
   }),
 };