/*
 Prose UI v1.6 - Builder.io Registration
 https://proseui.com
 
 Setup:
   1. Download prs-react_v1.6.jsx and place it alongside this file
   2. Add the CDN_URLS stylesheets to Builder.io > Site Settings > Custom Head
   3. Call registerAll() once in your Builder.io SDK setup
 
 @see https://www.builder.io/c/docs/custom-components-intro
 */

import { Builder } from '@builder.io/sdk-react';

// -----------------------------------------------------------------------------
// COMPONENT IMPORTS
// -----------------------------------------------------------------------------
import { Accordion, AccordionItem } from './prs-react_v1.6.jsx';
import { Alert } from './prs-react_v1.6.jsx';
import { Attachment } from './prs-react_v1.6.jsx';
import { Avatar } from './prs-react_v1.6.jsx';
import { Badge } from './prs-react_v1.6.jsx';
import { Breadcrumb } from './prs-react_v1.6.jsx';
import { Button } from './prs-react_v1.6.jsx';
import { Card } from './prs-react_v1.6.jsx';
import { Chat } from './prs-react_v1.6.jsx';
import { Checkbox } from './prs-react_v1.6.jsx';
import { Chip } from './prs-react_v1.6.jsx';
import { Calendar, CalendarWeek, CalendarDay } from './prs-react_v1.6.jsx';
import { Dialog } from './prs-react_v1.6.jsx';
import { Dropdown, DropdownButton, DropdownMenu } from './prs-react_v1.6.jsx';
import { File } from './prs-react_v1.6.jsx';
import { FormControl } from './prs-react_v1.6.jsx';
import { Input } from './prs-react_v1.6.jsx';
import { Join } from './prs-react_v1.6.jsx';
import { Loading } from './prs-react_v1.6.jsx';
import { Menu } from './prs-react_v1.6.jsx';
import { Message } from './prs-react_v1.6.jsx';
import { Pagination } from './prs-react_v1.6.jsx';
import { Progress, ProgressRadial } from './prs-react_v1.6.jsx';
import { Radio } from './prs-react_v1.6.jsx';
import { Range } from './prs-react_v1.6.jsx';
import { Select } from './prs-react_v1.6.jsx';
import { Separator } from './prs-react_v1.6.jsx';
import { Skeleton } from './prs-react_v1.6.jsx';
import { Tabs, Tab } from './prs-react_v1.6.jsx';
import { Table } from './prs-react_v1.6.jsx';
import { Textarea } from './prs-react_v1.6.jsx';
import { Toggle } from './prs-react_v1.6.jsx';
import { Tooltip } from './prs-react_v1.6.jsx';

// -----------------------------------------------------------------------------
// CDN STYLESHEETS - paste these as <link> tags in Builder.io > Site Settings > Custom Head
// -----------------------------------------------------------------------------

export const CDN_URLS = [
  'https://cdn.jsdelivr.net/gh/prose-ui/prose-ui@latest/tokens.css',
  'https://cdn.jsdelivr.net/gh/prose-ui/prose-ui@latest/styles.css',
  'https://cdn.jsdelivr.net/gh/prose-ui/prose-ui@latest/typography.css',
];

// -----------------------------------------------------------------------------
// DESIGN TOKENS
// -----------------------------------------------------------------------------

export const designTokens = {

  colors: [
    { name: "Black", value: "var(--prs-c-black)" },
    { name: "White", value: "var(--prs-c-white)" },
    { name: "Primary 50", value: "var(--prs-c-primary-50)" },
    { name: "Primary 100", value: "var(--prs-c-primary-100)" },
    { name: "Primary 200", value: "var(--prs-c-primary-200)" },
    { name: "Primary 300", value: "var(--prs-c-primary-300)" },
    { name: "Primary 400", value: "var(--prs-c-primary-400)" },
    { name: "Primary 500", value: "var(--prs-c-primary-500)" },
    { name: "Primary 600", value: "var(--prs-c-primary-600)" },
    { name: "Primary 700", value: "var(--prs-c-primary-700)" },
    { name: "Primary 800", value: "var(--prs-c-primary-800)" },
    { name: "Primary 900", value: "var(--prs-c-primary-900)" },
    { name: "Primary 950", value: "var(--prs-c-primary-950)" },
    { name: "Secondary 50", value: "var(--prs-c-secondary-50)" },
    { name: "Secondary 100", value: "var(--prs-c-secondary-100)" },
    { name: "Secondary 200", value: "var(--prs-c-secondary-200)" },
    { name: "Secondary 300", value: "var(--prs-c-secondary-300)" },
    { name: "Secondary 400", value: "var(--prs-c-secondary-400)" },
    { name: "Secondary 500", value: "var(--prs-c-secondary-500)" },
    { name: "Secondary 600", value: "var(--prs-c-secondary-600)" },
    { name: "Secondary 700", value: "var(--prs-c-secondary-700)" },
    { name: "Secondary 800", value: "var(--prs-c-secondary-800)" },
    { name: "Secondary 900", value: "var(--prs-c-secondary-900)" },
    { name: "Secondary 950", value: "var(--prs-c-secondary-950)" },
    { name: "Accent 50", value: "var(--prs-c-accent-50)" },
    { name: "Accent 100", value: "var(--prs-c-accent-100)" },
    { name: "Accent 200", value: "var(--prs-c-accent-200)" },
    { name: "Accent 300", value: "var(--prs-c-accent-300)" },
    { name: "Accent 400", value: "var(--prs-c-accent-400)" },
    { name: "Accent 500", value: "var(--prs-c-accent-500)" },
    { name: "Accent 600", value: "var(--prs-c-accent-600)" },
    { name: "Accent 700", value: "var(--prs-c-accent-700)" },
    { name: "Accent 800", value: "var(--prs-c-accent-800)" },
    { name: "Accent 900", value: "var(--prs-c-accent-900)" },
    { name: "Accent 950", value: "var(--prs-c-accent-950)" },
    { name: "Gray 50", value: "var(--prs-c-gray-50)" },
    { name: "Gray 100", value: "var(--prs-c-gray-100)" },
    { name: "Gray 200", value: "var(--prs-c-gray-200)" },
    { name: "Gray 300", value: "var(--prs-c-gray-300)" },
    { name: "Gray 400", value: "var(--prs-c-gray-400)" },
    { name: "Gray 500", value: "var(--prs-c-gray-500)" },
    { name: "Gray 600", value: "var(--prs-c-gray-600)" },
    { name: "Gray 700", value: "var(--prs-c-gray-700)" },
    { name: "Gray 800", value: "var(--prs-c-gray-800)" },
    { name: "Gray 900", value: "var(--prs-c-gray-900)" },
    { name: "Gray 950", value: "var(--prs-c-gray-950)" },
    { name: "Info 50", value: "var(--prs-c-info-50)" },
    { name: "Info 100", value: "var(--prs-c-info-100)" },
    { name: "Info 200", value: "var(--prs-c-info-200)" },
    { name: "Info 300", value: "var(--prs-c-info-300)" },
    { name: "Info 400", value: "var(--prs-c-info-400)" },
    { name: "Info 500", value: "var(--prs-c-info-500)" },
    { name: "Info 600", value: "var(--prs-c-info-600)" },
    { name: "Info 700", value: "var(--prs-c-info-700)" },
    { name: "Info 800", value: "var(--prs-c-info-800)" },
    { name: "Info 900", value: "var(--prs-c-info-900)" },
    { name: "Info 950", value: "var(--prs-c-info-950)" },
    { name: "Warning 50", value: "var(--prs-c-warning-50)" },
    { name: "Warning 100", value: "var(--prs-c-warning-100)" },
    { name: "Warning 200", value: "var(--prs-c-warning-200)" },
    { name: "Warning 300", value: "var(--prs-c-warning-300)" },
    { name: "Warning 400", value: "var(--prs-c-warning-400)" },
    { name: "Warning 500", value: "var(--prs-c-warning-500)" },
    { name: "Warning 600", value: "var(--prs-c-warning-600)" },
    { name: "Warning 700", value: "var(--prs-c-warning-700)" },
    { name: "Warning 800", value: "var(--prs-c-warning-800)" },
    { name: "Warning 900", value: "var(--prs-c-warning-900)" },
    { name: "Warning 950", value: "var(--prs-c-warning-950)" },
    { name: "Success 50", value: "var(--prs-c-success-50)" },
    { name: "Success 100", value: "var(--prs-c-success-100)" },
    { name: "Success 200", value: "var(--prs-c-success-200)" },
    { name: "Success 300", value: "var(--prs-c-success-300)" },
    { name: "Success 400", value: "var(--prs-c-success-400)" },
    { name: "Success 500", value: "var(--prs-c-success-500)" },
    { name: "Success 600", value: "var(--prs-c-success-600)" },
    { name: "Success 700", value: "var(--prs-c-success-700)" },
    { name: "Success 800", value: "var(--prs-c-success-800)" },
    { name: "Success 900", value: "var(--prs-c-success-900)" },
    { name: "Success 950", value: "var(--prs-c-success-950)" },
    { name: "Danger 50", value: "var(--prs-c-danger-50)" },
    { name: "Danger 100", value: "var(--prs-c-danger-100)" },
    { name: "Danger 200", value: "var(--prs-c-danger-200)" },
    { name: "Danger 300", value: "var(--prs-c-danger-300)" },
    { name: "Danger 400", value: "var(--prs-c-danger-400)" },
    { name: "Danger 500", value: "var(--prs-c-danger-500)" },
    { name: "Danger 600", value: "var(--prs-c-danger-600)" },
    { name: "Danger 700", value: "var(--prs-c-danger-700)" },
    { name: "Danger 800", value: "var(--prs-c-danger-800)" },
    { name: "Danger 900", value: "var(--prs-c-danger-900)" },
    { name: "Danger 950", value: "var(--prs-c-danger-950)" },
  ],

  fontFamily: [
    { name: "Sans",     value: "var(--prs-ff-sans)" },
    { name: "Serif",    value: "var(--prs-ff-serif)" },
    { name: "Mono",     value: "var(--prs-ff-mono)" },
    { name: "Web Safe", value: "var(--prs-ff-websafe)" },
  ],

  fontSizes: [
    { name: "Base", value: "var(--prs-fz-base)" },
    { name: "Heading X-Large", value: "var(--prs-fz-heading-xl)" },
    { name: "Heading Large", value: "var(--prs-fz-heading-lg)" },
    { name: "Heading Medium", value: "var(--prs-fz-heading-md)" },
    { name: "Heading Small", value: "var(--prs-fz-heading-sm)" },
    { name: "Content Base", value: "var(--prs-fz-content)" },
    { name: "Content Footnote", value: "var(--prs-fz-content-footnote)" },
    { name: "UI Large", value: "var(--prs-fz-ui-lg)" },
    { name: "UI Medium", value: "var(--prs-fz-ui-md)" },
    { name: "UI Small", value: "var(--prs-fz-ui-sm)" },
    { name: "UI Subtext", value: "var(--prs-fz-ui-subtext)" },
    { name: "Button Large", value: "var(--prs-fz-button-lg)" },
    { name: "Button Medium", value: "var(--prs-fz-button-md)" },
    { name: "Button Small", value: "var(--prs-fz-button-sm)" },
  ],

  fontWeights: [
    { name: "Base", value: "var(--prs-fw-base)" },
    { name: "Heading X-Large", value: "var(--prs-fw-heading-xl)" },
    { name: "Heading Large", value: "var(--prs-fw-heading-lg)" },
    { name: "Heading Medium", value: "var(--prs-fw-heading-md)" },
    { name: "Heading Small", value: "var(--prs-fw-heading-sm)" },
    { name: "Content Base", value: "var(--prs-fw-content)" },
    { name: "Content Footnote", value: "var(--prs-fw-content-footnote)" },
    { name: "UI Large", value: "var(--prs-fw-ui-lg)" },
    { name: "UI Medium", value: "var(--prs-fw-ui-md)" },
    { name: "UI Small", value: "var(--prs-fw-ui-sm)" },
    { name: "UI Subtext", value: "var(--prs-fw-ui-subtext)" },
    { name: "Button Large", value: "var(--prs-fw-button-lg)" },
    { name: "Button Medium", value: "var(--prs-fw-button-md)" },
    { name: "Button Small", value: "var(--prs-fw-button-sm)" },
  ],

  lineHeights: [
    { name: "Base", value: "var(--prs-fl-base)" },
    { name: "Heading X-Large", value: "var(--prs-fl-heading-xl)" },
    { name: "Heading Large", value: "var(--prs-fl-heading-lg)" },
    { name: "Heading Medium", value: "var(--prs-fl-heading-md)" },
    { name: "Heading Small", value: "var(--prs-fl-heading-sm)" },
    { name: "Content Base", value: "var(--prs-fl-content)" },
    { name: "Content Footnote", value: "var(--prs-fl-content-footnote)" },
    { name: "UI Large", value: "var(--prs-fl-ui-lg)" },
    { name: "UI Medium", value: "var(--prs-fl-ui-md)" },
    { name: "UI Small", value: "var(--prs-fl-ui-sm)" },
    { name: "UI Subtext", value: "var(--prs-fl-ui-subtext)" },
    { name: "Button Large", value: "var(--prs-fl-button-lg)" },
    { name: "Button Medium", value: "var(--prs-fl-button-md)" },
    { name: "Button Small", value: "var(--prs-fl-button-sm)" },
  ],

  borderRadius: [
    { name: "Alert", value: "var(--prs-radius-alert)" },
    { name: "Badge", value: "var(--prs-radius-badge)" },
    { name: "Box", value: "var(--prs-radius-box)" },
    { name: "Btn", value: "var(--prs-radius-btn)" },
    { name: "Input", value: "var(--prs-radius-input)" },
  ],

  shadow: [
    { name: "SM", value: "var(--prs-shadow-sm)" },
    { name: "MD", value: "var(--prs-shadow-md)" },
    { name: "LG", value: "var(--prs-shadow-lg)" },
    { name: "XL", value: "var(--prs-shadow-xl)" },
    { name: "2XL", value: "var(--prs-shadow-2xl)" },
  ],

};

// -----------------------------------------------------------------------------
// COMPONENT REGISTRATIONS
// -----------------------------------------------------------------------------

export function registerComponents() {

  // Accordion
  Builder.registerComponent(Accordion, {
    name: "Accordion",
    description: "Vertically stacked list of items, each item can be expanded or collapsed to reveal the content associated with that item.",
    inputs: [
      {
        name: "symbol",
        friendlyName: "Symbol",
        type: 'string',
        enum: ["default","plus"],
        defaultValue: "default",
      },
      {
        name: "open",
        friendlyName: "Open",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "exclusive",
        friendlyName: "Exclusive",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "ghost",
        friendlyName: "Ghost",
        type: 'boolean',
        defaultValue: false,
      },
    ],
  });
  Builder.registerComponent(AccordionItem, {
    name: "AccordionItem",
  });

  // Alert
  Builder.registerComponent(Alert, {
    name: "Alert",
    description: "Message box that provides important information to the user, such as warnings, errors, or other notifications.",
    inputs: [
      {
        name: "variant",
        friendlyName: "Variant",
        type: 'string',
        enum: ["default","info","success","warning","danger","neutral"],
        defaultValue: "default",
      },
      {
        name: "ghost",
        friendlyName: "Ghost",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "withIcon",
        friendlyName: "With icon",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "withClose",
        friendlyName: "With close",
        type: 'boolean',
        defaultValue: false,
      },
    ],
  });

  // Attachment
  Builder.registerComponent(Attachment, {
    name: "Attachment",
    description: "Attached files to messages or file type input.",
    inputs: [
      {
        name: "name",
        friendlyName: "File name",
        type: 'string',
        defaultValue: "file_name.png",
      },
      {
        name: "extension",
        friendlyName: "Extension",
        type: 'string',
        defaultValue: "image/png",
      },
      {
        name: "thumbnail",
        friendlyName: "Thumbnail",
        type: 'boolean',
        defaultValue: true,
      },
      {
        name: "withRemove",
        friendlyName: "With remove",
        type: 'boolean',
        defaultValue: true,
      },
    ],
  });

  // Avatar
  Builder.registerComponent(Avatar, {
    name: "Avatar",
    description: "Used to show a thumbnail representation of an individual or business in the interface.",
    inputs: [
      {
        name: "variant",
        friendlyName: "Variant",
        type: 'string',
        enum: ["image","icon","initials"],
        defaultValue: "image",
      },
      {
        name: "size",
        friendlyName: "Size",
        type: 'string',
        enum: ["xs","sm","md","default","lg","xl","2xl"],
        defaultValue: "default",
      },
      {
        name: "status",
        friendlyName: "Status",
        type: 'boolean',
        defaultValue: false,
      },
    ],
  });

  // Badge
  Builder.registerComponent(Badge, {
    name: "Badge",
    description: "Small count or label that appears on another element, often used to display notifications or status information.",
    inputs: [
      {
        name: "text",
        friendlyName: "Text",
        type: 'string',
        defaultValue: "Badge",
      },
      {
        name: "variant",
        friendlyName: "Variant",
        type: 'string',
        enum: ["default","info","success","warning","danger","current"],
        defaultValue: "default",
      },
      {
        name: "shape",
        friendlyName: "Shape",
        type: 'string',
        enum: ["default","pill","sharp"],
        defaultValue: "default",
      },
    ],
  });

  // Breadcrumb
  Builder.registerComponent(Breadcrumb, {
    name: "Breadcrumb",
    description: "Navigation aid that helps users understand their location within a website's hierarchy and navigate back to previous sections.",
    inputs: [
      {
        name: "current",
        friendlyName: "Current",
        type: 'string',
        defaultValue: "Current",
      },
    ],
  });

  // Button
  Builder.registerComponent(Button, {
    name: "Button",
    description: "Interactive element that users can click to perform an action or navigate to another page.",
    inputs: [
      {
        name: "text",
        friendlyName: "Text",
        type: 'string',
        defaultValue: "Button",
      },
      {
        name: "withIcon",
        friendlyName: "With icon",
        type: 'string',
        enum: ["no icon","leading","trailing"],
        defaultValue: "no icon",
      },
      {
        name: "variant",
        friendlyName: "Variant",
        type: 'string',
        enum: ["primary","secondary","tertiary"],
        defaultValue: "primary",
      },
      {
        name: "color",
        friendlyName: "Color",
        type: 'string',
        enum: ["default","success","danger"],
        defaultValue: "default",
      },
      {
        name: "size",
        friendlyName: "Size",
        type: 'string',
        enum: ["default","sm","lg"],
        defaultValue: "default",
      },
      {
        name: "shape",
        friendlyName: "Shape",
        type: 'string',
        enum: ["default","square","circle"],
        defaultValue: "default",
      },
      {
        name: "state",
        friendlyName: "State",
        type: 'string',
        enum: ["default","hover","focus","disabled"],
        defaultValue: "default",
      },
    ],
  });

  // Card
  Builder.registerComponent(Card, {
    name: "Card",
    description: "Flexible and extensible content container with multiple variants and options.",
    inputs: [
      {
        name: "title",
        friendlyName: "Title",
        type: 'string',
        defaultValue: "Card header",
      },
      {
        name: "body",
        friendlyName: "Body",
        type: 'string',
        defaultValue: "Lorem ipsum",
      },
      {
        name: "bordered",
        friendlyName: "Bordered",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "action",
        friendlyName: "Actionable",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "collapse",
        friendlyName: "Collapsible",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "collapseIndent",
        friendlyName: "Collapsible Indent",
        type: 'boolean',
        defaultValue: false,
      },
    ],
  });

  // Chat
  Builder.registerComponent(Chat, {
    name: "Chat",
    description: "Used to show conversation and all its data, including the author image, author name, time, etc.",
    inputs: [
      {
        name: "message",
        friendlyName: "Message",
        type: 'string',
        defaultValue: "You were the chosen one...",
      },
      {
        name: "variant",
        friendlyName: "Variant",
        type: 'string',
        enum: ["default","primary","secondary","accent","info","success","warning","danger"],
        defaultValue: "default",
      },
      {
        name: "position",
        friendlyName: "Position",
        type: 'string',
        enum: ["start","end"],
        defaultValue: "start",
      },
      {
        name: "avatar",
        friendlyName: "Avatar",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "header",
        friendlyName: "Header",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "footer",
        friendlyName: "Footer",
        type: 'boolean',
        defaultValue: false,
      },
    ],
  });

  // Checkbox
  Builder.registerComponent(Checkbox, {
    name: "Checkbox",
    description: "Form element that allows users to select one or more options from a set.",
    inputs: [
      {
        name: "label",
        friendlyName: "Label",
        type: 'string',
        defaultValue: "Label",
      },
      {
        name: "size",
        friendlyName: "Size",
        type: 'string',
        enum: ["default","lg","xl"],
        defaultValue: "default",
      },
      {
        name: "checked",
        friendlyName: "Checked",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "indeterminate",
        friendlyName: "Indeterminate",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "state",
        friendlyName: "State",
        type: 'string',
        enum: ["default","focus","disabled"],
        defaultValue: "default",
      },
    ],
  });

  // Chip
  Builder.registerComponent(Chip, {
    name: "Chip",
    description: "Small, interactive element that represents an input, attribute, or action.",
    inputs: [
      {
        name: "text",
        friendlyName: "Text",
        type: 'string',
        defaultValue: "Text",
      },
      {
        name: "variant",
        friendlyName: "Variant",
        type: 'string',
        enum: ["default","active"],
        defaultValue: "default",
      },
      {
        name: "icon",
        friendlyName: "With icon",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "close",
        friendlyName: "With close",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "state",
        friendlyName: "State",
        type: 'string',
        enum: ["default","hover","focus"],
        defaultValue: "default",
      },
    ],
  });

  // Datepicker
  Builder.registerComponent(Calendar, {
    name: "Calendar",
    description: "Form element that allows users to select a date from a calendar interface.",
    inputs: [
    ],
  });
  Builder.registerComponent(CalendarWeek, {
    name: "CalendarWeek",
  });
  Builder.registerComponent(CalendarDay, {
    name: "CalendarDay",
  });

  // Dialog
  Builder.registerComponent(Dialog, {
    name: "Dialog",
    description: "Modal window that prompts the user to take an action or provides important information.",
    inputs: [
      {
        name: "title",
        friendlyName: "Title",
        type: 'string',
        defaultValue: "Dialog title",
      },
      {
        name: "body",
        friendlyName: "Body",
        type: 'string',
        defaultValue: "Lorem ipsum",
      },
      {
        name: "bordered",
        friendlyName: "Bordered",
        type: 'boolean',
        defaultValue: true,
      },
      {
        name: "withActions",
        friendlyName: "With actions",
        type: 'boolean',
        defaultValue: true,
      },
    ],
  });

  // Dropdown
  Builder.registerComponent(Dropdown, {
    name: "Dropdown",
    description: "Form-like element that allows users to select an option from a list of choices.",
    inputs: [
      {
        name: "ghost",
        friendlyName: "Ghost",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "size",
        friendlyName: "Size",
        type: 'string',
        enum: ["default","sm","lg"],
        defaultValue: "default",
      },
      {
        name: "state",
        friendlyName: "State",
        type: 'string',
        enum: ["default","hover","focus","disabled"],
        defaultValue: "default",
      },
      {
        name: "menu",
        friendlyName: "Show menu",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "position",
        friendlyName: "Menu position",
        type: 'string',
        enum: ["bottom","top","left","right"],
        defaultValue: "bottom",
      },
      {
        name: "align",
        friendlyName: "Menu alignment",
        type: 'string',
        enum: ["start","end","center"],
        defaultValue: "start",
      },
    ],
  });
  Builder.registerComponent(DropdownButton, {
    name: "DropdownButton",
  });
  Builder.registerComponent(DropdownMenu, {
    name: "DropdownMenu",
  });

  // File
  Builder.registerComponent(File, {
    name: "File",
    description: "Form field input type for uploading files to a web server.",
    inputs: [
      {
        name: "variant",
        friendlyName: "Variant",
        type: 'string',
        enum: ["default","ghost"],
        defaultValue: "default",
      },
      {
        name: "state",
        friendlyName: "State",
        type: 'string',
        enum: ["default","hover","focus","disabled"],
        defaultValue: "default",
      },
    ],
  });

  // Form Control
  Builder.registerComponent(FormControl, {
    name: "Form Control",
    description: "Label positions and fieldset group options.",
    inputs: [
      {
        name: "label",
        friendlyName: "Label",
        type: 'string',
        defaultValue: "Label",
      },
      {
        name: "input",
        friendlyName: "Input type",
        type: 'string',
        enum: ["text","select","textarea","checkboxes","radios","toggle"],
        defaultValue: "text",
      },
      {
        name: "showAlt",
        friendlyName: "Supplementary labels",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "showValidated",
        friendlyName: "Show validation",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "column",
        friendlyName: "Column layout",
        type: 'boolean',
        defaultValue: false,
      },
    ],
  });

  // Input
  Builder.registerComponent(Input, {
    name: "Input",
    description: "Form element that allows users to input and edit text or data into a website page.",
    inputs: [
      {
        name: "value",
        friendlyName: "Value",
        type: 'string',
        defaultValue: "",
      },
      {
        name: "placeholder",
        friendlyName: "Placeholder",
        type: 'string',
        defaultValue: "",
      },
      {
        name: "type",
        friendlyName: "Input Type",
        type: 'string',
        enum: ["text","number","date","textarea","select","file"],
        defaultValue: "text",
      },
      {
        name: "invalid",
        friendlyName: "Invalid",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "variant",
        friendlyName: "Variant",
        type: 'string',
        enum: ["default","ghost"],
        defaultValue: "default",
      },
      {
        name: "state",
        friendlyName: "State",
        type: 'string',
        enum: ["default","focus","disabled"],
        defaultValue: "default",
      },
    ],
  });

  // Join
  Builder.registerComponent(Join, {
    name: "Join",
    description: "A utility that allows you to join two or more elements together. This looks best when the items have borders or background colors.",
    inputs: [
      {
        name: "orientation",
        friendlyName: "Orientation",
        type: 'string',
        enum: ["horizontal","vertical"],
        defaultValue: "horizontal",
      },
      {
        name: "complex",
        friendlyName: "Complex example",
        type: 'boolean',
        defaultValue: false,
      },
    ],
  });

  // Loading
  Builder.registerComponent(Loading, {
    name: "Loading",
    description: "Page or container loading indicators.",
    inputs: [
      {
        name: "size",
        friendlyName: "Size",
        type: 'string',
        enum: ["xs","sm","md","lg","xl"],
        defaultValue: "md",
      },
      {
        name: "reverse",
        friendlyName: "Reverse",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "motionsafe",
        friendlyName: "Force motion-safe",
        type: 'boolean',
        defaultValue: false,
      },
    ],
  });

  // Menu
  Builder.registerComponent(Menu, {
    name: "Menu",
    description: "List of links displayed vertically. For use with Dropdowns and popovers.",
    inputs: [
      {
        name: "search",
        friendlyName: "Search",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "leading",
        friendlyName: "Leading element",
        type: 'string',
        enum: ["none","icon","checkbox"],
        defaultValue: "none",
      },
      {
        name: "small",
        friendlyName: "Small",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "selected",
        friendlyName: "Selected",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "state",
        friendlyName: "State",
        type: 'string',
        enum: ["default","hover","focus","disabled"],
        defaultValue: "default",
      },
    ],
  });

  // Message
  Builder.registerComponent(Message, {
    name: "Message",
    description: "Allows users to enter a message or request for an AI system to process and respond to.",
    inputs: [
      {
        name: "message",
        friendlyName: "Message",
        type: 'string',
        defaultValue: "",
      },
      {
        name: "withAttachments",
        friendlyName: "With attachments",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "state",
        friendlyName: "State",
        type: 'string',
        enum: ["default","hover","focus","disabled"],
        defaultValue: "default",
      },
    ],
  });

  // Pagination
  Builder.registerComponent(Pagination, {
    name: "Pagination",
    description: "Navigation aid that divides content into discrete pages, allowing users to navigate through large sets of data.",
    inputs: [
    ],
  });

  // Progress
  Builder.registerComponent(Progress, {
    name: "Progress",
    description: "Visually represents the completion status of a task, process, or page load status.",
    inputs: [
      {
        name: "label",
        friendlyName: "Label",
        type: 'string',
        defaultValue: "Label",
      },
      {
        name: "value",
        friendlyName: "Value",
        type: 'number',
        min: 0,
        max: 100,
        defaultValue: 50,
      },
      {
        name: "showValue",
        friendlyName: "Show value",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "variant",
        friendlyName: "Variant",
        type: 'string',
        enum: ["default","secondary","accent","info","success","warning","danger","neutral"],
        defaultValue: "default",
      },
      {
        name: "radial",
        friendlyName: "Radial",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "indeterminate",
        friendlyName: "Indeterminate",
        type: 'boolean',
        defaultValue: false,
      },
    ],
  });
  Builder.registerComponent(ProgressRadial, {
    name: "ProgressRadial",
  });

  // Radio
  Builder.registerComponent(Radio, {
    name: "Radio",
    description: "Form element that allows users to select one option from a group of choices.",
    inputs: [
      {
        name: "label",
        friendlyName: "Label",
        type: 'string',
        defaultValue: "Label",
      },
      {
        name: "size",
        friendlyName: "Size",
        type: 'string',
        enum: ["default","lg","xl"],
        defaultValue: "default",
      },
      {
        name: "checked",
        friendlyName: "Checked",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "state",
        friendlyName: "State",
        type: 'string',
        enum: ["default","focus","disabled"],
        defaultValue: "default",
      },
    ],
  });

  // Range
  Builder.registerComponent(Range, {
    name: "Range",
    description: "A range input allows users to select a value from a specified range.",
    inputs: [
      {
        name: "label",
        friendlyName: "Label",
        type: 'string',
        defaultValue: "Label",
      },
      {
        name: "value",
        friendlyName: "Value",
        type: 'number',
        min: 0,
        max: 100,
        defaultValue: 25,
      },
      {
        name: "showValue",
        friendlyName: "Show value",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "variant",
        friendlyName: "Variant",
        type: 'string',
        enum: ["default","secondary","accent","info","success","warning","danger"],
        defaultValue: "default",
      },
      {
        name: "state",
        friendlyName: "State",
        type: 'string',
        enum: ["default","focus","disabled"],
        defaultValue: "default",
      },
    ],
  });

  // Select
  Builder.registerComponent(Select, {
    name: "Select",
    description: "Form element that allows users to to pick a value from a list of options.",
    inputs: [
      {
        name: "variant",
        friendlyName: "Variant",
        type: 'string',
        enum: ["default","ghost"],
        defaultValue: "default",
      },
      {
        name: "state",
        friendlyName: "State",
        type: 'string',
        enum: ["default","focus","disabled"],
        defaultValue: "default",
      },
    ],
  });

  // Separator
  Builder.registerComponent(Separator, {
    name: "Separator",
    description: "A visual way to separate sections of content or elements either horizontally or vertically.",
    inputs: [
      {
        name: "text",
        friendlyName: "Text",
        type: 'string',
        defaultValue: "Separator",
      },
      {
        name: "orientation",
        friendlyName: "Orientation",
        type: 'string',
        enum: ["horizontal","vertical"],
        defaultValue: "horizontal",
      },
      {
        name: "position",
        friendlyName: "Position",
        type: 'string',
        enum: ["default","start","end"],
        defaultValue: "default",
      },
    ],
  });

  // Skeleton
  Builder.registerComponent(Skeleton, {
    name: "Skeleton",
    description: "A faux UI to indicate the loading state of a component or UI Block.",
    inputs: [
      {
        name: "width",
        friendlyName: "Width",
        type: 'number',
        min: 0,
        max: 10,
        defaultValue: 3,
      },
      {
        name: "height",
        friendlyName: "Height",
        type: 'number',
        min: 0,
        max: 10,
        defaultValue: 3,
      },
      {
        name: "radius",
        friendlyName: "Corner radius",
        type: 'number',
        min: 0,
        max: 80,
        defaultValue: 10,
      },
      {
        name: "background",
        friendlyName: "Background color",
        type: 'string',
        defaultValue: "var(--prs-c-gray-950)",
      },
      {
        name: "foreground",
        friendlyName: "Foreground",
        type: 'string',
        defaultValue: "var(--prs-c-white)",
      },
      {
        name: "real",
        friendlyName: "Real example",
        type: 'boolean',
        defaultValue: false,
      },
    ],
  });

  // Tab
  Builder.registerComponent(Tabs, {
    name: "Tabs",
    description: "Navigation aid that allows users to switch between different sections or views within the same page.",
    inputs: [
      {
        name: "active",
        friendlyName: "Active",
        type: 'boolean',
        defaultValue: true,
      },
      {
        name: "center",
        friendlyName: "Centered",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "withBadge",
        friendlyName: "With badge",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "state",
        friendlyName: "State",
        type: 'string',
        enum: ["default","hover","focus","disabled"],
        defaultValue: "default",
      },
    ],
  });
  Builder.registerComponent(Tab, {
    name: "Tab",
  });

  // Table
  Builder.registerComponent(Table, {
    name: "Table",
    description: "Element that displays tabular data in a structured format of rows and columns.",
    inputs: [
      {
        name: "bordered",
        friendlyName: "Bordered",
        type: 'boolean',
        defaultValue: true,
      },
      {
        name: "fixed",
        friendlyName: "Fixed",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "striped",
        friendlyName: "Striped",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "compact",
        friendlyName: "Compact",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "subLabel",
        friendlyName: "Show sub header",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "subData",
        friendlyName: "Show sub data",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "end",
        friendlyName: "End alignment",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "pinRows",
        friendlyName: "Pin rows",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "pinCols",
        friendlyName: "Pin columns",
        type: 'boolean',
        defaultValue: false,
      },
    ],
  });

  // Textarea
  Builder.registerComponent(Textarea, {
    name: "Textarea",
    description: "Form element that allows users to input and edit text or data into a website page.",
    inputs: [
      {
        name: "value",
        friendlyName: "Value",
        type: 'string',
        defaultValue: "",
      },
      {
        name: "placeholder",
        friendlyName: "Placeholder",
        type: 'string',
        defaultValue: "Textarea",
      },
      {
        name: "variant",
        friendlyName: "Variant",
        type: 'string',
        enum: ["default","ghost"],
        defaultValue: "default",
      },
      {
        name: "state",
        friendlyName: "State",
        type: 'string',
        enum: ["default","focus","disabled"],
        defaultValue: "default",
      },
    ],
  });

  // Toggle
  Builder.registerComponent(Toggle, {
    name: "Toggle",
    description: "Form element that allows users to switch between two states, such as on and off.",
    inputs: [
      {
        name: "label",
        friendlyName: "Label",
        type: 'string',
        defaultValue: "Label",
      },
      {
        name: "trailingLabel",
        friendlyName: "Trailing label",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "variant",
        friendlyName: "Variant",
        type: 'string',
        enum: ["default","secondary","accent","info","success","warning","danger","neutral"],
        defaultValue: "default",
      },
      {
        name: "icon",
        friendlyName: "Icon mode",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "small",
        friendlyName: "Small",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "checked",
        friendlyName: "Checked",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "indeterminate",
        friendlyName: "Indeterminate",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "state",
        friendlyName: "State",
        type: 'string',
        enum: ["default","focus","disabled"],
        defaultValue: "default",
      },
    ],
  });

  // Tooltip
  Builder.registerComponent(Tooltip, {
    name: "Tooltip",
    description: "Small pop-up element that provides additional information when users hover or focus on an element.",
    inputs: [
      {
        name: "text",
        friendlyName: "Text",
        type: 'string',
        defaultValue: "Tooltip",
      },
      {
        name: "position",
        friendlyName: "Position",
        type: 'string',
        enum: ["top","bottom","left","right"],
        defaultValue: "top",
      },
      {
        name: "open",
        friendlyName: "Open",
        type: 'boolean',
        defaultValue: false,
      },
      {
        name: "embed",
        friendlyName: "Embed HTML",
        type: 'boolean',
        defaultValue: false,
      },
    ],
  });
}

// -----------------------------------------------------------------------------
// REGISTRATION HELPERS
// -----------------------------------------------------------------------------

export function registerDesignTokens() {
  Builder.register('editor.settings', { designTokens });
}

export function registerAll() {
  registerDesignTokens();
  registerComponents();
}