From cb7d0b83a816fbe9fa15ea8ee1e03c4b05a0be81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?= <71827178+bosiraphael@users.noreply.github.com> Date: Thu, 12 Feb 2026 12:48:16 +0100 Subject: [PATCH] [FRONT COMPONENTS] Twenty UI elements generation (#17866) ## PR description This PR: - Creates a TypeScript-based extractor that discovers all exported twenty-ui components by scanning barrel files, extracting props/slots/events via ts-morph type analysis, and generating the remote DOM bindings automatically. - Adds a new ESLint rule which enforces all *Props types in twenty-ui components to be exported, which is required for the extractor to discover component prop types. Existing twenty-ui components are updated to comply with this rule. - Extends the remote DOM generation to support slots, per-component events, forwardRef wrappers, and richer property types (array, object, function) ## Edge cases to fix in another PR - Icons cannot be rendered inside buttons - IconButtons throw an error when mounted - MenuItems are not displayed correctly - MenuItemNavigate throws on click ## Video Demo https://github.com/user-attachments/assets/c2ed67cf-6a15-4896-9fec-e83fac0e862b --- packages/twenty-eslint-rules/index.ts | 5 + .../rules/export-component-props.spec.ts | 119 + .../rules/export-component-props.ts | 99 + packages/twenty-sdk/project.json | 19 +- ...nts.ts => generate-remote-dom-elements.ts} | 88 +- .../generators/host-registry.generator.ts | 94 +- .../generators/remote-components.generator.ts | 5 +- .../generators/remote-elements.generator.ts | 74 +- .../scripts/remote-dom/generators/schemas.ts | 20 +- .../generators/utils/event-to-react-prop.ts | 3 - .../remote-dom/generators/utils/index.ts | 5 +- .../utils/schema-type-to-constructor.ts | 3 + .../generators/utils/schema-type-to-ts.ts | 3 + .../constants/ReactPropToDomEvent.ts | 9 + .../TwentyUiComponentCategoriesToScan.ts | 9 + .../constants/TwentyUiRootPath.ts | 8 + .../twenty-ui-extractor/constants/index.ts | 3 + .../extract-all-components-from-twenty-ui.ts | 153 + .../remote-dom/twenty-ui-extractor/index.ts | 4 + ...mponent-props-for-remote-dom-generation.ts | 65 + .../does-component-support-ref-forwarding.ts | 16 + ...twenty-ui-component-category-index-path.ts | 9 + .../twenty-ui-extractor/utils/index.ts | 6 + .../utils/is-dom-event-handler.ts | 57 + .../utils/is-react-component-export.ts | 28 + .../utils/is-react-element-type.ts | 24 + .../utils/log-discovered-components.ts | 63 + .../utils/map-type-to-property-schema.ts | 75 + .../utils/should-skip-export.ts | 31 + .../utils/type-symbol-matches-any-name.ts | 27 + .../scripts/remote-dom/utils/logger.ts | 135 + .../host/generated/host-component-registry.ts | 1560 +++- .../remote/generated/remote-components.ts | 1480 ++-- .../remote/generated/remote-elements.ts | 6833 ++++++++++++++++- .../front-component/types/PropertySchema.ts | 2 +- .../AllowedUiComponents.ts | 26 - .../src/sdk/front-component-common/index.ts | 2 - packages/twenty-sdk/src/sdk/index.ts | 2 - packages/twenty-sdk/tsconfig.json | 1 + packages/twenty-sdk/vite.config.ts | 33 +- .../test/integration/graphql/codegen/index.ts | 8 +- packages/twenty-shared/src/utils/index.ts | 1 + .../strings/__tests__/pascalToKebab.test.ts | 27 + .../twenty-shared/src/utils/strings/index.ts | 1 + .../src/utils/strings/pascalToKebab.ts | 6 + packages/twenty-ui/eslint.config.mjs | 22 + .../twenty-ui/src/components/Pill/Pill.tsx | 2 +- packages/twenty-ui/src/components/index.ts | 3 +- packages/twenty-ui/src/components/tag/Tag.tsx | 2 +- .../src/display/banner/components/Banner.tsx | 2 +- .../command-block/components/CommandBlock.tsx | 2 +- .../icon/components/IconAddressBook.tsx | 2 +- .../components/IconChartBarHorizontal.tsx | 2 +- .../src/display/icon/components/IconGmail.tsx | 2 +- .../display/icon/components/IconGoogle.tsx | 2 +- .../icon/components/IconGoogleCalendar.tsx | 2 +- .../src/display/icon/components/IconLock.tsx | 2 +- .../display/icon/components/IconMicrosoft.tsx | 2 +- .../icon/components/IconMicrosoftCalendar.tsx | 2 +- .../icon/components/IconMicrosoftOutlook.tsx | 2 +- .../icon/components/IconRelationManyToOne.tsx | 5 +- .../display/icon/components/IconTrashXOff.tsx | 2 +- .../icon/components/IconTwentyStar.tsx | 2 +- .../icon/components/IconTwentyStarFilled.tsx | 5 +- .../icon/components/IllustrationIconArray.tsx | 2 +- .../IllustrationIconCalendarEvent.tsx | 5 +- .../IllustrationIconCalendarTime.tsx | 5 +- .../components/IllustrationIconCurrency.tsx | 2 +- .../icon/components/IllustrationIconFile.tsx | 2 +- .../icon/components/IllustrationIconJson.tsx | 2 +- .../icon/components/IllustrationIconLink.tsx | 2 +- .../icon/components/IllustrationIconMail.tsx | 2 +- .../components/IllustrationIconManyToMany.tsx | 2 +- .../icon/components/IllustrationIconMap.tsx | 2 +- .../components/IllustrationIconNumbers.tsx | 2 +- .../components/IllustrationIconOneToMany.tsx | 2 +- .../components/IllustrationIconOneToOne.tsx | 2 +- .../icon/components/IllustrationIconPhone.tsx | 2 +- .../components/IllustrationIconSetting.tsx | 2 +- .../icon/components/IllustrationIconStar.tsx | 2 +- .../icon/components/IllustrationIconTag.tsx | 2 +- .../icon/components/IllustrationIconTags.tsx | 2 +- .../icon/components/IllustrationIconText.tsx | 2 +- .../components/IllustrationIconToggle.tsx | 2 +- .../icon/components/IllustrationIconUid.tsx | 2 +- .../icon/components/IllustrationIconUser.tsx | 2 +- .../display/icon/providers/IconsProvider.tsx | 2 +- packages/twenty-ui/src/display/index.ts | 46 +- .../src/display/status/components/Status.tsx | 2 +- .../text/components/HorizontalSeparator.tsx | 2 +- .../tooltip/OverflowingTextWithTooltip.tsx | 2 +- .../display/typography/components/H1Title.tsx | 2 +- .../display/typography/components/H2Title.tsx | 2 +- .../display/typography/components/H3Title.tsx | 2 +- .../typography/components/StyledText.tsx | 2 +- packages/twenty-ui/src/feedback/index.ts | 2 + .../src/feedback/loader/components/Loader.tsx | 2 +- .../components/CircularProgressBar.tsx | 2 +- .../components/Button/internal/ButtonSoon.tsx | 2 +- .../button/components/ColorPickerButton.tsx | 2 +- .../input/button/components/MainButton.tsx | 4 +- .../button/components/RoundedIconButton.tsx | 2 +- .../button/components/TabButton/TabButton.tsx | 2 +- .../code-editor/components/CodeEditor.tsx | 2 +- .../src/input/components/CardPicker.tsx | 2 +- .../src/input/components/Checkbox.tsx | 4 +- .../src/input/components/IconListViewGrip.tsx | 2 +- .../src/input/components/RadioGroup.tsx | 2 +- packages/twenty-ui/src/input/index.ts | 18 +- .../AnimatedExpandableContainer.tsx | 2 +- .../components/AnimatedPlaceholder.tsx | 2 +- packages/twenty-ui/src/layout/index.ts | 7 +- .../src/layout/section/components/Section.tsx | 2 +- packages/twenty-ui/src/navigation/index.ts | 23 +- .../components/AdvancedSettingsToggle.tsx | 2 +- .../link/components/ClickToActionLink.tsx | 2 +- .../link/components/ContactLink.tsx | 2 +- .../link/components/GithubVersionLink.tsx | 2 +- .../navigation/link/components/RawLink.tsx | 2 +- .../link/components/RoundedLink.tsx | 2 +- .../navigation/link/components/SocialLink.tsx | 2 +- .../link/components/UndecoratedLink.tsx | 2 +- .../components/MenuItemMultiSelect.tsx | 2 +- .../components/MenuItemMultiSelectAvatar.tsx | 2 +- .../components/MenuItemMultiSelectTag.tsx | 2 +- .../menu-item/components/MenuItemSelect.tsx | 2 +- .../components/MenuItemSelectAvatar.tsx | 2 +- .../components/MenuItemSelectColor.tsx | 2 +- .../components/MenuItemSelectTag.tsx | 2 +- .../components/MenuItemLeftContent.tsx | 2 +- .../components/NavigationBar.tsx | 2 +- .../components/NavigationBarItem.tsx | 2 +- .../components/NotificationCounter.tsx | 2 +- 133 files changed, 10556 insertions(+), 984 deletions(-) create mode 100644 packages/twenty-eslint-rules/rules/export-component-props.spec.ts create mode 100644 packages/twenty-eslint-rules/rules/export-component-props.ts rename packages/twenty-sdk/scripts/remote-dom/{generateRemoteDomElements.ts => generate-remote-dom-elements.ts} (71%) delete mode 100644 packages/twenty-sdk/scripts/remote-dom/generators/utils/event-to-react-prop.ts create mode 100644 packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/constants/ReactPropToDomEvent.ts create mode 100644 packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/constants/TwentyUiComponentCategoriesToScan.ts create mode 100644 packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/constants/TwentyUiRootPath.ts create mode 100644 packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/constants/index.ts create mode 100644 packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/extract-all-components-from-twenty-ui.ts create mode 100644 packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/index.ts create mode 100644 packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/classify-component-props-for-remote-dom-generation.ts create mode 100644 packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/does-component-support-ref-forwarding.ts create mode 100644 packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/get-twenty-ui-component-category-index-path.ts create mode 100644 packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/index.ts create mode 100644 packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/is-dom-event-handler.ts create mode 100644 packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/is-react-component-export.ts create mode 100644 packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/is-react-element-type.ts create mode 100644 packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/log-discovered-components.ts create mode 100644 packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/map-type-to-property-schema.ts create mode 100644 packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/should-skip-export.ts create mode 100644 packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/type-symbol-matches-any-name.ts create mode 100644 packages/twenty-sdk/scripts/remote-dom/utils/logger.ts delete mode 100644 packages/twenty-sdk/src/sdk/front-component-common/AllowedUiComponents.ts create mode 100644 packages/twenty-shared/src/utils/strings/__tests__/pascalToKebab.test.ts create mode 100644 packages/twenty-shared/src/utils/strings/pascalToKebab.ts diff --git a/packages/twenty-eslint-rules/index.ts b/packages/twenty-eslint-rules/index.ts index e95e43de18..e752c66ec0 100644 --- a/packages/twenty-eslint-rules/index.ts +++ b/packages/twenty-eslint-rules/index.ts @@ -6,6 +6,10 @@ import { rule as effectComponents, RULE_NAME as effectComponentsName, } from './rules/effect-components'; +import { + rule as exportComponentProps, + RULE_NAME as exportComponentPropsName, +} from './rules/export-component-props'; import { rule as explicitBooleanPredicatesInIf, RULE_NAME as explicitBooleanPredicatesInIfName, @@ -95,6 +99,7 @@ module.exports = { rules: { [componentPropsNamingName]: componentPropsNaming, [effectComponentsName]: effectComponents, + [exportComponentPropsName]: exportComponentProps, [matchingStateVariableName]: matchingStateVariable, [noHardcodedColorsName]: noHardcodedColors, [noStateUserefName]: noStateUseref, diff --git a/packages/twenty-eslint-rules/rules/export-component-props.spec.ts b/packages/twenty-eslint-rules/rules/export-component-props.spec.ts new file mode 100644 index 0000000000..45fe93570e --- /dev/null +++ b/packages/twenty-eslint-rules/rules/export-component-props.spec.ts @@ -0,0 +1,119 @@ +/** + * @jest-environment node + */ +import { RuleTester } from 'eslint'; + +import { rule, RULE_NAME } from './export-component-props'; + +const typescriptParser = require('@typescript-eslint/parser'); + +const ruleTester = new RuleTester({ + languageOptions: { + parser: typescriptParser, + parserOptions: { + ecmaFeatures: { + jsx: true, + }, + }, + }, +}); + +ruleTester.run(RULE_NAME, rule as any, { + valid: [ + { + name: 'Props type is already exported', + code: ` + export type MyComponentProps = { label: string }; + `, + }, + { + name: 'Props interface is already exported', + code: ` + export interface MyComponentProps { label: string } + `, + }, + { + name: 'Type that doesn\'t end with Props is ignored', + code: ` + type MyComponentOptions = { flag: boolean }; + `, + }, + { + name: 'Interface that doesn\'t end with Props is ignored', + code: ` + interface MyComponentConfig { flag: boolean } + `, + }, + { + name: 'Props re-exported via export { FooProps } is treated as exported', + code: ` + type MyComponentProps = { label: string }; + export { MyComponentProps }; + `, + }, + { + name: 'Non-Props type is not required to be exported', + code: ` + type InternalState = { count: number }; + `, + }, + ], + invalid: [ + { + name: 'Unexported Props type alias', + code: ` + type MyComponentProps = { label: string }; + `, + errors: [{ messageId: 'mustExportProps' }], + output: ` + export type MyComponentProps = { label: string }; + `, + }, + { + name: 'Unexported Props interface', + code: ` + interface MyComponentProps { label: string } + `, + errors: [{ messageId: 'mustExportProps' }], + output: ` + export interface MyComponentProps { label: string } + `, + }, + { + name: 'Unexported Props type used in a component', + code: ` + type MyComponentProps = { label: string }; + export const MyComponent = ({ label }: MyComponentProps) =>
{label}
; + `, + errors: [{ messageId: 'mustExportProps' }], + output: ` + export type MyComponentProps = { label: string }; + export const MyComponent = ({ label }: MyComponentProps) =>
{label}
; + `, + }, + { + name: 'Unexported Props type with non-exported component', + code: ` + type MyComponentProps = { label: string }; + const MyComponent = ({ label }: MyComponentProps) =>
{label}
; + `, + errors: [{ messageId: 'mustExportProps' }], + output: ` + export type MyComponentProps = { label: string }; + const MyComponent = ({ label }: MyComponentProps) =>
{label}
; + `, + }, + { + name: 'Unexported Props type defined after the component', + code: ` + export const MyComponent = ({ label }: MyComponentProps) =>
{label}
; + type MyComponentProps = { label: string }; + `, + errors: [{ messageId: 'mustExportProps' }], + output: ` + export const MyComponent = ({ label }: MyComponentProps) =>
{label}
; + export type MyComponentProps = { label: string }; + `, + }, + ], +}); diff --git a/packages/twenty-eslint-rules/rules/export-component-props.ts b/packages/twenty-eslint-rules/rules/export-component-props.ts new file mode 100644 index 0000000000..ce76abd192 --- /dev/null +++ b/packages/twenty-eslint-rules/rules/export-component-props.ts @@ -0,0 +1,99 @@ +import { ESLintUtils, TSESTree } from '@typescript-eslint/utils'; +import { isIdentifier } from '@typescript-eslint/utils/ast-utils'; + +export const RULE_NAME = 'export-component-props'; + +// NOTE: The rule will be available in ESLint configs as "@nx/workspace-export-component-props" +export const rule = ESLintUtils.RuleCreator(() => __filename)({ + name: RULE_NAME, + meta: { + type: 'problem', + docs: { + description: + 'Ensure types/interfaces ending with "Props" are exported', + }, + fixable: 'code', + schema: [], + messages: { + mustExportProps: + "Props type '{{ typeName }}' must be exported.", + }, + }, + defaultOptions: [], + create: (context) => { + const reExportedNames = new Set(); + const unexportedPropsNodes = new Map< + string, + | TSESTree.TSTypeAliasDeclaration + | TSESTree.TSInterfaceDeclaration + >(); + + const collectUnexportedProps = ( + node: + | TSESTree.TSTypeAliasDeclaration + | TSESTree.TSInterfaceDeclaration, + ) => { + const typeName = node.id.name; + + if (!typeName.endsWith('Props')) { + return; + } + + const isExported = + node.parent?.type === + TSESTree.AST_NODE_TYPES.ExportNamedDeclaration; + + if (!isExported) { + unexportedPropsNodes.set(typeName, node); + } + }; + + return { + TSTypeAliasDeclaration: collectUnexportedProps, + TSInterfaceDeclaration: collectUnexportedProps, + + ExportNamedDeclaration: ( + node: TSESTree.ExportNamedDeclaration, + ) => { + for (const specifier of node.specifiers) { + if ( + specifier.type === + TSESTree.AST_NODE_TYPES.ExportSpecifier && + isIdentifier(specifier.local) + ) { + const name = specifier.local.name; + + if (name.endsWith('Props')) { + reExportedNames.add(name); + } + } + } + }, + + 'Program:exit': () => { + for (const [typeName, node] of unexportedPropsNodes) { + if (reExportedNames.has(typeName)) { + continue; + } + + context.report({ + node: node.id, + messageId: 'mustExportProps', + data: { typeName }, + fix: (fixer) => { + const sourceCode = context.sourceCode; + const firstToken = sourceCode.getFirstToken(node); + const target = firstToken ?? node; + + if (firstToken?.value === 'export') { + return null; + } + + return fixer.insertTextBefore(target, 'export '); + }, + }); + } + }, + }; + }, +}); diff --git a/packages/twenty-sdk/project.json b/packages/twenty-sdk/project.json index dd9c11b3ab..b8388a0811 100644 --- a/packages/twenty-sdk/project.json +++ b/packages/twenty-sdk/project.json @@ -6,7 +6,7 @@ "tags": ["scope:sdk", "scope:shared"], "targets": { "build": { - "dependsOn": ["^build"], + "dependsOn": ["^build", "generate-remote-dom-elements"], "outputs": ["{projectRoot}/dist"] }, "dev": { @@ -85,25 +85,34 @@ } ] }, - "generateRemoteDomElements": { + "generate-remote-dom-elements": { "executor": "nx:run-commands", "cache": true, + "dependsOn": ["^build"], "inputs": [ "{projectRoot}/scripts/remote-dom/**/*", - "{projectRoot}/src/front-component-constants/**/*" + "{projectRoot}/src/sdk/front-component-common/**/*", + "{workspaceRoot}/packages/twenty-ui/src/**/index.ts", + "{workspaceRoot}/packages/twenty-ui/src/**/*.tsx" ], "outputs": [ "{projectRoot}/src/front-component/host/generated/*", "{projectRoot}/src/front-component/remote/generated/*" ], "options": { - "command": "tsx {projectRoot}/scripts/remote-dom/generateRemoteDomElements.ts" + "cwd": "packages/twenty-sdk", + "command": "tsx -r tsconfig-paths/register scripts/remote-dom/generate-remote-dom-elements.ts" + }, + "configurations": { + "verbose": { + "command": "tsx -r tsconfig-paths/register scripts/remote-dom/generate-remote-dom-elements.ts --verbose" + } } }, "storybook:prebuild": { "executor": "nx:run-commands", "cache": true, - "dependsOn": ["generateRemoteDomElements"], + "dependsOn": ["generate-remote-dom-elements"], "inputs": [ "{projectRoot}/src/front-component/__stories__/mocks/**/*", "{projectRoot}/src/front-component/__stories__/utils/**/*", diff --git a/packages/twenty-sdk/scripts/remote-dom/generateRemoteDomElements.ts b/packages/twenty-sdk/scripts/remote-dom/generate-remote-dom-elements.ts similarity index 71% rename from packages/twenty-sdk/scripts/remote-dom/generateRemoteDomElements.ts rename to packages/twenty-sdk/scripts/remote-dom/generate-remote-dom-elements.ts index 80fbcef9f1..7242ee68bc 100644 --- a/packages/twenty-sdk/scripts/remote-dom/generateRemoteDomElements.ts +++ b/packages/twenty-sdk/scripts/remote-dom/generate-remote-dom-elements.ts @@ -1,10 +1,10 @@ import * as prettier from '@prettier/sync'; import * as fs from 'fs'; import * as path from 'path'; +import { fileURLToPath } from 'url'; import { IndentationText, Project, QuoteKind } from 'ts-morph'; import { ALLOWED_HTML_ELEMENTS } from '../../src/sdk/front-component-common/AllowedHtmlElements'; -import { ALLOWED_UI_COMPONENTS } from '../../src/sdk/front-component-common/AllowedUiComponents'; import { COMMON_HTML_EVENTS } from '../../src/sdk/front-component-common/CommonHtmlEvents'; import { EVENT_TO_REACT } from '../../src/sdk/front-component-common/EventToReact'; import { HTML_COMMON_PROPERTIES } from '../../src/sdk/front-component-common/HtmlCommonProperties'; @@ -17,10 +17,27 @@ import { generateRemoteElements, HtmlElementConfigArrayZ, OUTPUT_FILES, - UiComponentConfigArrayZ, } from './generators'; +import { extractAllComponentsFromTwentyUi } from './twenty-ui-extractor'; +import { + logCount, + logDetail, + logEmpty, + logError, + logFileWritten, + logGroupLabel, + logSectionHeader, + logSeparator, + logSuccess, + logTitle, + setVerbose, +} from './utils/logger'; -const SCRIPT_DIR = path.dirname(new URL(import.meta.url).pathname); +const parseVerboseFlag = (): boolean => { + return process.argv.includes('--verbose'); +}; + +const SCRIPT_DIR = path.dirname(fileURLToPath(import.meta.url)); const PACKAGE_PATH = path.resolve(SCRIPT_DIR, '../..'); const FRONT_COMPONENT_PATH = path.join(PACKAGE_PATH, 'src/front-component'); const HOST_GENERATED_DIR = path.join(FRONT_COMPONENT_PATH, 'host/generated'); @@ -61,24 +78,21 @@ const getHtmlElementSchemas = (): ComponentSchema[] => { }; const getUiComponentSchemas = (): ComponentSchema[] => { - const result = UiComponentConfigArrayZ.safeParse(ALLOWED_UI_COMPONENTS); + const discoveredComponents = extractAllComponentsFromTwentyUi(); - if (!result.success) { - throw new Error( - `Invalid UI component configuration:\n${formatZodError(result.error)}`, - ); - } - - return result.data.map((component) => ({ + return discoveredComponents.map((component) => ({ name: component.name, tagName: component.name, customElementName: component.tag, properties: component.properties, - events: COMMON_HTML_EVENTS, + slots: component.slots, + events: component.events, isHtmlElement: false, htmlTag: undefined, componentImport: component.componentImport, componentPath: component.componentPath, + propsTypeName: component.propsTypeName, + supportsRefForwarding: component.supportsRefForwarding, })); }; @@ -106,7 +120,7 @@ const writeGeneratedFile = ( endOfLine: 'lf', }); fs.writeFileSync(filePath, formattedContent, 'utf-8'); - console.log(`โœ“ Generated ${filePath}`); + logFileWritten(filePath); }; const ensureDirectoriesExist = (): void => { @@ -119,7 +133,10 @@ const ensureDirectoriesExist = (): void => { }; const main = (): void => { - console.log('๐Ÿ“– Generating remote DOM elements...\n'); + const verbose = parseVerboseFlag(); + setVerbose(verbose); + + logTitle('Remote DOM Elements Generator'); let htmlElements: ComponentSchema[]; let uiComponents: ComponentSchema[]; @@ -128,23 +145,24 @@ const main = (): void => { htmlElements = getHtmlElementSchemas(); uiComponents = getUiComponentSchemas(); } catch (error) { - console.error('โŒ Validation failed:', error); + logError('Validation failed:', error); process.exit(1); } - console.log(`HTML Elements: ${htmlElements.length} elements`); - console.log( - ` Tags: ${htmlElements.map((element) => element.htmlTag).join(', ')}`, - ); - console.log( - ` Events: ${COMMON_HTML_EVENTS.length} common events per element`, - ); + logSeparator(); + logSectionHeader('Summary'); - console.log(`\nUI Components: ${uiComponents.length} components`); - console.log( - ` Tags: ${uiComponents.map((component) => component.customElementName).join(', ')}`, + logCount('HTML Elements', htmlElements.length, 'element', 'elements'); + logDetail( + `Tags: ${htmlElements.map((element) => element.htmlTag).join(', ')}`, + ); + logDetail(`Events: ${COMMON_HTML_EVENTS.length} common events per element`); + + logEmpty(); + logCount('UI Components', uiComponents.length, 'component', 'components'); + logDetail( + `Tags: ${uiComponents.map((component) => component.customElementName).join(', ')}`, ); - console.log(''); const allComponents = [...htmlElements, ...uiComponents]; @@ -152,7 +170,11 @@ const main = (): void => { const project = createProject(); - console.log('Host files:'); + logSeparator(); + logSectionHeader('Writing Files'); + + logGroupLabel('Host'); + const hostRegistry = generateHostRegistry( project, allComponents, @@ -164,7 +186,9 @@ const main = (): void => { hostRegistry.getFullText(), ); - console.log('\nRemote files:'); + logEmpty(); + logGroupLabel('Remote'); + const remoteElements = generateRemoteElements( project, allComponents, @@ -184,9 +208,11 @@ const main = (): void => { remoteComponents.getFullText(), ); - console.log('\nโœ… All generated files created'); - console.log(` Host: ${HOST_GENERATED_DIR}`); - console.log(` Remote: ${REMOTE_GENERATED_DIR}`); + logSeparator(); + logSuccess('Done!', 'All generated files created.'); + logDetail(`Host: ${HOST_GENERATED_DIR}`); + logDetail(`Remote: ${REMOTE_GENERATED_DIR}`); + logEmpty(); }; main(); diff --git a/packages/twenty-sdk/scripts/remote-dom/generators/host-registry.generator.ts b/packages/twenty-sdk/scripts/remote-dom/generators/host-registry.generator.ts index fd1f105b6f..2cfb2e73f8 100644 --- a/packages/twenty-sdk/scripts/remote-dom/generators/host-registry.generator.ts +++ b/packages/twenty-sdk/scripts/remote-dom/generators/host-registry.generator.ts @@ -1,6 +1,7 @@ import type { Project, SourceFile } from 'ts-morph'; -import { isDefined } from 'twenty-shared/utils'; +import { EVENT_TO_REACT } from '@/sdk/front-component-common/EventToReact'; +import { isDefined, isNonEmptyArray } from 'twenty-shared/utils'; import { CUSTOM_ELEMENT_NAMES } from './constants'; import { type ComponentSchema } from './schemas'; import { addFileHeader, addStatement } from './utils'; @@ -98,7 +99,7 @@ const wrapEventHandler = (handler: (detail: SerializedEventData) => void) => { }; }; -const filterProps = (props: Record) => { +const filterHtmlProps = (props: T): T => { const filtered: Record = {}; for (const [key, value] of Object.entries(props)) { if (INTERNAL_PROPS.has(key) || value === undefined) continue; @@ -114,7 +115,23 @@ const filterProps = (props: Record) => { } } } - return filtered; + return filtered as T; +}; + +const filterUiProps = (props: T, eventPropNames?: Set): T => { + const filtered: Record = {}; + for (const [key, value] of Object.entries(props)) { + if (INTERNAL_PROPS.has(key) || value === undefined) continue; + + if (key === 'style') { + filtered.style = parseStyle(value as string | undefined); + } else if (eventPropNames?.has(key) && typeof value === 'function') { + filtered[key] = wrapEventHandler(value as (detail: SerializedEventData) => void); + } else { + filtered[key] = value; + } + } + return filtered as T; };`; }; @@ -140,19 +157,35 @@ const generateHtmlWrapperComponent = (component: ComponentSchema): string => { const isVoidElement = VOID_ELEMENTS.has(component.htmlTag ?? ''); if (isVoidElement) { - return `const ${component.name}Wrapper = ({ children: _children, ...props }: { children?: React.ReactNode } & Record) => { - return React.createElement('${component.htmlTag}', filterProps(props)); -};`; + return `const ${component.name}Wrapper = React.forwardRef>(({ children: _children, ...props }, ref) => { + return React.createElement('${component.htmlTag}', { ...filterHtmlProps(props), ref }); +});`; } - return `const ${component.name}Wrapper = ({ children, ...props }: { children?: React.ReactNode } & Record) => { - return React.createElement('${component.htmlTag}', filterProps(props), children); -};`; + return `const ${component.name}Wrapper = React.forwardRef>(({ children, ...props }, ref) => { + return React.createElement('${component.htmlTag}', { ...filterHtmlProps(props), ref }, children); +});`; }; const generateUiWrapperComponent = (component: ComponentSchema): string => { - return `const ${component.name}Wrapper = ({ children, ...props }: { children?: React.ReactNode } & Record) => { - return React.createElement(${component.componentImport}, filterProps(props), children); + const propsType = isDefined(component.propsTypeName) + ? `${component.propsTypeName} & { children?: React.ReactNode }` + : '{ children?: React.ReactNode } & Record'; + + const hasEvents = isNonEmptyArray(component.events); + + const filterCall = hasEvents + ? `filterUiProps(props, new Set([${component.events.map((event) => `'${EVENT_TO_REACT[event]}'`).join(', ')}]))` + : 'filterUiProps(props)'; + + if (component.supportsRefForwarding) { + return `const ${component.name}Wrapper = React.forwardRef((props, ref) => { + return React.createElement(${component.componentImport} as React.ElementType, { ...${filterCall}, ref }); +});`; + } + + return `const ${component.name}Wrapper = (props: ${propsType}) => { + return React.createElement(${component.componentImport}, ${filterCall}); };`; }; @@ -181,10 +214,15 @@ ${entries} ]);`; }; +type ImportGroup = { + namedImports: string[]; + typeImports: string[]; +}; + const groupImportsByPath = ( components: ComponentSchema[], -): Map => { - const importsByPath = new Map(); +): Map => { + const importsByPath = new Map(); for (const component of components) { if ( @@ -192,10 +230,22 @@ const groupImportsByPath = ( isDefined(component.componentPath) && isDefined(component.componentImport) ) { - const existing = importsByPath.get(component.componentPath) ?? []; - if (!existing.includes(component.componentImport)) { - existing.push(component.componentImport); + const existing = importsByPath.get(component.componentPath) ?? { + namedImports: [], + typeImports: [], + }; + + if (!existing.namedImports.includes(component.componentImport)) { + existing.namedImports.push(component.componentImport); } + + if ( + isDefined(component.propsTypeName) && + !existing.typeImports.includes(component.propsTypeName) + ) { + existing.typeImports.push(component.propsTypeName); + } + importsByPath.set(component.componentPath, existing); } } @@ -231,10 +281,18 @@ export const generateHostRegistry = ( const uiImports = groupImportsByPath(components); - for (const [modulePath, namedImports] of uiImports) { + for (const [modulePath, importGroup] of uiImports) { + const allImports = [ + ...importGroup.namedImports, + ...importGroup.typeImports.map((typeName) => ({ + name: typeName, + isTypeOnly: true, + })), + ]; + sourceFile.addImportDeclaration({ moduleSpecifier: modulePath, - namedImports, + namedImports: allImports, }); } diff --git a/packages/twenty-sdk/scripts/remote-dom/generators/remote-components.generator.ts b/packages/twenty-sdk/scripts/remote-dom/generators/remote-components.generator.ts index 3817eb9d26..7b5ccf4875 100644 --- a/packages/twenty-sdk/scripts/remote-dom/generators/remote-components.generator.ts +++ b/packages/twenty-sdk/scripts/remote-dom/generators/remote-components.generator.ts @@ -1,7 +1,8 @@ import type { Project, SourceFile } from 'ts-morph'; +import { EVENT_TO_REACT } from '@/sdk/front-component-common/EventToReact'; import { type ComponentSchema } from './schemas'; -import { addExportedConst, addFileHeader, eventToReactProp } from './utils'; +import { addExportedConst, addFileHeader } from './utils'; const generateComponentDefinition = ( sourceFile: SourceFile, @@ -15,7 +16,7 @@ const generateComponentDefinition = ( if (hasEvents) { const eventProps = component.events .map((event) => { - const propName = eventToReactProp(event); + const propName = EVENT_TO_REACT[event]; return ` ${propName}: { event: '${event}' },`; }) .join('\n'); diff --git a/packages/twenty-sdk/scripts/remote-dom/generators/remote-elements.generator.ts b/packages/twenty-sdk/scripts/remote-dom/generators/remote-elements.generator.ts index 8e5f365607..3f6dfa0308 100644 --- a/packages/twenty-sdk/scripts/remote-dom/generators/remote-elements.generator.ts +++ b/packages/twenty-sdk/scripts/remote-dom/generators/remote-elements.generator.ts @@ -1,8 +1,8 @@ import { + type CodeBlockWriter, type Project, type SourceFile, VariableDeclarationKind, - type WriterFunction, } from 'ts-morph'; import { @@ -13,7 +13,6 @@ import { import { type ComponentSchema, type PropertySchema } from './schemas'; import { addFileHeader, - generatePropertiesConfig, schemaTypeToConstructor, schemaTypeToTs, } from './utils'; @@ -147,7 +146,9 @@ const generateElementPropertyType = ( isExported: true, name: `${component.name}Properties`, type: (writer) => { - writer.write(`${TYPE_NAMES.COMMON_PROPERTIES} & `); + if (component.isHtmlElement) { + writer.write(`${TYPE_NAMES.COMMON_PROPERTIES} & `); + } writer.block(() => { for (const entry of entries) { writer.writeLine(`${entry};`); @@ -158,12 +159,14 @@ const generateElementPropertyType = ( } }; -const createPropertiesConfigWriter = ( +const writePropertyEntries = ( + writer: CodeBlockWriter, properties: Record, -): WriterFunction => { - return (writer) => { - writer.write(generatePropertiesConfig(properties)); - }; +): void => { + for (const [name, schema] of Object.entries(properties)) { + const constructorType = schemaTypeToConstructor(schema.type); + writer.writeLine(`'${name}': { type: ${constructorType} },`); + } }; const generateElementDefinition = ( @@ -172,17 +175,23 @@ const generateElementDefinition = ( specificProperties: Record, options: ElementGenerationOptions, ): void => { - const { useSharedEvents, useSharedPropertiesConfig } = options; + const useSharedEvents = options.useSharedEvents && component.isHtmlElement; + const { useSharedPropertiesConfig } = options; const hasEvents = component.events.length > 0; const hasSpecificProps = Object.keys(specificProperties).length > 0; const hasProps = Object.keys(component.properties).length > 0; + const hasSlots = (component.slots ?? []).length > 0; const propsType = hasSpecificProps ? `${component.name}Properties` - : hasProps + : hasProps && component.isHtmlElement ? TYPE_NAMES.COMMON_PROPERTIES : TYPE_NAMES.EMPTY_RECORD; + const slotsType = hasSlots + ? `{ ${(component.slots ?? []).map((slot) => `'${slot}': true`).join('; ')} }` + : TYPE_NAMES.EMPTY_RECORD; + const eventsType = hasEvents ? useSharedEvents ? TYPE_NAMES.COMMON_EVENTS @@ -201,13 +210,13 @@ const generateElementDefinition = ( writer.indent(() => { writer.writeLine(`${propsType},`); writer.writeLine('Record,'); - writer.writeLine('Record,'); + writer.writeLine(`${slotsType},`); writer.write(eventsType); }); writer.newLine(); writer.write('>'); - const hasConfig = hasProps || hasEvents; + const hasConfig = hasProps || hasEvents || hasSlots; if (!hasConfig) { writer.write('({})'); return; @@ -215,34 +224,33 @@ const generateElementDefinition = ( writer.write('('); writer.block(() => { + if (hasSlots) { + writer.write( + `slots: [${(component.slots ?? []).map((slot) => `'${slot}'`).join(', ')}],`, + ); + writer.newLine(); + } if (hasProps) { - if (hasSpecificProps) { + if (hasSpecificProps && component.isHtmlElement) { writer.write('properties: '); writer.block(() => { writer.writeLine( `...${TYPE_NAMES.COMMON_PROPERTIES_CONFIG},`, ); - for (const [name, schema] of Object.entries( - specificProperties, - )) { - const constructorType = schemaTypeToConstructor( - schema.type, - ); - writer.writeLine( - `'${name}': { type: ${constructorType} },`, - ); - } + writePropertyEntries(writer, specificProperties); }); writer.write(','); writer.newLine(); - } else if (useSharedPropertiesConfig) { + } else if (useSharedPropertiesConfig && component.isHtmlElement) { writer.write( `properties: ${TYPE_NAMES.COMMON_PROPERTIES_CONFIG},`, ); writer.newLine(); } else { writer.write('properties: '); - createPropertiesConfigWriter(component.properties)(writer); + writer.block(() => { + writePropertyEntries(writer, specificProperties); + }); writer.write(','); writer.newLine(); } @@ -313,10 +321,9 @@ const prepareComponentsWithSpecificProps = ( ): ComponentWithSpecificProps[] => { return components.map((component) => ({ component, - specificProperties: getElementSpecificProperties( - component, - commonPropertyNames, - ), + specificProperties: component.isHtmlElement + ? getElementSpecificProperties(component, commonPropertyNames) + : component.properties, })); }; @@ -381,12 +388,9 @@ export const generateRemoteElements = ( generateCustomElementRegistrations(sourceFile, components); - sourceFile.addExportDeclaration({ - namedExports: [ - INTERNAL_ELEMENT_CLASSES.ROOT, - INTERNAL_ELEMENT_CLASSES.FRAGMENT, - ], - }); + sourceFile.addStatements( + `export { ${INTERNAL_ELEMENT_CLASSES.ROOT}, ${INTERNAL_ELEMENT_CLASSES.FRAGMENT} };`, + ); generateTagNameMapDeclaration(sourceFile, components); diff --git a/packages/twenty-sdk/scripts/remote-dom/generators/schemas.ts b/packages/twenty-sdk/scripts/remote-dom/generators/schemas.ts index c3b230517e..d7b8bd7ce8 100644 --- a/packages/twenty-sdk/scripts/remote-dom/generators/schemas.ts +++ b/packages/twenty-sdk/scripts/remote-dom/generators/schemas.ts @@ -1,7 +1,7 @@ import { z } from 'zod'; export const PropertySchemaZ = z.object({ - type: z.enum(['string', 'number', 'boolean']), + type: z.enum(['string', 'number', 'boolean', 'array', 'object', 'function']), optional: z.boolean(), }); @@ -15,33 +15,21 @@ export const HtmlElementConfigZ = z.object({ export const HtmlElementConfigArrayZ = z.array(HtmlElementConfigZ); -export const UiComponentConfigZ = z.object({ - tag: z - .string() - .regex(/^twenty-ui-[a-z0-9-]+$/, 'Tag must start with "twenty-ui-"'), - name: z - .string() - .regex(/^TwentyUi[A-Z]/, 'Name must be PascalCase starting with TwentyUi'), - properties: z.record(z.string(), PropertySchemaZ), - componentImport: z.string().min(1), - componentPath: z.string().min(1), -}); - -export const UiComponentConfigArrayZ = z.array(UiComponentConfigZ); - export const ComponentSchemaZ = z.object({ name: z.string().min(1), tagName: z.string().min(1), customElementName: z.string().min(1), properties: z.record(z.string(), PropertySchemaZ), + slots: z.array(z.string()).optional(), events: z.array(z.string()).readonly(), isHtmlElement: z.boolean(), htmlTag: z.string().optional(), componentImport: z.string().optional(), componentPath: z.string().optional(), + propsTypeName: z.string().optional(), + supportsRefForwarding: z.boolean().optional(), }); export type PropertySchema = z.infer; export type HtmlElementConfig = z.infer; -export type UiComponentConfig = z.infer; export type ComponentSchema = z.infer; diff --git a/packages/twenty-sdk/scripts/remote-dom/generators/utils/event-to-react-prop.ts b/packages/twenty-sdk/scripts/remote-dom/generators/utils/event-to-react-prop.ts deleted file mode 100644 index c63987b001..0000000000 --- a/packages/twenty-sdk/scripts/remote-dom/generators/utils/event-to-react-prop.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const eventToReactProp = (eventName: string): string => { - return `on${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`; -}; diff --git a/packages/twenty-sdk/scripts/remote-dom/generators/utils/index.ts b/packages/twenty-sdk/scripts/remote-dom/generators/utils/index.ts index a6d3228e96..d128bd8eac 100644 --- a/packages/twenty-sdk/scripts/remote-dom/generators/utils/index.ts +++ b/packages/twenty-sdk/scripts/remote-dom/generators/utils/index.ts @@ -2,10 +2,9 @@ export { addExportedConst } from './add-exported-const'; export { addExportedType } from './add-exported-type'; export { addFileHeader } from './add-file-header'; export { addStatement } from './add-statement'; -export { eventToReactProp } from './event-to-react-prop'; export { extractHtmlTag } from './extract-html-tag'; -export { GENERATED_FILE_HEADER } from './generated-file-header'; -export { generatePropertiesConfig } from './generate-properties-config'; export { generatePropertiesType } from './generate-properties-type'; +export { GENERATED_FILE_HEADER } from './generated-file-header'; export { schemaTypeToConstructor } from './schema-type-to-constructor'; export { schemaTypeToTs } from './schema-type-to-ts'; + diff --git a/packages/twenty-sdk/scripts/remote-dom/generators/utils/schema-type-to-constructor.ts b/packages/twenty-sdk/scripts/remote-dom/generators/utils/schema-type-to-constructor.ts index e45f273602..33981b858f 100644 --- a/packages/twenty-sdk/scripts/remote-dom/generators/utils/schema-type-to-constructor.ts +++ b/packages/twenty-sdk/scripts/remote-dom/generators/utils/schema-type-to-constructor.ts @@ -4,6 +4,9 @@ const SCHEMA_TYPE_TO_CONSTRUCTOR: Record = { boolean: 'Boolean', number: 'Number', string: 'String', + array: 'Array', + object: 'Object', + function: 'Function', }; export const schemaTypeToConstructor = (type: PropertySchema['type']): string => diff --git a/packages/twenty-sdk/scripts/remote-dom/generators/utils/schema-type-to-ts.ts b/packages/twenty-sdk/scripts/remote-dom/generators/utils/schema-type-to-ts.ts index 6dfca2cf77..529ebb4a1b 100644 --- a/packages/twenty-sdk/scripts/remote-dom/generators/utils/schema-type-to-ts.ts +++ b/packages/twenty-sdk/scripts/remote-dom/generators/utils/schema-type-to-ts.ts @@ -4,6 +4,9 @@ const SCHEMA_TYPE_TO_TS: Record = { boolean: 'boolean', number: 'number', string: 'string', + array: 'unknown[]', + object: 'Record', + function: '(...args: unknown[]) => unknown', }; export const schemaTypeToTs = (type: PropertySchema['type']): string => diff --git a/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/constants/ReactPropToDomEvent.ts b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/constants/ReactPropToDomEvent.ts new file mode 100644 index 0000000000..00b9352041 --- /dev/null +++ b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/constants/ReactPropToDomEvent.ts @@ -0,0 +1,9 @@ +import { EVENT_TO_REACT } from '@/sdk/front-component-common/EventToReact'; + +export const REACT_PROP_TO_DOM_EVENT: Record = + Object.fromEntries( + Object.entries(EVENT_TO_REACT).map(([domEvent, reactProp]) => [ + reactProp, + domEvent, + ]), + ); diff --git a/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/constants/TwentyUiComponentCategoriesToScan.ts b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/constants/TwentyUiComponentCategoriesToScan.ts new file mode 100644 index 0000000000..e9a5e44996 --- /dev/null +++ b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/constants/TwentyUiComponentCategoriesToScan.ts @@ -0,0 +1,9 @@ +export const TWENTY_UI_COMPONENT_CATEGORIES_TO_SCAN = [ + 'input', + 'components', + 'display', + 'feedback', + 'layout', + 'navigation', + 'accessibility', +]; diff --git a/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/constants/TwentyUiRootPath.ts b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/constants/TwentyUiRootPath.ts new file mode 100644 index 0000000000..797bb8118a --- /dev/null +++ b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/constants/TwentyUiRootPath.ts @@ -0,0 +1,8 @@ +import * as path from 'path'; +import { fileURLToPath } from 'url'; + +const SCRIPT_DIR = path.dirname(fileURLToPath(import.meta.url)); +const WORKSPACE_ROOT = path.resolve(SCRIPT_DIR, '../../../../../../'); +const TWENTY_UI_ROOT = path.join(WORKSPACE_ROOT, 'packages/twenty-ui'); + +export const TWENTY_UI_ROOT_PATH = TWENTY_UI_ROOT; diff --git a/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/constants/index.ts b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/constants/index.ts new file mode 100644 index 0000000000..eb05367cd8 --- /dev/null +++ b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/constants/index.ts @@ -0,0 +1,3 @@ +export { REACT_PROP_TO_DOM_EVENT } from './ReactPropToDomEvent'; +export { TWENTY_UI_COMPONENT_CATEGORIES_TO_SCAN } from './TwentyUiComponentCategoriesToScan'; +export { TWENTY_UI_ROOT_PATH } from './TwentyUiRootPath'; diff --git a/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/extract-all-components-from-twenty-ui.ts b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/extract-all-components-from-twenty-ui.ts new file mode 100644 index 0000000000..37fbaa4046 --- /dev/null +++ b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/extract-all-components-from-twenty-ui.ts @@ -0,0 +1,153 @@ +import * as path from 'path'; +import { type ExportSpecifier, Project } from 'ts-morph'; +import { isDefined, pascalToKebab } from 'twenty-shared/utils'; + +import { type PropertySchema } from '@/front-component/types/PropertySchema'; + +import { + logCategory, + logCountInline, + logDimText, + logEmpty, + logLine, + logWarning, +} from '../utils/logger'; +import { + TWENTY_UI_COMPONENT_CATEGORIES_TO_SCAN, + TWENTY_UI_ROOT_PATH, +} from './constants'; +import { classifyComponentPropsForRemoteDomGeneration } from './utils/classify-component-props-for-remote-dom-generation'; +import { doesComponentSupportRefForwarding } from './utils/does-component-support-ref-forwarding'; +import { getTwentyUiComponentCategoryIndexPath } from './utils/get-twenty-ui-component-category-index-path'; +import { isReactComponentExport } from './utils/is-react-component-export'; +import { logDiscoveredComponents } from './utils/log-discovered-components'; +import { shouldSkipExport } from './utils/should-skip-export'; + +export type DiscoveredComponent = { + tag: string; + name: string; + properties: Record; + events: string[]; + slots: string[]; + supportsRefForwarding: boolean; + componentImport: string; + componentPath: string; + propsTypeName: string; +}; + +const extractComponentsFromCategory = ( + project: Project, + category: string, +): DiscoveredComponent[] => { + const indexPath = getTwentyUiComponentCategoryIndexPath(category); + const sourceFile = project.getSourceFile(indexPath); + + if (!isDefined(sourceFile)) { + logWarning(`Could not find barrel file at ${indexPath}`); + + return []; + } + + const allNamedExports = sourceFile + .getExportDeclarations() + .flatMap((declaration) => declaration.getNamedExports()); + + const propsTypeExportsByName = new Map(); + const componentExports: ExportSpecifier[] = []; + + for (const namedExport of allNamedExports) { + if (namedExport.getName().endsWith('Props')) { + propsTypeExportsByName.set(namedExport.getName(), namedExport); + continue; + } + + if (!isReactComponentExport(namedExport)) { + continue; + } + + componentExports.push(namedExport); + } + + const discoveredComponents: DiscoveredComponent[] = []; + + for (const namedExport of componentExports) { + const exportName = namedExport.getName(); + + if (shouldSkipExport(exportName)) { + continue; + } + + const expectedPropsTypeName = `${exportName}Props`; + const propsTypeExport = propsTypeExportsByName.get(expectedPropsTypeName); + + if (!isDefined(propsTypeExport)) { + continue; + } + + const propsType = propsTypeExport.getNameNode().getType(); + + const { properties, events, slots } = + classifyComponentPropsForRemoteDomGeneration(propsType); + + const supportsRefForwarding = + doesComponentSupportRefForwarding(namedExport); + const kebabName = pascalToKebab(exportName); + + discoveredComponents.push({ + tag: `twenty-ui-${kebabName}`, + name: `TwentyUi${exportName}`, + properties, + events, + slots, + supportsRefForwarding, + componentImport: exportName, + componentPath: `twenty-ui/${category}`, + propsTypeName: expectedPropsTypeName, + }); + } + + return discoveredComponents; +}; + +export const extractAllComponentsFromTwentyUi = (): DiscoveredComponent[] => { + logDimText(' Loading twenty-ui TypeScript project...'); + + const project = new Project({ + tsConfigFilePath: path.join(TWENTY_UI_ROOT_PATH, 'tsconfig.json'), + skipAddingFilesFromTsConfig: false, + }); + + logLine( + ' ' + + logCountInline( + project.getSourceFiles().length, + 'source file loaded from twenty-ui', + 'source files loaded from twenty-ui', + ), + ); + logEmpty(); + + const allDiscoveredComponents: DiscoveredComponent[] = []; + + for (const [ + index, + category, + ] of TWENTY_UI_COMPONENT_CATEGORIES_TO_SCAN.entries()) { + if (index > 0) { + logEmpty(); + } + + logCategory(category); + + const discoveredComponents = extractComponentsFromCategory( + project, + category, + ); + + logDiscoveredComponents(discoveredComponents); + + allDiscoveredComponents.push(...discoveredComponents); + } + + return allDiscoveredComponents; +}; diff --git a/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/index.ts b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/index.ts new file mode 100644 index 0000000000..7f98d20740 --- /dev/null +++ b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/index.ts @@ -0,0 +1,4 @@ +export { + extractAllComponentsFromTwentyUi, + type DiscoveredComponent, +} from './extract-all-components-from-twenty-ui'; diff --git a/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/classify-component-props-for-remote-dom-generation.ts b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/classify-component-props-for-remote-dom-generation.ts new file mode 100644 index 0000000000..cb2552eea4 --- /dev/null +++ b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/classify-component-props-for-remote-dom-generation.ts @@ -0,0 +1,65 @@ +import { type Type } from 'ts-morph'; + +import { type PropertySchema } from '@/front-component/types/PropertySchema'; +import { isDefined, isNonEmptyArray } from 'twenty-shared/utils'; +import { REACT_PROP_TO_DOM_EVENT } from '../constants/ReactPropToDomEvent'; +import { mapTypeToPropertySchema } from './map-type-to-property-schema'; +import { isDomEventHandler } from './is-dom-event-handler'; +import { isReactElementType } from './is-react-element-type'; + +export type ClassifiedComponentProps = { + properties: Record; + events: string[]; + slots: string[]; +}; + +export const classifyComponentPropsForRemoteDomGeneration = ( + propsType: Type, +): ClassifiedComponentProps => { + const properties: Record = {}; + const events: string[] = []; + const slots: string[] = []; + const propsTypeProperties = propsType.getProperties(); + + for (const propertySymbol of propsTypeProperties) { + const propertyName = propertySymbol.getName(); + + const propertyDeclarations = propertySymbol.getDeclarations(); + + if (!isNonEmptyArray(propertyDeclarations)) { + continue; + } + + const firstDeclaration = propertyDeclarations[0]; + const propertyType = firstDeclaration.getType(); + + const correspondingDomEvent = REACT_PROP_TO_DOM_EVENT[propertyName]; + + if (isDefined(correspondingDomEvent) && isDomEventHandler(propertyType)) { + events.push(correspondingDomEvent); + + continue; + } + + const isOptional = + propertySymbol.isOptional() || + propertyType.isNullable() || + propertyType.isUndefined(); + + if (isReactElementType(propertyType)) { + slots.push(propertyName); + continue; + } + + const classifiedType = mapTypeToPropertySchema(propertyType); + + if (isDefined(classifiedType)) { + properties[propertyName] = { + type: classifiedType, + optional: isOptional, + }; + } + } + + return { properties, events, slots }; +}; diff --git a/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/does-component-support-ref-forwarding.ts b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/does-component-support-ref-forwarding.ts new file mode 100644 index 0000000000..6dcc64364a --- /dev/null +++ b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/does-component-support-ref-forwarding.ts @@ -0,0 +1,16 @@ +import { type ExportSpecifier } from 'ts-morph'; + +const REF_FORWARDING_TYPE_MARKERS = [ + 'StyledComponent', + 'ForwardRefExoticComponent', +]; + +export const doesComponentSupportRefForwarding = ( + namedExport: ExportSpecifier, +): boolean => { + const typeText = namedExport.getNameNode().getType().getText(); + + return REF_FORWARDING_TYPE_MARKERS.some((marker) => + typeText.includes(marker), + ); +}; diff --git a/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/get-twenty-ui-component-category-index-path.ts b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/get-twenty-ui-component-category-index-path.ts new file mode 100644 index 0000000000..3c60848b8d --- /dev/null +++ b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/get-twenty-ui-component-category-index-path.ts @@ -0,0 +1,9 @@ +import * as path from 'path'; + +import { TWENTY_UI_ROOT_PATH } from '../constants/TwentyUiRootPath'; + +const TWENTY_UI_SRC_PATH = path.join(TWENTY_UI_ROOT_PATH, 'src'); + +export const getTwentyUiComponentCategoryIndexPath = ( + category: string, +): string => path.join(TWENTY_UI_SRC_PATH, `${category}/index.ts`); diff --git a/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/index.ts b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/index.ts new file mode 100644 index 0000000000..5a6e0717b8 --- /dev/null +++ b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/index.ts @@ -0,0 +1,6 @@ +export * from './does-component-support-ref-forwarding'; +export * from './map-type-to-property-schema'; +export * from './classify-component-props-for-remote-dom-generation'; +export * from './is-react-element-type'; +export * from './log-discovered-components'; +export * from './should-skip-export'; diff --git a/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/is-dom-event-handler.ts b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/is-dom-event-handler.ts new file mode 100644 index 0000000000..364886dd9a --- /dev/null +++ b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/is-dom-event-handler.ts @@ -0,0 +1,57 @@ +import { type Type } from 'ts-morph'; +import { isDefined, isNonEmptyArray } from 'twenty-shared/utils'; + +const DOM_EVENT_TYPE_NAMES = new Set([ + 'Event', + 'UIEvent', + 'MouseEvent', + 'KeyboardEvent', + 'FocusEvent', + 'ChangeEvent', + 'FormEvent', + 'DragEvent', + 'WheelEvent', + 'ClipboardEvent', + 'TouchEvent', + 'PointerEvent', + 'AnimationEvent', + 'TransitionEvent', + 'SyntheticEvent', + 'BaseSyntheticEvent', +]); + +const isEventType = (type: Type): boolean => { + const symbol = type.getSymbol() ?? type.getAliasSymbol(); + + if (isDefined(symbol) && DOM_EVENT_TYPE_NAMES.has(symbol.getName())) { + return true; + } + + return type.getBaseTypes().some(isEventType); +}; + +export const isDomEventHandler = (propertyType: Type): boolean => { + const nonNullableType = propertyType.getNonNullableType(); + + const callSignatures = nonNullableType.getCallSignatures(); + + if (!isNonEmptyArray(callSignatures)) { + return false; + } + + return callSignatures.some((signature) => { + const firstParam = signature.getParameters()[0]; + + if (!isDefined(firstParam)) { + return false; + } + + const paramType = firstParam.getValueDeclaration()?.getType(); + + if (!isDefined(paramType)) { + return false; + } + + return isEventType(paramType); + }); +}; diff --git a/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/is-react-component-export.ts b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/is-react-component-export.ts new file mode 100644 index 0000000000..25892f37bc --- /dev/null +++ b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/is-react-component-export.ts @@ -0,0 +1,28 @@ +import { type ExportSpecifier } from 'ts-morph'; +import { isNonEmptyArray } from 'twenty-shared/utils'; + +import { typeSymbolMatchesAnyName } from './type-symbol-matches-any-name'; + +const REACT_RETURN_TYPE_NAMES = new Set([ + 'ReactNode', + 'ReactElement', + 'Element', +]); + +export const isReactComponentExport = ( + namedExport: ExportSpecifier, +): boolean => { + const exportType = namedExport.getNameNode().getType(); + const callSignatures = exportType.getCallSignatures(); + + if (!isNonEmptyArray(callSignatures)) { + return false; + } + + return callSignatures.some((signature) => + typeSymbolMatchesAnyName( + signature.getReturnType(), + REACT_RETURN_TYPE_NAMES, + ), + ); +}; diff --git a/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/is-react-element-type.ts b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/is-react-element-type.ts new file mode 100644 index 0000000000..24ca173d90 --- /dev/null +++ b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/is-react-element-type.ts @@ -0,0 +1,24 @@ +import { type Type } from 'ts-morph'; + +import { typeSymbolMatchesAnyName } from './type-symbol-matches-any-name'; + +const REACT_ELEMENT_TYPE_NAMES = new Set([ + 'ReactNode', + 'ReactElement', + 'Element', +]); + +const REACT_COMPONENT_TYPE_NAMES = new Set([ + 'FunctionComponent', + 'ComponentType', + 'IconComponent', +]); + +const ALL_REACT_TYPE_NAMES = new Set([ + ...REACT_ELEMENT_TYPE_NAMES, + ...REACT_COMPONENT_TYPE_NAMES, +]); + +export const isReactElementType = (propertyType: Type): boolean => { + return typeSymbolMatchesAnyName(propertyType, ALL_REACT_TYPE_NAMES); +}; diff --git a/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/log-discovered-components.ts b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/log-discovered-components.ts new file mode 100644 index 0000000000..9f4e164e40 --- /dev/null +++ b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/log-discovered-components.ts @@ -0,0 +1,63 @@ +import chalk from 'chalk'; + +import { + formatEvents, + formatProps, + formatSlots, + logCountInline, + logDimText, + logLine, +} from '../../utils/logger'; + +type ComponentSummary = { + tag: string; + componentImport: string; + properties: Record; + events: string[]; + slots: string[]; +}; + +export const logDiscoveredComponents = ( + discoveredComponents: ComponentSummary[], +): void => { + if (discoveredComponents.length === 0) { + logDimText(' No components found'); + + return; + } + + logLine( + ' ' + + logCountInline( + discoveredComponents.length, + 'component found', + 'components found', + ), + ); + + for (const discoveredComponent of discoveredComponents) { + const propertyCount = Object.keys(discoveredComponent.properties).length; + const eventCount = discoveredComponent.events.length; + const slotCount = discoveredComponent.slots.length; + + const parts: string[] = [formatProps(propertyCount)]; + + if (eventCount > 0) { + parts.push(formatEvents(eventCount, discoveredComponent.events)); + } + + if (slotCount > 0) { + parts.push(formatSlots(slotCount, discoveredComponent.slots)); + } + + logLine( + chalk.green(' ยท ') + + chalk.green(discoveredComponent.componentImport) + + chalk.gray(' -> ') + + chalk.white(discoveredComponent.tag) + + chalk.gray(' (') + + parts.join(chalk.green(', ')) + + chalk.gray(')'), + ); + } +}; diff --git a/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/map-type-to-property-schema.ts b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/map-type-to-property-schema.ts new file mode 100644 index 0000000000..28c0d910a4 --- /dev/null +++ b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/map-type-to-property-schema.ts @@ -0,0 +1,75 @@ +import { type Type } from 'ts-morph'; + +import { type PropertySchema } from '@/front-component/types/PropertySchema'; +import { isNonEmptyArray } from 'twenty-shared/utils'; + +type PropertyType = PropertySchema['type']; + +export const mapTypeToPropertySchema = ( + propertyType: Type, +): PropertyType | null => { + if (propertyType.isString() || propertyType.isStringLiteral()) { + return 'string'; + } + + if (propertyType.isNumber() || propertyType.isNumberLiteral()) { + return 'number'; + } + + if (propertyType.isBoolean() || propertyType.isBooleanLiteral()) { + return 'boolean'; + } + + if (propertyType.isArray()) { + return 'array'; + } + + if (propertyType.isTuple()) { + return 'array'; + } + + const callSignatures = propertyType.getCallSignatures(); + + if (isNonEmptyArray(callSignatures)) { + return 'function'; + } + + if (propertyType.isUnion()) { + const unionMemberTypes = propertyType.getUnionTypes(); + + const nonNullableTypes = unionMemberTypes.filter( + (memberType) => !memberType.isUndefined() && !memberType.isNull(), + ); + + if (!isNonEmptyArray(nonNullableTypes)) { + return null; + } + + const classifiedTypeSet = new Set( + nonNullableTypes.map((memberType) => mapTypeToPropertySchema(memberType)), + ); + + if (classifiedTypeSet.size === 1) { + return classifiedTypeSet.values().next().value ?? null; + } + + const primitiveTypes = new Set(['string', 'number', 'boolean']); + const allPrimitive = [...classifiedTypeSet].every( + (type) => type !== null && primitiveTypes.has(type), + ); + + if (allPrimitive && classifiedTypeSet.size > 0) { + return 'string'; + } + } + + if (propertyType.isEnum() || propertyType.isEnumLiteral()) { + return 'string'; + } + + if (propertyType.isObject() && !propertyType.isArray()) { + return 'object'; + } + + return null; +}; diff --git a/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/should-skip-export.ts b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/should-skip-export.ts new file mode 100644 index 0000000000..a6de6a775d --- /dev/null +++ b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/should-skip-export.ts @@ -0,0 +1,31 @@ +const SCREAMING_SNAKE_CASE_REGEX = /^[A-Z][A-Z_0-9]+$/; + +const SKIP_PREFIXES = [ + 'Styled', + 'use', + 'Icon', + 'Illustration', + 'base', + 'BASE', + 'get', +] as const; + +const SKIP_SUFFIXES = ['Provider', 'State', 'state'] as const; + +const NEVER_SKIP = new Set(['Icon']); + +export const shouldSkipExport = (exportName: string): boolean => { + if (NEVER_SKIP.has(exportName)) { + return false; + } + + const hasSkipPrefix = SKIP_PREFIXES.some((prefix) => + exportName.startsWith(prefix), + ); + const hasSkipSuffix = SKIP_SUFFIXES.some((suffix) => + exportName.endsWith(suffix), + ); + const isScreamingSnakeCase = SCREAMING_SNAKE_CASE_REGEX.test(exportName); + + return hasSkipPrefix || hasSkipSuffix || isScreamingSnakeCase; +}; diff --git a/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/type-symbol-matches-any-name.ts b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/type-symbol-matches-any-name.ts new file mode 100644 index 0000000000..8915af894e --- /dev/null +++ b/packages/twenty-sdk/scripts/remote-dom/twenty-ui-extractor/utils/type-symbol-matches-any-name.ts @@ -0,0 +1,27 @@ +import { type Type } from 'ts-morph'; + +import { isDefined } from 'twenty-shared/utils'; + +const getTypeSymbolName = (type: Type): string | undefined => { + return (type.getSymbol() ?? type.getAliasSymbol())?.getName(); +}; + +export const typeSymbolMatchesAnyName = ( + type: Type, + names: Set, +): boolean => { + const symbolName = getTypeSymbolName(type); + + if (isDefined(symbolName) && names.has(symbolName)) { + return true; + } + + if (type.isUnion()) { + return type + .getUnionTypes() + .filter((memberType) => !memberType.isUndefined() && !memberType.isNull()) + .some((memberType) => typeSymbolMatchesAnyName(memberType, names)); + } + + return false; +}; diff --git a/packages/twenty-sdk/scripts/remote-dom/utils/logger.ts b/packages/twenty-sdk/scripts/remote-dom/utils/logger.ts new file mode 100644 index 0000000000..54d3e6ee36 --- /dev/null +++ b/packages/twenty-sdk/scripts/remote-dom/utils/logger.ts @@ -0,0 +1,135 @@ +import chalk from 'chalk'; + +const SEPARATOR_WIDTH = 60; + +let _verbose = false; + +export const setVerbose = (value: boolean): void => { + _verbose = value; +}; + +export const isVerbose = (): boolean => _verbose; + +export const logSeparator = (): void => { + if (!_verbose) return; + console.log(''); + console.log(chalk.gray('โ”€'.repeat(SEPARATOR_WIDTH))); + console.log(''); +}; + +export const logTitle = (text: string): void => { + if (!_verbose) return; + console.log(''); + console.log(chalk.bold.white(` ${text}`)); + console.log(''); + console.log(chalk.gray('โ”€'.repeat(SEPARATOR_WIDTH))); + console.log(''); +}; + +export const logSectionHeader = (text: string): void => { + if (!_verbose) return; + console.log(chalk.bold.white(` ${text}`)); + console.log(''); +}; + +export const logCategory = (name: string): void => { + if (!_verbose) return; + console.log(chalk.green(' โ–ธ ') + chalk.green.bold(name)); +}; + +export const logSubItem = (label: string, value: string): void => { + if (!_verbose) return; + console.log( + chalk.gray(' ') + + chalk.green(label) + + chalk.gray(' -> ') + + chalk.white(value), + ); +}; + +const pluralize = (count: number, singular: string, plural: string): string => + count === 1 ? singular : plural; + +export const logCount = ( + label: string, + count: number, + singularUnit: string, + pluralUnit?: string, +): void => { + if (!_verbose) return; + const unit = pluralize(count, singularUnit, pluralUnit ?? singularUnit + 's'); + console.log( + chalk.green(` ${label} `) + + chalk.white.bold(`${count}`) + + chalk.gray(` ${unit}`), + ); +}; + +export const logDetail = (text: string): void => { + if (!_verbose) return; + console.log(chalk.gray(` ${text}`)); +}; + +export const logDimText = (text: string): void => { + if (!_verbose) return; + console.log(chalk.gray(text)); +}; + +export const logFileWritten = (filePath: string): void => { + if (!_verbose) return; + console.log(chalk.green(' โœ“ ') + chalk.gray(filePath)); +}; + +export const logGroupLabel = (text: string): void => { + if (!_verbose) return; + console.log(chalk.green(` ${text}`)); +}; + +export const logSuccess = (message: string, detail?: string): void => { + if (!_verbose) return; + const detailSuffix = detail ? chalk.gray(` ${detail}`) : ''; + + console.log(chalk.green(` โœ” `) + chalk.green.bold(message) + detailSuffix); +}; + +export const logError = (message: string, error?: unknown): void => { + console.error(chalk.red.bold(` โœ– ${message}`), error ?? ''); +}; + +export const logWarning = (message: string): void => { + if (!_verbose) return; + console.warn(chalk.yellow(` ${message}`)); +}; + +export const logEmpty = (): void => { + if (!_verbose) return; + console.log(''); +}; + +export const logLine = (text: string): void => { + if (!_verbose) return; + console.log(text); +}; + +export const logCountInline = ( + count: number, + singularUnit: string, + pluralUnit?: string, + prefix?: string, +): string => { + const unit = pluralize(count, singularUnit, pluralUnit ?? singularUnit + 's'); + const prefixText = prefix ? chalk.gray(`${prefix} `) : ''; + + return prefixText + chalk.white.bold(`${count}`) + chalk.gray(` ${unit}`); +}; + +export const formatProps = (count: number): string => + chalk.green(`${count} ${pluralize(count, 'prop', 'props')}`); + +export const formatEvents = (count: number, names: string[]): string => + chalk.yellow(`${count} ${pluralize(count, 'event', 'events')}`) + + chalk.gray(` [${names.join(', ')}]`); + +export const formatSlots = (count: number, names: string[]): string => + chalk.magenta(`${count} ${pluralize(count, 'slot', 'slots')}`) + + chalk.gray(` [${names.join(', ')}]`); diff --git a/packages/twenty-sdk/src/front-component/host/generated/host-component-registry.ts b/packages/twenty-sdk/src/front-component/host/generated/host-component-registry.ts index d1c64c2a3a..62f08ff846 100644 --- a/packages/twenty-sdk/src/front-component/host/generated/host-component-registry.ts +++ b/packages/twenty-sdk/src/front-component/host/generated/host-component-registry.ts @@ -7,13 +7,192 @@ * |___/ */ +import React from 'react'; import { RemoteFragmentRenderer, createRemoteComponentRenderer, } from '@remote-dom/react/host'; -import React from 'react'; -import { Button } from 'twenty-ui/input'; import { type SerializedEventData } from '../../../sdk/front-component-common/SerializedEventData'; +import { + AnimatedButton, + AnimatedLightIconButton, + Button, + ButtonGroup, + ColorPickerButton, + FloatingButton, + FloatingButtonGroup, + FloatingIconButton, + FloatingIconButtonGroup, + InsideButton, + LightButton, + LightIconButton, + LightIconButtonGroup, + MainButton, + RoundedIconButton, + TabContent, + TabButton, + CodeEditor, + CoreEditorHeader, + ColorSchemeCard, + ColorSchemePicker, + CardPicker, + Checkbox, + Radio, + RadioGroup, + SearchInput, + Toggle, + type AnimatedButtonProps, + type AnimatedLightIconButtonProps, + type ButtonProps, + type ButtonGroupProps, + type ColorPickerButtonProps, + type FloatingButtonProps, + type FloatingButtonGroupProps, + type FloatingIconButtonProps, + type FloatingIconButtonGroupProps, + type InsideButtonProps, + type LightButtonProps, + type LightIconButtonProps, + type LightIconButtonGroupProps, + type MainButtonProps, + type RoundedIconButtonProps, + type TabContentProps, + type TabButtonProps, + type CodeEditorProps, + type CoreEditorHeaderProps, + type ColorSchemeCardProps, + type ColorSchemePickerProps, + type CardPickerProps, + type CheckboxProps, + type RadioProps, + type RadioGroupProps, + type SearchInputProps, + type ToggleProps, +} from 'twenty-ui/input'; +import { + AvatarChip, + MultipleAvatarChip, + Chip, + LinkChip, + Pill, + Tag, + type AvatarChipProps, + type MultipleAvatarChipProps, + type ChipProps, + type LinkChipProps, + type PillProps, + type TagProps, +} from 'twenty-ui/components'; +import { + Avatar, + AvatarGroup, + Banner, + SidePanelInformationBanner, + Callout, + AnimatedCheckmark, + Checkmark, + ColorSample, + CommandBlock, + Icon, + Info, + Status, + HorizontalSeparator, + AppTooltip, + OverflowingTextWithTooltip, + H1Title, + H2Title, + H3Title, + type AvatarProps, + type AvatarGroupProps, + type BannerProps, + type SidePanelInformationBannerProps, + type CalloutProps, + type AnimatedCheckmarkProps, + type CheckmarkProps, + type ColorSampleProps, + type CommandBlockProps, + type IconProps, + type InfoProps, + type StatusProps, + type HorizontalSeparatorProps, + type AppTooltipProps, + type OverflowingTextWithTooltipProps, + type H1TitleProps, + type H2TitleProps, + type H3TitleProps, +} from 'twenty-ui/display'; +import { + Loader, + CircularProgressBar, + ProgressBar, + type LoaderProps, + type CircularProgressBarProps, + type ProgressBarProps, +} from 'twenty-ui/feedback'; +import { + AnimatedExpandableContainer, + AnimatedPlaceholder, + Section, + type AnimatedExpandableContainerProps, + type AnimatedPlaceholderProps, + type SectionProps, +} from 'twenty-ui/layout'; +import { + AdvancedSettingsToggle, + ClickToActionLink, + ContactLink, + GithubVersionLink, + RawLink, + RoundedLink, + SocialLink, + UndecoratedLink, + MenuPicker, + MenuItem, + MenuItemAvatar, + MenuItemDraggable, + MenuItemHotKeys, + MenuItemMultiSelect, + MenuItemMultiSelectAvatar, + MenuItemMultiSelectTag, + MenuItemNavigate, + MenuItemSelect, + MenuItemSelectAvatar, + MenuItemSelectColor, + MenuItemSelectTag, + MenuItemSuggestion, + MenuItemToggle, + MenuItemLeftContent, + NavigationBar, + NavigationBarItem, + NotificationCounter, + type AdvancedSettingsToggleProps, + type ClickToActionLinkProps, + type ContactLinkProps, + type GithubVersionLinkProps, + type RawLinkProps, + type RoundedLinkProps, + type SocialLinkProps, + type UndecoratedLinkProps, + type MenuPickerProps, + type MenuItemProps, + type MenuItemAvatarProps, + type MenuItemDraggableProps, + type MenuItemHotKeysProps, + type MenuItemMultiSelectProps, + type MenuItemMultiSelectAvatarProps, + type MenuItemMultiSelectTagProps, + type MenuItemNavigateProps, + type MenuItemSelectProps, + type MenuItemSelectAvatarProps, + type MenuItemSelectColorProps, + type MenuItemSelectTagProps, + type MenuItemSuggestionProps, + type MenuItemToggleProps, + type MenuItemLeftContentProps, + type NavigationBarProps, + type NavigationBarItemProps, + type NotificationCounterProps, +} from 'twenty-ui/navigation'; const INTERNAL_PROPS = new Set(['element', 'receiver', 'components']); const EVENT_NAME_MAP: Record = { @@ -65,9 +244,6 @@ const parseStyle = ( return style; }; -// Extracts only serializable properties from DOM/React events. -// Native events contain circular references and DOM nodes that cannot -// cross the worker boundary via postMessage. const serializeEvent = (event: unknown): SerializedEventData => { if (!event || typeof event !== 'object') { return { type: 'unknown' }; @@ -78,14 +254,12 @@ const serializeEvent = (event: unknown): SerializedEventData => { type: typeof domEvent.type === 'string' ? domEvent.type : 'unknown', }; - // Modifier keys (shared by mouse and keyboard events) if ('altKey' in domEvent) serialized.altKey = domEvent.altKey as boolean; if ('ctrlKey' in domEvent) serialized.ctrlKey = domEvent.ctrlKey as boolean; if ('metaKey' in domEvent) serialized.metaKey = domEvent.metaKey as boolean; if ('shiftKey' in domEvent) serialized.shiftKey = domEvent.shiftKey as boolean; - // Mouse event properties if ('clientX' in domEvent) serialized.clientX = domEvent.clientX as number; if ('clientY' in domEvent) serialized.clientY = domEvent.clientY as number; if ('pageX' in domEvent) serialized.pageX = domEvent.pageX as number; @@ -95,19 +269,16 @@ const serializeEvent = (event: unknown): SerializedEventData => { if ('button' in domEvent) serialized.button = domEvent.button as number; if ('buttons' in domEvent) serialized.buttons = domEvent.buttons as number; - // Keyboard event properties if ('key' in domEvent) serialized.key = domEvent.key as string; if ('code' in domEvent) serialized.code = domEvent.code as string; if ('repeat' in domEvent) serialized.repeat = domEvent.repeat as boolean; - // Wheel event properties if ('deltaX' in domEvent) serialized.deltaX = domEvent.deltaX as number; if ('deltaY' in domEvent) serialized.deltaY = domEvent.deltaY as number; if ('deltaZ' in domEvent) serialized.deltaZ = domEvent.deltaZ as number; if ('deltaMode' in domEvent) serialized.deltaMode = domEvent.deltaMode as number; - // Extract value/checked from target (for input/change/select events) const target = domEvent.target as Record | undefined; if (target && typeof target === 'object') { if ('value' in target && typeof target.value === 'string') { @@ -133,7 +304,7 @@ const wrapEventHandler = (handler: (detail: SerializedEventData) => void) => { }; }; -const filterProps = (props: Record) => { +const filterHtmlProps = (props: T): T => { const filtered: Record = {}; for (const [key, value] of Object.entries(props)) { if (INTERNAL_PROPS.has(key) || value === undefined) continue; @@ -151,271 +322,915 @@ const filterProps = (props: Record) => { } } } - return filtered; + return filtered as T; }; -const HtmlDivWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('div', filterProps(props), children); + +const filterUiProps = ( + props: T, + eventPropNames?: Set, +): T => { + const filtered: Record = {}; + for (const [key, value] of Object.entries(props)) { + if (INTERNAL_PROPS.has(key) || value === undefined) continue; + + if (key === 'style') { + filtered.style = parseStyle(value as string | undefined); + } else if (eventPropNames?.has(key) && typeof value === 'function') { + filtered[key] = wrapEventHandler( + value as (detail: SerializedEventData) => void, + ); + } else { + filtered[key] = value; + } + } + return filtered as T; }; -const HtmlSpanWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('span', filterProps(props), children); +const HtmlDivWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'div', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlSpanWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'span', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlSectionWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'section', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlArticleWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'article', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlHeaderWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'header', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlFooterWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'footer', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlMainWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'main', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlNavWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'nav', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlAsideWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'aside', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlPWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement('p', { ...filterHtmlProps(props), ref }, children); +}); +const HtmlH1Wrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'h1', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlH2Wrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'h2', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlH3Wrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'h3', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlH4Wrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'h4', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlH5Wrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'h5', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlH6Wrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'h6', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlStrongWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'strong', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlEmWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'em', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlSmallWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'small', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlCodeWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'code', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlPreWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'pre', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlBlockquoteWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'blockquote', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlAWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement('a', { ...filterHtmlProps(props), ref }, children); +}); +const HtmlImgWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children: _children, ...props }, ref) => { + return React.createElement('img', { ...filterHtmlProps(props), ref }); +}); +const HtmlUlWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'ul', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlOlWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'ol', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlLiWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'li', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlFormWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'form', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlLabelWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'label', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlInputWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children: _children, ...props }, ref) => { + return React.createElement('input', { ...filterHtmlProps(props), ref }); +}); +const HtmlTextareaWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'textarea', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlSelectWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'select', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlOptionWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'option', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlButtonWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'button', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlTableWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'table', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlTheadWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'thead', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlTbodyWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'tbody', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlTfootWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'tfoot', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlTrWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'tr', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlThWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'th', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlTdWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children, ...props }, ref) => { + return React.createElement( + 'td', + { ...filterHtmlProps(props), ref }, + children, + ); +}); +const HtmlBrWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children: _children, ...props }, ref) => { + return React.createElement('br', { ...filterHtmlProps(props), ref }); +}); +const HtmlHrWrapper = React.forwardRef< + HTMLElement, + { children?: React.ReactNode } & Record +>(({ children: _children, ...props }, ref) => { + return React.createElement('hr', { ...filterHtmlProps(props), ref }); +}); +const TwentyUiAnimatedButtonWrapper = ( + props: AnimatedButtonProps & { children?: React.ReactNode }, +) => { + return React.createElement( + AnimatedButton, + filterUiProps(props, new Set(['onClick'])), + ); }; -const HtmlSectionWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('section', filterProps(props), children); +const TwentyUiAnimatedLightIconButtonWrapper = ( + props: AnimatedLightIconButtonProps & { children?: React.ReactNode }, +) => { + return React.createElement( + AnimatedLightIconButton, + filterUiProps(props, new Set(['onClick'])), + ); }; -const HtmlArticleWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('article', filterProps(props), children); +const TwentyUiButtonWrapper = ( + props: ButtonProps & { children?: React.ReactNode }, +) => { + return React.createElement( + Button, + filterUiProps(props, new Set(['onClick'])), + ); }; -const HtmlHeaderWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('header', filterProps(props), children); +const TwentyUiButtonGroupWrapper = ( + props: ButtonGroupProps & { children?: React.ReactNode }, +) => { + return React.createElement(ButtonGroup, filterUiProps(props)); }; -const HtmlFooterWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('footer', filterProps(props), children); +const TwentyUiColorPickerButtonWrapper = ( + props: ColorPickerButtonProps & { children?: React.ReactNode }, +) => { + return React.createElement( + ColorPickerButton, + filterUiProps(props, new Set(['onClick'])), + ); }; -const HtmlMainWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('main', filterProps(props), children); +const TwentyUiFloatingButtonWrapper = ( + props: FloatingButtonProps & { children?: React.ReactNode }, +) => { + return React.createElement(FloatingButton, filterUiProps(props)); }; -const HtmlNavWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('nav', filterProps(props), children); +const TwentyUiFloatingButtonGroupWrapper = ( + props: FloatingButtonGroupProps & { children?: React.ReactNode }, +) => { + return React.createElement(FloatingButtonGroup, filterUiProps(props)); }; -const HtmlAsideWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('aside', filterProps(props), children); +const TwentyUiFloatingIconButtonWrapper = ( + props: FloatingIconButtonProps & { children?: React.ReactNode }, +) => { + return React.createElement( + FloatingIconButton, + filterUiProps(props, new Set(['onClick'])), + ); }; -const HtmlPWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('p', filterProps(props), children); +const TwentyUiFloatingIconButtonGroupWrapper = ( + props: FloatingIconButtonGroupProps & { children?: React.ReactNode }, +) => { + return React.createElement(FloatingIconButtonGroup, filterUiProps(props)); }; -const HtmlH1Wrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('h1', filterProps(props), children); +const TwentyUiInsideButtonWrapper = ( + props: InsideButtonProps & { children?: React.ReactNode }, +) => { + return React.createElement( + InsideButton, + filterUiProps(props, new Set(['onClick'])), + ); }; -const HtmlH2Wrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('h2', filterProps(props), children); +const TwentyUiLightButtonWrapper = ( + props: LightButtonProps & { children?: React.ReactNode }, +) => { + return React.createElement( + LightButton, + filterUiProps(props, new Set(['onClick'])), + ); }; -const HtmlH3Wrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('h3', filterProps(props), children); +const TwentyUiLightIconButtonWrapper = ( + props: LightIconButtonProps & { children?: React.ReactNode }, +) => { + return React.createElement( + LightIconButton, + filterUiProps(props, new Set(['onClick'])), + ); }; -const HtmlH4Wrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('h4', filterProps(props), children); +const TwentyUiLightIconButtonGroupWrapper = ( + props: LightIconButtonGroupProps & { children?: React.ReactNode }, +) => { + return React.createElement(LightIconButtonGroup, filterUiProps(props)); }; -const HtmlH5Wrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('h5', filterProps(props), children); +const TwentyUiMainButtonWrapper = ( + props: MainButtonProps & { children?: React.ReactNode }, +) => { + return React.createElement(MainButton, filterUiProps(props)); }; -const HtmlH6Wrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('h6', filterProps(props), children); +const TwentyUiRoundedIconButtonWrapper = ( + props: RoundedIconButtonProps & { children?: React.ReactNode }, +) => { + return React.createElement(RoundedIconButton, filterUiProps(props)); }; -const HtmlStrongWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('strong', filterProps(props), children); +const TwentyUiTabContentWrapper = ( + props: TabContentProps & { children?: React.ReactNode }, +) => { + return React.createElement(TabContent, filterUiProps(props)); }; -const HtmlEmWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('em', filterProps(props), children); +const TwentyUiTabButtonWrapper = ( + props: TabButtonProps & { children?: React.ReactNode }, +) => { + return React.createElement(TabButton, filterUiProps(props)); }; -const HtmlSmallWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('small', filterProps(props), children); +const TwentyUiCodeEditorWrapper = ( + props: CodeEditorProps & { children?: React.ReactNode }, +) => { + return React.createElement(CodeEditor, filterUiProps(props)); }; -const HtmlCodeWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('code', filterProps(props), children); +const TwentyUiCoreEditorHeaderWrapper = ( + props: CoreEditorHeaderProps & { children?: React.ReactNode }, +) => { + return React.createElement(CoreEditorHeader, filterUiProps(props)); }; -const HtmlPreWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('pre', filterProps(props), children); +const TwentyUiColorSchemeCardWrapper = ( + props: ColorSchemeCardProps & { children?: React.ReactNode }, +) => { + return React.createElement(ColorSchemeCard, filterUiProps(props)); }; -const HtmlBlockquoteWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('blockquote', filterProps(props), children); +const TwentyUiColorSchemePickerWrapper = ( + props: ColorSchemePickerProps & { children?: React.ReactNode }, +) => { + return React.createElement(ColorSchemePicker, filterUiProps(props)); }; -const HtmlAWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('a', filterProps(props), children); +const TwentyUiCardPickerWrapper = ( + props: CardPickerProps & { children?: React.ReactNode }, +) => { + return React.createElement(CardPicker, filterUiProps(props)); }; -const HtmlImgWrapper = ({ - children: _children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('img', filterProps(props)); +const TwentyUiCheckboxWrapper = ( + props: CheckboxProps & { children?: React.ReactNode }, +) => { + return React.createElement( + Checkbox, + filterUiProps(props, new Set(['onChange'])), + ); }; -const HtmlUlWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('ul', filterProps(props), children); +const TwentyUiRadioWrapper = ( + props: RadioProps & { children?: React.ReactNode }, +) => { + return React.createElement( + Radio, + filterUiProps(props, new Set(['onChange'])), + ); }; -const HtmlOlWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('ol', filterProps(props), children); +const TwentyUiRadioGroupWrapper = ( + props: RadioGroupProps & { children?: React.ReactNode }, +) => { + return React.createElement( + RadioGroup, + filterUiProps(props, new Set(['onChange'])), + ); }; -const HtmlLiWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('li', filterProps(props), children); +const TwentyUiSearchInputWrapper = ( + props: SearchInputProps & { children?: React.ReactNode }, +) => { + return React.createElement(SearchInput, filterUiProps(props)); }; -const HtmlFormWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('form', filterProps(props), children); +const TwentyUiToggleWrapper = ( + props: ToggleProps & { children?: React.ReactNode }, +) => { + return React.createElement(Toggle, filterUiProps(props)); }; -const HtmlLabelWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('label', filterProps(props), children); +const TwentyUiAvatarChipWrapper = ( + props: AvatarChipProps & { children?: React.ReactNode }, +) => { + return React.createElement(AvatarChip, filterUiProps(props)); }; -const HtmlInputWrapper = ({ - children: _children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('input', filterProps(props)); +const TwentyUiMultipleAvatarChipWrapper = ( + props: MultipleAvatarChipProps & { children?: React.ReactNode }, +) => { + return React.createElement(MultipleAvatarChip, filterUiProps(props)); }; -const HtmlTextareaWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('textarea', filterProps(props), children); +const TwentyUiChipWrapper = ( + props: ChipProps & { children?: React.ReactNode }, +) => { + return React.createElement(Chip, filterUiProps(props)); }; -const HtmlSelectWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('select', filterProps(props), children); +const TwentyUiLinkChipWrapper = ( + props: LinkChipProps & { children?: React.ReactNode }, +) => { + return React.createElement( + LinkChip, + filterUiProps(props, new Set(['onClick', 'onMouseDown'])), + ); }; -const HtmlOptionWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('option', filterProps(props), children); +const TwentyUiPillWrapper = ( + props: PillProps & { children?: React.ReactNode }, +) => { + return React.createElement(Pill, filterUiProps(props)); }; -const HtmlButtonWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('button', filterProps(props), children); +const TwentyUiTagWrapper = ( + props: TagProps & { children?: React.ReactNode }, +) => { + return React.createElement(Tag, filterUiProps(props)); }; -const HtmlTableWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('table', filterProps(props), children); +const TwentyUiAvatarWrapper = ( + props: AvatarProps & { children?: React.ReactNode }, +) => { + return React.createElement(Avatar, filterUiProps(props)); }; -const HtmlTheadWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('thead', filterProps(props), children); +const TwentyUiAvatarGroupWrapper = ( + props: AvatarGroupProps & { children?: React.ReactNode }, +) => { + return React.createElement(AvatarGroup, filterUiProps(props)); }; -const HtmlTbodyWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('tbody', filterProps(props), children); +const TwentyUiBannerWrapper = ( + props: BannerProps & { children?: React.ReactNode }, +) => { + return React.createElement(Banner, filterUiProps(props)); }; -const HtmlTfootWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('tfoot', filterProps(props), children); +const TwentyUiSidePanelInformationBannerWrapper = ( + props: SidePanelInformationBannerProps & { children?: React.ReactNode }, +) => { + return React.createElement(SidePanelInformationBanner, filterUiProps(props)); }; -const HtmlTrWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('tr', filterProps(props), children); +const TwentyUiCalloutWrapper = ( + props: CalloutProps & { children?: React.ReactNode }, +) => { + return React.createElement(Callout, filterUiProps(props)); }; -const HtmlThWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('th', filterProps(props), children); +const TwentyUiAnimatedCheckmarkWrapper = ( + props: AnimatedCheckmarkProps & { children?: React.ReactNode }, +) => { + return React.createElement(AnimatedCheckmark, filterUiProps(props)); }; -const HtmlTdWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('td', filterProps(props), children); +const TwentyUiCheckmarkWrapper = ( + props: CheckmarkProps & { children?: React.ReactNode }, +) => { + return React.createElement(Checkmark, filterUiProps(props)); }; -const HtmlBrWrapper = ({ - children: _children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('br', filterProps(props)); +const TwentyUiColorSampleWrapper = React.forwardRef< + unknown, + ColorSampleProps & { children?: React.ReactNode } +>((props, ref) => { + return React.createElement(ColorSample as React.ElementType, { + ...filterUiProps(props), + ref, + }); +}); +const TwentyUiCommandBlockWrapper = ( + props: CommandBlockProps & { children?: React.ReactNode }, +) => { + return React.createElement(CommandBlock, filterUiProps(props)); }; -const HtmlHrWrapper = ({ - children: _children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement('hr', filterProps(props)); +const TwentyUiIconWrapper = ( + props: IconProps & { children?: React.ReactNode }, +) => { + return React.createElement(Icon, filterUiProps(props)); }; -const TwentyUiButtonWrapper = ({ - children, - ...props -}: { children?: React.ReactNode } & Record) => { - return React.createElement(Button, filterProps(props), children); +const TwentyUiInfoWrapper = ( + props: InfoProps & { children?: React.ReactNode }, +) => { + return React.createElement(Info, filterUiProps(props, new Set(['onClick']))); +}; +const TwentyUiStatusWrapper = ( + props: StatusProps & { children?: React.ReactNode }, +) => { + return React.createElement(Status, filterUiProps(props)); +}; +const TwentyUiHorizontalSeparatorWrapper = ( + props: HorizontalSeparatorProps & { children?: React.ReactNode }, +) => { + return React.createElement(HorizontalSeparator, filterUiProps(props)); +}; +const TwentyUiAppTooltipWrapper = ( + props: AppTooltipProps & { children?: React.ReactNode }, +) => { + return React.createElement(AppTooltip, filterUiProps(props)); +}; +const TwentyUiOverflowingTextWithTooltipWrapper = ( + props: OverflowingTextWithTooltipProps & { children?: React.ReactNode }, +) => { + return React.createElement(OverflowingTextWithTooltip, filterUiProps(props)); +}; +const TwentyUiH1TitleWrapper = ( + props: H1TitleProps & { children?: React.ReactNode }, +) => { + return React.createElement(H1Title, filterUiProps(props)); +}; +const TwentyUiH2TitleWrapper = ( + props: H2TitleProps & { children?: React.ReactNode }, +) => { + return React.createElement(H2Title, filterUiProps(props)); +}; +const TwentyUiH3TitleWrapper = ( + props: H3TitleProps & { children?: React.ReactNode }, +) => { + return React.createElement(H3Title, filterUiProps(props)); +}; +const TwentyUiLoaderWrapper = ( + props: LoaderProps & { children?: React.ReactNode }, +) => { + return React.createElement(Loader, filterUiProps(props)); +}; +const TwentyUiCircularProgressBarWrapper = ( + props: CircularProgressBarProps & { children?: React.ReactNode }, +) => { + return React.createElement(CircularProgressBar, filterUiProps(props)); +}; +const TwentyUiProgressBarWrapper = ( + props: ProgressBarProps & { children?: React.ReactNode }, +) => { + return React.createElement(ProgressBar, filterUiProps(props)); +}; +const TwentyUiAnimatedExpandableContainerWrapper = ( + props: AnimatedExpandableContainerProps & { children?: React.ReactNode }, +) => { + return React.createElement(AnimatedExpandableContainer, filterUiProps(props)); +}; +const TwentyUiAnimatedPlaceholderWrapper = ( + props: AnimatedPlaceholderProps & { children?: React.ReactNode }, +) => { + return React.createElement(AnimatedPlaceholder, filterUiProps(props)); +}; +const TwentyUiSectionWrapper = ( + props: SectionProps & { children?: React.ReactNode }, +) => { + return React.createElement(Section, filterUiProps(props)); +}; +const TwentyUiAdvancedSettingsToggleWrapper = ( + props: AdvancedSettingsToggleProps & { children?: React.ReactNode }, +) => { + return React.createElement(AdvancedSettingsToggle, filterUiProps(props)); +}; +const TwentyUiClickToActionLinkWrapper = ( + props: ClickToActionLinkProps & { children?: React.ReactNode }, +) => { + return React.createElement(ClickToActionLink, filterUiProps(props)); +}; +const TwentyUiContactLinkWrapper = ( + props: ContactLinkProps & { children?: React.ReactNode }, +) => { + return React.createElement( + ContactLink, + filterUiProps(props, new Set(['onClick'])), + ); +}; +const TwentyUiGithubVersionLinkWrapper = ( + props: GithubVersionLinkProps & { children?: React.ReactNode }, +) => { + return React.createElement(GithubVersionLink, filterUiProps(props)); +}; +const TwentyUiRawLinkWrapper = ( + props: RawLinkProps & { children?: React.ReactNode }, +) => { + return React.createElement( + RawLink, + filterUiProps(props, new Set(['onClick'])), + ); +}; +const TwentyUiRoundedLinkWrapper = ( + props: RoundedLinkProps & { children?: React.ReactNode }, +) => { + return React.createElement( + RoundedLink, + filterUiProps(props, new Set(['onClick'])), + ); +}; +const TwentyUiSocialLinkWrapper = ( + props: SocialLinkProps & { children?: React.ReactNode }, +) => { + return React.createElement( + SocialLink, + filterUiProps(props, new Set(['onClick'])), + ); +}; +const TwentyUiUndecoratedLinkWrapper = ( + props: UndecoratedLinkProps & { children?: React.ReactNode }, +) => { + return React.createElement(UndecoratedLink, filterUiProps(props)); +}; +const TwentyUiMenuPickerWrapper = ( + props: MenuPickerProps & { children?: React.ReactNode }, +) => { + return React.createElement(MenuPicker, filterUiProps(props)); +}; +const TwentyUiMenuItemWrapper = ( + props: MenuItemProps & { children?: React.ReactNode }, +) => { + return React.createElement( + MenuItem, + filterUiProps(props, new Set(['onClick', 'onMouseEnter', 'onMouseLeave'])), + ); +}; +const TwentyUiMenuItemAvatarWrapper = ( + props: MenuItemAvatarProps & { children?: React.ReactNode }, +) => { + return React.createElement( + MenuItemAvatar, + filterUiProps(props, new Set(['onClick', 'onMouseEnter', 'onMouseLeave'])), + ); +}; +const TwentyUiMenuItemDraggableWrapper = ( + props: MenuItemDraggableProps & { children?: React.ReactNode }, +) => { + return React.createElement(MenuItemDraggable, filterUiProps(props)); +}; +const TwentyUiMenuItemHotKeysWrapper = ( + props: MenuItemHotKeysProps & { children?: React.ReactNode }, +) => { + return React.createElement(MenuItemHotKeys, filterUiProps(props)); +}; +const TwentyUiMenuItemMultiSelectWrapper = ( + props: MenuItemMultiSelectProps & { children?: React.ReactNode }, +) => { + return React.createElement(MenuItemMultiSelect, filterUiProps(props)); +}; +const TwentyUiMenuItemMultiSelectAvatarWrapper = ( + props: MenuItemMultiSelectAvatarProps & { children?: React.ReactNode }, +) => { + return React.createElement(MenuItemMultiSelectAvatar, filterUiProps(props)); +}; +const TwentyUiMenuItemMultiSelectTagWrapper = ( + props: MenuItemMultiSelectTagProps & { children?: React.ReactNode }, +) => { + return React.createElement(MenuItemMultiSelectTag, filterUiProps(props)); +}; +const TwentyUiMenuItemNavigateWrapper = ( + props: MenuItemNavigateProps & { children?: React.ReactNode }, +) => { + return React.createElement(MenuItemNavigate, filterUiProps(props)); +}; +const TwentyUiMenuItemSelectWrapper = ( + props: MenuItemSelectProps & { children?: React.ReactNode }, +) => { + return React.createElement(MenuItemSelect, filterUiProps(props)); +}; +const TwentyUiMenuItemSelectAvatarWrapper = ( + props: MenuItemSelectAvatarProps & { children?: React.ReactNode }, +) => { + return React.createElement(MenuItemSelectAvatar, filterUiProps(props)); +}; +const TwentyUiMenuItemSelectColorWrapper = ( + props: MenuItemSelectColorProps & { children?: React.ReactNode }, +) => { + return React.createElement(MenuItemSelectColor, filterUiProps(props)); +}; +const TwentyUiMenuItemSelectTagWrapper = ( + props: MenuItemSelectTagProps & { children?: React.ReactNode }, +) => { + return React.createElement(MenuItemSelectTag, filterUiProps(props)); +}; +const TwentyUiMenuItemSuggestionWrapper = ( + props: MenuItemSuggestionProps & { children?: React.ReactNode }, +) => { + return React.createElement( + MenuItemSuggestion, + filterUiProps(props, new Set(['onClick'])), + ); +}; +const TwentyUiMenuItemToggleWrapper = ( + props: MenuItemToggleProps & { children?: React.ReactNode }, +) => { + return React.createElement(MenuItemToggle, filterUiProps(props)); +}; +const TwentyUiMenuItemLeftContentWrapper = ( + props: MenuItemLeftContentProps & { children?: React.ReactNode }, +) => { + return React.createElement(MenuItemLeftContent, filterUiProps(props)); +}; +const TwentyUiNavigationBarWrapper = ( + props: NavigationBarProps & { children?: React.ReactNode }, +) => { + return React.createElement(NavigationBar, filterUiProps(props)); +}; +const TwentyUiNavigationBarItemWrapper = ( + props: NavigationBarItemProps & { children?: React.ReactNode }, +) => { + return React.createElement(NavigationBarItem, filterUiProps(props)); +}; +const TwentyUiNotificationCounterWrapper = ( + props: NotificationCounterProps & { children?: React.ReactNode }, +) => { + return React.createElement(NotificationCounter, filterUiProps(props)); }; type ComponentRegistryValue = | ReturnType @@ -465,6 +1280,287 @@ export const componentRegistry: Map = new Map([ ['html-td', createRemoteComponentRenderer(HtmlTdWrapper)], ['html-br', createRemoteComponentRenderer(HtmlBrWrapper)], ['html-hr', createRemoteComponentRenderer(HtmlHrWrapper)], + [ + 'twenty-ui-animated-button', + createRemoteComponentRenderer(TwentyUiAnimatedButtonWrapper), + ], + [ + 'twenty-ui-animated-light-icon-button', + createRemoteComponentRenderer(TwentyUiAnimatedLightIconButtonWrapper), + ], ['twenty-ui-button', createRemoteComponentRenderer(TwentyUiButtonWrapper)], + [ + 'twenty-ui-button-group', + createRemoteComponentRenderer(TwentyUiButtonGroupWrapper), + ], + [ + 'twenty-ui-color-picker-button', + createRemoteComponentRenderer(TwentyUiColorPickerButtonWrapper), + ], + [ + 'twenty-ui-floating-button', + createRemoteComponentRenderer(TwentyUiFloatingButtonWrapper), + ], + [ + 'twenty-ui-floating-button-group', + createRemoteComponentRenderer(TwentyUiFloatingButtonGroupWrapper), + ], + [ + 'twenty-ui-floating-icon-button', + createRemoteComponentRenderer(TwentyUiFloatingIconButtonWrapper), + ], + [ + 'twenty-ui-floating-icon-button-group', + createRemoteComponentRenderer(TwentyUiFloatingIconButtonGroupWrapper), + ], + [ + 'twenty-ui-inside-button', + createRemoteComponentRenderer(TwentyUiInsideButtonWrapper), + ], + [ + 'twenty-ui-light-button', + createRemoteComponentRenderer(TwentyUiLightButtonWrapper), + ], + [ + 'twenty-ui-light-icon-button', + createRemoteComponentRenderer(TwentyUiLightIconButtonWrapper), + ], + [ + 'twenty-ui-light-icon-button-group', + createRemoteComponentRenderer(TwentyUiLightIconButtonGroupWrapper), + ], + [ + 'twenty-ui-main-button', + createRemoteComponentRenderer(TwentyUiMainButtonWrapper), + ], + [ + 'twenty-ui-rounded-icon-button', + createRemoteComponentRenderer(TwentyUiRoundedIconButtonWrapper), + ], + [ + 'twenty-ui-tab-content', + createRemoteComponentRenderer(TwentyUiTabContentWrapper), + ], + [ + 'twenty-ui-tab-button', + createRemoteComponentRenderer(TwentyUiTabButtonWrapper), + ], + [ + 'twenty-ui-code-editor', + createRemoteComponentRenderer(TwentyUiCodeEditorWrapper), + ], + [ + 'twenty-ui-core-editor-header', + createRemoteComponentRenderer(TwentyUiCoreEditorHeaderWrapper), + ], + [ + 'twenty-ui-color-scheme-card', + createRemoteComponentRenderer(TwentyUiColorSchemeCardWrapper), + ], + [ + 'twenty-ui-color-scheme-picker', + createRemoteComponentRenderer(TwentyUiColorSchemePickerWrapper), + ], + [ + 'twenty-ui-card-picker', + createRemoteComponentRenderer(TwentyUiCardPickerWrapper), + ], + [ + 'twenty-ui-checkbox', + createRemoteComponentRenderer(TwentyUiCheckboxWrapper), + ], + ['twenty-ui-radio', createRemoteComponentRenderer(TwentyUiRadioWrapper)], + [ + 'twenty-ui-radio-group', + createRemoteComponentRenderer(TwentyUiRadioGroupWrapper), + ], + [ + 'twenty-ui-search-input', + createRemoteComponentRenderer(TwentyUiSearchInputWrapper), + ], + ['twenty-ui-toggle', createRemoteComponentRenderer(TwentyUiToggleWrapper)], + [ + 'twenty-ui-avatar-chip', + createRemoteComponentRenderer(TwentyUiAvatarChipWrapper), + ], + [ + 'twenty-ui-multiple-avatar-chip', + createRemoteComponentRenderer(TwentyUiMultipleAvatarChipWrapper), + ], + ['twenty-ui-chip', createRemoteComponentRenderer(TwentyUiChipWrapper)], + [ + 'twenty-ui-link-chip', + createRemoteComponentRenderer(TwentyUiLinkChipWrapper), + ], + ['twenty-ui-pill', createRemoteComponentRenderer(TwentyUiPillWrapper)], + ['twenty-ui-tag', createRemoteComponentRenderer(TwentyUiTagWrapper)], + ['twenty-ui-avatar', createRemoteComponentRenderer(TwentyUiAvatarWrapper)], + [ + 'twenty-ui-avatar-group', + createRemoteComponentRenderer(TwentyUiAvatarGroupWrapper), + ], + ['twenty-ui-banner', createRemoteComponentRenderer(TwentyUiBannerWrapper)], + [ + 'twenty-ui-side-panel-information-banner', + createRemoteComponentRenderer(TwentyUiSidePanelInformationBannerWrapper), + ], + ['twenty-ui-callout', createRemoteComponentRenderer(TwentyUiCalloutWrapper)], + [ + 'twenty-ui-animated-checkmark', + createRemoteComponentRenderer(TwentyUiAnimatedCheckmarkWrapper), + ], + [ + 'twenty-ui-checkmark', + createRemoteComponentRenderer(TwentyUiCheckmarkWrapper), + ], + [ + 'twenty-ui-color-sample', + createRemoteComponentRenderer(TwentyUiColorSampleWrapper), + ], + [ + 'twenty-ui-command-block', + createRemoteComponentRenderer(TwentyUiCommandBlockWrapper), + ], + ['twenty-ui-icon', createRemoteComponentRenderer(TwentyUiIconWrapper)], + ['twenty-ui-info', createRemoteComponentRenderer(TwentyUiInfoWrapper)], + ['twenty-ui-status', createRemoteComponentRenderer(TwentyUiStatusWrapper)], + [ + 'twenty-ui-horizontal-separator', + createRemoteComponentRenderer(TwentyUiHorizontalSeparatorWrapper), + ], + [ + 'twenty-ui-app-tooltip', + createRemoteComponentRenderer(TwentyUiAppTooltipWrapper), + ], + [ + 'twenty-ui-overflowing-text-with-tooltip', + createRemoteComponentRenderer(TwentyUiOverflowingTextWithTooltipWrapper), + ], + ['twenty-ui-h1-title', createRemoteComponentRenderer(TwentyUiH1TitleWrapper)], + ['twenty-ui-h2-title', createRemoteComponentRenderer(TwentyUiH2TitleWrapper)], + ['twenty-ui-h3-title', createRemoteComponentRenderer(TwentyUiH3TitleWrapper)], + ['twenty-ui-loader', createRemoteComponentRenderer(TwentyUiLoaderWrapper)], + [ + 'twenty-ui-circular-progress-bar', + createRemoteComponentRenderer(TwentyUiCircularProgressBarWrapper), + ], + [ + 'twenty-ui-progress-bar', + createRemoteComponentRenderer(TwentyUiProgressBarWrapper), + ], + [ + 'twenty-ui-animated-expandable-container', + createRemoteComponentRenderer(TwentyUiAnimatedExpandableContainerWrapper), + ], + [ + 'twenty-ui-animated-placeholder', + createRemoteComponentRenderer(TwentyUiAnimatedPlaceholderWrapper), + ], + ['twenty-ui-section', createRemoteComponentRenderer(TwentyUiSectionWrapper)], + [ + 'twenty-ui-advanced-settings-toggle', + createRemoteComponentRenderer(TwentyUiAdvancedSettingsToggleWrapper), + ], + [ + 'twenty-ui-click-to-action-link', + createRemoteComponentRenderer(TwentyUiClickToActionLinkWrapper), + ], + [ + 'twenty-ui-contact-link', + createRemoteComponentRenderer(TwentyUiContactLinkWrapper), + ], + [ + 'twenty-ui-github-version-link', + createRemoteComponentRenderer(TwentyUiGithubVersionLinkWrapper), + ], + ['twenty-ui-raw-link', createRemoteComponentRenderer(TwentyUiRawLinkWrapper)], + [ + 'twenty-ui-rounded-link', + createRemoteComponentRenderer(TwentyUiRoundedLinkWrapper), + ], + [ + 'twenty-ui-social-link', + createRemoteComponentRenderer(TwentyUiSocialLinkWrapper), + ], + [ + 'twenty-ui-undecorated-link', + createRemoteComponentRenderer(TwentyUiUndecoratedLinkWrapper), + ], + [ + 'twenty-ui-menu-picker', + createRemoteComponentRenderer(TwentyUiMenuPickerWrapper), + ], + [ + 'twenty-ui-menu-item', + createRemoteComponentRenderer(TwentyUiMenuItemWrapper), + ], + [ + 'twenty-ui-menu-item-avatar', + createRemoteComponentRenderer(TwentyUiMenuItemAvatarWrapper), + ], + [ + 'twenty-ui-menu-item-draggable', + createRemoteComponentRenderer(TwentyUiMenuItemDraggableWrapper), + ], + [ + 'twenty-ui-menu-item-hot-keys', + createRemoteComponentRenderer(TwentyUiMenuItemHotKeysWrapper), + ], + [ + 'twenty-ui-menu-item-multi-select', + createRemoteComponentRenderer(TwentyUiMenuItemMultiSelectWrapper), + ], + [ + 'twenty-ui-menu-item-multi-select-avatar', + createRemoteComponentRenderer(TwentyUiMenuItemMultiSelectAvatarWrapper), + ], + [ + 'twenty-ui-menu-item-multi-select-tag', + createRemoteComponentRenderer(TwentyUiMenuItemMultiSelectTagWrapper), + ], + [ + 'twenty-ui-menu-item-navigate', + createRemoteComponentRenderer(TwentyUiMenuItemNavigateWrapper), + ], + [ + 'twenty-ui-menu-item-select', + createRemoteComponentRenderer(TwentyUiMenuItemSelectWrapper), + ], + [ + 'twenty-ui-menu-item-select-avatar', + createRemoteComponentRenderer(TwentyUiMenuItemSelectAvatarWrapper), + ], + [ + 'twenty-ui-menu-item-select-color', + createRemoteComponentRenderer(TwentyUiMenuItemSelectColorWrapper), + ], + [ + 'twenty-ui-menu-item-select-tag', + createRemoteComponentRenderer(TwentyUiMenuItemSelectTagWrapper), + ], + [ + 'twenty-ui-menu-item-suggestion', + createRemoteComponentRenderer(TwentyUiMenuItemSuggestionWrapper), + ], + [ + 'twenty-ui-menu-item-toggle', + createRemoteComponentRenderer(TwentyUiMenuItemToggleWrapper), + ], + [ + 'twenty-ui-menu-item-left-content', + createRemoteComponentRenderer(TwentyUiMenuItemLeftContentWrapper), + ], + [ + 'twenty-ui-navigation-bar', + createRemoteComponentRenderer(TwentyUiNavigationBarWrapper), + ], + [ + 'twenty-ui-navigation-bar-item', + createRemoteComponentRenderer(TwentyUiNavigationBarItemWrapper), + ], + [ + 'twenty-ui-notification-counter', + createRemoteComponentRenderer(TwentyUiNotificationCounterWrapper), + ], ['remote-fragment', RemoteFragmentRenderer], ]); diff --git a/packages/twenty-sdk/src/front-component/remote/generated/remote-components.ts b/packages/twenty-sdk/src/front-component/remote/generated/remote-components.ts index 5b3014ceac..b9dc8fc301 100644 --- a/packages/twenty-sdk/src/front-component/remote/generated/remote-components.ts +++ b/packages/twenty-sdk/src/front-component/remote/generated/remote-components.ts @@ -52,22 +52,105 @@ import { HtmlTdElement, HtmlBrElement, HtmlHrElement, + TwentyUiAnimatedButtonElement, + TwentyUiAnimatedLightIconButtonElement, TwentyUiButtonElement, + TwentyUiButtonGroupElement, + TwentyUiColorPickerButtonElement, + TwentyUiFloatingButtonElement, + TwentyUiFloatingButtonGroupElement, + TwentyUiFloatingIconButtonElement, + TwentyUiFloatingIconButtonGroupElement, + TwentyUiInsideButtonElement, + TwentyUiLightButtonElement, + TwentyUiLightIconButtonElement, + TwentyUiLightIconButtonGroupElement, + TwentyUiMainButtonElement, + TwentyUiRoundedIconButtonElement, + TwentyUiTabContentElement, + TwentyUiTabButtonElement, + TwentyUiCodeEditorElement, + TwentyUiCoreEditorHeaderElement, + TwentyUiColorSchemeCardElement, + TwentyUiColorSchemePickerElement, + TwentyUiCardPickerElement, + TwentyUiCheckboxElement, + TwentyUiRadioElement, + TwentyUiRadioGroupElement, + TwentyUiSearchInputElement, + TwentyUiToggleElement, + TwentyUiAvatarChipElement, + TwentyUiMultipleAvatarChipElement, + TwentyUiChipElement, + TwentyUiLinkChipElement, + TwentyUiPillElement, + TwentyUiTagElement, + TwentyUiAvatarElement, + TwentyUiAvatarGroupElement, + TwentyUiBannerElement, + TwentyUiSidePanelInformationBannerElement, + TwentyUiCalloutElement, + TwentyUiAnimatedCheckmarkElement, + TwentyUiCheckmarkElement, + TwentyUiColorSampleElement, + TwentyUiCommandBlockElement, + TwentyUiIconElement, + TwentyUiInfoElement, + TwentyUiStatusElement, + TwentyUiHorizontalSeparatorElement, + TwentyUiAppTooltipElement, + TwentyUiOverflowingTextWithTooltipElement, + TwentyUiH1TitleElement, + TwentyUiH2TitleElement, + TwentyUiH3TitleElement, + TwentyUiLoaderElement, + TwentyUiCircularProgressBarElement, + TwentyUiProgressBarElement, + TwentyUiAnimatedExpandableContainerElement, + TwentyUiAnimatedPlaceholderElement, + TwentyUiSectionElement, + TwentyUiAdvancedSettingsToggleElement, + TwentyUiClickToActionLinkElement, + TwentyUiContactLinkElement, + TwentyUiGithubVersionLinkElement, + TwentyUiRawLinkElement, + TwentyUiRoundedLinkElement, + TwentyUiSocialLinkElement, + TwentyUiUndecoratedLinkElement, + TwentyUiMenuPickerElement, + TwentyUiMenuItemElement, + TwentyUiMenuItemAvatarElement, + TwentyUiMenuItemDraggableElement, + TwentyUiMenuItemHotKeysElement, + TwentyUiMenuItemMultiSelectElement, + TwentyUiMenuItemMultiSelectAvatarElement, + TwentyUiMenuItemMultiSelectTagElement, + TwentyUiMenuItemNavigateElement, + TwentyUiMenuItemSelectElement, + TwentyUiMenuItemSelectAvatarElement, + TwentyUiMenuItemSelectColorElement, + TwentyUiMenuItemSelectTagElement, + TwentyUiMenuItemSuggestionElement, + TwentyUiMenuItemToggleElement, + TwentyUiMenuItemLeftContentElement, + TwentyUiNavigationBarElement, + TwentyUiNavigationBarItemElement, + TwentyUiNotificationCounterElement, } from './remote-elements'; export const HtmlDiv = createRemoteComponent('html-div', HtmlDivElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -75,23 +158,23 @@ export const HtmlDiv = createRemoteComponent('html-div', HtmlDivElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlSpan = createRemoteComponent('html-span', HtmlSpanElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -99,7 +182,7 @@ export const HtmlSpan = createRemoteComponent('html-span', HtmlSpanElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); @@ -109,16 +192,16 @@ export const HtmlSection = createRemoteComponent( { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -126,7 +209,7 @@ export const HtmlSection = createRemoteComponent( onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }, @@ -137,16 +220,16 @@ export const HtmlArticle = createRemoteComponent( { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -154,7 +237,7 @@ export const HtmlArticle = createRemoteComponent( onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }, @@ -165,16 +248,16 @@ export const HtmlHeader = createRemoteComponent( { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -182,7 +265,7 @@ export const HtmlHeader = createRemoteComponent( onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }, @@ -193,16 +276,16 @@ export const HtmlFooter = createRemoteComponent( { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -210,7 +293,7 @@ export const HtmlFooter = createRemoteComponent( onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }, @@ -218,16 +301,16 @@ export const HtmlFooter = createRemoteComponent( export const HtmlMain = createRemoteComponent('html-main', HtmlMainElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -235,23 +318,23 @@ export const HtmlMain = createRemoteComponent('html-main', HtmlMainElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlNav = createRemoteComponent('html-nav', HtmlNavElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -259,23 +342,23 @@ export const HtmlNav = createRemoteComponent('html-nav', HtmlNavElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlAside = createRemoteComponent('html-aside', HtmlAsideElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -283,23 +366,23 @@ export const HtmlAside = createRemoteComponent('html-aside', HtmlAsideElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlP = createRemoteComponent('html-p', HtmlPElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -307,23 +390,23 @@ export const HtmlP = createRemoteComponent('html-p', HtmlPElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlH1 = createRemoteComponent('html-h1', HtmlH1Element, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -331,23 +414,23 @@ export const HtmlH1 = createRemoteComponent('html-h1', HtmlH1Element, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlH2 = createRemoteComponent('html-h2', HtmlH2Element, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -355,23 +438,23 @@ export const HtmlH2 = createRemoteComponent('html-h2', HtmlH2Element, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlH3 = createRemoteComponent('html-h3', HtmlH3Element, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -379,23 +462,23 @@ export const HtmlH3 = createRemoteComponent('html-h3', HtmlH3Element, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlH4 = createRemoteComponent('html-h4', HtmlH4Element, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -403,23 +486,23 @@ export const HtmlH4 = createRemoteComponent('html-h4', HtmlH4Element, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlH5 = createRemoteComponent('html-h5', HtmlH5Element, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -427,23 +510,23 @@ export const HtmlH5 = createRemoteComponent('html-h5', HtmlH5Element, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlH6 = createRemoteComponent('html-h6', HtmlH6Element, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -451,7 +534,7 @@ export const HtmlH6 = createRemoteComponent('html-h6', HtmlH6Element, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); @@ -461,16 +544,16 @@ export const HtmlStrong = createRemoteComponent( { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -478,7 +561,7 @@ export const HtmlStrong = createRemoteComponent( onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }, @@ -486,16 +569,16 @@ export const HtmlStrong = createRemoteComponent( export const HtmlEm = createRemoteComponent('html-em', HtmlEmElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -503,23 +586,23 @@ export const HtmlEm = createRemoteComponent('html-em', HtmlEmElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlSmall = createRemoteComponent('html-small', HtmlSmallElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -527,23 +610,23 @@ export const HtmlSmall = createRemoteComponent('html-small', HtmlSmallElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlCode = createRemoteComponent('html-code', HtmlCodeElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -551,23 +634,23 @@ export const HtmlCode = createRemoteComponent('html-code', HtmlCodeElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlPre = createRemoteComponent('html-pre', HtmlPreElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -575,7 +658,7 @@ export const HtmlPre = createRemoteComponent('html-pre', HtmlPreElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); @@ -585,16 +668,16 @@ export const HtmlBlockquote = createRemoteComponent( { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -602,7 +685,7 @@ export const HtmlBlockquote = createRemoteComponent( onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }, @@ -610,16 +693,16 @@ export const HtmlBlockquote = createRemoteComponent( export const HtmlA = createRemoteComponent('html-a', HtmlAElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -627,23 +710,23 @@ export const HtmlA = createRemoteComponent('html-a', HtmlAElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlImg = createRemoteComponent('html-img', HtmlImgElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -651,23 +734,23 @@ export const HtmlImg = createRemoteComponent('html-img', HtmlImgElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlUl = createRemoteComponent('html-ul', HtmlUlElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -675,23 +758,23 @@ export const HtmlUl = createRemoteComponent('html-ul', HtmlUlElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlOl = createRemoteComponent('html-ol', HtmlOlElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -699,23 +782,23 @@ export const HtmlOl = createRemoteComponent('html-ol', HtmlOlElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlLi = createRemoteComponent('html-li', HtmlLiElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -723,23 +806,23 @@ export const HtmlLi = createRemoteComponent('html-li', HtmlLiElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlForm = createRemoteComponent('html-form', HtmlFormElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -747,23 +830,23 @@ export const HtmlForm = createRemoteComponent('html-form', HtmlFormElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlLabel = createRemoteComponent('html-label', HtmlLabelElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -771,23 +854,23 @@ export const HtmlLabel = createRemoteComponent('html-label', HtmlLabelElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlInput = createRemoteComponent('html-input', HtmlInputElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -795,7 +878,7 @@ export const HtmlInput = createRemoteComponent('html-input', HtmlInputElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); @@ -805,16 +888,16 @@ export const HtmlTextarea = createRemoteComponent( { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -822,7 +905,7 @@ export const HtmlTextarea = createRemoteComponent( onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }, @@ -833,16 +916,16 @@ export const HtmlSelect = createRemoteComponent( { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -850,7 +933,7 @@ export const HtmlSelect = createRemoteComponent( onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }, @@ -861,16 +944,16 @@ export const HtmlOption = createRemoteComponent( { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -878,7 +961,7 @@ export const HtmlOption = createRemoteComponent( onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }, @@ -889,16 +972,16 @@ export const HtmlButton = createRemoteComponent( { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -906,7 +989,7 @@ export const HtmlButton = createRemoteComponent( onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }, @@ -914,16 +997,16 @@ export const HtmlButton = createRemoteComponent( export const HtmlTable = createRemoteComponent('html-table', HtmlTableElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -931,23 +1014,23 @@ export const HtmlTable = createRemoteComponent('html-table', HtmlTableElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlThead = createRemoteComponent('html-thead', HtmlTheadElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -955,23 +1038,23 @@ export const HtmlThead = createRemoteComponent('html-thead', HtmlTheadElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlTbody = createRemoteComponent('html-tbody', HtmlTbodyElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -979,23 +1062,23 @@ export const HtmlTbody = createRemoteComponent('html-tbody', HtmlTbodyElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlTfoot = createRemoteComponent('html-tfoot', HtmlTfootElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -1003,23 +1086,23 @@ export const HtmlTfoot = createRemoteComponent('html-tfoot', HtmlTfootElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlTr = createRemoteComponent('html-tr', HtmlTrElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -1027,23 +1110,23 @@ export const HtmlTr = createRemoteComponent('html-tr', HtmlTrElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlTh = createRemoteComponent('html-th', HtmlThElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -1051,23 +1134,23 @@ export const HtmlTh = createRemoteComponent('html-th', HtmlThElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlTd = createRemoteComponent('html-td', HtmlTdElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -1075,23 +1158,23 @@ export const HtmlTd = createRemoteComponent('html-td', HtmlTdElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlBr = createRemoteComponent('html-br', HtmlBrElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -1099,23 +1182,23 @@ export const HtmlBr = createRemoteComponent('html-br', HtmlBrElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); export const HtmlHr = createRemoteComponent('html-hr', HtmlHrElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, + onDoubleClick: { event: 'dblclick' }, + onMouseDown: { event: 'mousedown' }, + onMouseUp: { event: 'mouseup' }, + onMouseOver: { event: 'mouseover' }, + onMouseOut: { event: 'mouseout' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + onKeyDown: { event: 'keydown' }, + onKeyUp: { event: 'keyup' }, + onKeyPress: { event: 'keypress' }, onFocus: { event: 'focus' }, onBlur: { event: 'blur' }, onChange: { event: 'change' }, @@ -1123,35 +1206,448 @@ export const HtmlHr = createRemoteComponent('html-hr', HtmlHrElement, { onSubmit: { event: 'submit' }, onScroll: { event: 'scroll' }, onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, + onContextMenu: { event: 'contextmenu' }, onDrag: { event: 'drag' }, }, }); +export const TwentyUiAnimatedButton = createRemoteComponent( + 'twenty-ui-animated-button', + TwentyUiAnimatedButtonElement, + { + eventProps: { + onClick: { event: 'click' }, + }, + }, +); +export const TwentyUiAnimatedLightIconButton = createRemoteComponent( + 'twenty-ui-animated-light-icon-button', + TwentyUiAnimatedLightIconButtonElement, + { + eventProps: { + onClick: { event: 'click' }, + }, + }, +); export const TwentyUiButton = createRemoteComponent( 'twenty-ui-button', TwentyUiButtonElement, { eventProps: { onClick: { event: 'click' }, - onDblclick: { event: 'dblclick' }, - onMousedown: { event: 'mousedown' }, - onMouseup: { event: 'mouseup' }, - onMouseover: { event: 'mouseover' }, - onMouseout: { event: 'mouseout' }, - onMouseenter: { event: 'mouseenter' }, - onMouseleave: { event: 'mouseleave' }, - onKeydown: { event: 'keydown' }, - onKeyup: { event: 'keyup' }, - onKeypress: { event: 'keypress' }, - onFocus: { event: 'focus' }, - onBlur: { event: 'blur' }, - onChange: { event: 'change' }, - onInput: { event: 'input' }, - onSubmit: { event: 'submit' }, - onScroll: { event: 'scroll' }, - onWheel: { event: 'wheel' }, - onContextmenu: { event: 'contextmenu' }, - onDrag: { event: 'drag' }, }, }, ); +export const TwentyUiButtonGroup = createRemoteComponent( + 'twenty-ui-button-group', + TwentyUiButtonGroupElement, +); +export const TwentyUiColorPickerButton = createRemoteComponent( + 'twenty-ui-color-picker-button', + TwentyUiColorPickerButtonElement, + { + eventProps: { + onClick: { event: 'click' }, + }, + }, +); +export const TwentyUiFloatingButton = createRemoteComponent( + 'twenty-ui-floating-button', + TwentyUiFloatingButtonElement, +); +export const TwentyUiFloatingButtonGroup = createRemoteComponent( + 'twenty-ui-floating-button-group', + TwentyUiFloatingButtonGroupElement, +); +export const TwentyUiFloatingIconButton = createRemoteComponent( + 'twenty-ui-floating-icon-button', + TwentyUiFloatingIconButtonElement, + { + eventProps: { + onClick: { event: 'click' }, + }, + }, +); +export const TwentyUiFloatingIconButtonGroup = createRemoteComponent( + 'twenty-ui-floating-icon-button-group', + TwentyUiFloatingIconButtonGroupElement, +); +export const TwentyUiInsideButton = createRemoteComponent( + 'twenty-ui-inside-button', + TwentyUiInsideButtonElement, + { + eventProps: { + onClick: { event: 'click' }, + }, + }, +); +export const TwentyUiLightButton = createRemoteComponent( + 'twenty-ui-light-button', + TwentyUiLightButtonElement, + { + eventProps: { + onClick: { event: 'click' }, + }, + }, +); +export const TwentyUiLightIconButton = createRemoteComponent( + 'twenty-ui-light-icon-button', + TwentyUiLightIconButtonElement, + { + eventProps: { + onClick: { event: 'click' }, + }, + }, +); +export const TwentyUiLightIconButtonGroup = createRemoteComponent( + 'twenty-ui-light-icon-button-group', + TwentyUiLightIconButtonGroupElement, +); +export const TwentyUiMainButton = createRemoteComponent( + 'twenty-ui-main-button', + TwentyUiMainButtonElement, +); +export const TwentyUiRoundedIconButton = createRemoteComponent( + 'twenty-ui-rounded-icon-button', + TwentyUiRoundedIconButtonElement, +); +export const TwentyUiTabContent = createRemoteComponent( + 'twenty-ui-tab-content', + TwentyUiTabContentElement, +); +export const TwentyUiTabButton = createRemoteComponent( + 'twenty-ui-tab-button', + TwentyUiTabButtonElement, +); +export const TwentyUiCodeEditor = createRemoteComponent( + 'twenty-ui-code-editor', + TwentyUiCodeEditorElement, +); +export const TwentyUiCoreEditorHeader = createRemoteComponent( + 'twenty-ui-core-editor-header', + TwentyUiCoreEditorHeaderElement, +); +export const TwentyUiColorSchemeCard = createRemoteComponent( + 'twenty-ui-color-scheme-card', + TwentyUiColorSchemeCardElement, +); +export const TwentyUiColorSchemePicker = createRemoteComponent( + 'twenty-ui-color-scheme-picker', + TwentyUiColorSchemePickerElement, +); +export const TwentyUiCardPicker = createRemoteComponent( + 'twenty-ui-card-picker', + TwentyUiCardPickerElement, +); +export const TwentyUiCheckbox = createRemoteComponent( + 'twenty-ui-checkbox', + TwentyUiCheckboxElement, + { + eventProps: { + onChange: { event: 'change' }, + }, + }, +); +export const TwentyUiRadio = createRemoteComponent( + 'twenty-ui-radio', + TwentyUiRadioElement, + { + eventProps: { + onChange: { event: 'change' }, + }, + }, +); +export const TwentyUiRadioGroup = createRemoteComponent( + 'twenty-ui-radio-group', + TwentyUiRadioGroupElement, + { + eventProps: { + onChange: { event: 'change' }, + }, + }, +); +export const TwentyUiSearchInput = createRemoteComponent( + 'twenty-ui-search-input', + TwentyUiSearchInputElement, +); +export const TwentyUiToggle = createRemoteComponent( + 'twenty-ui-toggle', + TwentyUiToggleElement, +); +export const TwentyUiAvatarChip = createRemoteComponent( + 'twenty-ui-avatar-chip', + TwentyUiAvatarChipElement, +); +export const TwentyUiMultipleAvatarChip = createRemoteComponent( + 'twenty-ui-multiple-avatar-chip', + TwentyUiMultipleAvatarChipElement, +); +export const TwentyUiChip = createRemoteComponent( + 'twenty-ui-chip', + TwentyUiChipElement, +); +export const TwentyUiLinkChip = createRemoteComponent( + 'twenty-ui-link-chip', + TwentyUiLinkChipElement, + { + eventProps: { + onClick: { event: 'click' }, + onMouseDown: { event: 'mousedown' }, + }, + }, +); +export const TwentyUiPill = createRemoteComponent( + 'twenty-ui-pill', + TwentyUiPillElement, +); +export const TwentyUiTag = createRemoteComponent( + 'twenty-ui-tag', + TwentyUiTagElement, +); +export const TwentyUiAvatar = createRemoteComponent( + 'twenty-ui-avatar', + TwentyUiAvatarElement, +); +export const TwentyUiAvatarGroup = createRemoteComponent( + 'twenty-ui-avatar-group', + TwentyUiAvatarGroupElement, +); +export const TwentyUiBanner = createRemoteComponent( + 'twenty-ui-banner', + TwentyUiBannerElement, +); +export const TwentyUiSidePanelInformationBanner = createRemoteComponent( + 'twenty-ui-side-panel-information-banner', + TwentyUiSidePanelInformationBannerElement, +); +export const TwentyUiCallout = createRemoteComponent( + 'twenty-ui-callout', + TwentyUiCalloutElement, +); +export const TwentyUiAnimatedCheckmark = createRemoteComponent( + 'twenty-ui-animated-checkmark', + TwentyUiAnimatedCheckmarkElement, +); +export const TwentyUiCheckmark = createRemoteComponent( + 'twenty-ui-checkmark', + TwentyUiCheckmarkElement, +); +export const TwentyUiColorSample = createRemoteComponent( + 'twenty-ui-color-sample', + TwentyUiColorSampleElement, +); +export const TwentyUiCommandBlock = createRemoteComponent( + 'twenty-ui-command-block', + TwentyUiCommandBlockElement, +); +export const TwentyUiIcon = createRemoteComponent( + 'twenty-ui-icon', + TwentyUiIconElement, +); +export const TwentyUiInfo = createRemoteComponent( + 'twenty-ui-info', + TwentyUiInfoElement, + { + eventProps: { + onClick: { event: 'click' }, + }, + }, +); +export const TwentyUiStatus = createRemoteComponent( + 'twenty-ui-status', + TwentyUiStatusElement, +); +export const TwentyUiHorizontalSeparator = createRemoteComponent( + 'twenty-ui-horizontal-separator', + TwentyUiHorizontalSeparatorElement, +); +export const TwentyUiAppTooltip = createRemoteComponent( + 'twenty-ui-app-tooltip', + TwentyUiAppTooltipElement, +); +export const TwentyUiOverflowingTextWithTooltip = createRemoteComponent( + 'twenty-ui-overflowing-text-with-tooltip', + TwentyUiOverflowingTextWithTooltipElement, +); +export const TwentyUiH1Title = createRemoteComponent( + 'twenty-ui-h1-title', + TwentyUiH1TitleElement, +); +export const TwentyUiH2Title = createRemoteComponent( + 'twenty-ui-h2-title', + TwentyUiH2TitleElement, +); +export const TwentyUiH3Title = createRemoteComponent( + 'twenty-ui-h3-title', + TwentyUiH3TitleElement, +); +export const TwentyUiLoader = createRemoteComponent( + 'twenty-ui-loader', + TwentyUiLoaderElement, +); +export const TwentyUiCircularProgressBar = createRemoteComponent( + 'twenty-ui-circular-progress-bar', + TwentyUiCircularProgressBarElement, +); +export const TwentyUiProgressBar = createRemoteComponent( + 'twenty-ui-progress-bar', + TwentyUiProgressBarElement, +); +export const TwentyUiAnimatedExpandableContainer = createRemoteComponent( + 'twenty-ui-animated-expandable-container', + TwentyUiAnimatedExpandableContainerElement, +); +export const TwentyUiAnimatedPlaceholder = createRemoteComponent( + 'twenty-ui-animated-placeholder', + TwentyUiAnimatedPlaceholderElement, +); +export const TwentyUiSection = createRemoteComponent( + 'twenty-ui-section', + TwentyUiSectionElement, +); +export const TwentyUiAdvancedSettingsToggle = createRemoteComponent( + 'twenty-ui-advanced-settings-toggle', + TwentyUiAdvancedSettingsToggleElement, +); +export const TwentyUiClickToActionLink = createRemoteComponent( + 'twenty-ui-click-to-action-link', + TwentyUiClickToActionLinkElement, +); +export const TwentyUiContactLink = createRemoteComponent( + 'twenty-ui-contact-link', + TwentyUiContactLinkElement, + { + eventProps: { + onClick: { event: 'click' }, + }, + }, +); +export const TwentyUiGithubVersionLink = createRemoteComponent( + 'twenty-ui-github-version-link', + TwentyUiGithubVersionLinkElement, +); +export const TwentyUiRawLink = createRemoteComponent( + 'twenty-ui-raw-link', + TwentyUiRawLinkElement, + { + eventProps: { + onClick: { event: 'click' }, + }, + }, +); +export const TwentyUiRoundedLink = createRemoteComponent( + 'twenty-ui-rounded-link', + TwentyUiRoundedLinkElement, + { + eventProps: { + onClick: { event: 'click' }, + }, + }, +); +export const TwentyUiSocialLink = createRemoteComponent( + 'twenty-ui-social-link', + TwentyUiSocialLinkElement, + { + eventProps: { + onClick: { event: 'click' }, + }, + }, +); +export const TwentyUiUndecoratedLink = createRemoteComponent( + 'twenty-ui-undecorated-link', + TwentyUiUndecoratedLinkElement, +); +export const TwentyUiMenuPicker = createRemoteComponent( + 'twenty-ui-menu-picker', + TwentyUiMenuPickerElement, +); +export const TwentyUiMenuItem = createRemoteComponent( + 'twenty-ui-menu-item', + TwentyUiMenuItemElement, + { + eventProps: { + onClick: { event: 'click' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + }, + }, +); +export const TwentyUiMenuItemAvatar = createRemoteComponent( + 'twenty-ui-menu-item-avatar', + TwentyUiMenuItemAvatarElement, + { + eventProps: { + onClick: { event: 'click' }, + onMouseEnter: { event: 'mouseenter' }, + onMouseLeave: { event: 'mouseleave' }, + }, + }, +); +export const TwentyUiMenuItemDraggable = createRemoteComponent( + 'twenty-ui-menu-item-draggable', + TwentyUiMenuItemDraggableElement, +); +export const TwentyUiMenuItemHotKeys = createRemoteComponent( + 'twenty-ui-menu-item-hot-keys', + TwentyUiMenuItemHotKeysElement, +); +export const TwentyUiMenuItemMultiSelect = createRemoteComponent( + 'twenty-ui-menu-item-multi-select', + TwentyUiMenuItemMultiSelectElement, +); +export const TwentyUiMenuItemMultiSelectAvatar = createRemoteComponent( + 'twenty-ui-menu-item-multi-select-avatar', + TwentyUiMenuItemMultiSelectAvatarElement, +); +export const TwentyUiMenuItemMultiSelectTag = createRemoteComponent( + 'twenty-ui-menu-item-multi-select-tag', + TwentyUiMenuItemMultiSelectTagElement, +); +export const TwentyUiMenuItemNavigate = createRemoteComponent( + 'twenty-ui-menu-item-navigate', + TwentyUiMenuItemNavigateElement, +); +export const TwentyUiMenuItemSelect = createRemoteComponent( + 'twenty-ui-menu-item-select', + TwentyUiMenuItemSelectElement, +); +export const TwentyUiMenuItemSelectAvatar = createRemoteComponent( + 'twenty-ui-menu-item-select-avatar', + TwentyUiMenuItemSelectAvatarElement, +); +export const TwentyUiMenuItemSelectColor = createRemoteComponent( + 'twenty-ui-menu-item-select-color', + TwentyUiMenuItemSelectColorElement, +); +export const TwentyUiMenuItemSelectTag = createRemoteComponent( + 'twenty-ui-menu-item-select-tag', + TwentyUiMenuItemSelectTagElement, +); +export const TwentyUiMenuItemSuggestion = createRemoteComponent( + 'twenty-ui-menu-item-suggestion', + TwentyUiMenuItemSuggestionElement, + { + eventProps: { + onClick: { event: 'click' }, + }, + }, +); +export const TwentyUiMenuItemToggle = createRemoteComponent( + 'twenty-ui-menu-item-toggle', + TwentyUiMenuItemToggleElement, +); +export const TwentyUiMenuItemLeftContent = createRemoteComponent( + 'twenty-ui-menu-item-left-content', + TwentyUiMenuItemLeftContentElement, +); +export const TwentyUiNavigationBar = createRemoteComponent( + 'twenty-ui-navigation-bar', + TwentyUiNavigationBarElement, +); +export const TwentyUiNavigationBarItem = createRemoteComponent( + 'twenty-ui-navigation-bar-item', + TwentyUiNavigationBarItemElement, +); +export const TwentyUiNotificationCounter = createRemoteComponent( + 'twenty-ui-notification-counter', + TwentyUiNotificationCounterElement, +); diff --git a/packages/twenty-sdk/src/front-component/remote/generated/remote-elements.ts b/packages/twenty-sdk/src/front-component/remote/generated/remote-elements.ts index 8b89c2b702..36394538dc 100644 --- a/packages/twenty-sdk/src/front-component/remote/generated/remote-elements.ts +++ b/packages/twenty-sdk/src/front-component/remote/generated/remote-elements.ts @@ -610,29 +610,6472 @@ export const HtmlHrElement = createRemoteElement< events: [...HTML_COMMON_EVENTS_ARRAY], }); -export type TwentyUiButtonProperties = HtmlCommonProperties & { - variant?: string; - accent?: string; - size?: string; - disabled?: boolean; +export type TwentyUiAnimatedButtonProperties = { + className?: string; + title?: string; fullWidth?: boolean; + variant?: string; + inverted?: boolean; + size?: string; + position?: string; + accent?: string; + soon?: boolean; + justify?: string; + disabled?: boolean; + focus?: boolean; + to?: string; + target?: string; + dataTestId?: string; + hotkeys?: unknown[]; + ariaLabel?: string; + isLoading?: boolean; + type?: string; + dataClickOutsideId?: string; + dataGloballyPreventClickOutside?: boolean; + soonLabel?: string; +}; + +export const TwentyUiAnimatedButtonElement = createRemoteElement< + TwentyUiAnimatedButtonProperties, + Record, + { Icon: true; animatedSvg: true }, + { click(event: RemoteEvent): void } +>({ + slots: ['Icon', 'animatedSvg'], + properties: { + className: { type: String }, + title: { type: String }, + fullWidth: { type: Boolean }, + variant: { type: String }, + inverted: { type: Boolean }, + size: { type: String }, + position: { type: String }, + accent: { type: String }, + soon: { type: Boolean }, + justify: { type: String }, + disabled: { type: Boolean }, + focus: { type: Boolean }, + to: { type: String }, + target: { type: String }, + dataTestId: { type: String }, + hotkeys: { type: Array }, + ariaLabel: { type: String }, + isLoading: { type: Boolean }, + type: { type: String }, + dataClickOutsideId: { type: String }, + dataGloballyPreventClickOutside: { type: Boolean }, + soonLabel: { type: String }, + }, + events: ['click'], +}); + +export type TwentyUiAnimatedLightIconButtonProperties = { + className?: string; + testId?: string; + title?: string; + size?: string; + accent?: string; + active?: boolean; + disabled?: boolean; + focus?: boolean; + 'aria-label'?: string; +}; + +export const TwentyUiAnimatedLightIconButtonElement = createRemoteElement< + TwentyUiAnimatedLightIconButtonProperties, + Record, + { Icon: true }, + { click(event: RemoteEvent): void } +>({ + slots: ['Icon'], + properties: { + className: { type: String }, + testId: { type: String }, + title: { type: String }, + size: { type: String }, + accent: { type: String }, + active: { type: Boolean }, + disabled: { type: Boolean }, + focus: { type: Boolean }, + 'aria-label': { type: String }, + }, + events: ['click'], +}); + +export type TwentyUiButtonProperties = { + className?: string; + title?: string; + fullWidth?: boolean; + variant?: string; + inverted?: boolean; + size?: string; + position?: string; + accent?: string; + soon?: boolean; + justify?: string; + disabled?: boolean; + focus?: boolean; + to?: string; + target?: string; + dataTestId?: string; + hotkeys?: unknown[]; + ariaLabel?: string; + isLoading?: boolean; + type?: string; + dataClickOutsideId?: string; + dataGloballyPreventClickOutside?: boolean; }; export const TwentyUiButtonElement = createRemoteElement< TwentyUiButtonProperties, Record, + { Icon: true }, + { click(event: RemoteEvent): void } +>({ + slots: ['Icon'], + properties: { + className: { type: String }, + title: { type: String }, + fullWidth: { type: Boolean }, + variant: { type: String }, + inverted: { type: Boolean }, + size: { type: String }, + position: { type: String }, + accent: { type: String }, + soon: { type: Boolean }, + justify: { type: String }, + disabled: { type: Boolean }, + focus: { type: Boolean }, + to: { type: String }, + target: { type: String }, + dataTestId: { type: String }, + hotkeys: { type: Array }, + ariaLabel: { type: String }, + isLoading: { type: Boolean }, + type: { type: String }, + dataClickOutsideId: { type: String }, + dataGloballyPreventClickOutside: { type: Boolean }, + }, + events: ['click'], +}); + +export type TwentyUiButtonGroupProperties = { + variant?: string; + size?: string; + accent?: string; + className?: string; + children: unknown[]; +}; + +export const TwentyUiButtonGroupElement = createRemoteElement< + TwentyUiButtonGroupProperties, Record, - HtmlCommonEvents + Record, + Record >({ properties: { - ...HTML_COMMON_PROPERTIES_CONFIG, variant: { type: String }, + size: { type: String }, accent: { type: String }, + className: { type: String }, + children: { type: Array }, + }, +}); + +export type TwentyUiColorPickerButtonProperties = { + colorName: string; + isSelected?: boolean; +}; + +export const TwentyUiColorPickerButtonElement = createRemoteElement< + TwentyUiColorPickerButtonProperties, + Record, + Record, + { click(event: RemoteEvent): void } +>({ + properties: { + colorName: { type: String }, + isSelected: { type: Boolean }, + }, + events: ['click'], +}); + +export type TwentyUiFloatingButtonProperties = { + className?: string; + title?: string; + size?: string; + position?: string; + applyShadow?: boolean; + applyBlur?: boolean; + disabled?: boolean; + focus?: boolean; + to?: string; +}; + +export const TwentyUiFloatingButtonElement = createRemoteElement< + TwentyUiFloatingButtonProperties, + Record, + { Icon: true }, + Record +>({ + slots: ['Icon'], + properties: { + className: { type: String }, + title: { type: String }, + size: { type: String }, + position: { type: String }, + applyShadow: { type: Boolean }, + applyBlur: { type: Boolean }, + disabled: { type: Boolean }, + focus: { type: Boolean }, + to: { type: String }, + }, +}); + +export type TwentyUiFloatingButtonGroupProperties = { + size?: string; + children: unknown[]; + className?: string; +}; + +export const TwentyUiFloatingButtonGroupElement = createRemoteElement< + TwentyUiFloatingButtonGroupProperties, + Record, + Record, + Record +>({ + properties: { + size: { type: String }, + children: { type: Array }, + className: { type: String }, + }, +}); + +export type TwentyUiFloatingIconButtonProperties = { + className?: string; + size?: string; + position?: string; + applyShadow?: boolean; + applyBlur?: boolean; + disabled?: boolean; + focus?: boolean; + isActive?: boolean; +}; + +export const TwentyUiFloatingIconButtonElement = createRemoteElement< + TwentyUiFloatingIconButtonProperties, + Record, + { Icon: true }, + { click(event: RemoteEvent): void } +>({ + slots: ['Icon'], + properties: { + className: { type: String }, + size: { type: String }, + position: { type: String }, + applyShadow: { type: Boolean }, + applyBlur: { type: Boolean }, + disabled: { type: Boolean }, + focus: { type: Boolean }, + isActive: { type: Boolean }, + }, + events: ['click'], +}); + +export type TwentyUiFloatingIconButtonGroupProperties = { + className?: string; + size?: string; + iconButtons: unknown[]; +}; + +export const TwentyUiFloatingIconButtonGroupElement = createRemoteElement< + TwentyUiFloatingIconButtonGroupProperties, + Record, + Record, + Record +>({ + properties: { + className: { type: String }, + size: { type: String }, + iconButtons: { type: Array }, + }, +}); + +export type TwentyUiInsideButtonProperties = { + className?: string; + disabled?: boolean; +}; + +export const TwentyUiInsideButtonElement = createRemoteElement< + TwentyUiInsideButtonProperties, + Record, + { Icon: true }, + { click(event: RemoteEvent): void } +>({ + slots: ['Icon'], + properties: { + className: { type: String }, + disabled: { type: Boolean }, + }, + events: ['click'], +}); + +export type TwentyUiLightButtonProperties = { + className?: string; + title?: string; + accent?: string; + active?: boolean; + disabled?: boolean; + focus?: boolean; + type?: string; +}; + +export const TwentyUiLightButtonElement = createRemoteElement< + TwentyUiLightButtonProperties, + Record, + { Icon: true }, + { click(event: RemoteEvent): void } +>({ + slots: ['Icon'], + properties: { + className: { type: String }, + title: { type: String }, + accent: { type: String }, + active: { type: Boolean }, + disabled: { type: Boolean }, + focus: { type: Boolean }, + type: { type: String }, + }, + events: ['click'], +}); + +export type TwentyUiLightIconButtonProperties = { + className?: string; + testId?: string; + title?: string; + size?: string; + accent?: string; + active?: boolean; + disabled?: boolean; + focus?: boolean; + 'aria-label'?: string; +}; + +export const TwentyUiLightIconButtonElement = createRemoteElement< + TwentyUiLightIconButtonProperties, + Record, + { Icon: true }, + { click(event: RemoteEvent): void } +>({ + slots: ['Icon'], + properties: { + className: { type: String }, + testId: { type: String }, + title: { type: String }, + size: { type: String }, + accent: { type: String }, + active: { type: Boolean }, + disabled: { type: Boolean }, + focus: { type: Boolean }, + 'aria-label': { type: String }, + }, + events: ['click'], +}); + +export type TwentyUiLightIconButtonGroupProperties = { + className?: string; + size?: string; + iconButtons: unknown[]; +}; + +export const TwentyUiLightIconButtonGroupElement = createRemoteElement< + TwentyUiLightIconButtonGroupProperties, + Record, + Record, + Record +>({ + properties: { + className: { type: String }, + size: { type: String }, + iconButtons: { type: Array }, + }, +}); + +export type TwentyUiMainButtonProperties = { + title: string; + fullWidth?: boolean; + width?: number; + variant?: string; + soon?: boolean; + disabled?: boolean; + form?: string; + formAction?: string; + formEncType?: string; + formMethod?: string; + formNoValidate?: boolean; + formTarget?: string; + name?: string; + type?: string; + defaultChecked?: boolean; + suppressContentEditableWarning?: boolean; + suppressHydrationWarning?: boolean; + accessKey?: string; + autoFocus?: boolean; + className?: string; + contentEditable?: string; + contextMenu?: string; + dir?: string; + draggable?: string; + hidden?: boolean; + id?: string; + lang?: string; + nonce?: string; + slot?: string; + spellCheck?: string; + style?: Record; + tabIndex?: number; + translate?: string; + radioGroup?: string; + about?: string; + content?: string; + datatype?: string; + prefix?: string; + property?: string; + rel?: string; + resource?: string; + rev?: string; + typeof?: string; + vocab?: string; + autoCapitalize?: string; + autoCorrect?: string; + autoSave?: string; + color?: string; + itemProp?: string; + itemScope?: boolean; + itemType?: string; + itemID?: string; + itemRef?: string; + results?: number; + security?: string; + unselectable?: string; + inputMode?: string; + is?: string; + 'data-tooltip-id'?: string; + 'data-tooltip-place'?: string; + 'data-tooltip-content'?: string; + 'data-tooltip-html'?: string; + 'data-tooltip-variant'?: string; + 'data-tooltip-offset'?: number; + 'data-tooltip-events'?: unknown[]; + 'data-tooltip-position-strategy'?: string; + 'data-tooltip-delay-show'?: number; + 'data-tooltip-delay-hide'?: number; + 'data-tooltip-float'?: boolean; + 'data-tooltip-hidden'?: boolean; + 'data-tooltip-class-name'?: string; + 'aria-activedescendant'?: string; + 'aria-atomic'?: string; + 'aria-autocomplete'?: string; + 'aria-braillelabel'?: string; + 'aria-brailleroledescription'?: string; + 'aria-busy'?: string; + 'aria-checked'?: string; + 'aria-colcount'?: number; + 'aria-colindex'?: number; + 'aria-colindextext'?: string; + 'aria-colspan'?: number; + 'aria-controls'?: string; + 'aria-current'?: string; + 'aria-describedby'?: string; + 'aria-description'?: string; + 'aria-details'?: string; + 'aria-disabled'?: string; + 'aria-dropeffect'?: string; + 'aria-errormessage'?: string; + 'aria-expanded'?: string; + 'aria-flowto'?: string; + 'aria-grabbed'?: string; + 'aria-haspopup'?: string; + 'aria-hidden'?: string; + 'aria-invalid'?: string; + 'aria-keyshortcuts'?: string; + 'aria-label'?: string; + 'aria-labelledby'?: string; + 'aria-level'?: number; + 'aria-live'?: string; + 'aria-modal'?: string; + 'aria-multiline'?: string; + 'aria-multiselectable'?: string; + 'aria-orientation'?: string; + 'aria-owns'?: string; + 'aria-placeholder'?: string; + 'aria-posinset'?: number; + 'aria-pressed'?: string; + 'aria-readonly'?: string; + 'aria-relevant'?: string; + 'aria-required'?: string; + 'aria-roledescription'?: string; + 'aria-rowcount'?: number; + 'aria-rowindex'?: number; + 'aria-rowindextext'?: string; + 'aria-rowspan'?: number; + 'aria-selected'?: string; + 'aria-setsize'?: number; + 'aria-sort'?: string; + 'aria-valuemax'?: number; + 'aria-valuemin'?: number; + 'aria-valuenow'?: number; + 'aria-valuetext'?: string; + dangerouslySetInnerHTML?: Record; + onCopy?: (...args: unknown[]) => unknown; + onCopyCapture?: (...args: unknown[]) => unknown; + onCut?: (...args: unknown[]) => unknown; + onCutCapture?: (...args: unknown[]) => unknown; + onPaste?: (...args: unknown[]) => unknown; + onPasteCapture?: (...args: unknown[]) => unknown; + onCompositionEnd?: (...args: unknown[]) => unknown; + onCompositionEndCapture?: (...args: unknown[]) => unknown; + onCompositionStart?: (...args: unknown[]) => unknown; + onCompositionStartCapture?: (...args: unknown[]) => unknown; + onCompositionUpdate?: (...args: unknown[]) => unknown; + onCompositionUpdateCapture?: (...args: unknown[]) => unknown; + onFocus?: (...args: unknown[]) => unknown; + onFocusCapture?: (...args: unknown[]) => unknown; + onBlur?: (...args: unknown[]) => unknown; + onBlurCapture?: (...args: unknown[]) => unknown; + onChange?: (...args: unknown[]) => unknown; + onChangeCapture?: (...args: unknown[]) => unknown; + onBeforeInput?: (...args: unknown[]) => unknown; + onBeforeInputCapture?: (...args: unknown[]) => unknown; + onInput?: (...args: unknown[]) => unknown; + onInputCapture?: (...args: unknown[]) => unknown; + onReset?: (...args: unknown[]) => unknown; + onResetCapture?: (...args: unknown[]) => unknown; + onSubmit?: (...args: unknown[]) => unknown; + onSubmitCapture?: (...args: unknown[]) => unknown; + onInvalid?: (...args: unknown[]) => unknown; + onInvalidCapture?: (...args: unknown[]) => unknown; + onLoad?: (...args: unknown[]) => unknown; + onLoadCapture?: (...args: unknown[]) => unknown; + onError?: (...args: unknown[]) => unknown; + onErrorCapture?: (...args: unknown[]) => unknown; + onKeyDown?: (...args: unknown[]) => unknown; + onKeyDownCapture?: (...args: unknown[]) => unknown; + onKeyPress?: (...args: unknown[]) => unknown; + onKeyPressCapture?: (...args: unknown[]) => unknown; + onKeyUp?: (...args: unknown[]) => unknown; + onKeyUpCapture?: (...args: unknown[]) => unknown; + onAbort?: (...args: unknown[]) => unknown; + onAbortCapture?: (...args: unknown[]) => unknown; + onCanPlay?: (...args: unknown[]) => unknown; + onCanPlayCapture?: (...args: unknown[]) => unknown; + onCanPlayThrough?: (...args: unknown[]) => unknown; + onCanPlayThroughCapture?: (...args: unknown[]) => unknown; + onDurationChange?: (...args: unknown[]) => unknown; + onDurationChangeCapture?: (...args: unknown[]) => unknown; + onEmptied?: (...args: unknown[]) => unknown; + onEmptiedCapture?: (...args: unknown[]) => unknown; + onEncrypted?: (...args: unknown[]) => unknown; + onEncryptedCapture?: (...args: unknown[]) => unknown; + onEnded?: (...args: unknown[]) => unknown; + onEndedCapture?: (...args: unknown[]) => unknown; + onLoadedData?: (...args: unknown[]) => unknown; + onLoadedDataCapture?: (...args: unknown[]) => unknown; + onLoadedMetadata?: (...args: unknown[]) => unknown; + onLoadedMetadataCapture?: (...args: unknown[]) => unknown; + onLoadStart?: (...args: unknown[]) => unknown; + onLoadStartCapture?: (...args: unknown[]) => unknown; + onPause?: (...args: unknown[]) => unknown; + onPauseCapture?: (...args: unknown[]) => unknown; + onPlay?: (...args: unknown[]) => unknown; + onPlayCapture?: (...args: unknown[]) => unknown; + onPlaying?: (...args: unknown[]) => unknown; + onPlayingCapture?: (...args: unknown[]) => unknown; + onProgress?: (...args: unknown[]) => unknown; + onProgressCapture?: (...args: unknown[]) => unknown; + onRateChange?: (...args: unknown[]) => unknown; + onRateChangeCapture?: (...args: unknown[]) => unknown; + onResize?: (...args: unknown[]) => unknown; + onResizeCapture?: (...args: unknown[]) => unknown; + onSeeked?: (...args: unknown[]) => unknown; + onSeekedCapture?: (...args: unknown[]) => unknown; + onSeeking?: (...args: unknown[]) => unknown; + onSeekingCapture?: (...args: unknown[]) => unknown; + onStalled?: (...args: unknown[]) => unknown; + onStalledCapture?: (...args: unknown[]) => unknown; + onSuspend?: (...args: unknown[]) => unknown; + onSuspendCapture?: (...args: unknown[]) => unknown; + onTimeUpdate?: (...args: unknown[]) => unknown; + onTimeUpdateCapture?: (...args: unknown[]) => unknown; + onVolumeChange?: (...args: unknown[]) => unknown; + onVolumeChangeCapture?: (...args: unknown[]) => unknown; + onWaiting?: (...args: unknown[]) => unknown; + onWaitingCapture?: (...args: unknown[]) => unknown; + onAuxClick?: (...args: unknown[]) => unknown; + onAuxClickCapture?: (...args: unknown[]) => unknown; + onClick?: (...args: unknown[]) => unknown; + onClickCapture?: (...args: unknown[]) => unknown; + onContextMenu?: (...args: unknown[]) => unknown; + onContextMenuCapture?: (...args: unknown[]) => unknown; + onDoubleClick?: (...args: unknown[]) => unknown; + onDoubleClickCapture?: (...args: unknown[]) => unknown; + onDrag?: (...args: unknown[]) => unknown; + onDragCapture?: (...args: unknown[]) => unknown; + onDragEnd?: (...args: unknown[]) => unknown; + onDragEndCapture?: (...args: unknown[]) => unknown; + onDragEnter?: (...args: unknown[]) => unknown; + onDragEnterCapture?: (...args: unknown[]) => unknown; + onDragExit?: (...args: unknown[]) => unknown; + onDragExitCapture?: (...args: unknown[]) => unknown; + onDragLeave?: (...args: unknown[]) => unknown; + onDragLeaveCapture?: (...args: unknown[]) => unknown; + onDragOver?: (...args: unknown[]) => unknown; + onDragOverCapture?: (...args: unknown[]) => unknown; + onDragStart?: (...args: unknown[]) => unknown; + onDragStartCapture?: (...args: unknown[]) => unknown; + onDrop?: (...args: unknown[]) => unknown; + onDropCapture?: (...args: unknown[]) => unknown; + onMouseDown?: (...args: unknown[]) => unknown; + onMouseDownCapture?: (...args: unknown[]) => unknown; + onMouseEnter?: (...args: unknown[]) => unknown; + onMouseLeave?: (...args: unknown[]) => unknown; + onMouseMove?: (...args: unknown[]) => unknown; + onMouseMoveCapture?: (...args: unknown[]) => unknown; + onMouseOut?: (...args: unknown[]) => unknown; + onMouseOutCapture?: (...args: unknown[]) => unknown; + onMouseOver?: (...args: unknown[]) => unknown; + onMouseOverCapture?: (...args: unknown[]) => unknown; + onMouseUp?: (...args: unknown[]) => unknown; + onMouseUpCapture?: (...args: unknown[]) => unknown; + onSelect?: (...args: unknown[]) => unknown; + onSelectCapture?: (...args: unknown[]) => unknown; + onTouchCancel?: (...args: unknown[]) => unknown; + onTouchCancelCapture?: (...args: unknown[]) => unknown; + onTouchEnd?: (...args: unknown[]) => unknown; + onTouchEndCapture?: (...args: unknown[]) => unknown; + onTouchMove?: (...args: unknown[]) => unknown; + onTouchMoveCapture?: (...args: unknown[]) => unknown; + onTouchStart?: (...args: unknown[]) => unknown; + onTouchStartCapture?: (...args: unknown[]) => unknown; + onPointerDown?: (...args: unknown[]) => unknown; + onPointerDownCapture?: (...args: unknown[]) => unknown; + onPointerMove?: (...args: unknown[]) => unknown; + onPointerMoveCapture?: (...args: unknown[]) => unknown; + onPointerUp?: (...args: unknown[]) => unknown; + onPointerUpCapture?: (...args: unknown[]) => unknown; + onPointerCancel?: (...args: unknown[]) => unknown; + onPointerCancelCapture?: (...args: unknown[]) => unknown; + onPointerEnter?: (...args: unknown[]) => unknown; + onPointerLeave?: (...args: unknown[]) => unknown; + onPointerOver?: (...args: unknown[]) => unknown; + onPointerOverCapture?: (...args: unknown[]) => unknown; + onPointerOut?: (...args: unknown[]) => unknown; + onPointerOutCapture?: (...args: unknown[]) => unknown; + onGotPointerCapture?: (...args: unknown[]) => unknown; + onGotPointerCaptureCapture?: (...args: unknown[]) => unknown; + onLostPointerCapture?: (...args: unknown[]) => unknown; + onLostPointerCaptureCapture?: (...args: unknown[]) => unknown; + onScroll?: (...args: unknown[]) => unknown; + onScrollCapture?: (...args: unknown[]) => unknown; + onWheel?: (...args: unknown[]) => unknown; + onWheelCapture?: (...args: unknown[]) => unknown; + onAnimationStart?: (...args: unknown[]) => unknown; + onAnimationStartCapture?: (...args: unknown[]) => unknown; + onAnimationEnd?: (...args: unknown[]) => unknown; + onAnimationEndCapture?: (...args: unknown[]) => unknown; + onAnimationIteration?: (...args: unknown[]) => unknown; + onAnimationIterationCapture?: (...args: unknown[]) => unknown; + onTransitionEnd?: (...args: unknown[]) => unknown; + onTransitionEndCapture?: (...args: unknown[]) => unknown; +}; + +export const TwentyUiMainButtonElement = createRemoteElement< + TwentyUiMainButtonProperties, + Record, + { 'data-tooltip-wrapper': true; children: true; Icon: true }, + Record +>({ + slots: ['data-tooltip-wrapper', 'children', 'Icon'], + properties: { + title: { type: String }, + fullWidth: { type: Boolean }, + width: { type: Number }, + variant: { type: String }, + soon: { type: Boolean }, + disabled: { type: Boolean }, + form: { type: String }, + formAction: { type: String }, + formEncType: { type: String }, + formMethod: { type: String }, + formNoValidate: { type: Boolean }, + formTarget: { type: String }, + name: { type: String }, + type: { type: String }, + defaultChecked: { type: Boolean }, + suppressContentEditableWarning: { type: Boolean }, + suppressHydrationWarning: { type: Boolean }, + accessKey: { type: String }, + autoFocus: { type: Boolean }, + className: { type: String }, + contentEditable: { type: String }, + contextMenu: { type: String }, + dir: { type: String }, + draggable: { type: String }, + hidden: { type: Boolean }, + id: { type: String }, + lang: { type: String }, + nonce: { type: String }, + slot: { type: String }, + spellCheck: { type: String }, + style: { type: Object }, + tabIndex: { type: Number }, + translate: { type: String }, + radioGroup: { type: String }, + about: { type: String }, + content: { type: String }, + datatype: { type: String }, + prefix: { type: String }, + property: { type: String }, + rel: { type: String }, + resource: { type: String }, + rev: { type: String }, + typeof: { type: String }, + vocab: { type: String }, + autoCapitalize: { type: String }, + autoCorrect: { type: String }, + autoSave: { type: String }, + color: { type: String }, + itemProp: { type: String }, + itemScope: { type: Boolean }, + itemType: { type: String }, + itemID: { type: String }, + itemRef: { type: String }, + results: { type: Number }, + security: { type: String }, + unselectable: { type: String }, + inputMode: { type: String }, + is: { type: String }, + 'data-tooltip-id': { type: String }, + 'data-tooltip-place': { type: String }, + 'data-tooltip-content': { type: String }, + 'data-tooltip-html': { type: String }, + 'data-tooltip-variant': { type: String }, + 'data-tooltip-offset': { type: Number }, + 'data-tooltip-events': { type: Array }, + 'data-tooltip-position-strategy': { type: String }, + 'data-tooltip-delay-show': { type: Number }, + 'data-tooltip-delay-hide': { type: Number }, + 'data-tooltip-float': { type: Boolean }, + 'data-tooltip-hidden': { type: Boolean }, + 'data-tooltip-class-name': { type: String }, + 'aria-activedescendant': { type: String }, + 'aria-atomic': { type: String }, + 'aria-autocomplete': { type: String }, + 'aria-braillelabel': { type: String }, + 'aria-brailleroledescription': { type: String }, + 'aria-busy': { type: String }, + 'aria-checked': { type: String }, + 'aria-colcount': { type: Number }, + 'aria-colindex': { type: Number }, + 'aria-colindextext': { type: String }, + 'aria-colspan': { type: Number }, + 'aria-controls': { type: String }, + 'aria-current': { type: String }, + 'aria-describedby': { type: String }, + 'aria-description': { type: String }, + 'aria-details': { type: String }, + 'aria-disabled': { type: String }, + 'aria-dropeffect': { type: String }, + 'aria-errormessage': { type: String }, + 'aria-expanded': { type: String }, + 'aria-flowto': { type: String }, + 'aria-grabbed': { type: String }, + 'aria-haspopup': { type: String }, + 'aria-hidden': { type: String }, + 'aria-invalid': { type: String }, + 'aria-keyshortcuts': { type: String }, + 'aria-label': { type: String }, + 'aria-labelledby': { type: String }, + 'aria-level': { type: Number }, + 'aria-live': { type: String }, + 'aria-modal': { type: String }, + 'aria-multiline': { type: String }, + 'aria-multiselectable': { type: String }, + 'aria-orientation': { type: String }, + 'aria-owns': { type: String }, + 'aria-placeholder': { type: String }, + 'aria-posinset': { type: Number }, + 'aria-pressed': { type: String }, + 'aria-readonly': { type: String }, + 'aria-relevant': { type: String }, + 'aria-required': { type: String }, + 'aria-roledescription': { type: String }, + 'aria-rowcount': { type: Number }, + 'aria-rowindex': { type: Number }, + 'aria-rowindextext': { type: String }, + 'aria-rowspan': { type: Number }, + 'aria-selected': { type: String }, + 'aria-setsize': { type: Number }, + 'aria-sort': { type: String }, + 'aria-valuemax': { type: Number }, + 'aria-valuemin': { type: Number }, + 'aria-valuenow': { type: Number }, + 'aria-valuetext': { type: String }, + dangerouslySetInnerHTML: { type: Object }, + onCopy: { type: Function }, + onCopyCapture: { type: Function }, + onCut: { type: Function }, + onCutCapture: { type: Function }, + onPaste: { type: Function }, + onPasteCapture: { type: Function }, + onCompositionEnd: { type: Function }, + onCompositionEndCapture: { type: Function }, + onCompositionStart: { type: Function }, + onCompositionStartCapture: { type: Function }, + onCompositionUpdate: { type: Function }, + onCompositionUpdateCapture: { type: Function }, + onFocus: { type: Function }, + onFocusCapture: { type: Function }, + onBlur: { type: Function }, + onBlurCapture: { type: Function }, + onChange: { type: Function }, + onChangeCapture: { type: Function }, + onBeforeInput: { type: Function }, + onBeforeInputCapture: { type: Function }, + onInput: { type: Function }, + onInputCapture: { type: Function }, + onReset: { type: Function }, + onResetCapture: { type: Function }, + onSubmit: { type: Function }, + onSubmitCapture: { type: Function }, + onInvalid: { type: Function }, + onInvalidCapture: { type: Function }, + onLoad: { type: Function }, + onLoadCapture: { type: Function }, + onError: { type: Function }, + onErrorCapture: { type: Function }, + onKeyDown: { type: Function }, + onKeyDownCapture: { type: Function }, + onKeyPress: { type: Function }, + onKeyPressCapture: { type: Function }, + onKeyUp: { type: Function }, + onKeyUpCapture: { type: Function }, + onAbort: { type: Function }, + onAbortCapture: { type: Function }, + onCanPlay: { type: Function }, + onCanPlayCapture: { type: Function }, + onCanPlayThrough: { type: Function }, + onCanPlayThroughCapture: { type: Function }, + onDurationChange: { type: Function }, + onDurationChangeCapture: { type: Function }, + onEmptied: { type: Function }, + onEmptiedCapture: { type: Function }, + onEncrypted: { type: Function }, + onEncryptedCapture: { type: Function }, + onEnded: { type: Function }, + onEndedCapture: { type: Function }, + onLoadedData: { type: Function }, + onLoadedDataCapture: { type: Function }, + onLoadedMetadata: { type: Function }, + onLoadedMetadataCapture: { type: Function }, + onLoadStart: { type: Function }, + onLoadStartCapture: { type: Function }, + onPause: { type: Function }, + onPauseCapture: { type: Function }, + onPlay: { type: Function }, + onPlayCapture: { type: Function }, + onPlaying: { type: Function }, + onPlayingCapture: { type: Function }, + onProgress: { type: Function }, + onProgressCapture: { type: Function }, + onRateChange: { type: Function }, + onRateChangeCapture: { type: Function }, + onResize: { type: Function }, + onResizeCapture: { type: Function }, + onSeeked: { type: Function }, + onSeekedCapture: { type: Function }, + onSeeking: { type: Function }, + onSeekingCapture: { type: Function }, + onStalled: { type: Function }, + onStalledCapture: { type: Function }, + onSuspend: { type: Function }, + onSuspendCapture: { type: Function }, + onTimeUpdate: { type: Function }, + onTimeUpdateCapture: { type: Function }, + onVolumeChange: { type: Function }, + onVolumeChangeCapture: { type: Function }, + onWaiting: { type: Function }, + onWaitingCapture: { type: Function }, + onAuxClick: { type: Function }, + onAuxClickCapture: { type: Function }, + onClick: { type: Function }, + onClickCapture: { type: Function }, + onContextMenu: { type: Function }, + onContextMenuCapture: { type: Function }, + onDoubleClick: { type: Function }, + onDoubleClickCapture: { type: Function }, + onDrag: { type: Function }, + onDragCapture: { type: Function }, + onDragEnd: { type: Function }, + onDragEndCapture: { type: Function }, + onDragEnter: { type: Function }, + onDragEnterCapture: { type: Function }, + onDragExit: { type: Function }, + onDragExitCapture: { type: Function }, + onDragLeave: { type: Function }, + onDragLeaveCapture: { type: Function }, + onDragOver: { type: Function }, + onDragOverCapture: { type: Function }, + onDragStart: { type: Function }, + onDragStartCapture: { type: Function }, + onDrop: { type: Function }, + onDropCapture: { type: Function }, + onMouseDown: { type: Function }, + onMouseDownCapture: { type: Function }, + onMouseEnter: { type: Function }, + onMouseLeave: { type: Function }, + onMouseMove: { type: Function }, + onMouseMoveCapture: { type: Function }, + onMouseOut: { type: Function }, + onMouseOutCapture: { type: Function }, + onMouseOver: { type: Function }, + onMouseOverCapture: { type: Function }, + onMouseUp: { type: Function }, + onMouseUpCapture: { type: Function }, + onSelect: { type: Function }, + onSelectCapture: { type: Function }, + onTouchCancel: { type: Function }, + onTouchCancelCapture: { type: Function }, + onTouchEnd: { type: Function }, + onTouchEndCapture: { type: Function }, + onTouchMove: { type: Function }, + onTouchMoveCapture: { type: Function }, + onTouchStart: { type: Function }, + onTouchStartCapture: { type: Function }, + onPointerDown: { type: Function }, + onPointerDownCapture: { type: Function }, + onPointerMove: { type: Function }, + onPointerMoveCapture: { type: Function }, + onPointerUp: { type: Function }, + onPointerUpCapture: { type: Function }, + onPointerCancel: { type: Function }, + onPointerCancelCapture: { type: Function }, + onPointerEnter: { type: Function }, + onPointerLeave: { type: Function }, + onPointerOver: { type: Function }, + onPointerOverCapture: { type: Function }, + onPointerOut: { type: Function }, + onPointerOutCapture: { type: Function }, + onGotPointerCapture: { type: Function }, + onGotPointerCaptureCapture: { type: Function }, + onLostPointerCapture: { type: Function }, + onLostPointerCaptureCapture: { type: Function }, + onScroll: { type: Function }, + onScrollCapture: { type: Function }, + onWheel: { type: Function }, + onWheelCapture: { type: Function }, + onAnimationStart: { type: Function }, + onAnimationStartCapture: { type: Function }, + onAnimationEnd: { type: Function }, + onAnimationEndCapture: { type: Function }, + onAnimationIteration: { type: Function }, + onAnimationIterationCapture: { type: Function }, + onTransitionEnd: { type: Function }, + onTransitionEndCapture: { type: Function }, + }, +}); + +export type TwentyUiRoundedIconButtonProperties = { + size?: string; + disabled?: boolean; + form?: string; + formAction?: string; + formEncType?: string; + formMethod?: string; + formNoValidate?: boolean; + formTarget?: string; + name?: string; + type?: string; + defaultChecked?: boolean; + suppressContentEditableWarning?: boolean; + suppressHydrationWarning?: boolean; + accessKey?: string; + autoFocus?: boolean; + className?: string; + contentEditable?: string; + contextMenu?: string; + dir?: string; + draggable?: string; + hidden?: boolean; + id?: string; + lang?: string; + nonce?: string; + slot?: string; + spellCheck?: string; + style?: Record; + tabIndex?: number; + title?: string; + translate?: string; + radioGroup?: string; + about?: string; + content?: string; + datatype?: string; + prefix?: string; + property?: string; + rel?: string; + resource?: string; + rev?: string; + typeof?: string; + vocab?: string; + autoCapitalize?: string; + autoCorrect?: string; + autoSave?: string; + color?: string; + itemProp?: string; + itemScope?: boolean; + itemType?: string; + itemID?: string; + itemRef?: string; + results?: number; + security?: string; + unselectable?: string; + inputMode?: string; + is?: string; + 'data-tooltip-id'?: string; + 'data-tooltip-place'?: string; + 'data-tooltip-content'?: string; + 'data-tooltip-html'?: string; + 'data-tooltip-variant'?: string; + 'data-tooltip-offset'?: number; + 'data-tooltip-events'?: unknown[]; + 'data-tooltip-position-strategy'?: string; + 'data-tooltip-delay-show'?: number; + 'data-tooltip-delay-hide'?: number; + 'data-tooltip-float'?: boolean; + 'data-tooltip-hidden'?: boolean; + 'data-tooltip-class-name'?: string; + 'aria-activedescendant'?: string; + 'aria-atomic'?: string; + 'aria-autocomplete'?: string; + 'aria-braillelabel'?: string; + 'aria-brailleroledescription'?: string; + 'aria-busy'?: string; + 'aria-checked'?: string; + 'aria-colcount'?: number; + 'aria-colindex'?: number; + 'aria-colindextext'?: string; + 'aria-colspan'?: number; + 'aria-controls'?: string; + 'aria-current'?: string; + 'aria-describedby'?: string; + 'aria-description'?: string; + 'aria-details'?: string; + 'aria-disabled'?: string; + 'aria-dropeffect'?: string; + 'aria-errormessage'?: string; + 'aria-expanded'?: string; + 'aria-flowto'?: string; + 'aria-grabbed'?: string; + 'aria-haspopup'?: string; + 'aria-hidden'?: string; + 'aria-invalid'?: string; + 'aria-keyshortcuts'?: string; + 'aria-label'?: string; + 'aria-labelledby'?: string; + 'aria-level'?: number; + 'aria-live'?: string; + 'aria-modal'?: string; + 'aria-multiline'?: string; + 'aria-multiselectable'?: string; + 'aria-orientation'?: string; + 'aria-owns'?: string; + 'aria-placeholder'?: string; + 'aria-posinset'?: number; + 'aria-pressed'?: string; + 'aria-readonly'?: string; + 'aria-relevant'?: string; + 'aria-required'?: string; + 'aria-roledescription'?: string; + 'aria-rowcount'?: number; + 'aria-rowindex'?: number; + 'aria-rowindextext'?: string; + 'aria-rowspan'?: number; + 'aria-selected'?: string; + 'aria-setsize'?: number; + 'aria-sort'?: string; + 'aria-valuemax'?: number; + 'aria-valuemin'?: number; + 'aria-valuenow'?: number; + 'aria-valuetext'?: string; + dangerouslySetInnerHTML?: Record; + onCopy?: (...args: unknown[]) => unknown; + onCopyCapture?: (...args: unknown[]) => unknown; + onCut?: (...args: unknown[]) => unknown; + onCutCapture?: (...args: unknown[]) => unknown; + onPaste?: (...args: unknown[]) => unknown; + onPasteCapture?: (...args: unknown[]) => unknown; + onCompositionEnd?: (...args: unknown[]) => unknown; + onCompositionEndCapture?: (...args: unknown[]) => unknown; + onCompositionStart?: (...args: unknown[]) => unknown; + onCompositionStartCapture?: (...args: unknown[]) => unknown; + onCompositionUpdate?: (...args: unknown[]) => unknown; + onCompositionUpdateCapture?: (...args: unknown[]) => unknown; + onFocus?: (...args: unknown[]) => unknown; + onFocusCapture?: (...args: unknown[]) => unknown; + onBlur?: (...args: unknown[]) => unknown; + onBlurCapture?: (...args: unknown[]) => unknown; + onChange?: (...args: unknown[]) => unknown; + onChangeCapture?: (...args: unknown[]) => unknown; + onBeforeInput?: (...args: unknown[]) => unknown; + onBeforeInputCapture?: (...args: unknown[]) => unknown; + onInput?: (...args: unknown[]) => unknown; + onInputCapture?: (...args: unknown[]) => unknown; + onReset?: (...args: unknown[]) => unknown; + onResetCapture?: (...args: unknown[]) => unknown; + onSubmit?: (...args: unknown[]) => unknown; + onSubmitCapture?: (...args: unknown[]) => unknown; + onInvalid?: (...args: unknown[]) => unknown; + onInvalidCapture?: (...args: unknown[]) => unknown; + onLoad?: (...args: unknown[]) => unknown; + onLoadCapture?: (...args: unknown[]) => unknown; + onError?: (...args: unknown[]) => unknown; + onErrorCapture?: (...args: unknown[]) => unknown; + onKeyDown?: (...args: unknown[]) => unknown; + onKeyDownCapture?: (...args: unknown[]) => unknown; + onKeyPress?: (...args: unknown[]) => unknown; + onKeyPressCapture?: (...args: unknown[]) => unknown; + onKeyUp?: (...args: unknown[]) => unknown; + onKeyUpCapture?: (...args: unknown[]) => unknown; + onAbort?: (...args: unknown[]) => unknown; + onAbortCapture?: (...args: unknown[]) => unknown; + onCanPlay?: (...args: unknown[]) => unknown; + onCanPlayCapture?: (...args: unknown[]) => unknown; + onCanPlayThrough?: (...args: unknown[]) => unknown; + onCanPlayThroughCapture?: (...args: unknown[]) => unknown; + onDurationChange?: (...args: unknown[]) => unknown; + onDurationChangeCapture?: (...args: unknown[]) => unknown; + onEmptied?: (...args: unknown[]) => unknown; + onEmptiedCapture?: (...args: unknown[]) => unknown; + onEncrypted?: (...args: unknown[]) => unknown; + onEncryptedCapture?: (...args: unknown[]) => unknown; + onEnded?: (...args: unknown[]) => unknown; + onEndedCapture?: (...args: unknown[]) => unknown; + onLoadedData?: (...args: unknown[]) => unknown; + onLoadedDataCapture?: (...args: unknown[]) => unknown; + onLoadedMetadata?: (...args: unknown[]) => unknown; + onLoadedMetadataCapture?: (...args: unknown[]) => unknown; + onLoadStart?: (...args: unknown[]) => unknown; + onLoadStartCapture?: (...args: unknown[]) => unknown; + onPause?: (...args: unknown[]) => unknown; + onPauseCapture?: (...args: unknown[]) => unknown; + onPlay?: (...args: unknown[]) => unknown; + onPlayCapture?: (...args: unknown[]) => unknown; + onPlaying?: (...args: unknown[]) => unknown; + onPlayingCapture?: (...args: unknown[]) => unknown; + onProgress?: (...args: unknown[]) => unknown; + onProgressCapture?: (...args: unknown[]) => unknown; + onRateChange?: (...args: unknown[]) => unknown; + onRateChangeCapture?: (...args: unknown[]) => unknown; + onResize?: (...args: unknown[]) => unknown; + onResizeCapture?: (...args: unknown[]) => unknown; + onSeeked?: (...args: unknown[]) => unknown; + onSeekedCapture?: (...args: unknown[]) => unknown; + onSeeking?: (...args: unknown[]) => unknown; + onSeekingCapture?: (...args: unknown[]) => unknown; + onStalled?: (...args: unknown[]) => unknown; + onStalledCapture?: (...args: unknown[]) => unknown; + onSuspend?: (...args: unknown[]) => unknown; + onSuspendCapture?: (...args: unknown[]) => unknown; + onTimeUpdate?: (...args: unknown[]) => unknown; + onTimeUpdateCapture?: (...args: unknown[]) => unknown; + onVolumeChange?: (...args: unknown[]) => unknown; + onVolumeChangeCapture?: (...args: unknown[]) => unknown; + onWaiting?: (...args: unknown[]) => unknown; + onWaitingCapture?: (...args: unknown[]) => unknown; + onAuxClick?: (...args: unknown[]) => unknown; + onAuxClickCapture?: (...args: unknown[]) => unknown; + onClick?: (...args: unknown[]) => unknown; + onClickCapture?: (...args: unknown[]) => unknown; + onContextMenu?: (...args: unknown[]) => unknown; + onContextMenuCapture?: (...args: unknown[]) => unknown; + onDoubleClick?: (...args: unknown[]) => unknown; + onDoubleClickCapture?: (...args: unknown[]) => unknown; + onDrag?: (...args: unknown[]) => unknown; + onDragCapture?: (...args: unknown[]) => unknown; + onDragEnd?: (...args: unknown[]) => unknown; + onDragEndCapture?: (...args: unknown[]) => unknown; + onDragEnter?: (...args: unknown[]) => unknown; + onDragEnterCapture?: (...args: unknown[]) => unknown; + onDragExit?: (...args: unknown[]) => unknown; + onDragExitCapture?: (...args: unknown[]) => unknown; + onDragLeave?: (...args: unknown[]) => unknown; + onDragLeaveCapture?: (...args: unknown[]) => unknown; + onDragOver?: (...args: unknown[]) => unknown; + onDragOverCapture?: (...args: unknown[]) => unknown; + onDragStart?: (...args: unknown[]) => unknown; + onDragStartCapture?: (...args: unknown[]) => unknown; + onDrop?: (...args: unknown[]) => unknown; + onDropCapture?: (...args: unknown[]) => unknown; + onMouseDown?: (...args: unknown[]) => unknown; + onMouseDownCapture?: (...args: unknown[]) => unknown; + onMouseEnter?: (...args: unknown[]) => unknown; + onMouseLeave?: (...args: unknown[]) => unknown; + onMouseMove?: (...args: unknown[]) => unknown; + onMouseMoveCapture?: (...args: unknown[]) => unknown; + onMouseOut?: (...args: unknown[]) => unknown; + onMouseOutCapture?: (...args: unknown[]) => unknown; + onMouseOver?: (...args: unknown[]) => unknown; + onMouseOverCapture?: (...args: unknown[]) => unknown; + onMouseUp?: (...args: unknown[]) => unknown; + onMouseUpCapture?: (...args: unknown[]) => unknown; + onSelect?: (...args: unknown[]) => unknown; + onSelectCapture?: (...args: unknown[]) => unknown; + onTouchCancel?: (...args: unknown[]) => unknown; + onTouchCancelCapture?: (...args: unknown[]) => unknown; + onTouchEnd?: (...args: unknown[]) => unknown; + onTouchEndCapture?: (...args: unknown[]) => unknown; + onTouchMove?: (...args: unknown[]) => unknown; + onTouchMoveCapture?: (...args: unknown[]) => unknown; + onTouchStart?: (...args: unknown[]) => unknown; + onTouchStartCapture?: (...args: unknown[]) => unknown; + onPointerDown?: (...args: unknown[]) => unknown; + onPointerDownCapture?: (...args: unknown[]) => unknown; + onPointerMove?: (...args: unknown[]) => unknown; + onPointerMoveCapture?: (...args: unknown[]) => unknown; + onPointerUp?: (...args: unknown[]) => unknown; + onPointerUpCapture?: (...args: unknown[]) => unknown; + onPointerCancel?: (...args: unknown[]) => unknown; + onPointerCancelCapture?: (...args: unknown[]) => unknown; + onPointerEnter?: (...args: unknown[]) => unknown; + onPointerLeave?: (...args: unknown[]) => unknown; + onPointerOver?: (...args: unknown[]) => unknown; + onPointerOverCapture?: (...args: unknown[]) => unknown; + onPointerOut?: (...args: unknown[]) => unknown; + onPointerOutCapture?: (...args: unknown[]) => unknown; + onGotPointerCapture?: (...args: unknown[]) => unknown; + onGotPointerCaptureCapture?: (...args: unknown[]) => unknown; + onLostPointerCapture?: (...args: unknown[]) => unknown; + onLostPointerCaptureCapture?: (...args: unknown[]) => unknown; + onScroll?: (...args: unknown[]) => unknown; + onScrollCapture?: (...args: unknown[]) => unknown; + onWheel?: (...args: unknown[]) => unknown; + onWheelCapture?: (...args: unknown[]) => unknown; + onAnimationStart?: (...args: unknown[]) => unknown; + onAnimationStartCapture?: (...args: unknown[]) => unknown; + onAnimationEnd?: (...args: unknown[]) => unknown; + onAnimationEndCapture?: (...args: unknown[]) => unknown; + onAnimationIteration?: (...args: unknown[]) => unknown; + onAnimationIterationCapture?: (...args: unknown[]) => unknown; + onTransitionEnd?: (...args: unknown[]) => unknown; + onTransitionEndCapture?: (...args: unknown[]) => unknown; +}; + +export const TwentyUiRoundedIconButtonElement = createRemoteElement< + TwentyUiRoundedIconButtonProperties, + Record, + { Icon: true; 'data-tooltip-wrapper': true; children: true }, + Record +>({ + slots: ['Icon', 'data-tooltip-wrapper', 'children'], + properties: { size: { type: String }, disabled: { type: Boolean }, + form: { type: String }, + formAction: { type: String }, + formEncType: { type: String }, + formMethod: { type: String }, + formNoValidate: { type: Boolean }, + formTarget: { type: String }, + name: { type: String }, + type: { type: String }, + defaultChecked: { type: Boolean }, + suppressContentEditableWarning: { type: Boolean }, + suppressHydrationWarning: { type: Boolean }, + accessKey: { type: String }, + autoFocus: { type: Boolean }, + className: { type: String }, + contentEditable: { type: String }, + contextMenu: { type: String }, + dir: { type: String }, + draggable: { type: String }, + hidden: { type: Boolean }, + id: { type: String }, + lang: { type: String }, + nonce: { type: String }, + slot: { type: String }, + spellCheck: { type: String }, + style: { type: Object }, + tabIndex: { type: Number }, + title: { type: String }, + translate: { type: String }, + radioGroup: { type: String }, + about: { type: String }, + content: { type: String }, + datatype: { type: String }, + prefix: { type: String }, + property: { type: String }, + rel: { type: String }, + resource: { type: String }, + rev: { type: String }, + typeof: { type: String }, + vocab: { type: String }, + autoCapitalize: { type: String }, + autoCorrect: { type: String }, + autoSave: { type: String }, + color: { type: String }, + itemProp: { type: String }, + itemScope: { type: Boolean }, + itemType: { type: String }, + itemID: { type: String }, + itemRef: { type: String }, + results: { type: Number }, + security: { type: String }, + unselectable: { type: String }, + inputMode: { type: String }, + is: { type: String }, + 'data-tooltip-id': { type: String }, + 'data-tooltip-place': { type: String }, + 'data-tooltip-content': { type: String }, + 'data-tooltip-html': { type: String }, + 'data-tooltip-variant': { type: String }, + 'data-tooltip-offset': { type: Number }, + 'data-tooltip-events': { type: Array }, + 'data-tooltip-position-strategy': { type: String }, + 'data-tooltip-delay-show': { type: Number }, + 'data-tooltip-delay-hide': { type: Number }, + 'data-tooltip-float': { type: Boolean }, + 'data-tooltip-hidden': { type: Boolean }, + 'data-tooltip-class-name': { type: String }, + 'aria-activedescendant': { type: String }, + 'aria-atomic': { type: String }, + 'aria-autocomplete': { type: String }, + 'aria-braillelabel': { type: String }, + 'aria-brailleroledescription': { type: String }, + 'aria-busy': { type: String }, + 'aria-checked': { type: String }, + 'aria-colcount': { type: Number }, + 'aria-colindex': { type: Number }, + 'aria-colindextext': { type: String }, + 'aria-colspan': { type: Number }, + 'aria-controls': { type: String }, + 'aria-current': { type: String }, + 'aria-describedby': { type: String }, + 'aria-description': { type: String }, + 'aria-details': { type: String }, + 'aria-disabled': { type: String }, + 'aria-dropeffect': { type: String }, + 'aria-errormessage': { type: String }, + 'aria-expanded': { type: String }, + 'aria-flowto': { type: String }, + 'aria-grabbed': { type: String }, + 'aria-haspopup': { type: String }, + 'aria-hidden': { type: String }, + 'aria-invalid': { type: String }, + 'aria-keyshortcuts': { type: String }, + 'aria-label': { type: String }, + 'aria-labelledby': { type: String }, + 'aria-level': { type: Number }, + 'aria-live': { type: String }, + 'aria-modal': { type: String }, + 'aria-multiline': { type: String }, + 'aria-multiselectable': { type: String }, + 'aria-orientation': { type: String }, + 'aria-owns': { type: String }, + 'aria-placeholder': { type: String }, + 'aria-posinset': { type: Number }, + 'aria-pressed': { type: String }, + 'aria-readonly': { type: String }, + 'aria-relevant': { type: String }, + 'aria-required': { type: String }, + 'aria-roledescription': { type: String }, + 'aria-rowcount': { type: Number }, + 'aria-rowindex': { type: Number }, + 'aria-rowindextext': { type: String }, + 'aria-rowspan': { type: Number }, + 'aria-selected': { type: String }, + 'aria-setsize': { type: Number }, + 'aria-sort': { type: String }, + 'aria-valuemax': { type: Number }, + 'aria-valuemin': { type: Number }, + 'aria-valuenow': { type: Number }, + 'aria-valuetext': { type: String }, + dangerouslySetInnerHTML: { type: Object }, + onCopy: { type: Function }, + onCopyCapture: { type: Function }, + onCut: { type: Function }, + onCutCapture: { type: Function }, + onPaste: { type: Function }, + onPasteCapture: { type: Function }, + onCompositionEnd: { type: Function }, + onCompositionEndCapture: { type: Function }, + onCompositionStart: { type: Function }, + onCompositionStartCapture: { type: Function }, + onCompositionUpdate: { type: Function }, + onCompositionUpdateCapture: { type: Function }, + onFocus: { type: Function }, + onFocusCapture: { type: Function }, + onBlur: { type: Function }, + onBlurCapture: { type: Function }, + onChange: { type: Function }, + onChangeCapture: { type: Function }, + onBeforeInput: { type: Function }, + onBeforeInputCapture: { type: Function }, + onInput: { type: Function }, + onInputCapture: { type: Function }, + onReset: { type: Function }, + onResetCapture: { type: Function }, + onSubmit: { type: Function }, + onSubmitCapture: { type: Function }, + onInvalid: { type: Function }, + onInvalidCapture: { type: Function }, + onLoad: { type: Function }, + onLoadCapture: { type: Function }, + onError: { type: Function }, + onErrorCapture: { type: Function }, + onKeyDown: { type: Function }, + onKeyDownCapture: { type: Function }, + onKeyPress: { type: Function }, + onKeyPressCapture: { type: Function }, + onKeyUp: { type: Function }, + onKeyUpCapture: { type: Function }, + onAbort: { type: Function }, + onAbortCapture: { type: Function }, + onCanPlay: { type: Function }, + onCanPlayCapture: { type: Function }, + onCanPlayThrough: { type: Function }, + onCanPlayThroughCapture: { type: Function }, + onDurationChange: { type: Function }, + onDurationChangeCapture: { type: Function }, + onEmptied: { type: Function }, + onEmptiedCapture: { type: Function }, + onEncrypted: { type: Function }, + onEncryptedCapture: { type: Function }, + onEnded: { type: Function }, + onEndedCapture: { type: Function }, + onLoadedData: { type: Function }, + onLoadedDataCapture: { type: Function }, + onLoadedMetadata: { type: Function }, + onLoadedMetadataCapture: { type: Function }, + onLoadStart: { type: Function }, + onLoadStartCapture: { type: Function }, + onPause: { type: Function }, + onPauseCapture: { type: Function }, + onPlay: { type: Function }, + onPlayCapture: { type: Function }, + onPlaying: { type: Function }, + onPlayingCapture: { type: Function }, + onProgress: { type: Function }, + onProgressCapture: { type: Function }, + onRateChange: { type: Function }, + onRateChangeCapture: { type: Function }, + onResize: { type: Function }, + onResizeCapture: { type: Function }, + onSeeked: { type: Function }, + onSeekedCapture: { type: Function }, + onSeeking: { type: Function }, + onSeekingCapture: { type: Function }, + onStalled: { type: Function }, + onStalledCapture: { type: Function }, + onSuspend: { type: Function }, + onSuspendCapture: { type: Function }, + onTimeUpdate: { type: Function }, + onTimeUpdateCapture: { type: Function }, + onVolumeChange: { type: Function }, + onVolumeChangeCapture: { type: Function }, + onWaiting: { type: Function }, + onWaitingCapture: { type: Function }, + onAuxClick: { type: Function }, + onAuxClickCapture: { type: Function }, + onClick: { type: Function }, + onClickCapture: { type: Function }, + onContextMenu: { type: Function }, + onContextMenuCapture: { type: Function }, + onDoubleClick: { type: Function }, + onDoubleClickCapture: { type: Function }, + onDrag: { type: Function }, + onDragCapture: { type: Function }, + onDragEnd: { type: Function }, + onDragEndCapture: { type: Function }, + onDragEnter: { type: Function }, + onDragEnterCapture: { type: Function }, + onDragExit: { type: Function }, + onDragExitCapture: { type: Function }, + onDragLeave: { type: Function }, + onDragLeaveCapture: { type: Function }, + onDragOver: { type: Function }, + onDragOverCapture: { type: Function }, + onDragStart: { type: Function }, + onDragStartCapture: { type: Function }, + onDrop: { type: Function }, + onDropCapture: { type: Function }, + onMouseDown: { type: Function }, + onMouseDownCapture: { type: Function }, + onMouseEnter: { type: Function }, + onMouseLeave: { type: Function }, + onMouseMove: { type: Function }, + onMouseMoveCapture: { type: Function }, + onMouseOut: { type: Function }, + onMouseOutCapture: { type: Function }, + onMouseOver: { type: Function }, + onMouseOverCapture: { type: Function }, + onMouseUp: { type: Function }, + onMouseUpCapture: { type: Function }, + onSelect: { type: Function }, + onSelectCapture: { type: Function }, + onTouchCancel: { type: Function }, + onTouchCancelCapture: { type: Function }, + onTouchEnd: { type: Function }, + onTouchEndCapture: { type: Function }, + onTouchMove: { type: Function }, + onTouchMoveCapture: { type: Function }, + onTouchStart: { type: Function }, + onTouchStartCapture: { type: Function }, + onPointerDown: { type: Function }, + onPointerDownCapture: { type: Function }, + onPointerMove: { type: Function }, + onPointerMoveCapture: { type: Function }, + onPointerUp: { type: Function }, + onPointerUpCapture: { type: Function }, + onPointerCancel: { type: Function }, + onPointerCancelCapture: { type: Function }, + onPointerEnter: { type: Function }, + onPointerLeave: { type: Function }, + onPointerOver: { type: Function }, + onPointerOverCapture: { type: Function }, + onPointerOut: { type: Function }, + onPointerOutCapture: { type: Function }, + onGotPointerCapture: { type: Function }, + onGotPointerCaptureCapture: { type: Function }, + onLostPointerCapture: { type: Function }, + onLostPointerCaptureCapture: { type: Function }, + onScroll: { type: Function }, + onScrollCapture: { type: Function }, + onWheel: { type: Function }, + onWheelCapture: { type: Function }, + onAnimationStart: { type: Function }, + onAnimationStartCapture: { type: Function }, + onAnimationEnd: { type: Function }, + onAnimationEndCapture: { type: Function }, + onAnimationIteration: { type: Function }, + onAnimationIterationCapture: { type: Function }, + onTransitionEnd: { type: Function }, + onTransitionEndCapture: { type: Function }, + }, +}); + +export type TwentyUiTabContentProperties = { + id: string; + active?: boolean; + disabled?: boolean; + title?: string; + logo?: string; + contentSize?: string; + className?: string; +}; + +export const TwentyUiTabContentElement = createRemoteElement< + TwentyUiTabContentProperties, + Record, + { LeftIcon: true; RightIcon: true; pill: true }, + Record +>({ + slots: ['LeftIcon', 'RightIcon', 'pill'], + properties: { + id: { type: String }, + active: { type: Boolean }, + disabled: { type: Boolean }, + title: { type: String }, + logo: { type: String }, + contentSize: { type: String }, + className: { type: String }, + }, +}); + +export type TwentyUiTabButtonProperties = { + id: string; + active?: boolean; + disabled?: boolean; + to?: string; + className?: string; + title?: string; + onClick?: (...args: unknown[]) => unknown; + logo?: string; + contentSize?: string; + disableTestId?: boolean; +}; + +export const TwentyUiTabButtonElement = createRemoteElement< + TwentyUiTabButtonProperties, + Record, + { LeftIcon: true; RightIcon: true; pill: true }, + Record +>({ + slots: ['LeftIcon', 'RightIcon', 'pill'], + properties: { + id: { type: String }, + active: { type: Boolean }, + disabled: { type: Boolean }, + to: { type: String }, + className: { type: String }, + title: { type: String }, + onClick: { type: Function }, + logo: { type: String }, + contentSize: { type: String }, + disableTestId: { type: Boolean }, + }, +}); + +export type TwentyUiCodeEditorProperties = { + height?: string; + value?: string; + language?: string; + onMount?: (...args: unknown[]) => unknown; + onValidate?: (...args: unknown[]) => unknown; + options?: Record; + onChange?: (...args: unknown[]) => unknown; + setMarkers?: (...args: unknown[]) => unknown; + variant?: string; + isLoading?: boolean; + transparentBackground?: boolean; +}; + +export const TwentyUiCodeEditorElement = createRemoteElement< + TwentyUiCodeEditorProperties, + Record, + Record, + Record +>({ + properties: { + height: { type: String }, + value: { type: String }, + language: { type: String }, + onMount: { type: Function }, + onValidate: { type: Function }, + options: { type: Object }, + onChange: { type: Function }, + setMarkers: { type: Function }, + variant: { type: String }, + isLoading: { type: Boolean }, + transparentBackground: { type: Boolean }, + }, +}); + +export type TwentyUiCoreEditorHeaderProperties = { + title?: string; + leftNodes?: unknown[]; + rightNodes?: unknown[]; +}; + +export const TwentyUiCoreEditorHeaderElement = createRemoteElement< + TwentyUiCoreEditorHeaderProperties, + Record, + Record, + Record +>({ + properties: { + title: { type: String }, + leftNodes: { type: Array }, + rightNodes: { type: Array }, + }, +}); + +export type TwentyUiColorSchemeCardProperties = { + variant: string; + selected?: boolean; + slot?: string; + style?: Record; + title?: string; + className?: string; + onClick?: (...args: unknown[]) => unknown; + color?: string; + content?: string; + translate?: string; + hidden?: boolean; + 'aria-label'?: string; + defaultChecked?: boolean; + suppressContentEditableWarning?: boolean; + suppressHydrationWarning?: boolean; + accessKey?: string; + autoFocus?: boolean; + contentEditable?: string; + contextMenu?: string; + dir?: string; + draggable?: string; + id?: string; + lang?: string; + nonce?: string; + spellCheck?: string; + tabIndex?: number; + radioGroup?: string; + about?: string; + datatype?: string; + prefix?: string; + property?: string; + rel?: string; + resource?: string; + rev?: string; + typeof?: string; + vocab?: string; + autoCapitalize?: string; + autoCorrect?: string; + autoSave?: string; + itemProp?: string; + itemScope?: boolean; + itemType?: string; + itemID?: string; + itemRef?: string; + results?: number; + security?: string; + unselectable?: string; + inputMode?: string; + is?: string; + 'data-tooltip-id'?: string; + 'data-tooltip-place'?: string; + 'data-tooltip-content'?: string; + 'data-tooltip-html'?: string; + 'data-tooltip-variant'?: string; + 'data-tooltip-offset'?: number; + 'data-tooltip-events'?: unknown[]; + 'data-tooltip-position-strategy'?: string; + 'data-tooltip-delay-show'?: number; + 'data-tooltip-delay-hide'?: number; + 'data-tooltip-float'?: boolean; + 'data-tooltip-hidden'?: boolean; + 'data-tooltip-class-name'?: string; + 'aria-activedescendant'?: string; + 'aria-atomic'?: string; + 'aria-autocomplete'?: string; + 'aria-braillelabel'?: string; + 'aria-brailleroledescription'?: string; + 'aria-busy'?: string; + 'aria-checked'?: string; + 'aria-colcount'?: number; + 'aria-colindex'?: number; + 'aria-colindextext'?: string; + 'aria-colspan'?: number; + 'aria-controls'?: string; + 'aria-current'?: string; + 'aria-describedby'?: string; + 'aria-description'?: string; + 'aria-details'?: string; + 'aria-disabled'?: string; + 'aria-dropeffect'?: string; + 'aria-errormessage'?: string; + 'aria-expanded'?: string; + 'aria-flowto'?: string; + 'aria-grabbed'?: string; + 'aria-haspopup'?: string; + 'aria-hidden'?: string; + 'aria-invalid'?: string; + 'aria-keyshortcuts'?: string; + 'aria-labelledby'?: string; + 'aria-level'?: number; + 'aria-live'?: string; + 'aria-modal'?: string; + 'aria-multiline'?: string; + 'aria-multiselectable'?: string; + 'aria-orientation'?: string; + 'aria-owns'?: string; + 'aria-placeholder'?: string; + 'aria-posinset'?: number; + 'aria-pressed'?: string; + 'aria-readonly'?: string; + 'aria-relevant'?: string; + 'aria-required'?: string; + 'aria-roledescription'?: string; + 'aria-rowcount'?: number; + 'aria-rowindex'?: number; + 'aria-rowindextext'?: string; + 'aria-rowspan'?: number; + 'aria-selected'?: string; + 'aria-setsize'?: number; + 'aria-sort'?: string; + 'aria-valuemax'?: number; + 'aria-valuemin'?: number; + 'aria-valuenow'?: number; + 'aria-valuetext'?: string; + dangerouslySetInnerHTML?: Record; + onCopy?: (...args: unknown[]) => unknown; + onCopyCapture?: (...args: unknown[]) => unknown; + onCut?: (...args: unknown[]) => unknown; + onCutCapture?: (...args: unknown[]) => unknown; + onPaste?: (...args: unknown[]) => unknown; + onPasteCapture?: (...args: unknown[]) => unknown; + onCompositionEnd?: (...args: unknown[]) => unknown; + onCompositionEndCapture?: (...args: unknown[]) => unknown; + onCompositionStart?: (...args: unknown[]) => unknown; + onCompositionStartCapture?: (...args: unknown[]) => unknown; + onCompositionUpdate?: (...args: unknown[]) => unknown; + onCompositionUpdateCapture?: (...args: unknown[]) => unknown; + onFocus?: (...args: unknown[]) => unknown; + onFocusCapture?: (...args: unknown[]) => unknown; + onBlur?: (...args: unknown[]) => unknown; + onBlurCapture?: (...args: unknown[]) => unknown; + onChange?: (...args: unknown[]) => unknown; + onChangeCapture?: (...args: unknown[]) => unknown; + onBeforeInput?: (...args: unknown[]) => unknown; + onBeforeInputCapture?: (...args: unknown[]) => unknown; + onInput?: (...args: unknown[]) => unknown; + onInputCapture?: (...args: unknown[]) => unknown; + onReset?: (...args: unknown[]) => unknown; + onResetCapture?: (...args: unknown[]) => unknown; + onSubmit?: (...args: unknown[]) => unknown; + onSubmitCapture?: (...args: unknown[]) => unknown; + onInvalid?: (...args: unknown[]) => unknown; + onInvalidCapture?: (...args: unknown[]) => unknown; + onLoad?: (...args: unknown[]) => unknown; + onLoadCapture?: (...args: unknown[]) => unknown; + onError?: (...args: unknown[]) => unknown; + onErrorCapture?: (...args: unknown[]) => unknown; + onKeyDown?: (...args: unknown[]) => unknown; + onKeyDownCapture?: (...args: unknown[]) => unknown; + onKeyPress?: (...args: unknown[]) => unknown; + onKeyPressCapture?: (...args: unknown[]) => unknown; + onKeyUp?: (...args: unknown[]) => unknown; + onKeyUpCapture?: (...args: unknown[]) => unknown; + onAbort?: (...args: unknown[]) => unknown; + onAbortCapture?: (...args: unknown[]) => unknown; + onCanPlay?: (...args: unknown[]) => unknown; + onCanPlayCapture?: (...args: unknown[]) => unknown; + onCanPlayThrough?: (...args: unknown[]) => unknown; + onCanPlayThroughCapture?: (...args: unknown[]) => unknown; + onDurationChange?: (...args: unknown[]) => unknown; + onDurationChangeCapture?: (...args: unknown[]) => unknown; + onEmptied?: (...args: unknown[]) => unknown; + onEmptiedCapture?: (...args: unknown[]) => unknown; + onEncrypted?: (...args: unknown[]) => unknown; + onEncryptedCapture?: (...args: unknown[]) => unknown; + onEnded?: (...args: unknown[]) => unknown; + onEndedCapture?: (...args: unknown[]) => unknown; + onLoadedData?: (...args: unknown[]) => unknown; + onLoadedDataCapture?: (...args: unknown[]) => unknown; + onLoadedMetadata?: (...args: unknown[]) => unknown; + onLoadedMetadataCapture?: (...args: unknown[]) => unknown; + onLoadStart?: (...args: unknown[]) => unknown; + onLoadStartCapture?: (...args: unknown[]) => unknown; + onPause?: (...args: unknown[]) => unknown; + onPauseCapture?: (...args: unknown[]) => unknown; + onPlay?: (...args: unknown[]) => unknown; + onPlayCapture?: (...args: unknown[]) => unknown; + onPlaying?: (...args: unknown[]) => unknown; + onPlayingCapture?: (...args: unknown[]) => unknown; + onProgress?: (...args: unknown[]) => unknown; + onProgressCapture?: (...args: unknown[]) => unknown; + onRateChange?: (...args: unknown[]) => unknown; + onRateChangeCapture?: (...args: unknown[]) => unknown; + onResize?: (...args: unknown[]) => unknown; + onResizeCapture?: (...args: unknown[]) => unknown; + onSeeked?: (...args: unknown[]) => unknown; + onSeekedCapture?: (...args: unknown[]) => unknown; + onSeeking?: (...args: unknown[]) => unknown; + onSeekingCapture?: (...args: unknown[]) => unknown; + onStalled?: (...args: unknown[]) => unknown; + onStalledCapture?: (...args: unknown[]) => unknown; + onSuspend?: (...args: unknown[]) => unknown; + onSuspendCapture?: (...args: unknown[]) => unknown; + onTimeUpdate?: (...args: unknown[]) => unknown; + onTimeUpdateCapture?: (...args: unknown[]) => unknown; + onVolumeChange?: (...args: unknown[]) => unknown; + onVolumeChangeCapture?: (...args: unknown[]) => unknown; + onWaiting?: (...args: unknown[]) => unknown; + onWaitingCapture?: (...args: unknown[]) => unknown; + onAuxClick?: (...args: unknown[]) => unknown; + onAuxClickCapture?: (...args: unknown[]) => unknown; + onClickCapture?: (...args: unknown[]) => unknown; + onContextMenu?: (...args: unknown[]) => unknown; + onContextMenuCapture?: (...args: unknown[]) => unknown; + onDoubleClick?: (...args: unknown[]) => unknown; + onDoubleClickCapture?: (...args: unknown[]) => unknown; + onDrag?: (...args: unknown[]) => unknown; + onDragCapture?: (...args: unknown[]) => unknown; + onDragEnd?: (...args: unknown[]) => unknown; + onDragEndCapture?: (...args: unknown[]) => unknown; + onDragEnter?: (...args: unknown[]) => unknown; + onDragEnterCapture?: (...args: unknown[]) => unknown; + onDragExit?: (...args: unknown[]) => unknown; + onDragExitCapture?: (...args: unknown[]) => unknown; + onDragLeave?: (...args: unknown[]) => unknown; + onDragLeaveCapture?: (...args: unknown[]) => unknown; + onDragOver?: (...args: unknown[]) => unknown; + onDragOverCapture?: (...args: unknown[]) => unknown; + onDragStart?: (...args: unknown[]) => unknown; + onDragStartCapture?: (...args: unknown[]) => unknown; + onDrop?: (...args: unknown[]) => unknown; + onDropCapture?: (...args: unknown[]) => unknown; + onMouseDown?: (...args: unknown[]) => unknown; + onMouseDownCapture?: (...args: unknown[]) => unknown; + onMouseEnter?: (...args: unknown[]) => unknown; + onMouseLeave?: (...args: unknown[]) => unknown; + onMouseMove?: (...args: unknown[]) => unknown; + onMouseMoveCapture?: (...args: unknown[]) => unknown; + onMouseOut?: (...args: unknown[]) => unknown; + onMouseOutCapture?: (...args: unknown[]) => unknown; + onMouseOver?: (...args: unknown[]) => unknown; + onMouseOverCapture?: (...args: unknown[]) => unknown; + onMouseUp?: (...args: unknown[]) => unknown; + onMouseUpCapture?: (...args: unknown[]) => unknown; + onSelect?: (...args: unknown[]) => unknown; + onSelectCapture?: (...args: unknown[]) => unknown; + onTouchCancel?: (...args: unknown[]) => unknown; + onTouchCancelCapture?: (...args: unknown[]) => unknown; + onTouchEnd?: (...args: unknown[]) => unknown; + onTouchEndCapture?: (...args: unknown[]) => unknown; + onTouchMove?: (...args: unknown[]) => unknown; + onTouchMoveCapture?: (...args: unknown[]) => unknown; + onTouchStart?: (...args: unknown[]) => unknown; + onTouchStartCapture?: (...args: unknown[]) => unknown; + onPointerDown?: (...args: unknown[]) => unknown; + onPointerDownCapture?: (...args: unknown[]) => unknown; + onPointerMove?: (...args: unknown[]) => unknown; + onPointerMoveCapture?: (...args: unknown[]) => unknown; + onPointerUp?: (...args: unknown[]) => unknown; + onPointerUpCapture?: (...args: unknown[]) => unknown; + onPointerCancel?: (...args: unknown[]) => unknown; + onPointerCancelCapture?: (...args: unknown[]) => unknown; + onPointerEnter?: (...args: unknown[]) => unknown; + onPointerLeave?: (...args: unknown[]) => unknown; + onPointerOver?: (...args: unknown[]) => unknown; + onPointerOverCapture?: (...args: unknown[]) => unknown; + onPointerOut?: (...args: unknown[]) => unknown; + onPointerOutCapture?: (...args: unknown[]) => unknown; + onGotPointerCapture?: (...args: unknown[]) => unknown; + onGotPointerCaptureCapture?: (...args: unknown[]) => unknown; + onLostPointerCapture?: (...args: unknown[]) => unknown; + onLostPointerCaptureCapture?: (...args: unknown[]) => unknown; + onScroll?: (...args: unknown[]) => unknown; + onScrollCapture?: (...args: unknown[]) => unknown; + onWheel?: (...args: unknown[]) => unknown; + onWheelCapture?: (...args: unknown[]) => unknown; + onAnimationStart?: (...args: unknown[]) => unknown; + onAnimationStartCapture?: (...args: unknown[]) => unknown; + onAnimationEnd?: (...args: unknown[]) => unknown; + onAnimationEndCapture?: (...args: unknown[]) => unknown; + onAnimationIteration?: (...args: unknown[]) => unknown; + onAnimationIterationCapture?: (...args: unknown[]) => unknown; + onTransitionEnd?: (...args: unknown[]) => unknown; + onTransitionEndCapture?: (...args: unknown[]) => unknown; +}; + +export const TwentyUiColorSchemeCardElement = createRemoteElement< + TwentyUiColorSchemeCardProperties, + Record, + { children: true; 'data-tooltip-wrapper': true }, + Record +>({ + slots: ['children', 'data-tooltip-wrapper'], + properties: { + variant: { type: String }, + selected: { type: Boolean }, + slot: { type: String }, + style: { type: Object }, + title: { type: String }, + className: { type: String }, + onClick: { type: Function }, + color: { type: String }, + content: { type: String }, + translate: { type: String }, + hidden: { type: Boolean }, + 'aria-label': { type: String }, + defaultChecked: { type: Boolean }, + suppressContentEditableWarning: { type: Boolean }, + suppressHydrationWarning: { type: Boolean }, + accessKey: { type: String }, + autoFocus: { type: Boolean }, + contentEditable: { type: String }, + contextMenu: { type: String }, + dir: { type: String }, + draggable: { type: String }, + id: { type: String }, + lang: { type: String }, + nonce: { type: String }, + spellCheck: { type: String }, + tabIndex: { type: Number }, + radioGroup: { type: String }, + about: { type: String }, + datatype: { type: String }, + prefix: { type: String }, + property: { type: String }, + rel: { type: String }, + resource: { type: String }, + rev: { type: String }, + typeof: { type: String }, + vocab: { type: String }, + autoCapitalize: { type: String }, + autoCorrect: { type: String }, + autoSave: { type: String }, + itemProp: { type: String }, + itemScope: { type: Boolean }, + itemType: { type: String }, + itemID: { type: String }, + itemRef: { type: String }, + results: { type: Number }, + security: { type: String }, + unselectable: { type: String }, + inputMode: { type: String }, + is: { type: String }, + 'data-tooltip-id': { type: String }, + 'data-tooltip-place': { type: String }, + 'data-tooltip-content': { type: String }, + 'data-tooltip-html': { type: String }, + 'data-tooltip-variant': { type: String }, + 'data-tooltip-offset': { type: Number }, + 'data-tooltip-events': { type: Array }, + 'data-tooltip-position-strategy': { type: String }, + 'data-tooltip-delay-show': { type: Number }, + 'data-tooltip-delay-hide': { type: Number }, + 'data-tooltip-float': { type: Boolean }, + 'data-tooltip-hidden': { type: Boolean }, + 'data-tooltip-class-name': { type: String }, + 'aria-activedescendant': { type: String }, + 'aria-atomic': { type: String }, + 'aria-autocomplete': { type: String }, + 'aria-braillelabel': { type: String }, + 'aria-brailleroledescription': { type: String }, + 'aria-busy': { type: String }, + 'aria-checked': { type: String }, + 'aria-colcount': { type: Number }, + 'aria-colindex': { type: Number }, + 'aria-colindextext': { type: String }, + 'aria-colspan': { type: Number }, + 'aria-controls': { type: String }, + 'aria-current': { type: String }, + 'aria-describedby': { type: String }, + 'aria-description': { type: String }, + 'aria-details': { type: String }, + 'aria-disabled': { type: String }, + 'aria-dropeffect': { type: String }, + 'aria-errormessage': { type: String }, + 'aria-expanded': { type: String }, + 'aria-flowto': { type: String }, + 'aria-grabbed': { type: String }, + 'aria-haspopup': { type: String }, + 'aria-hidden': { type: String }, + 'aria-invalid': { type: String }, + 'aria-keyshortcuts': { type: String }, + 'aria-labelledby': { type: String }, + 'aria-level': { type: Number }, + 'aria-live': { type: String }, + 'aria-modal': { type: String }, + 'aria-multiline': { type: String }, + 'aria-multiselectable': { type: String }, + 'aria-orientation': { type: String }, + 'aria-owns': { type: String }, + 'aria-placeholder': { type: String }, + 'aria-posinset': { type: Number }, + 'aria-pressed': { type: String }, + 'aria-readonly': { type: String }, + 'aria-relevant': { type: String }, + 'aria-required': { type: String }, + 'aria-roledescription': { type: String }, + 'aria-rowcount': { type: Number }, + 'aria-rowindex': { type: Number }, + 'aria-rowindextext': { type: String }, + 'aria-rowspan': { type: Number }, + 'aria-selected': { type: String }, + 'aria-setsize': { type: Number }, + 'aria-sort': { type: String }, + 'aria-valuemax': { type: Number }, + 'aria-valuemin': { type: Number }, + 'aria-valuenow': { type: Number }, + 'aria-valuetext': { type: String }, + dangerouslySetInnerHTML: { type: Object }, + onCopy: { type: Function }, + onCopyCapture: { type: Function }, + onCut: { type: Function }, + onCutCapture: { type: Function }, + onPaste: { type: Function }, + onPasteCapture: { type: Function }, + onCompositionEnd: { type: Function }, + onCompositionEndCapture: { type: Function }, + onCompositionStart: { type: Function }, + onCompositionStartCapture: { type: Function }, + onCompositionUpdate: { type: Function }, + onCompositionUpdateCapture: { type: Function }, + onFocus: { type: Function }, + onFocusCapture: { type: Function }, + onBlur: { type: Function }, + onBlurCapture: { type: Function }, + onChange: { type: Function }, + onChangeCapture: { type: Function }, + onBeforeInput: { type: Function }, + onBeforeInputCapture: { type: Function }, + onInput: { type: Function }, + onInputCapture: { type: Function }, + onReset: { type: Function }, + onResetCapture: { type: Function }, + onSubmit: { type: Function }, + onSubmitCapture: { type: Function }, + onInvalid: { type: Function }, + onInvalidCapture: { type: Function }, + onLoad: { type: Function }, + onLoadCapture: { type: Function }, + onError: { type: Function }, + onErrorCapture: { type: Function }, + onKeyDown: { type: Function }, + onKeyDownCapture: { type: Function }, + onKeyPress: { type: Function }, + onKeyPressCapture: { type: Function }, + onKeyUp: { type: Function }, + onKeyUpCapture: { type: Function }, + onAbort: { type: Function }, + onAbortCapture: { type: Function }, + onCanPlay: { type: Function }, + onCanPlayCapture: { type: Function }, + onCanPlayThrough: { type: Function }, + onCanPlayThroughCapture: { type: Function }, + onDurationChange: { type: Function }, + onDurationChangeCapture: { type: Function }, + onEmptied: { type: Function }, + onEmptiedCapture: { type: Function }, + onEncrypted: { type: Function }, + onEncryptedCapture: { type: Function }, + onEnded: { type: Function }, + onEndedCapture: { type: Function }, + onLoadedData: { type: Function }, + onLoadedDataCapture: { type: Function }, + onLoadedMetadata: { type: Function }, + onLoadedMetadataCapture: { type: Function }, + onLoadStart: { type: Function }, + onLoadStartCapture: { type: Function }, + onPause: { type: Function }, + onPauseCapture: { type: Function }, + onPlay: { type: Function }, + onPlayCapture: { type: Function }, + onPlaying: { type: Function }, + onPlayingCapture: { type: Function }, + onProgress: { type: Function }, + onProgressCapture: { type: Function }, + onRateChange: { type: Function }, + onRateChangeCapture: { type: Function }, + onResize: { type: Function }, + onResizeCapture: { type: Function }, + onSeeked: { type: Function }, + onSeekedCapture: { type: Function }, + onSeeking: { type: Function }, + onSeekingCapture: { type: Function }, + onStalled: { type: Function }, + onStalledCapture: { type: Function }, + onSuspend: { type: Function }, + onSuspendCapture: { type: Function }, + onTimeUpdate: { type: Function }, + onTimeUpdateCapture: { type: Function }, + onVolumeChange: { type: Function }, + onVolumeChangeCapture: { type: Function }, + onWaiting: { type: Function }, + onWaitingCapture: { type: Function }, + onAuxClick: { type: Function }, + onAuxClickCapture: { type: Function }, + onClickCapture: { type: Function }, + onContextMenu: { type: Function }, + onContextMenuCapture: { type: Function }, + onDoubleClick: { type: Function }, + onDoubleClickCapture: { type: Function }, + onDrag: { type: Function }, + onDragCapture: { type: Function }, + onDragEnd: { type: Function }, + onDragEndCapture: { type: Function }, + onDragEnter: { type: Function }, + onDragEnterCapture: { type: Function }, + onDragExit: { type: Function }, + onDragExitCapture: { type: Function }, + onDragLeave: { type: Function }, + onDragLeaveCapture: { type: Function }, + onDragOver: { type: Function }, + onDragOverCapture: { type: Function }, + onDragStart: { type: Function }, + onDragStartCapture: { type: Function }, + onDrop: { type: Function }, + onDropCapture: { type: Function }, + onMouseDown: { type: Function }, + onMouseDownCapture: { type: Function }, + onMouseEnter: { type: Function }, + onMouseLeave: { type: Function }, + onMouseMove: { type: Function }, + onMouseMoveCapture: { type: Function }, + onMouseOut: { type: Function }, + onMouseOutCapture: { type: Function }, + onMouseOver: { type: Function }, + onMouseOverCapture: { type: Function }, + onMouseUp: { type: Function }, + onMouseUpCapture: { type: Function }, + onSelect: { type: Function }, + onSelectCapture: { type: Function }, + onTouchCancel: { type: Function }, + onTouchCancelCapture: { type: Function }, + onTouchEnd: { type: Function }, + onTouchEndCapture: { type: Function }, + onTouchMove: { type: Function }, + onTouchMoveCapture: { type: Function }, + onTouchStart: { type: Function }, + onTouchStartCapture: { type: Function }, + onPointerDown: { type: Function }, + onPointerDownCapture: { type: Function }, + onPointerMove: { type: Function }, + onPointerMoveCapture: { type: Function }, + onPointerUp: { type: Function }, + onPointerUpCapture: { type: Function }, + onPointerCancel: { type: Function }, + onPointerCancelCapture: { type: Function }, + onPointerEnter: { type: Function }, + onPointerLeave: { type: Function }, + onPointerOver: { type: Function }, + onPointerOverCapture: { type: Function }, + onPointerOut: { type: Function }, + onPointerOutCapture: { type: Function }, + onGotPointerCapture: { type: Function }, + onGotPointerCaptureCapture: { type: Function }, + onLostPointerCapture: { type: Function }, + onLostPointerCaptureCapture: { type: Function }, + onScroll: { type: Function }, + onScrollCapture: { type: Function }, + onWheel: { type: Function }, + onWheelCapture: { type: Function }, + onAnimationStart: { type: Function }, + onAnimationStartCapture: { type: Function }, + onAnimationEnd: { type: Function }, + onAnimationEndCapture: { type: Function }, + onAnimationIteration: { type: Function }, + onAnimationIterationCapture: { type: Function }, + onTransitionEnd: { type: Function }, + onTransitionEndCapture: { type: Function }, + }, +}); + +export type TwentyUiColorSchemePickerProperties = { + value: string; + className?: string; + onChange: (...args: unknown[]) => unknown; + lightLabel: string; + darkLabel: string; + systemLabel: string; +}; + +export const TwentyUiColorSchemePickerElement = createRemoteElement< + TwentyUiColorSchemePickerProperties, + Record, + Record, + Record +>({ + properties: { + value: { type: String }, + className: { type: String }, + onChange: { type: Function }, + lightLabel: { type: String }, + darkLabel: { type: String }, + systemLabel: { type: String }, + }, +}); + +export type TwentyUiCardPickerProperties = { + handleChange?: (...args: unknown[]) => unknown; + checked?: boolean; +}; + +export const TwentyUiCardPickerElement = createRemoteElement< + TwentyUiCardPickerProperties, + Record, + { children: true }, + Record +>({ + slots: ['children'], + properties: { + handleChange: { type: Function }, + checked: { type: Boolean }, + }, +}); + +export type TwentyUiCheckboxProperties = { + checked: boolean; + indeterminate?: boolean; + hoverable?: boolean; + onCheckedChange?: (...args: unknown[]) => unknown; + variant?: string; + size?: string; + shape?: string; + className?: string; + disabled?: boolean; + accent?: string; +}; + +export const TwentyUiCheckboxElement = createRemoteElement< + TwentyUiCheckboxProperties, + Record, + Record, + { change(event: RemoteEvent): void } +>({ + properties: { + checked: { type: Boolean }, + indeterminate: { type: Boolean }, + hoverable: { type: Boolean }, + onCheckedChange: { type: Function }, + variant: { type: String }, + size: { type: String }, + shape: { type: String }, + className: { type: String }, + disabled: { type: Boolean }, + accent: { type: String }, + }, + events: ['change'], +}); + +export type TwentyUiRadioProperties = { + checked?: boolean; + className?: string; + name?: string; + disabled?: boolean; + label?: string; + labelPosition?: string; + onCheckedChange?: (...args: unknown[]) => unknown; + size?: string; + style?: Record; + value?: string; +}; + +export const TwentyUiRadioElement = createRemoteElement< + TwentyUiRadioProperties, + Record, + Record, + { change(event: RemoteEvent): void } +>({ + properties: { + checked: { type: Boolean }, + className: { type: String }, + name: { type: String }, + disabled: { type: Boolean }, + label: { type: String }, + labelPosition: { type: String }, + onCheckedChange: { type: Function }, + size: { type: String }, + style: { type: Object }, + value: { type: String }, + }, + events: ['change'], +}); + +export type TwentyUiRadioGroupProperties = { + value?: string; + onValueChange?: (...args: unknown[]) => unknown; +}; + +export const TwentyUiRadioGroupElement = createRemoteElement< + TwentyUiRadioGroupProperties, + Record, + { children: true }, + { change(event: RemoteEvent): void } +>({ + slots: ['children'], + properties: { + value: { type: String }, + onValueChange: { type: Function }, + }, + events: ['change'], +}); + +export type TwentyUiSearchInputProperties = { + value: string; + onChange: (...args: unknown[]) => unknown; + placeholder?: string; + filterDropdown?: (...args: unknown[]) => unknown; + autoFocus?: boolean; + disabled?: boolean; + className?: string; +}; + +export const TwentyUiSearchInputElement = createRemoteElement< + TwentyUiSearchInputProperties, + Record, + Record, + Record +>({ + properties: { + value: { type: String }, + onChange: { type: Function }, + placeholder: { type: String }, + filterDropdown: { type: Function }, + autoFocus: { type: Boolean }, + disabled: { type: Boolean }, + className: { type: String }, + }, +}); + +export type TwentyUiToggleProperties = { + id?: string; + value?: boolean; + onChange?: (...args: unknown[]) => unknown; + color?: string; + toggleSize?: string; + className?: string; + disabled?: boolean; +}; + +export const TwentyUiToggleElement = createRemoteElement< + TwentyUiToggleProperties, + Record, + Record, + Record +>({ + properties: { + id: { type: String }, + value: { type: Boolean }, + onChange: { type: Function }, + color: { type: String }, + toggleSize: { type: String }, + className: { type: String }, + disabled: { type: Boolean }, + }, +}); + +export type TwentyUiAvatarChipProperties = { + placeholder?: string; + avatarUrl?: string; + avatarType?: string; + IconColor?: string; + IconBackgroundColor?: string; + isIconInverted?: boolean; + placeholderColorSeed?: string; + divider?: string; + onClick?: (...args: unknown[]) => unknown; +}; + +export const TwentyUiAvatarChipElement = createRemoteElement< + TwentyUiAvatarChipProperties, + Record, + { Icon: true }, + Record +>({ + slots: ['Icon'], + properties: { + placeholder: { type: String }, + avatarUrl: { type: String }, + avatarType: { type: String }, + IconColor: { type: String }, + IconBackgroundColor: { type: String }, + isIconInverted: { type: Boolean }, + placeholderColorSeed: { type: String }, + divider: { type: String }, + onClick: { type: Function }, + }, +}); + +export type TwentyUiMultipleAvatarChipProperties = { + Icons: unknown[]; + text?: string; + onClick?: (...args: unknown[]) => unknown; + testId?: string; + maxWidth?: number; + forceEmptyText?: boolean; + variant?: string; + emptyLabel?: string; +}; + +export const TwentyUiMultipleAvatarChipElement = createRemoteElement< + TwentyUiMultipleAvatarChipProperties, + Record, + { rightComponent: true }, + Record +>({ + slots: ['rightComponent'], + properties: { + Icons: { type: Array }, + text: { type: String }, + onClick: { type: Function }, + testId: { type: String }, + maxWidth: { type: Number }, + forceEmptyText: { type: Boolean }, + variant: { type: String }, + emptyLabel: { type: String }, + }, +}); + +export type TwentyUiChipProperties = { + size?: string; + disabled?: boolean; + clickable?: boolean; + label: string; + isLabelHidden?: boolean; + maxWidth?: number; + variant?: string; + accent?: string; + className?: string; + forceEmptyText?: boolean; + emptyLabel?: string; +}; + +export const TwentyUiChipElement = createRemoteElement< + TwentyUiChipProperties, + Record, + { leftComponent: true; rightComponent: true }, + Record +>({ + slots: ['leftComponent', 'rightComponent'], + properties: { + size: { type: String }, + disabled: { type: Boolean }, + clickable: { type: Boolean }, + label: { type: String }, + isLabelHidden: { type: Boolean }, + maxWidth: { type: Number }, + variant: { type: String }, + accent: { type: String }, + className: { type: String }, + forceEmptyText: { type: Boolean }, + emptyLabel: { type: String }, + }, +}); + +export type TwentyUiLinkChipProperties = { + label: string; + className?: string; + variant?: string; + size?: string; + accent?: string; + maxWidth?: number; + forceEmptyText?: boolean; + emptyLabel?: string; + isLabelHidden?: boolean; + to: string; + triggerEvent?: string; + target?: string; +}; + +export const TwentyUiLinkChipElement = createRemoteElement< + TwentyUiLinkChipProperties, + Record, + { rightComponent: true; leftComponent: true }, + { + click(event: RemoteEvent): void; + mousedown(event: RemoteEvent): void; + } +>({ + slots: ['rightComponent', 'leftComponent'], + properties: { + label: { type: String }, + className: { type: String }, + variant: { type: String }, + size: { type: String }, + accent: { type: String }, + maxWidth: { type: Number }, + forceEmptyText: { type: Boolean }, + emptyLabel: { type: String }, + isLabelHidden: { type: Boolean }, + to: { type: String }, + triggerEvent: { type: String }, + target: { type: String }, + }, + events: ['click', 'mousedown'], +}); + +export type TwentyUiPillProperties = { + className?: string; + label?: string; +}; + +export const TwentyUiPillElement = createRemoteElement< + TwentyUiPillProperties, + Record, + { Icon: true }, + Record +>({ + slots: ['Icon'], + properties: { + className: { type: String }, + label: { type: String }, + }, +}); + +export type TwentyUiTagProperties = { + className?: string; + color: string; + text: string; + onClick?: (...args: unknown[]) => unknown; + weight?: string; + variant?: string; + preventShrink?: boolean; + preventPadding?: boolean; +}; + +export const TwentyUiTagElement = createRemoteElement< + TwentyUiTagProperties, + Record, + { Icon: true }, + Record +>({ + slots: ['Icon'], + properties: { + className: { type: String }, + color: { type: String }, + text: { type: String }, + onClick: { type: Function }, + weight: { type: String }, + variant: { type: String }, + preventShrink: { type: Boolean }, + preventPadding: { type: Boolean }, + }, +}); + +export type TwentyUiAvatarProperties = { + avatarUrl?: string; + className?: string; + size?: string; + placeholder?: string; + placeholderColorSeed?: string; + iconColor?: string; + type?: string; + color?: string; + backgroundColor?: string; + onClick?: (...args: unknown[]) => unknown; +}; + +export const TwentyUiAvatarElement = createRemoteElement< + TwentyUiAvatarProperties, + Record, + { Icon: true }, + Record +>({ + slots: ['Icon'], + properties: { + avatarUrl: { type: String }, + className: { type: String }, + size: { type: String }, + placeholder: { type: String }, + placeholderColorSeed: { type: String }, + iconColor: { type: String }, + type: { type: String }, + color: { type: String }, + backgroundColor: { type: String }, + onClick: { type: Function }, + }, +}); + +export type TwentyUiAvatarGroupProperties = { + avatars: unknown[]; +}; + +export const TwentyUiAvatarGroupElement = createRemoteElement< + TwentyUiAvatarGroupProperties, + Record, + Record, + Record +>({ + properties: { + avatars: { type: Array }, + }, +}); + +export type TwentyUiBannerProperties = { + variant?: string; + className?: string; + defaultChecked?: boolean; + suppressContentEditableWarning?: boolean; + suppressHydrationWarning?: boolean; + accessKey?: string; + autoFocus?: boolean; + contentEditable?: string; + contextMenu?: string; + dir?: string; + draggable?: string; + hidden?: boolean; + id?: string; + lang?: string; + nonce?: string; + slot?: string; + spellCheck?: string; + style?: Record; + tabIndex?: number; + title?: string; + translate?: string; + radioGroup?: string; + about?: string; + content?: string; + datatype?: string; + prefix?: string; + property?: string; + rel?: string; + resource?: string; + rev?: string; + typeof?: string; + vocab?: string; + autoCapitalize?: string; + autoCorrect?: string; + autoSave?: string; + color?: string; + itemProp?: string; + itemScope?: boolean; + itemType?: string; + itemID?: string; + itemRef?: string; + results?: number; + security?: string; + unselectable?: string; + inputMode?: string; + is?: string; + 'data-tooltip-id'?: string; + 'data-tooltip-place'?: string; + 'data-tooltip-content'?: string; + 'data-tooltip-html'?: string; + 'data-tooltip-variant'?: string; + 'data-tooltip-offset'?: number; + 'data-tooltip-events'?: unknown[]; + 'data-tooltip-position-strategy'?: string; + 'data-tooltip-delay-show'?: number; + 'data-tooltip-delay-hide'?: number; + 'data-tooltip-float'?: boolean; + 'data-tooltip-hidden'?: boolean; + 'data-tooltip-class-name'?: string; + 'aria-activedescendant'?: string; + 'aria-atomic'?: string; + 'aria-autocomplete'?: string; + 'aria-braillelabel'?: string; + 'aria-brailleroledescription'?: string; + 'aria-busy'?: string; + 'aria-checked'?: string; + 'aria-colcount'?: number; + 'aria-colindex'?: number; + 'aria-colindextext'?: string; + 'aria-colspan'?: number; + 'aria-controls'?: string; + 'aria-current'?: string; + 'aria-describedby'?: string; + 'aria-description'?: string; + 'aria-details'?: string; + 'aria-disabled'?: string; + 'aria-dropeffect'?: string; + 'aria-errormessage'?: string; + 'aria-expanded'?: string; + 'aria-flowto'?: string; + 'aria-grabbed'?: string; + 'aria-haspopup'?: string; + 'aria-hidden'?: string; + 'aria-invalid'?: string; + 'aria-keyshortcuts'?: string; + 'aria-label'?: string; + 'aria-labelledby'?: string; + 'aria-level'?: number; + 'aria-live'?: string; + 'aria-modal'?: string; + 'aria-multiline'?: string; + 'aria-multiselectable'?: string; + 'aria-orientation'?: string; + 'aria-owns'?: string; + 'aria-placeholder'?: string; + 'aria-posinset'?: number; + 'aria-pressed'?: string; + 'aria-readonly'?: string; + 'aria-relevant'?: string; + 'aria-required'?: string; + 'aria-roledescription'?: string; + 'aria-rowcount'?: number; + 'aria-rowindex'?: number; + 'aria-rowindextext'?: string; + 'aria-rowspan'?: number; + 'aria-selected'?: string; + 'aria-setsize'?: number; + 'aria-sort'?: string; + 'aria-valuemax'?: number; + 'aria-valuemin'?: number; + 'aria-valuenow'?: number; + 'aria-valuetext'?: string; + dangerouslySetInnerHTML?: Record; + onCopy?: (...args: unknown[]) => unknown; + onCopyCapture?: (...args: unknown[]) => unknown; + onCut?: (...args: unknown[]) => unknown; + onCutCapture?: (...args: unknown[]) => unknown; + onPaste?: (...args: unknown[]) => unknown; + onPasteCapture?: (...args: unknown[]) => unknown; + onCompositionEnd?: (...args: unknown[]) => unknown; + onCompositionEndCapture?: (...args: unknown[]) => unknown; + onCompositionStart?: (...args: unknown[]) => unknown; + onCompositionStartCapture?: (...args: unknown[]) => unknown; + onCompositionUpdate?: (...args: unknown[]) => unknown; + onCompositionUpdateCapture?: (...args: unknown[]) => unknown; + onFocus?: (...args: unknown[]) => unknown; + onFocusCapture?: (...args: unknown[]) => unknown; + onBlur?: (...args: unknown[]) => unknown; + onBlurCapture?: (...args: unknown[]) => unknown; + onChange?: (...args: unknown[]) => unknown; + onChangeCapture?: (...args: unknown[]) => unknown; + onBeforeInput?: (...args: unknown[]) => unknown; + onBeforeInputCapture?: (...args: unknown[]) => unknown; + onInput?: (...args: unknown[]) => unknown; + onInputCapture?: (...args: unknown[]) => unknown; + onReset?: (...args: unknown[]) => unknown; + onResetCapture?: (...args: unknown[]) => unknown; + onSubmit?: (...args: unknown[]) => unknown; + onSubmitCapture?: (...args: unknown[]) => unknown; + onInvalid?: (...args: unknown[]) => unknown; + onInvalidCapture?: (...args: unknown[]) => unknown; + onLoad?: (...args: unknown[]) => unknown; + onLoadCapture?: (...args: unknown[]) => unknown; + onError?: (...args: unknown[]) => unknown; + onErrorCapture?: (...args: unknown[]) => unknown; + onKeyDown?: (...args: unknown[]) => unknown; + onKeyDownCapture?: (...args: unknown[]) => unknown; + onKeyPress?: (...args: unknown[]) => unknown; + onKeyPressCapture?: (...args: unknown[]) => unknown; + onKeyUp?: (...args: unknown[]) => unknown; + onKeyUpCapture?: (...args: unknown[]) => unknown; + onAbort?: (...args: unknown[]) => unknown; + onAbortCapture?: (...args: unknown[]) => unknown; + onCanPlay?: (...args: unknown[]) => unknown; + onCanPlayCapture?: (...args: unknown[]) => unknown; + onCanPlayThrough?: (...args: unknown[]) => unknown; + onCanPlayThroughCapture?: (...args: unknown[]) => unknown; + onDurationChange?: (...args: unknown[]) => unknown; + onDurationChangeCapture?: (...args: unknown[]) => unknown; + onEmptied?: (...args: unknown[]) => unknown; + onEmptiedCapture?: (...args: unknown[]) => unknown; + onEncrypted?: (...args: unknown[]) => unknown; + onEncryptedCapture?: (...args: unknown[]) => unknown; + onEnded?: (...args: unknown[]) => unknown; + onEndedCapture?: (...args: unknown[]) => unknown; + onLoadedData?: (...args: unknown[]) => unknown; + onLoadedDataCapture?: (...args: unknown[]) => unknown; + onLoadedMetadata?: (...args: unknown[]) => unknown; + onLoadedMetadataCapture?: (...args: unknown[]) => unknown; + onLoadStart?: (...args: unknown[]) => unknown; + onLoadStartCapture?: (...args: unknown[]) => unknown; + onPause?: (...args: unknown[]) => unknown; + onPauseCapture?: (...args: unknown[]) => unknown; + onPlay?: (...args: unknown[]) => unknown; + onPlayCapture?: (...args: unknown[]) => unknown; + onPlaying?: (...args: unknown[]) => unknown; + onPlayingCapture?: (...args: unknown[]) => unknown; + onProgress?: (...args: unknown[]) => unknown; + onProgressCapture?: (...args: unknown[]) => unknown; + onRateChange?: (...args: unknown[]) => unknown; + onRateChangeCapture?: (...args: unknown[]) => unknown; + onResize?: (...args: unknown[]) => unknown; + onResizeCapture?: (...args: unknown[]) => unknown; + onSeeked?: (...args: unknown[]) => unknown; + onSeekedCapture?: (...args: unknown[]) => unknown; + onSeeking?: (...args: unknown[]) => unknown; + onSeekingCapture?: (...args: unknown[]) => unknown; + onStalled?: (...args: unknown[]) => unknown; + onStalledCapture?: (...args: unknown[]) => unknown; + onSuspend?: (...args: unknown[]) => unknown; + onSuspendCapture?: (...args: unknown[]) => unknown; + onTimeUpdate?: (...args: unknown[]) => unknown; + onTimeUpdateCapture?: (...args: unknown[]) => unknown; + onVolumeChange?: (...args: unknown[]) => unknown; + onVolumeChangeCapture?: (...args: unknown[]) => unknown; + onWaiting?: (...args: unknown[]) => unknown; + onWaitingCapture?: (...args: unknown[]) => unknown; + onAuxClick?: (...args: unknown[]) => unknown; + onAuxClickCapture?: (...args: unknown[]) => unknown; + onClick?: (...args: unknown[]) => unknown; + onClickCapture?: (...args: unknown[]) => unknown; + onContextMenu?: (...args: unknown[]) => unknown; + onContextMenuCapture?: (...args: unknown[]) => unknown; + onDoubleClick?: (...args: unknown[]) => unknown; + onDoubleClickCapture?: (...args: unknown[]) => unknown; + onDrag?: (...args: unknown[]) => unknown; + onDragCapture?: (...args: unknown[]) => unknown; + onDragEnd?: (...args: unknown[]) => unknown; + onDragEndCapture?: (...args: unknown[]) => unknown; + onDragEnter?: (...args: unknown[]) => unknown; + onDragEnterCapture?: (...args: unknown[]) => unknown; + onDragExit?: (...args: unknown[]) => unknown; + onDragExitCapture?: (...args: unknown[]) => unknown; + onDragLeave?: (...args: unknown[]) => unknown; + onDragLeaveCapture?: (...args: unknown[]) => unknown; + onDragOver?: (...args: unknown[]) => unknown; + onDragOverCapture?: (...args: unknown[]) => unknown; + onDragStart?: (...args: unknown[]) => unknown; + onDragStartCapture?: (...args: unknown[]) => unknown; + onDrop?: (...args: unknown[]) => unknown; + onDropCapture?: (...args: unknown[]) => unknown; + onMouseDown?: (...args: unknown[]) => unknown; + onMouseDownCapture?: (...args: unknown[]) => unknown; + onMouseEnter?: (...args: unknown[]) => unknown; + onMouseLeave?: (...args: unknown[]) => unknown; + onMouseMove?: (...args: unknown[]) => unknown; + onMouseMoveCapture?: (...args: unknown[]) => unknown; + onMouseOut?: (...args: unknown[]) => unknown; + onMouseOutCapture?: (...args: unknown[]) => unknown; + onMouseOver?: (...args: unknown[]) => unknown; + onMouseOverCapture?: (...args: unknown[]) => unknown; + onMouseUp?: (...args: unknown[]) => unknown; + onMouseUpCapture?: (...args: unknown[]) => unknown; + onSelect?: (...args: unknown[]) => unknown; + onSelectCapture?: (...args: unknown[]) => unknown; + onTouchCancel?: (...args: unknown[]) => unknown; + onTouchCancelCapture?: (...args: unknown[]) => unknown; + onTouchEnd?: (...args: unknown[]) => unknown; + onTouchEndCapture?: (...args: unknown[]) => unknown; + onTouchMove?: (...args: unknown[]) => unknown; + onTouchMoveCapture?: (...args: unknown[]) => unknown; + onTouchStart?: (...args: unknown[]) => unknown; + onTouchStartCapture?: (...args: unknown[]) => unknown; + onPointerDown?: (...args: unknown[]) => unknown; + onPointerDownCapture?: (...args: unknown[]) => unknown; + onPointerMove?: (...args: unknown[]) => unknown; + onPointerMoveCapture?: (...args: unknown[]) => unknown; + onPointerUp?: (...args: unknown[]) => unknown; + onPointerUpCapture?: (...args: unknown[]) => unknown; + onPointerCancel?: (...args: unknown[]) => unknown; + onPointerCancelCapture?: (...args: unknown[]) => unknown; + onPointerEnter?: (...args: unknown[]) => unknown; + onPointerLeave?: (...args: unknown[]) => unknown; + onPointerOver?: (...args: unknown[]) => unknown; + onPointerOverCapture?: (...args: unknown[]) => unknown; + onPointerOut?: (...args: unknown[]) => unknown; + onPointerOutCapture?: (...args: unknown[]) => unknown; + onGotPointerCapture?: (...args: unknown[]) => unknown; + onGotPointerCaptureCapture?: (...args: unknown[]) => unknown; + onLostPointerCapture?: (...args: unknown[]) => unknown; + onLostPointerCaptureCapture?: (...args: unknown[]) => unknown; + onScroll?: (...args: unknown[]) => unknown; + onScrollCapture?: (...args: unknown[]) => unknown; + onWheel?: (...args: unknown[]) => unknown; + onWheelCapture?: (...args: unknown[]) => unknown; + onAnimationStart?: (...args: unknown[]) => unknown; + onAnimationStartCapture?: (...args: unknown[]) => unknown; + onAnimationEnd?: (...args: unknown[]) => unknown; + onAnimationEndCapture?: (...args: unknown[]) => unknown; + onAnimationIteration?: (...args: unknown[]) => unknown; + onAnimationIterationCapture?: (...args: unknown[]) => unknown; + onTransitionEnd?: (...args: unknown[]) => unknown; + onTransitionEndCapture?: (...args: unknown[]) => unknown; +}; + +export const TwentyUiBannerElement = createRemoteElement< + TwentyUiBannerProperties, + Record, + { children: true; 'data-tooltip-wrapper': true }, + Record +>({ + slots: ['children', 'data-tooltip-wrapper'], + properties: { + variant: { type: String }, + className: { type: String }, + defaultChecked: { type: Boolean }, + suppressContentEditableWarning: { type: Boolean }, + suppressHydrationWarning: { type: Boolean }, + accessKey: { type: String }, + autoFocus: { type: Boolean }, + contentEditable: { type: String }, + contextMenu: { type: String }, + dir: { type: String }, + draggable: { type: String }, + hidden: { type: Boolean }, + id: { type: String }, + lang: { type: String }, + nonce: { type: String }, + slot: { type: String }, + spellCheck: { type: String }, + style: { type: Object }, + tabIndex: { type: Number }, + title: { type: String }, + translate: { type: String }, + radioGroup: { type: String }, + about: { type: String }, + content: { type: String }, + datatype: { type: String }, + prefix: { type: String }, + property: { type: String }, + rel: { type: String }, + resource: { type: String }, + rev: { type: String }, + typeof: { type: String }, + vocab: { type: String }, + autoCapitalize: { type: String }, + autoCorrect: { type: String }, + autoSave: { type: String }, + color: { type: String }, + itemProp: { type: String }, + itemScope: { type: Boolean }, + itemType: { type: String }, + itemID: { type: String }, + itemRef: { type: String }, + results: { type: Number }, + security: { type: String }, + unselectable: { type: String }, + inputMode: { type: String }, + is: { type: String }, + 'data-tooltip-id': { type: String }, + 'data-tooltip-place': { type: String }, + 'data-tooltip-content': { type: String }, + 'data-tooltip-html': { type: String }, + 'data-tooltip-variant': { type: String }, + 'data-tooltip-offset': { type: Number }, + 'data-tooltip-events': { type: Array }, + 'data-tooltip-position-strategy': { type: String }, + 'data-tooltip-delay-show': { type: Number }, + 'data-tooltip-delay-hide': { type: Number }, + 'data-tooltip-float': { type: Boolean }, + 'data-tooltip-hidden': { type: Boolean }, + 'data-tooltip-class-name': { type: String }, + 'aria-activedescendant': { type: String }, + 'aria-atomic': { type: String }, + 'aria-autocomplete': { type: String }, + 'aria-braillelabel': { type: String }, + 'aria-brailleroledescription': { type: String }, + 'aria-busy': { type: String }, + 'aria-checked': { type: String }, + 'aria-colcount': { type: Number }, + 'aria-colindex': { type: Number }, + 'aria-colindextext': { type: String }, + 'aria-colspan': { type: Number }, + 'aria-controls': { type: String }, + 'aria-current': { type: String }, + 'aria-describedby': { type: String }, + 'aria-description': { type: String }, + 'aria-details': { type: String }, + 'aria-disabled': { type: String }, + 'aria-dropeffect': { type: String }, + 'aria-errormessage': { type: String }, + 'aria-expanded': { type: String }, + 'aria-flowto': { type: String }, + 'aria-grabbed': { type: String }, + 'aria-haspopup': { type: String }, + 'aria-hidden': { type: String }, + 'aria-invalid': { type: String }, + 'aria-keyshortcuts': { type: String }, + 'aria-label': { type: String }, + 'aria-labelledby': { type: String }, + 'aria-level': { type: Number }, + 'aria-live': { type: String }, + 'aria-modal': { type: String }, + 'aria-multiline': { type: String }, + 'aria-multiselectable': { type: String }, + 'aria-orientation': { type: String }, + 'aria-owns': { type: String }, + 'aria-placeholder': { type: String }, + 'aria-posinset': { type: Number }, + 'aria-pressed': { type: String }, + 'aria-readonly': { type: String }, + 'aria-relevant': { type: String }, + 'aria-required': { type: String }, + 'aria-roledescription': { type: String }, + 'aria-rowcount': { type: Number }, + 'aria-rowindex': { type: Number }, + 'aria-rowindextext': { type: String }, + 'aria-rowspan': { type: Number }, + 'aria-selected': { type: String }, + 'aria-setsize': { type: Number }, + 'aria-sort': { type: String }, + 'aria-valuemax': { type: Number }, + 'aria-valuemin': { type: Number }, + 'aria-valuenow': { type: Number }, + 'aria-valuetext': { type: String }, + dangerouslySetInnerHTML: { type: Object }, + onCopy: { type: Function }, + onCopyCapture: { type: Function }, + onCut: { type: Function }, + onCutCapture: { type: Function }, + onPaste: { type: Function }, + onPasteCapture: { type: Function }, + onCompositionEnd: { type: Function }, + onCompositionEndCapture: { type: Function }, + onCompositionStart: { type: Function }, + onCompositionStartCapture: { type: Function }, + onCompositionUpdate: { type: Function }, + onCompositionUpdateCapture: { type: Function }, + onFocus: { type: Function }, + onFocusCapture: { type: Function }, + onBlur: { type: Function }, + onBlurCapture: { type: Function }, + onChange: { type: Function }, + onChangeCapture: { type: Function }, + onBeforeInput: { type: Function }, + onBeforeInputCapture: { type: Function }, + onInput: { type: Function }, + onInputCapture: { type: Function }, + onReset: { type: Function }, + onResetCapture: { type: Function }, + onSubmit: { type: Function }, + onSubmitCapture: { type: Function }, + onInvalid: { type: Function }, + onInvalidCapture: { type: Function }, + onLoad: { type: Function }, + onLoadCapture: { type: Function }, + onError: { type: Function }, + onErrorCapture: { type: Function }, + onKeyDown: { type: Function }, + onKeyDownCapture: { type: Function }, + onKeyPress: { type: Function }, + onKeyPressCapture: { type: Function }, + onKeyUp: { type: Function }, + onKeyUpCapture: { type: Function }, + onAbort: { type: Function }, + onAbortCapture: { type: Function }, + onCanPlay: { type: Function }, + onCanPlayCapture: { type: Function }, + onCanPlayThrough: { type: Function }, + onCanPlayThroughCapture: { type: Function }, + onDurationChange: { type: Function }, + onDurationChangeCapture: { type: Function }, + onEmptied: { type: Function }, + onEmptiedCapture: { type: Function }, + onEncrypted: { type: Function }, + onEncryptedCapture: { type: Function }, + onEnded: { type: Function }, + onEndedCapture: { type: Function }, + onLoadedData: { type: Function }, + onLoadedDataCapture: { type: Function }, + onLoadedMetadata: { type: Function }, + onLoadedMetadataCapture: { type: Function }, + onLoadStart: { type: Function }, + onLoadStartCapture: { type: Function }, + onPause: { type: Function }, + onPauseCapture: { type: Function }, + onPlay: { type: Function }, + onPlayCapture: { type: Function }, + onPlaying: { type: Function }, + onPlayingCapture: { type: Function }, + onProgress: { type: Function }, + onProgressCapture: { type: Function }, + onRateChange: { type: Function }, + onRateChangeCapture: { type: Function }, + onResize: { type: Function }, + onResizeCapture: { type: Function }, + onSeeked: { type: Function }, + onSeekedCapture: { type: Function }, + onSeeking: { type: Function }, + onSeekingCapture: { type: Function }, + onStalled: { type: Function }, + onStalledCapture: { type: Function }, + onSuspend: { type: Function }, + onSuspendCapture: { type: Function }, + onTimeUpdate: { type: Function }, + onTimeUpdateCapture: { type: Function }, + onVolumeChange: { type: Function }, + onVolumeChangeCapture: { type: Function }, + onWaiting: { type: Function }, + onWaitingCapture: { type: Function }, + onAuxClick: { type: Function }, + onAuxClickCapture: { type: Function }, + onClick: { type: Function }, + onClickCapture: { type: Function }, + onContextMenu: { type: Function }, + onContextMenuCapture: { type: Function }, + onDoubleClick: { type: Function }, + onDoubleClickCapture: { type: Function }, + onDrag: { type: Function }, + onDragCapture: { type: Function }, + onDragEnd: { type: Function }, + onDragEndCapture: { type: Function }, + onDragEnter: { type: Function }, + onDragEnterCapture: { type: Function }, + onDragExit: { type: Function }, + onDragExitCapture: { type: Function }, + onDragLeave: { type: Function }, + onDragLeaveCapture: { type: Function }, + onDragOver: { type: Function }, + onDragOverCapture: { type: Function }, + onDragStart: { type: Function }, + onDragStartCapture: { type: Function }, + onDrop: { type: Function }, + onDropCapture: { type: Function }, + onMouseDown: { type: Function }, + onMouseDownCapture: { type: Function }, + onMouseEnter: { type: Function }, + onMouseLeave: { type: Function }, + onMouseMove: { type: Function }, + onMouseMoveCapture: { type: Function }, + onMouseOut: { type: Function }, + onMouseOutCapture: { type: Function }, + onMouseOver: { type: Function }, + onMouseOverCapture: { type: Function }, + onMouseUp: { type: Function }, + onMouseUpCapture: { type: Function }, + onSelect: { type: Function }, + onSelectCapture: { type: Function }, + onTouchCancel: { type: Function }, + onTouchCancelCapture: { type: Function }, + onTouchEnd: { type: Function }, + onTouchEndCapture: { type: Function }, + onTouchMove: { type: Function }, + onTouchMoveCapture: { type: Function }, + onTouchStart: { type: Function }, + onTouchStartCapture: { type: Function }, + onPointerDown: { type: Function }, + onPointerDownCapture: { type: Function }, + onPointerMove: { type: Function }, + onPointerMoveCapture: { type: Function }, + onPointerUp: { type: Function }, + onPointerUpCapture: { type: Function }, + onPointerCancel: { type: Function }, + onPointerCancelCapture: { type: Function }, + onPointerEnter: { type: Function }, + onPointerLeave: { type: Function }, + onPointerOver: { type: Function }, + onPointerOverCapture: { type: Function }, + onPointerOut: { type: Function }, + onPointerOutCapture: { type: Function }, + onGotPointerCapture: { type: Function }, + onGotPointerCaptureCapture: { type: Function }, + onLostPointerCapture: { type: Function }, + onLostPointerCaptureCapture: { type: Function }, + onScroll: { type: Function }, + onScrollCapture: { type: Function }, + onWheel: { type: Function }, + onWheelCapture: { type: Function }, + onAnimationStart: { type: Function }, + onAnimationStartCapture: { type: Function }, + onAnimationEnd: { type: Function }, + onAnimationEndCapture: { type: Function }, + onAnimationIteration: { type: Function }, + onAnimationIterationCapture: { type: Function }, + onTransitionEnd: { type: Function }, + onTransitionEndCapture: { type: Function }, + }, +}); + +export type TwentyUiSidePanelInformationBannerProperties = { + message: string; + className?: string; + variant?: string; + tooltipMessage?: string; +}; + +export const TwentyUiSidePanelInformationBannerElement = createRemoteElement< + TwentyUiSidePanelInformationBannerProperties, + Record, + Record, + Record +>({ + properties: { + message: { type: String }, + className: { type: String }, + variant: { type: String }, + tooltipMessage: { type: String }, + }, +}); + +export type TwentyUiCalloutProperties = { + variant: string; + title: string; + description: string; + learnMoreText: string; + learnMoreUrl: string; + onClose: (...args: unknown[]) => unknown; +}; + +export const TwentyUiCalloutElement = createRemoteElement< + TwentyUiCalloutProperties, + Record, + Record, + Record +>({ + properties: { + variant: { type: String }, + title: { type: String }, + description: { type: String }, + learnMoreText: { type: String }, + learnMoreUrl: { type: String }, + onClose: { type: Function }, + }, +}); + +export type TwentyUiAnimatedCheckmarkProperties = { + string?: string; + clipPath?: string; + filter?: string; + mask?: string; + path?: string; + type?: string; + className?: string; + onClick?: (...args: unknown[]) => unknown; + to?: string; + target?: string; + rotate?: string; + scale?: string; + color?: string; + cursor?: string; + direction?: string; + display?: string; + fontFamily?: string; + fontSize?: string; + fontSizeAdjust?: string; + fontStretch?: string; + fontStyle?: string; + fontVariant?: string; + fontWeight?: string; + height?: string; + imageRendering?: string; + letterSpacing?: string; + opacity?: string; + order?: string; + paintOrder?: string; + pointerEvents?: string; + textRendering?: string; + transform?: string; + unicodeBidi?: string; + visibility?: string; + width?: string; + wordSpacing?: string; + writingMode?: string; + offset?: string; + overflow?: string; + textDecoration?: string; + azimuth?: string; + clip?: string; + alignmentBaseline?: string; + baselineShift?: string; + clipRule?: string; + colorInterpolation?: string; + colorRendering?: string; + dominantBaseline?: string; + fill?: string; + fillOpacity?: string; + fillRule?: string; + floodColor?: string; + floodOpacity?: string; + glyphOrientationVertical?: string; + lightingColor?: string; + markerEnd?: string; + markerMid?: string; + markerStart?: string; + shapeRendering?: string; + stopColor?: string; + stopOpacity?: string; + stroke?: string; + strokeDasharray?: string; + strokeDashoffset?: string; + strokeLinecap?: string; + strokeLinejoin?: string; + strokeMiterlimit?: string; + strokeOpacity?: string; + strokeWidth?: string; + textAnchor?: string; + vectorEffect?: string; + alphabetic?: string; + hanging?: string; + ideographic?: string; + mathematical?: string; + end?: string; + 'aria-label'?: string; + name?: string; + suppressHydrationWarning?: boolean; + id?: string; + lang?: string; + tabIndex?: number; + 'aria-activedescendant'?: string; + 'aria-atomic'?: string; + 'aria-autocomplete'?: string; + 'aria-braillelabel'?: string; + 'aria-brailleroledescription'?: string; + 'aria-busy'?: string; + 'aria-checked'?: string; + 'aria-colcount'?: number; + 'aria-colindex'?: number; + 'aria-colindextext'?: string; + 'aria-colspan'?: number; + 'aria-controls'?: string; + 'aria-current'?: string; + 'aria-describedby'?: string; + 'aria-description'?: string; + 'aria-details'?: string; + 'aria-disabled'?: string; + 'aria-dropeffect'?: string; + 'aria-errormessage'?: string; + 'aria-expanded'?: string; + 'aria-flowto'?: string; + 'aria-grabbed'?: string; + 'aria-haspopup'?: string; + 'aria-hidden'?: string; + 'aria-invalid'?: string; + 'aria-keyshortcuts'?: string; + 'aria-labelledby'?: string; + 'aria-level'?: number; + 'aria-live'?: string; + 'aria-modal'?: string; + 'aria-multiline'?: string; + 'aria-multiselectable'?: string; + 'aria-orientation'?: string; + 'aria-owns'?: string; + 'aria-placeholder'?: string; + 'aria-posinset'?: number; + 'aria-pressed'?: string; + 'aria-readonly'?: string; + 'aria-relevant'?: string; + 'aria-required'?: string; + 'aria-roledescription'?: string; + 'aria-rowcount'?: number; + 'aria-rowindex'?: number; + 'aria-rowindextext'?: string; + 'aria-rowspan'?: number; + 'aria-selected'?: string; + 'aria-setsize'?: number; + 'aria-sort'?: string; + 'aria-valuemax'?: number; + 'aria-valuemin'?: number; + 'aria-valuenow'?: number; + 'aria-valuetext'?: string; + dangerouslySetInnerHTML?: Record; + onCopy?: (...args: unknown[]) => unknown; + onCopyCapture?: (...args: unknown[]) => unknown; + onCut?: (...args: unknown[]) => unknown; + onCutCapture?: (...args: unknown[]) => unknown; + onPaste?: (...args: unknown[]) => unknown; + onPasteCapture?: (...args: unknown[]) => unknown; + onCompositionEnd?: (...args: unknown[]) => unknown; + onCompositionEndCapture?: (...args: unknown[]) => unknown; + onCompositionStart?: (...args: unknown[]) => unknown; + onCompositionStartCapture?: (...args: unknown[]) => unknown; + onCompositionUpdate?: (...args: unknown[]) => unknown; + onCompositionUpdateCapture?: (...args: unknown[]) => unknown; + onFocus?: (...args: unknown[]) => unknown; + onFocusCapture?: (...args: unknown[]) => unknown; + onBlur?: (...args: unknown[]) => unknown; + onBlurCapture?: (...args: unknown[]) => unknown; + onChange?: (...args: unknown[]) => unknown; + onChangeCapture?: (...args: unknown[]) => unknown; + onBeforeInput?: (...args: unknown[]) => unknown; + onBeforeInputCapture?: (...args: unknown[]) => unknown; + onInput?: (...args: unknown[]) => unknown; + onInputCapture?: (...args: unknown[]) => unknown; + onReset?: (...args: unknown[]) => unknown; + onResetCapture?: (...args: unknown[]) => unknown; + onSubmit?: (...args: unknown[]) => unknown; + onSubmitCapture?: (...args: unknown[]) => unknown; + onInvalid?: (...args: unknown[]) => unknown; + onInvalidCapture?: (...args: unknown[]) => unknown; + onLoad?: (...args: unknown[]) => unknown; + onLoadCapture?: (...args: unknown[]) => unknown; + onError?: (...args: unknown[]) => unknown; + onErrorCapture?: (...args: unknown[]) => unknown; + onKeyDown?: (...args: unknown[]) => unknown; + onKeyDownCapture?: (...args: unknown[]) => unknown; + onKeyPress?: (...args: unknown[]) => unknown; + onKeyPressCapture?: (...args: unknown[]) => unknown; + onKeyUp?: (...args: unknown[]) => unknown; + onKeyUpCapture?: (...args: unknown[]) => unknown; + onAbort?: (...args: unknown[]) => unknown; + onAbortCapture?: (...args: unknown[]) => unknown; + onCanPlay?: (...args: unknown[]) => unknown; + onCanPlayCapture?: (...args: unknown[]) => unknown; + onCanPlayThrough?: (...args: unknown[]) => unknown; + onCanPlayThroughCapture?: (...args: unknown[]) => unknown; + onDurationChange?: (...args: unknown[]) => unknown; + onDurationChangeCapture?: (...args: unknown[]) => unknown; + onEmptied?: (...args: unknown[]) => unknown; + onEmptiedCapture?: (...args: unknown[]) => unknown; + onEncrypted?: (...args: unknown[]) => unknown; + onEncryptedCapture?: (...args: unknown[]) => unknown; + onEnded?: (...args: unknown[]) => unknown; + onEndedCapture?: (...args: unknown[]) => unknown; + onLoadedData?: (...args: unknown[]) => unknown; + onLoadedDataCapture?: (...args: unknown[]) => unknown; + onLoadedMetadata?: (...args: unknown[]) => unknown; + onLoadedMetadataCapture?: (...args: unknown[]) => unknown; + onLoadStart?: (...args: unknown[]) => unknown; + onLoadStartCapture?: (...args: unknown[]) => unknown; + onPause?: (...args: unknown[]) => unknown; + onPauseCapture?: (...args: unknown[]) => unknown; + onPlay?: (...args: unknown[]) => unknown; + onPlayCapture?: (...args: unknown[]) => unknown; + onPlaying?: (...args: unknown[]) => unknown; + onPlayingCapture?: (...args: unknown[]) => unknown; + onProgress?: (...args: unknown[]) => unknown; + onProgressCapture?: (...args: unknown[]) => unknown; + onRateChange?: (...args: unknown[]) => unknown; + onRateChangeCapture?: (...args: unknown[]) => unknown; + onResize?: (...args: unknown[]) => unknown; + onResizeCapture?: (...args: unknown[]) => unknown; + onSeeked?: (...args: unknown[]) => unknown; + onSeekedCapture?: (...args: unknown[]) => unknown; + onSeeking?: (...args: unknown[]) => unknown; + onSeekingCapture?: (...args: unknown[]) => unknown; + onStalled?: (...args: unknown[]) => unknown; + onStalledCapture?: (...args: unknown[]) => unknown; + onSuspend?: (...args: unknown[]) => unknown; + onSuspendCapture?: (...args: unknown[]) => unknown; + onTimeUpdate?: (...args: unknown[]) => unknown; + onTimeUpdateCapture?: (...args: unknown[]) => unknown; + onVolumeChange?: (...args: unknown[]) => unknown; + onVolumeChangeCapture?: (...args: unknown[]) => unknown; + onWaiting?: (...args: unknown[]) => unknown; + onWaitingCapture?: (...args: unknown[]) => unknown; + onAuxClick?: (...args: unknown[]) => unknown; + onAuxClickCapture?: (...args: unknown[]) => unknown; + onClickCapture?: (...args: unknown[]) => unknown; + onContextMenu?: (...args: unknown[]) => unknown; + onContextMenuCapture?: (...args: unknown[]) => unknown; + onDoubleClick?: (...args: unknown[]) => unknown; + onDoubleClickCapture?: (...args: unknown[]) => unknown; + onDragCapture?: (...args: unknown[]) => unknown; + onDragEndCapture?: (...args: unknown[]) => unknown; + onDragEnter?: (...args: unknown[]) => unknown; + onDragEnterCapture?: (...args: unknown[]) => unknown; + onDragExit?: (...args: unknown[]) => unknown; + onDragExitCapture?: (...args: unknown[]) => unknown; + onDragLeave?: (...args: unknown[]) => unknown; + onDragLeaveCapture?: (...args: unknown[]) => unknown; + onDragOver?: (...args: unknown[]) => unknown; + onDragOverCapture?: (...args: unknown[]) => unknown; + onDragStartCapture?: (...args: unknown[]) => unknown; + onDrop?: (...args: unknown[]) => unknown; + onDropCapture?: (...args: unknown[]) => unknown; + onMouseDown?: (...args: unknown[]) => unknown; + onMouseDownCapture?: (...args: unknown[]) => unknown; + onMouseEnter?: (...args: unknown[]) => unknown; + onMouseLeave?: (...args: unknown[]) => unknown; + onMouseMove?: (...args: unknown[]) => unknown; + onMouseMoveCapture?: (...args: unknown[]) => unknown; + onMouseOut?: (...args: unknown[]) => unknown; + onMouseOutCapture?: (...args: unknown[]) => unknown; + onMouseOver?: (...args: unknown[]) => unknown; + onMouseOverCapture?: (...args: unknown[]) => unknown; + onMouseUp?: (...args: unknown[]) => unknown; + onMouseUpCapture?: (...args: unknown[]) => unknown; + onSelect?: (...args: unknown[]) => unknown; + onSelectCapture?: (...args: unknown[]) => unknown; + onTouchCancel?: (...args: unknown[]) => unknown; + onTouchCancelCapture?: (...args: unknown[]) => unknown; + onTouchEnd?: (...args: unknown[]) => unknown; + onTouchEndCapture?: (...args: unknown[]) => unknown; + onTouchMove?: (...args: unknown[]) => unknown; + onTouchMoveCapture?: (...args: unknown[]) => unknown; + onTouchStart?: (...args: unknown[]) => unknown; + onTouchStartCapture?: (...args: unknown[]) => unknown; + onPointerDown?: (...args: unknown[]) => unknown; + onPointerDownCapture?: (...args: unknown[]) => unknown; + onPointerMove?: (...args: unknown[]) => unknown; + onPointerMoveCapture?: (...args: unknown[]) => unknown; + onPointerUp?: (...args: unknown[]) => unknown; + onPointerUpCapture?: (...args: unknown[]) => unknown; + onPointerCancel?: (...args: unknown[]) => unknown; + onPointerCancelCapture?: (...args: unknown[]) => unknown; + onPointerEnter?: (...args: unknown[]) => unknown; + onPointerLeave?: (...args: unknown[]) => unknown; + onPointerOver?: (...args: unknown[]) => unknown; + onPointerOverCapture?: (...args: unknown[]) => unknown; + onPointerOut?: (...args: unknown[]) => unknown; + onPointerOutCapture?: (...args: unknown[]) => unknown; + onGotPointerCapture?: (...args: unknown[]) => unknown; + onGotPointerCaptureCapture?: (...args: unknown[]) => unknown; + onLostPointerCapture?: (...args: unknown[]) => unknown; + onLostPointerCaptureCapture?: (...args: unknown[]) => unknown; + onScroll?: (...args: unknown[]) => unknown; + onScrollCapture?: (...args: unknown[]) => unknown; + onWheel?: (...args: unknown[]) => unknown; + onWheelCapture?: (...args: unknown[]) => unknown; + onAnimationStartCapture?: (...args: unknown[]) => unknown; + onAnimationEnd?: (...args: unknown[]) => unknown; + onAnimationEndCapture?: (...args: unknown[]) => unknown; + onAnimationIteration?: (...args: unknown[]) => unknown; + onAnimationIterationCapture?: (...args: unknown[]) => unknown; + onTransitionEnd?: (...args: unknown[]) => unknown; + onTransitionEndCapture?: (...args: unknown[]) => unknown; + max?: string; + media?: string; + method?: string; + min?: string; + crossOrigin?: string; + accentHeight?: string; + accumulate?: string; + additive?: string; + allowReorder?: string; + amplitude?: string; + arabicForm?: string; + ascent?: string; + attributeName?: string; + attributeType?: string; + autoReverse?: string; + baseFrequency?: string; + baseProfile?: string; + bbox?: string; + begin?: string; + bias?: string; + by?: string; + calcMode?: string; + capHeight?: string; + clipPathUnits?: string; + colorInterpolationFilters?: string; + colorProfile?: string; + contentScriptType?: string; + contentStyleType?: string; + cx?: string; + cy?: string; + d?: string; + decelerate?: string; + descent?: string; + diffuseConstant?: string; + divisor?: string; + dur?: string; + dx?: string; + dy?: string; + edgeMode?: string; + elevation?: string; + enableBackground?: string; + exponent?: string; + externalResourcesRequired?: string; + filterRes?: string; + filterUnits?: string; + focusable?: string; + format?: string; + fr?: string; + from?: string; + fx?: string; + fy?: string; + g1?: string; + g2?: string; + glyphName?: string; + glyphOrientationHorizontal?: string; + glyphRef?: string; + gradientTransform?: string; + gradientUnits?: string; + horizAdvX?: string; + horizOriginX?: string; + href?: string; + in2?: string; + in?: string; + intercept?: string; + k1?: string; + k2?: string; + k3?: string; + k4?: string; + k?: string; + kernelMatrix?: string; + kernelUnitLength?: string; + kerning?: string; + keyPoints?: string; + keySplines?: string; + keyTimes?: string; + lengthAdjust?: string; + limitingConeAngle?: string; + local?: string; + markerHeight?: string; + markerUnits?: string; + markerWidth?: string; + maskContentUnits?: string; + maskUnits?: string; + mode?: string; + numOctaves?: string; + operator?: string; + orient?: string; + orientation?: string; + origin?: string; + overlinePosition?: string; + overlineThickness?: string; + panose1?: string; + pathLength?: string; + patternContentUnits?: string; + patternTransform?: string; + patternUnits?: string; + points?: string; + pointsAtX?: string; + pointsAtY?: string; + pointsAtZ?: string; + preserveAlpha?: string; + preserveAspectRatio?: string; + primitiveUnits?: string; + r?: string; + radius?: string; + refX?: string; + refY?: string; + renderingIntent?: string; + repeatCount?: string; + repeatDur?: string; + requiredExtensions?: string; + requiredFeatures?: string; + restart?: string; + result?: string; + rx?: string; + ry?: string; + seed?: string; + slope?: string; + spacing?: string; + specularConstant?: string; + specularExponent?: string; + speed?: string; + spreadMethod?: string; + startOffset?: string; + stdDeviation?: string; + stemh?: string; + stemv?: string; + stitchTiles?: string; + strikethroughPosition?: string; + strikethroughThickness?: string; + surfaceScale?: string; + systemLanguage?: string; + tableValues?: string; + targetX?: string; + targetY?: string; + textLength?: string; + u1?: string; + u2?: string; + underlinePosition?: string; + underlineThickness?: string; + unicode?: string; + unicodeRange?: string; + unitsPerEm?: string; + vAlphabetic?: string; + values?: string; + version?: string; + vertAdvY?: string; + vertOriginX?: string; + vertOriginY?: string; + vHanging?: string; + vIdeographic?: string; + viewBox?: string; + viewTarget?: string; + vMathematical?: string; + widths?: string; + x1?: string; + x2?: string; + x?: string; + xChannelSelector?: string; + xHeight?: string; + xlinkActuate?: string; + xlinkArcrole?: string; + xlinkHref?: string; + xlinkRole?: string; + xlinkShow?: string; + xlinkTitle?: string; + xlinkType?: string; + xmlBase?: string; + xmlLang?: string; + xmlns?: string; + xmlnsXlink?: string; + xmlSpace?: string; + y1?: string; + y2?: string; + y?: string; + yChannelSelector?: string; + z?: string; + zoomAndPan?: string; + transformTemplate?: (...args: unknown[]) => unknown; + 'data-framer-appear-id'?: string; + variants?: Record; + onBeforeLayoutMeasure?: (...args: unknown[]) => unknown; + onLayoutMeasure?: (...args: unknown[]) => unknown; + onUpdate?: (...args: unknown[]) => unknown; + onAnimationStart?: (...args: unknown[]) => unknown; + onAnimationComplete?: (...args: unknown[]) => unknown; + onPan?: (...args: unknown[]) => unknown; + onPanStart?: (...args: unknown[]) => unknown; + onPanSessionStart?: (...args: unknown[]) => unknown; + onPanEnd?: (...args: unknown[]) => unknown; + onTap?: (...args: unknown[]) => unknown; + onTapStart?: (...args: unknown[]) => unknown; + onTapCancel?: (...args: unknown[]) => unknown; + globalTapTarget?: boolean; + onHoverStart?: (...args: unknown[]) => unknown; + onHoverEnd?: (...args: unknown[]) => unknown; + onViewportEnter?: (...args: unknown[]) => unknown; + onViewportLeave?: (...args: unknown[]) => unknown; + viewport?: Record; + drag?: string; + dragDirectionLock?: boolean; + dragPropagation?: boolean; + dragMomentum?: boolean; + dragTransition?: Record; + dragControls?: Record; + dragSnapToOrigin?: boolean; + dragListener?: boolean; + onMeasureDragConstraints?: (...args: unknown[]) => unknown; + _dragX?: Record; + _dragY?: Record; + onDragStart?: (...args: unknown[]) => unknown; + onDragEnd?: (...args: unknown[]) => unknown; + onDrag?: (...args: unknown[]) => unknown; + onDirectionLock?: (...args: unknown[]) => unknown; + onDragTransitionEnd?: (...args: unknown[]) => unknown; + layout?: string; + layoutId?: string; + onLayoutAnimationStart?: (...args: unknown[]) => unknown; + onLayoutAnimationComplete?: (...args: unknown[]) => unknown; + layoutScroll?: boolean; + layoutRoot?: boolean; + 'data-framer-portal-id'?: string; + inherit?: boolean; + ignoreStrict?: boolean; + isAnimating?: boolean; + duration?: number; + size?: number; +}; + +export const TwentyUiAnimatedCheckmarkElement = createRemoteElement< + TwentyUiAnimatedCheckmarkProperties, + Record, + { children: true }, + Record +>({ + slots: ['children'], + properties: { + string: { type: String }, + clipPath: { type: String }, + filter: { type: String }, + mask: { type: String }, + path: { type: String }, + type: { type: String }, + className: { type: String }, + onClick: { type: Function }, + to: { type: String }, + target: { type: String }, + rotate: { type: String }, + scale: { type: String }, + color: { type: String }, + cursor: { type: String }, + direction: { type: String }, + display: { type: String }, + fontFamily: { type: String }, + fontSize: { type: String }, + fontSizeAdjust: { type: String }, + fontStretch: { type: String }, + fontStyle: { type: String }, + fontVariant: { type: String }, + fontWeight: { type: String }, + height: { type: String }, + imageRendering: { type: String }, + letterSpacing: { type: String }, + opacity: { type: String }, + order: { type: String }, + paintOrder: { type: String }, + pointerEvents: { type: String }, + textRendering: { type: String }, + transform: { type: String }, + unicodeBidi: { type: String }, + visibility: { type: String }, + width: { type: String }, + wordSpacing: { type: String }, + writingMode: { type: String }, + offset: { type: String }, + overflow: { type: String }, + textDecoration: { type: String }, + azimuth: { type: String }, + clip: { type: String }, + alignmentBaseline: { type: String }, + baselineShift: { type: String }, + clipRule: { type: String }, + colorInterpolation: { type: String }, + colorRendering: { type: String }, + dominantBaseline: { type: String }, + fill: { type: String }, + fillOpacity: { type: String }, + fillRule: { type: String }, + floodColor: { type: String }, + floodOpacity: { type: String }, + glyphOrientationVertical: { type: String }, + lightingColor: { type: String }, + markerEnd: { type: String }, + markerMid: { type: String }, + markerStart: { type: String }, + shapeRendering: { type: String }, + stopColor: { type: String }, + stopOpacity: { type: String }, + stroke: { type: String }, + strokeDasharray: { type: String }, + strokeDashoffset: { type: String }, + strokeLinecap: { type: String }, + strokeLinejoin: { type: String }, + strokeMiterlimit: { type: String }, + strokeOpacity: { type: String }, + strokeWidth: { type: String }, + textAnchor: { type: String }, + vectorEffect: { type: String }, + alphabetic: { type: String }, + hanging: { type: String }, + ideographic: { type: String }, + mathematical: { type: String }, + end: { type: String }, + 'aria-label': { type: String }, + name: { type: String }, + suppressHydrationWarning: { type: Boolean }, + id: { type: String }, + lang: { type: String }, + tabIndex: { type: Number }, + 'aria-activedescendant': { type: String }, + 'aria-atomic': { type: String }, + 'aria-autocomplete': { type: String }, + 'aria-braillelabel': { type: String }, + 'aria-brailleroledescription': { type: String }, + 'aria-busy': { type: String }, + 'aria-checked': { type: String }, + 'aria-colcount': { type: Number }, + 'aria-colindex': { type: Number }, + 'aria-colindextext': { type: String }, + 'aria-colspan': { type: Number }, + 'aria-controls': { type: String }, + 'aria-current': { type: String }, + 'aria-describedby': { type: String }, + 'aria-description': { type: String }, + 'aria-details': { type: String }, + 'aria-disabled': { type: String }, + 'aria-dropeffect': { type: String }, + 'aria-errormessage': { type: String }, + 'aria-expanded': { type: String }, + 'aria-flowto': { type: String }, + 'aria-grabbed': { type: String }, + 'aria-haspopup': { type: String }, + 'aria-hidden': { type: String }, + 'aria-invalid': { type: String }, + 'aria-keyshortcuts': { type: String }, + 'aria-labelledby': { type: String }, + 'aria-level': { type: Number }, + 'aria-live': { type: String }, + 'aria-modal': { type: String }, + 'aria-multiline': { type: String }, + 'aria-multiselectable': { type: String }, + 'aria-orientation': { type: String }, + 'aria-owns': { type: String }, + 'aria-placeholder': { type: String }, + 'aria-posinset': { type: Number }, + 'aria-pressed': { type: String }, + 'aria-readonly': { type: String }, + 'aria-relevant': { type: String }, + 'aria-required': { type: String }, + 'aria-roledescription': { type: String }, + 'aria-rowcount': { type: Number }, + 'aria-rowindex': { type: Number }, + 'aria-rowindextext': { type: String }, + 'aria-rowspan': { type: Number }, + 'aria-selected': { type: String }, + 'aria-setsize': { type: Number }, + 'aria-sort': { type: String }, + 'aria-valuemax': { type: Number }, + 'aria-valuemin': { type: Number }, + 'aria-valuenow': { type: Number }, + 'aria-valuetext': { type: String }, + dangerouslySetInnerHTML: { type: Object }, + onCopy: { type: Function }, + onCopyCapture: { type: Function }, + onCut: { type: Function }, + onCutCapture: { type: Function }, + onPaste: { type: Function }, + onPasteCapture: { type: Function }, + onCompositionEnd: { type: Function }, + onCompositionEndCapture: { type: Function }, + onCompositionStart: { type: Function }, + onCompositionStartCapture: { type: Function }, + onCompositionUpdate: { type: Function }, + onCompositionUpdateCapture: { type: Function }, + onFocus: { type: Function }, + onFocusCapture: { type: Function }, + onBlur: { type: Function }, + onBlurCapture: { type: Function }, + onChange: { type: Function }, + onChangeCapture: { type: Function }, + onBeforeInput: { type: Function }, + onBeforeInputCapture: { type: Function }, + onInput: { type: Function }, + onInputCapture: { type: Function }, + onReset: { type: Function }, + onResetCapture: { type: Function }, + onSubmit: { type: Function }, + onSubmitCapture: { type: Function }, + onInvalid: { type: Function }, + onInvalidCapture: { type: Function }, + onLoad: { type: Function }, + onLoadCapture: { type: Function }, + onError: { type: Function }, + onErrorCapture: { type: Function }, + onKeyDown: { type: Function }, + onKeyDownCapture: { type: Function }, + onKeyPress: { type: Function }, + onKeyPressCapture: { type: Function }, + onKeyUp: { type: Function }, + onKeyUpCapture: { type: Function }, + onAbort: { type: Function }, + onAbortCapture: { type: Function }, + onCanPlay: { type: Function }, + onCanPlayCapture: { type: Function }, + onCanPlayThrough: { type: Function }, + onCanPlayThroughCapture: { type: Function }, + onDurationChange: { type: Function }, + onDurationChangeCapture: { type: Function }, + onEmptied: { type: Function }, + onEmptiedCapture: { type: Function }, + onEncrypted: { type: Function }, + onEncryptedCapture: { type: Function }, + onEnded: { type: Function }, + onEndedCapture: { type: Function }, + onLoadedData: { type: Function }, + onLoadedDataCapture: { type: Function }, + onLoadedMetadata: { type: Function }, + onLoadedMetadataCapture: { type: Function }, + onLoadStart: { type: Function }, + onLoadStartCapture: { type: Function }, + onPause: { type: Function }, + onPauseCapture: { type: Function }, + onPlay: { type: Function }, + onPlayCapture: { type: Function }, + onPlaying: { type: Function }, + onPlayingCapture: { type: Function }, + onProgress: { type: Function }, + onProgressCapture: { type: Function }, + onRateChange: { type: Function }, + onRateChangeCapture: { type: Function }, + onResize: { type: Function }, + onResizeCapture: { type: Function }, + onSeeked: { type: Function }, + onSeekedCapture: { type: Function }, + onSeeking: { type: Function }, + onSeekingCapture: { type: Function }, + onStalled: { type: Function }, + onStalledCapture: { type: Function }, + onSuspend: { type: Function }, + onSuspendCapture: { type: Function }, + onTimeUpdate: { type: Function }, + onTimeUpdateCapture: { type: Function }, + onVolumeChange: { type: Function }, + onVolumeChangeCapture: { type: Function }, + onWaiting: { type: Function }, + onWaitingCapture: { type: Function }, + onAuxClick: { type: Function }, + onAuxClickCapture: { type: Function }, + onClickCapture: { type: Function }, + onContextMenu: { type: Function }, + onContextMenuCapture: { type: Function }, + onDoubleClick: { type: Function }, + onDoubleClickCapture: { type: Function }, + onDragCapture: { type: Function }, + onDragEndCapture: { type: Function }, + onDragEnter: { type: Function }, + onDragEnterCapture: { type: Function }, + onDragExit: { type: Function }, + onDragExitCapture: { type: Function }, + onDragLeave: { type: Function }, + onDragLeaveCapture: { type: Function }, + onDragOver: { type: Function }, + onDragOverCapture: { type: Function }, + onDragStartCapture: { type: Function }, + onDrop: { type: Function }, + onDropCapture: { type: Function }, + onMouseDown: { type: Function }, + onMouseDownCapture: { type: Function }, + onMouseEnter: { type: Function }, + onMouseLeave: { type: Function }, + onMouseMove: { type: Function }, + onMouseMoveCapture: { type: Function }, + onMouseOut: { type: Function }, + onMouseOutCapture: { type: Function }, + onMouseOver: { type: Function }, + onMouseOverCapture: { type: Function }, + onMouseUp: { type: Function }, + onMouseUpCapture: { type: Function }, + onSelect: { type: Function }, + onSelectCapture: { type: Function }, + onTouchCancel: { type: Function }, + onTouchCancelCapture: { type: Function }, + onTouchEnd: { type: Function }, + onTouchEndCapture: { type: Function }, + onTouchMove: { type: Function }, + onTouchMoveCapture: { type: Function }, + onTouchStart: { type: Function }, + onTouchStartCapture: { type: Function }, + onPointerDown: { type: Function }, + onPointerDownCapture: { type: Function }, + onPointerMove: { type: Function }, + onPointerMoveCapture: { type: Function }, + onPointerUp: { type: Function }, + onPointerUpCapture: { type: Function }, + onPointerCancel: { type: Function }, + onPointerCancelCapture: { type: Function }, + onPointerEnter: { type: Function }, + onPointerLeave: { type: Function }, + onPointerOver: { type: Function }, + onPointerOverCapture: { type: Function }, + onPointerOut: { type: Function }, + onPointerOutCapture: { type: Function }, + onGotPointerCapture: { type: Function }, + onGotPointerCaptureCapture: { type: Function }, + onLostPointerCapture: { type: Function }, + onLostPointerCaptureCapture: { type: Function }, + onScroll: { type: Function }, + onScrollCapture: { type: Function }, + onWheel: { type: Function }, + onWheelCapture: { type: Function }, + onAnimationStartCapture: { type: Function }, + onAnimationEnd: { type: Function }, + onAnimationEndCapture: { type: Function }, + onAnimationIteration: { type: Function }, + onAnimationIterationCapture: { type: Function }, + onTransitionEnd: { type: Function }, + onTransitionEndCapture: { type: Function }, + max: { type: String }, + media: { type: String }, + method: { type: String }, + min: { type: String }, + crossOrigin: { type: String }, + accentHeight: { type: String }, + accumulate: { type: String }, + additive: { type: String }, + allowReorder: { type: String }, + amplitude: { type: String }, + arabicForm: { type: String }, + ascent: { type: String }, + attributeName: { type: String }, + attributeType: { type: String }, + autoReverse: { type: String }, + baseFrequency: { type: String }, + baseProfile: { type: String }, + bbox: { type: String }, + begin: { type: String }, + bias: { type: String }, + by: { type: String }, + calcMode: { type: String }, + capHeight: { type: String }, + clipPathUnits: { type: String }, + colorInterpolationFilters: { type: String }, + colorProfile: { type: String }, + contentScriptType: { type: String }, + contentStyleType: { type: String }, + cx: { type: String }, + cy: { type: String }, + d: { type: String }, + decelerate: { type: String }, + descent: { type: String }, + diffuseConstant: { type: String }, + divisor: { type: String }, + dur: { type: String }, + dx: { type: String }, + dy: { type: String }, + edgeMode: { type: String }, + elevation: { type: String }, + enableBackground: { type: String }, + exponent: { type: String }, + externalResourcesRequired: { type: String }, + filterRes: { type: String }, + filterUnits: { type: String }, + focusable: { type: String }, + format: { type: String }, + fr: { type: String }, + from: { type: String }, + fx: { type: String }, + fy: { type: String }, + g1: { type: String }, + g2: { type: String }, + glyphName: { type: String }, + glyphOrientationHorizontal: { type: String }, + glyphRef: { type: String }, + gradientTransform: { type: String }, + gradientUnits: { type: String }, + horizAdvX: { type: String }, + horizOriginX: { type: String }, + href: { type: String }, + in2: { type: String }, + in: { type: String }, + intercept: { type: String }, + k1: { type: String }, + k2: { type: String }, + k3: { type: String }, + k4: { type: String }, + k: { type: String }, + kernelMatrix: { type: String }, + kernelUnitLength: { type: String }, + kerning: { type: String }, + keyPoints: { type: String }, + keySplines: { type: String }, + keyTimes: { type: String }, + lengthAdjust: { type: String }, + limitingConeAngle: { type: String }, + local: { type: String }, + markerHeight: { type: String }, + markerUnits: { type: String }, + markerWidth: { type: String }, + maskContentUnits: { type: String }, + maskUnits: { type: String }, + mode: { type: String }, + numOctaves: { type: String }, + operator: { type: String }, + orient: { type: String }, + orientation: { type: String }, + origin: { type: String }, + overlinePosition: { type: String }, + overlineThickness: { type: String }, + panose1: { type: String }, + pathLength: { type: String }, + patternContentUnits: { type: String }, + patternTransform: { type: String }, + patternUnits: { type: String }, + points: { type: String }, + pointsAtX: { type: String }, + pointsAtY: { type: String }, + pointsAtZ: { type: String }, + preserveAlpha: { type: String }, + preserveAspectRatio: { type: String }, + primitiveUnits: { type: String }, + r: { type: String }, + radius: { type: String }, + refX: { type: String }, + refY: { type: String }, + renderingIntent: { type: String }, + repeatCount: { type: String }, + repeatDur: { type: String }, + requiredExtensions: { type: String }, + requiredFeatures: { type: String }, + restart: { type: String }, + result: { type: String }, + rx: { type: String }, + ry: { type: String }, + seed: { type: String }, + slope: { type: String }, + spacing: { type: String }, + specularConstant: { type: String }, + specularExponent: { type: String }, + speed: { type: String }, + spreadMethod: { type: String }, + startOffset: { type: String }, + stdDeviation: { type: String }, + stemh: { type: String }, + stemv: { type: String }, + stitchTiles: { type: String }, + strikethroughPosition: { type: String }, + strikethroughThickness: { type: String }, + surfaceScale: { type: String }, + systemLanguage: { type: String }, + tableValues: { type: String }, + targetX: { type: String }, + targetY: { type: String }, + textLength: { type: String }, + u1: { type: String }, + u2: { type: String }, + underlinePosition: { type: String }, + underlineThickness: { type: String }, + unicode: { type: String }, + unicodeRange: { type: String }, + unitsPerEm: { type: String }, + vAlphabetic: { type: String }, + values: { type: String }, + version: { type: String }, + vertAdvY: { type: String }, + vertOriginX: { type: String }, + vertOriginY: { type: String }, + vHanging: { type: String }, + vIdeographic: { type: String }, + viewBox: { type: String }, + viewTarget: { type: String }, + vMathematical: { type: String }, + widths: { type: String }, + x1: { type: String }, + x2: { type: String }, + x: { type: String }, + xChannelSelector: { type: String }, + xHeight: { type: String }, + xlinkActuate: { type: String }, + xlinkArcrole: { type: String }, + xlinkHref: { type: String }, + xlinkRole: { type: String }, + xlinkShow: { type: String }, + xlinkTitle: { type: String }, + xlinkType: { type: String }, + xmlBase: { type: String }, + xmlLang: { type: String }, + xmlns: { type: String }, + xmlnsXlink: { type: String }, + xmlSpace: { type: String }, + y1: { type: String }, + y2: { type: String }, + y: { type: String }, + yChannelSelector: { type: String }, + z: { type: String }, + zoomAndPan: { type: String }, + transformTemplate: { type: Function }, + 'data-framer-appear-id': { type: String }, + variants: { type: Object }, + onBeforeLayoutMeasure: { type: Function }, + onLayoutMeasure: { type: Function }, + onUpdate: { type: Function }, + onAnimationStart: { type: Function }, + onAnimationComplete: { type: Function }, + onPan: { type: Function }, + onPanStart: { type: Function }, + onPanSessionStart: { type: Function }, + onPanEnd: { type: Function }, + onTap: { type: Function }, + onTapStart: { type: Function }, + onTapCancel: { type: Function }, + globalTapTarget: { type: Boolean }, + onHoverStart: { type: Function }, + onHoverEnd: { type: Function }, + onViewportEnter: { type: Function }, + onViewportLeave: { type: Function }, + viewport: { type: Object }, + drag: { type: String }, + dragDirectionLock: { type: Boolean }, + dragPropagation: { type: Boolean }, + dragMomentum: { type: Boolean }, + dragTransition: { type: Object }, + dragControls: { type: Object }, + dragSnapToOrigin: { type: Boolean }, + dragListener: { type: Boolean }, + onMeasureDragConstraints: { type: Function }, + _dragX: { type: Object }, + _dragY: { type: Object }, + onDragStart: { type: Function }, + onDragEnd: { type: Function }, + onDrag: { type: Function }, + onDirectionLock: { type: Function }, + onDragTransitionEnd: { type: Function }, + layout: { type: String }, + layoutId: { type: String }, + onLayoutAnimationStart: { type: Function }, + onLayoutAnimationComplete: { type: Function }, + layoutScroll: { type: Boolean }, + layoutRoot: { type: Boolean }, + 'data-framer-portal-id': { type: String }, + inherit: { type: Boolean }, + ignoreStrict: { type: Boolean }, + isAnimating: { type: Boolean }, + duration: { type: Number }, + size: { type: Number }, + }, +}); + +export type TwentyUiCheckmarkProperties = { + slot?: string; + style?: Record; + title?: string; + className?: string; + onClick?: (...args: unknown[]) => unknown; + color?: string; + content?: string; + translate?: string; + hidden?: boolean; + 'aria-label'?: string; + defaultChecked?: boolean; + suppressContentEditableWarning?: boolean; + suppressHydrationWarning?: boolean; + accessKey?: string; + autoFocus?: boolean; + contentEditable?: string; + contextMenu?: string; + dir?: string; + draggable?: string; + id?: string; + lang?: string; + nonce?: string; + spellCheck?: string; + tabIndex?: number; + radioGroup?: string; + about?: string; + datatype?: string; + prefix?: string; + property?: string; + rel?: string; + resource?: string; + rev?: string; + typeof?: string; + vocab?: string; + autoCapitalize?: string; + autoCorrect?: string; + autoSave?: string; + itemProp?: string; + itemScope?: boolean; + itemType?: string; + itemID?: string; + itemRef?: string; + results?: number; + security?: string; + unselectable?: string; + inputMode?: string; + is?: string; + 'data-tooltip-id'?: string; + 'data-tooltip-place'?: string; + 'data-tooltip-content'?: string; + 'data-tooltip-html'?: string; + 'data-tooltip-variant'?: string; + 'data-tooltip-offset'?: number; + 'data-tooltip-events'?: unknown[]; + 'data-tooltip-position-strategy'?: string; + 'data-tooltip-delay-show'?: number; + 'data-tooltip-delay-hide'?: number; + 'data-tooltip-float'?: boolean; + 'data-tooltip-hidden'?: boolean; + 'data-tooltip-class-name'?: string; + 'aria-activedescendant'?: string; + 'aria-atomic'?: string; + 'aria-autocomplete'?: string; + 'aria-braillelabel'?: string; + 'aria-brailleroledescription'?: string; + 'aria-busy'?: string; + 'aria-checked'?: string; + 'aria-colcount'?: number; + 'aria-colindex'?: number; + 'aria-colindextext'?: string; + 'aria-colspan'?: number; + 'aria-controls'?: string; + 'aria-current'?: string; + 'aria-describedby'?: string; + 'aria-description'?: string; + 'aria-details'?: string; + 'aria-disabled'?: string; + 'aria-dropeffect'?: string; + 'aria-errormessage'?: string; + 'aria-expanded'?: string; + 'aria-flowto'?: string; + 'aria-grabbed'?: string; + 'aria-haspopup'?: string; + 'aria-hidden'?: string; + 'aria-invalid'?: string; + 'aria-keyshortcuts'?: string; + 'aria-labelledby'?: string; + 'aria-level'?: number; + 'aria-live'?: string; + 'aria-modal'?: string; + 'aria-multiline'?: string; + 'aria-multiselectable'?: string; + 'aria-orientation'?: string; + 'aria-owns'?: string; + 'aria-placeholder'?: string; + 'aria-posinset'?: number; + 'aria-pressed'?: string; + 'aria-readonly'?: string; + 'aria-relevant'?: string; + 'aria-required'?: string; + 'aria-roledescription'?: string; + 'aria-rowcount'?: number; + 'aria-rowindex'?: number; + 'aria-rowindextext'?: string; + 'aria-rowspan'?: number; + 'aria-selected'?: string; + 'aria-setsize'?: number; + 'aria-sort'?: string; + 'aria-valuemax'?: number; + 'aria-valuemin'?: number; + 'aria-valuenow'?: number; + 'aria-valuetext'?: string; + dangerouslySetInnerHTML?: Record; + onCopy?: (...args: unknown[]) => unknown; + onCopyCapture?: (...args: unknown[]) => unknown; + onCut?: (...args: unknown[]) => unknown; + onCutCapture?: (...args: unknown[]) => unknown; + onPaste?: (...args: unknown[]) => unknown; + onPasteCapture?: (...args: unknown[]) => unknown; + onCompositionEnd?: (...args: unknown[]) => unknown; + onCompositionEndCapture?: (...args: unknown[]) => unknown; + onCompositionStart?: (...args: unknown[]) => unknown; + onCompositionStartCapture?: (...args: unknown[]) => unknown; + onCompositionUpdate?: (...args: unknown[]) => unknown; + onCompositionUpdateCapture?: (...args: unknown[]) => unknown; + onFocus?: (...args: unknown[]) => unknown; + onFocusCapture?: (...args: unknown[]) => unknown; + onBlur?: (...args: unknown[]) => unknown; + onBlurCapture?: (...args: unknown[]) => unknown; + onChange?: (...args: unknown[]) => unknown; + onChangeCapture?: (...args: unknown[]) => unknown; + onBeforeInput?: (...args: unknown[]) => unknown; + onBeforeInputCapture?: (...args: unknown[]) => unknown; + onInput?: (...args: unknown[]) => unknown; + onInputCapture?: (...args: unknown[]) => unknown; + onReset?: (...args: unknown[]) => unknown; + onResetCapture?: (...args: unknown[]) => unknown; + onSubmit?: (...args: unknown[]) => unknown; + onSubmitCapture?: (...args: unknown[]) => unknown; + onInvalid?: (...args: unknown[]) => unknown; + onInvalidCapture?: (...args: unknown[]) => unknown; + onLoad?: (...args: unknown[]) => unknown; + onLoadCapture?: (...args: unknown[]) => unknown; + onError?: (...args: unknown[]) => unknown; + onErrorCapture?: (...args: unknown[]) => unknown; + onKeyDown?: (...args: unknown[]) => unknown; + onKeyDownCapture?: (...args: unknown[]) => unknown; + onKeyPress?: (...args: unknown[]) => unknown; + onKeyPressCapture?: (...args: unknown[]) => unknown; + onKeyUp?: (...args: unknown[]) => unknown; + onKeyUpCapture?: (...args: unknown[]) => unknown; + onAbort?: (...args: unknown[]) => unknown; + onAbortCapture?: (...args: unknown[]) => unknown; + onCanPlay?: (...args: unknown[]) => unknown; + onCanPlayCapture?: (...args: unknown[]) => unknown; + onCanPlayThrough?: (...args: unknown[]) => unknown; + onCanPlayThroughCapture?: (...args: unknown[]) => unknown; + onDurationChange?: (...args: unknown[]) => unknown; + onDurationChangeCapture?: (...args: unknown[]) => unknown; + onEmptied?: (...args: unknown[]) => unknown; + onEmptiedCapture?: (...args: unknown[]) => unknown; + onEncrypted?: (...args: unknown[]) => unknown; + onEncryptedCapture?: (...args: unknown[]) => unknown; + onEnded?: (...args: unknown[]) => unknown; + onEndedCapture?: (...args: unknown[]) => unknown; + onLoadedData?: (...args: unknown[]) => unknown; + onLoadedDataCapture?: (...args: unknown[]) => unknown; + onLoadedMetadata?: (...args: unknown[]) => unknown; + onLoadedMetadataCapture?: (...args: unknown[]) => unknown; + onLoadStart?: (...args: unknown[]) => unknown; + onLoadStartCapture?: (...args: unknown[]) => unknown; + onPause?: (...args: unknown[]) => unknown; + onPauseCapture?: (...args: unknown[]) => unknown; + onPlay?: (...args: unknown[]) => unknown; + onPlayCapture?: (...args: unknown[]) => unknown; + onPlaying?: (...args: unknown[]) => unknown; + onPlayingCapture?: (...args: unknown[]) => unknown; + onProgress?: (...args: unknown[]) => unknown; + onProgressCapture?: (...args: unknown[]) => unknown; + onRateChange?: (...args: unknown[]) => unknown; + onRateChangeCapture?: (...args: unknown[]) => unknown; + onResize?: (...args: unknown[]) => unknown; + onResizeCapture?: (...args: unknown[]) => unknown; + onSeeked?: (...args: unknown[]) => unknown; + onSeekedCapture?: (...args: unknown[]) => unknown; + onSeeking?: (...args: unknown[]) => unknown; + onSeekingCapture?: (...args: unknown[]) => unknown; + onStalled?: (...args: unknown[]) => unknown; + onStalledCapture?: (...args: unknown[]) => unknown; + onSuspend?: (...args: unknown[]) => unknown; + onSuspendCapture?: (...args: unknown[]) => unknown; + onTimeUpdate?: (...args: unknown[]) => unknown; + onTimeUpdateCapture?: (...args: unknown[]) => unknown; + onVolumeChange?: (...args: unknown[]) => unknown; + onVolumeChangeCapture?: (...args: unknown[]) => unknown; + onWaiting?: (...args: unknown[]) => unknown; + onWaitingCapture?: (...args: unknown[]) => unknown; + onAuxClick?: (...args: unknown[]) => unknown; + onAuxClickCapture?: (...args: unknown[]) => unknown; + onClickCapture?: (...args: unknown[]) => unknown; + onContextMenu?: (...args: unknown[]) => unknown; + onContextMenuCapture?: (...args: unknown[]) => unknown; + onDoubleClick?: (...args: unknown[]) => unknown; + onDoubleClickCapture?: (...args: unknown[]) => unknown; + onDrag?: (...args: unknown[]) => unknown; + onDragCapture?: (...args: unknown[]) => unknown; + onDragEnd?: (...args: unknown[]) => unknown; + onDragEndCapture?: (...args: unknown[]) => unknown; + onDragEnter?: (...args: unknown[]) => unknown; + onDragEnterCapture?: (...args: unknown[]) => unknown; + onDragExit?: (...args: unknown[]) => unknown; + onDragExitCapture?: (...args: unknown[]) => unknown; + onDragLeave?: (...args: unknown[]) => unknown; + onDragLeaveCapture?: (...args: unknown[]) => unknown; + onDragOver?: (...args: unknown[]) => unknown; + onDragOverCapture?: (...args: unknown[]) => unknown; + onDragStart?: (...args: unknown[]) => unknown; + onDragStartCapture?: (...args: unknown[]) => unknown; + onDrop?: (...args: unknown[]) => unknown; + onDropCapture?: (...args: unknown[]) => unknown; + onMouseDown?: (...args: unknown[]) => unknown; + onMouseDownCapture?: (...args: unknown[]) => unknown; + onMouseEnter?: (...args: unknown[]) => unknown; + onMouseLeave?: (...args: unknown[]) => unknown; + onMouseMove?: (...args: unknown[]) => unknown; + onMouseMoveCapture?: (...args: unknown[]) => unknown; + onMouseOut?: (...args: unknown[]) => unknown; + onMouseOutCapture?: (...args: unknown[]) => unknown; + onMouseOver?: (...args: unknown[]) => unknown; + onMouseOverCapture?: (...args: unknown[]) => unknown; + onMouseUp?: (...args: unknown[]) => unknown; + onMouseUpCapture?: (...args: unknown[]) => unknown; + onSelect?: (...args: unknown[]) => unknown; + onSelectCapture?: (...args: unknown[]) => unknown; + onTouchCancel?: (...args: unknown[]) => unknown; + onTouchCancelCapture?: (...args: unknown[]) => unknown; + onTouchEnd?: (...args: unknown[]) => unknown; + onTouchEndCapture?: (...args: unknown[]) => unknown; + onTouchMove?: (...args: unknown[]) => unknown; + onTouchMoveCapture?: (...args: unknown[]) => unknown; + onTouchStart?: (...args: unknown[]) => unknown; + onTouchStartCapture?: (...args: unknown[]) => unknown; + onPointerDown?: (...args: unknown[]) => unknown; + onPointerDownCapture?: (...args: unknown[]) => unknown; + onPointerMove?: (...args: unknown[]) => unknown; + onPointerMoveCapture?: (...args: unknown[]) => unknown; + onPointerUp?: (...args: unknown[]) => unknown; + onPointerUpCapture?: (...args: unknown[]) => unknown; + onPointerCancel?: (...args: unknown[]) => unknown; + onPointerCancelCapture?: (...args: unknown[]) => unknown; + onPointerEnter?: (...args: unknown[]) => unknown; + onPointerLeave?: (...args: unknown[]) => unknown; + onPointerOver?: (...args: unknown[]) => unknown; + onPointerOverCapture?: (...args: unknown[]) => unknown; + onPointerOut?: (...args: unknown[]) => unknown; + onPointerOutCapture?: (...args: unknown[]) => unknown; + onGotPointerCapture?: (...args: unknown[]) => unknown; + onGotPointerCaptureCapture?: (...args: unknown[]) => unknown; + onLostPointerCapture?: (...args: unknown[]) => unknown; + onLostPointerCaptureCapture?: (...args: unknown[]) => unknown; + onScroll?: (...args: unknown[]) => unknown; + onScrollCapture?: (...args: unknown[]) => unknown; + onWheel?: (...args: unknown[]) => unknown; + onWheelCapture?: (...args: unknown[]) => unknown; + onAnimationStart?: (...args: unknown[]) => unknown; + onAnimationStartCapture?: (...args: unknown[]) => unknown; + onAnimationEnd?: (...args: unknown[]) => unknown; + onAnimationEndCapture?: (...args: unknown[]) => unknown; + onAnimationIteration?: (...args: unknown[]) => unknown; + onAnimationIterationCapture?: (...args: unknown[]) => unknown; + onTransitionEnd?: (...args: unknown[]) => unknown; + onTransitionEndCapture?: (...args: unknown[]) => unknown; +}; + +export const TwentyUiCheckmarkElement = createRemoteElement< + TwentyUiCheckmarkProperties, + Record, + { children: true; 'data-tooltip-wrapper': true }, + Record +>({ + slots: ['children', 'data-tooltip-wrapper'], + properties: { + slot: { type: String }, + style: { type: Object }, + title: { type: String }, + className: { type: String }, + onClick: { type: Function }, + color: { type: String }, + content: { type: String }, + translate: { type: String }, + hidden: { type: Boolean }, + 'aria-label': { type: String }, + defaultChecked: { type: Boolean }, + suppressContentEditableWarning: { type: Boolean }, + suppressHydrationWarning: { type: Boolean }, + accessKey: { type: String }, + autoFocus: { type: Boolean }, + contentEditable: { type: String }, + contextMenu: { type: String }, + dir: { type: String }, + draggable: { type: String }, + id: { type: String }, + lang: { type: String }, + nonce: { type: String }, + spellCheck: { type: String }, + tabIndex: { type: Number }, + radioGroup: { type: String }, + about: { type: String }, + datatype: { type: String }, + prefix: { type: String }, + property: { type: String }, + rel: { type: String }, + resource: { type: String }, + rev: { type: String }, + typeof: { type: String }, + vocab: { type: String }, + autoCapitalize: { type: String }, + autoCorrect: { type: String }, + autoSave: { type: String }, + itemProp: { type: String }, + itemScope: { type: Boolean }, + itemType: { type: String }, + itemID: { type: String }, + itemRef: { type: String }, + results: { type: Number }, + security: { type: String }, + unselectable: { type: String }, + inputMode: { type: String }, + is: { type: String }, + 'data-tooltip-id': { type: String }, + 'data-tooltip-place': { type: String }, + 'data-tooltip-content': { type: String }, + 'data-tooltip-html': { type: String }, + 'data-tooltip-variant': { type: String }, + 'data-tooltip-offset': { type: Number }, + 'data-tooltip-events': { type: Array }, + 'data-tooltip-position-strategy': { type: String }, + 'data-tooltip-delay-show': { type: Number }, + 'data-tooltip-delay-hide': { type: Number }, + 'data-tooltip-float': { type: Boolean }, + 'data-tooltip-hidden': { type: Boolean }, + 'data-tooltip-class-name': { type: String }, + 'aria-activedescendant': { type: String }, + 'aria-atomic': { type: String }, + 'aria-autocomplete': { type: String }, + 'aria-braillelabel': { type: String }, + 'aria-brailleroledescription': { type: String }, + 'aria-busy': { type: String }, + 'aria-checked': { type: String }, + 'aria-colcount': { type: Number }, + 'aria-colindex': { type: Number }, + 'aria-colindextext': { type: String }, + 'aria-colspan': { type: Number }, + 'aria-controls': { type: String }, + 'aria-current': { type: String }, + 'aria-describedby': { type: String }, + 'aria-description': { type: String }, + 'aria-details': { type: String }, + 'aria-disabled': { type: String }, + 'aria-dropeffect': { type: String }, + 'aria-errormessage': { type: String }, + 'aria-expanded': { type: String }, + 'aria-flowto': { type: String }, + 'aria-grabbed': { type: String }, + 'aria-haspopup': { type: String }, + 'aria-hidden': { type: String }, + 'aria-invalid': { type: String }, + 'aria-keyshortcuts': { type: String }, + 'aria-labelledby': { type: String }, + 'aria-level': { type: Number }, + 'aria-live': { type: String }, + 'aria-modal': { type: String }, + 'aria-multiline': { type: String }, + 'aria-multiselectable': { type: String }, + 'aria-orientation': { type: String }, + 'aria-owns': { type: String }, + 'aria-placeholder': { type: String }, + 'aria-posinset': { type: Number }, + 'aria-pressed': { type: String }, + 'aria-readonly': { type: String }, + 'aria-relevant': { type: String }, + 'aria-required': { type: String }, + 'aria-roledescription': { type: String }, + 'aria-rowcount': { type: Number }, + 'aria-rowindex': { type: Number }, + 'aria-rowindextext': { type: String }, + 'aria-rowspan': { type: Number }, + 'aria-selected': { type: String }, + 'aria-setsize': { type: Number }, + 'aria-sort': { type: String }, + 'aria-valuemax': { type: Number }, + 'aria-valuemin': { type: Number }, + 'aria-valuenow': { type: Number }, + 'aria-valuetext': { type: String }, + dangerouslySetInnerHTML: { type: Object }, + onCopy: { type: Function }, + onCopyCapture: { type: Function }, + onCut: { type: Function }, + onCutCapture: { type: Function }, + onPaste: { type: Function }, + onPasteCapture: { type: Function }, + onCompositionEnd: { type: Function }, + onCompositionEndCapture: { type: Function }, + onCompositionStart: { type: Function }, + onCompositionStartCapture: { type: Function }, + onCompositionUpdate: { type: Function }, + onCompositionUpdateCapture: { type: Function }, + onFocus: { type: Function }, + onFocusCapture: { type: Function }, + onBlur: { type: Function }, + onBlurCapture: { type: Function }, + onChange: { type: Function }, + onChangeCapture: { type: Function }, + onBeforeInput: { type: Function }, + onBeforeInputCapture: { type: Function }, + onInput: { type: Function }, + onInputCapture: { type: Function }, + onReset: { type: Function }, + onResetCapture: { type: Function }, + onSubmit: { type: Function }, + onSubmitCapture: { type: Function }, + onInvalid: { type: Function }, + onInvalidCapture: { type: Function }, + onLoad: { type: Function }, + onLoadCapture: { type: Function }, + onError: { type: Function }, + onErrorCapture: { type: Function }, + onKeyDown: { type: Function }, + onKeyDownCapture: { type: Function }, + onKeyPress: { type: Function }, + onKeyPressCapture: { type: Function }, + onKeyUp: { type: Function }, + onKeyUpCapture: { type: Function }, + onAbort: { type: Function }, + onAbortCapture: { type: Function }, + onCanPlay: { type: Function }, + onCanPlayCapture: { type: Function }, + onCanPlayThrough: { type: Function }, + onCanPlayThroughCapture: { type: Function }, + onDurationChange: { type: Function }, + onDurationChangeCapture: { type: Function }, + onEmptied: { type: Function }, + onEmptiedCapture: { type: Function }, + onEncrypted: { type: Function }, + onEncryptedCapture: { type: Function }, + onEnded: { type: Function }, + onEndedCapture: { type: Function }, + onLoadedData: { type: Function }, + onLoadedDataCapture: { type: Function }, + onLoadedMetadata: { type: Function }, + onLoadedMetadataCapture: { type: Function }, + onLoadStart: { type: Function }, + onLoadStartCapture: { type: Function }, + onPause: { type: Function }, + onPauseCapture: { type: Function }, + onPlay: { type: Function }, + onPlayCapture: { type: Function }, + onPlaying: { type: Function }, + onPlayingCapture: { type: Function }, + onProgress: { type: Function }, + onProgressCapture: { type: Function }, + onRateChange: { type: Function }, + onRateChangeCapture: { type: Function }, + onResize: { type: Function }, + onResizeCapture: { type: Function }, + onSeeked: { type: Function }, + onSeekedCapture: { type: Function }, + onSeeking: { type: Function }, + onSeekingCapture: { type: Function }, + onStalled: { type: Function }, + onStalledCapture: { type: Function }, + onSuspend: { type: Function }, + onSuspendCapture: { type: Function }, + onTimeUpdate: { type: Function }, + onTimeUpdateCapture: { type: Function }, + onVolumeChange: { type: Function }, + onVolumeChangeCapture: { type: Function }, + onWaiting: { type: Function }, + onWaitingCapture: { type: Function }, + onAuxClick: { type: Function }, + onAuxClickCapture: { type: Function }, + onClickCapture: { type: Function }, + onContextMenu: { type: Function }, + onContextMenuCapture: { type: Function }, + onDoubleClick: { type: Function }, + onDoubleClickCapture: { type: Function }, + onDrag: { type: Function }, + onDragCapture: { type: Function }, + onDragEnd: { type: Function }, + onDragEndCapture: { type: Function }, + onDragEnter: { type: Function }, + onDragEnterCapture: { type: Function }, + onDragExit: { type: Function }, + onDragExitCapture: { type: Function }, + onDragLeave: { type: Function }, + onDragLeaveCapture: { type: Function }, + onDragOver: { type: Function }, + onDragOverCapture: { type: Function }, + onDragStart: { type: Function }, + onDragStartCapture: { type: Function }, + onDrop: { type: Function }, + onDropCapture: { type: Function }, + onMouseDown: { type: Function }, + onMouseDownCapture: { type: Function }, + onMouseEnter: { type: Function }, + onMouseLeave: { type: Function }, + onMouseMove: { type: Function }, + onMouseMoveCapture: { type: Function }, + onMouseOut: { type: Function }, + onMouseOutCapture: { type: Function }, + onMouseOver: { type: Function }, + onMouseOverCapture: { type: Function }, + onMouseUp: { type: Function }, + onMouseUpCapture: { type: Function }, + onSelect: { type: Function }, + onSelectCapture: { type: Function }, + onTouchCancel: { type: Function }, + onTouchCancelCapture: { type: Function }, + onTouchEnd: { type: Function }, + onTouchEndCapture: { type: Function }, + onTouchMove: { type: Function }, + onTouchMoveCapture: { type: Function }, + onTouchStart: { type: Function }, + onTouchStartCapture: { type: Function }, + onPointerDown: { type: Function }, + onPointerDownCapture: { type: Function }, + onPointerMove: { type: Function }, + onPointerMoveCapture: { type: Function }, + onPointerUp: { type: Function }, + onPointerUpCapture: { type: Function }, + onPointerCancel: { type: Function }, + onPointerCancelCapture: { type: Function }, + onPointerEnter: { type: Function }, + onPointerLeave: { type: Function }, + onPointerOver: { type: Function }, + onPointerOverCapture: { type: Function }, + onPointerOut: { type: Function }, + onPointerOutCapture: { type: Function }, + onGotPointerCapture: { type: Function }, + onGotPointerCaptureCapture: { type: Function }, + onLostPointerCapture: { type: Function }, + onLostPointerCaptureCapture: { type: Function }, + onScroll: { type: Function }, + onScrollCapture: { type: Function }, + onWheel: { type: Function }, + onWheelCapture: { type: Function }, + onAnimationStart: { type: Function }, + onAnimationStartCapture: { type: Function }, + onAnimationEnd: { type: Function }, + onAnimationEndCapture: { type: Function }, + onAnimationIteration: { type: Function }, + onAnimationIterationCapture: { type: Function }, + onTransitionEnd: { type: Function }, + onTransitionEndCapture: { type: Function }, + }, +}); + +export type TwentyUiColorSampleProperties = { + colorName: string; + color?: string; + variant?: string; +}; + +export const TwentyUiColorSampleElement = createRemoteElement< + TwentyUiColorSampleProperties, + Record, + Record, + Record +>({ + properties: { + colorName: { type: String }, + color: { type: String }, + variant: { type: String }, + }, +}); + +export type TwentyUiCommandBlockProperties = { + commands: unknown[]; +}; + +export const TwentyUiCommandBlockElement = createRemoteElement< + TwentyUiCommandBlockProperties, + Record, + { button: true }, + Record +>({ + slots: ['button'], + properties: { + commands: { type: Array }, + }, +}); + +export type TwentyUiIconProperties = { + className?: string; + style?: Record; + size?: string; + stroke?: string; + color?: string; + name: string; +}; + +export const TwentyUiIconElement = createRemoteElement< + TwentyUiIconProperties, + Record, + Record, + Record +>({ + properties: { + className: { type: String }, + style: { type: Object }, + size: { type: String }, + stroke: { type: String }, + color: { type: String }, + name: { type: String }, + }, +}); + +export type TwentyUiInfoProperties = { + accent?: string; + text: string; + buttonTitle?: string; + to?: string; +}; + +export const TwentyUiInfoElement = createRemoteElement< + TwentyUiInfoProperties, + Record, + Record, + { click(event: RemoteEvent): void } +>({ + properties: { + accent: { type: String }, + text: { type: String }, + buttonTitle: { type: String }, + to: { type: String }, + }, + events: ['click'], +}); + +export type TwentyUiStatusProperties = { + className?: string; + color: string; + isLoaderVisible?: boolean; + text: string; + onClick?: (...args: unknown[]) => unknown; + weight?: string; +}; + +export const TwentyUiStatusElement = createRemoteElement< + TwentyUiStatusProperties, + Record, + Record, + Record +>({ + properties: { + className: { type: String }, + color: { type: String }, + isLoaderVisible: { type: Boolean }, + text: { type: String }, + onClick: { type: Function }, + weight: { type: String }, + }, +}); + +export type TwentyUiHorizontalSeparatorProperties = { + visible?: boolean; + text?: string; + noMargin?: boolean; + color?: string; +}; + +export const TwentyUiHorizontalSeparatorElement = createRemoteElement< + TwentyUiHorizontalSeparatorProperties, + Record, + Record, + Record +>({ + properties: { + visible: { type: Boolean }, + text: { type: String }, + noMargin: { type: Boolean }, + color: { type: String }, + }, +}); + +export type TwentyUiAppTooltipProperties = { + className?: string; + anchorSelect?: string; + content?: string; + offset?: number; + noArrow?: boolean; + hidden?: boolean; + place?: string; + delay?: string; + positionStrategy?: string; + clickable?: boolean; + width?: string; + isOpen?: boolean; +}; + +export const TwentyUiAppTooltipElement = createRemoteElement< + TwentyUiAppTooltipProperties, + Record, + { children: true }, + Record +>({ + slots: ['children'], + properties: { + className: { type: String }, + anchorSelect: { type: String }, + content: { type: String }, + offset: { type: Number }, + noArrow: { type: Boolean }, + hidden: { type: Boolean }, + place: { type: String }, + delay: { type: String }, + positionStrategy: { type: String }, + clickable: { type: Boolean }, + width: { type: String }, + isOpen: { type: Boolean }, + }, +}); + +export type TwentyUiOverflowingTextWithTooltipProperties = { + size?: string; + isTooltipMultiline?: boolean; + displayedMaxRows?: number; + text?: string; +}; + +export const TwentyUiOverflowingTextWithTooltipElement = createRemoteElement< + TwentyUiOverflowingTextWithTooltipProperties, + Record, + Record, + Record +>({ + properties: { + size: { type: String }, + isTooltipMultiline: { type: Boolean }, + displayedMaxRows: { type: Number }, + text: { type: String }, + }, +}); + +export type TwentyUiH1TitleProperties = { + fontColor?: string; + className?: string; +}; + +export const TwentyUiH1TitleElement = createRemoteElement< + TwentyUiH1TitleProperties, + Record, + { title: true }, + Record +>({ + slots: ['title'], + properties: { + fontColor: { type: String }, + className: { type: String }, + }, +}); + +export type TwentyUiH2TitleProperties = { + title: string; + description?: string; + className?: string; +}; + +export const TwentyUiH2TitleElement = createRemoteElement< + TwentyUiH2TitleProperties, + Record, + { adornment: true }, + Record +>({ + slots: ['adornment'], + properties: { + title: { type: String }, + description: { type: String }, + className: { type: String }, + }, +}); + +export type TwentyUiH3TitleProperties = { + description?: string; + className?: string; +}; + +export const TwentyUiH3TitleElement = createRemoteElement< + TwentyUiH3TitleProperties, + Record, + { title: true }, + Record +>({ + slots: ['title'], + properties: { + description: { type: String }, + className: { type: String }, + }, +}); + +export type TwentyUiLoaderProperties = { + color?: string; +}; + +export const TwentyUiLoaderElement = createRemoteElement< + TwentyUiLoaderProperties, + Record, + Record, + Record +>({ + properties: { + color: { type: String }, + }, +}); + +export type TwentyUiCircularProgressBarProperties = { + size?: number; + barWidth?: number; + barColor?: string; +}; + +export const TwentyUiCircularProgressBarElement = createRemoteElement< + TwentyUiCircularProgressBarProperties, + Record, + Record, + Record +>({ + properties: { + size: { type: Number }, + barWidth: { type: Number }, + barColor: { type: String }, + }, +}); + +export type TwentyUiProgressBarProperties = { + value: number; + className?: string; + barColor?: string; + backgroundColor?: string; + withBorderRadius?: boolean; +}; + +export const TwentyUiProgressBarElement = createRemoteElement< + TwentyUiProgressBarProperties, + Record, + Record, + Record +>({ + properties: { + value: { type: Number }, + className: { type: String }, + barColor: { type: String }, + backgroundColor: { type: String }, + withBorderRadius: { type: Boolean }, + }, +}); + +export type TwentyUiAnimatedExpandableContainerProperties = { + isExpanded: boolean; + dimension?: string; + mode?: string; + containAnimation?: boolean; + initial?: boolean; +}; + +export const TwentyUiAnimatedExpandableContainerElement = createRemoteElement< + TwentyUiAnimatedExpandableContainerProperties, + Record, + { children: true }, + Record +>({ + slots: ['children'], + properties: { + isExpanded: { type: Boolean }, + dimension: { type: String }, + mode: { type: String }, + containAnimation: { type: Boolean }, + initial: { type: Boolean }, + }, +}); + +export type TwentyUiAnimatedPlaceholderProperties = { + type: string; +}; + +export const TwentyUiAnimatedPlaceholderElement = createRemoteElement< + TwentyUiAnimatedPlaceholderProperties, + Record, + Record, + Record +>({ + properties: { + type: { type: String }, + }, +}); + +export type TwentyUiSectionProperties = { + className?: string; + alignment?: string; + fullWidth?: boolean; + fontColor?: string; +}; + +export const TwentyUiSectionElement = createRemoteElement< + TwentyUiSectionProperties, + Record, + { children: true }, + Record +>({ + slots: ['children'], + properties: { + className: { type: String }, + alignment: { type: String }, + fullWidth: { type: Boolean }, + fontColor: { type: String }, + }, +}); + +export type TwentyUiAdvancedSettingsToggleProperties = { + isAdvancedModeEnabled: boolean; + setIsAdvancedModeEnabled: (...args: unknown[]) => unknown; + label?: string; +}; + +export const TwentyUiAdvancedSettingsToggleElement = createRemoteElement< + TwentyUiAdvancedSettingsToggleProperties, + Record, + Record, + Record +>({ + properties: { + isAdvancedModeEnabled: { type: Boolean }, + setIsAdvancedModeEnabled: { type: Function }, + label: { type: String }, + }, +}); + +export type TwentyUiClickToActionLinkProperties = { + href?: string; + hrefLang?: string; + media?: string; + ping?: string; + type?: string; + referrerPolicy?: string; + defaultChecked?: boolean; + suppressContentEditableWarning?: boolean; + suppressHydrationWarning?: boolean; + accessKey?: string; + autoFocus?: boolean; + className?: string; + contentEditable?: string; + contextMenu?: string; + dir?: string; + draggable?: string; + hidden?: boolean; + id?: string; + lang?: string; + nonce?: string; + slot?: string; + spellCheck?: string; + style?: Record; + tabIndex?: number; + title?: string; + translate?: string; + radioGroup?: string; + about?: string; + content?: string; + datatype?: string; + prefix?: string; + property?: string; + rel?: string; + resource?: string; + rev?: string; + typeof?: string; + vocab?: string; + autoCapitalize?: string; + autoCorrect?: string; + autoSave?: string; + color?: string; + itemProp?: string; + itemScope?: boolean; + itemType?: string; + itemID?: string; + itemRef?: string; + results?: number; + security?: string; + unselectable?: string; + inputMode?: string; + is?: string; + 'data-tooltip-id'?: string; + 'data-tooltip-place'?: string; + 'data-tooltip-content'?: string; + 'data-tooltip-html'?: string; + 'data-tooltip-variant'?: string; + 'data-tooltip-offset'?: number; + 'data-tooltip-events'?: unknown[]; + 'data-tooltip-position-strategy'?: string; + 'data-tooltip-delay-show'?: number; + 'data-tooltip-delay-hide'?: number; + 'data-tooltip-float'?: boolean; + 'data-tooltip-hidden'?: boolean; + 'data-tooltip-class-name'?: string; + 'aria-activedescendant'?: string; + 'aria-atomic'?: string; + 'aria-autocomplete'?: string; + 'aria-braillelabel'?: string; + 'aria-brailleroledescription'?: string; + 'aria-busy'?: string; + 'aria-checked'?: string; + 'aria-colcount'?: number; + 'aria-colindex'?: number; + 'aria-colindextext'?: string; + 'aria-colspan'?: number; + 'aria-controls'?: string; + 'aria-current'?: string; + 'aria-describedby'?: string; + 'aria-description'?: string; + 'aria-details'?: string; + 'aria-disabled'?: string; + 'aria-dropeffect'?: string; + 'aria-errormessage'?: string; + 'aria-expanded'?: string; + 'aria-flowto'?: string; + 'aria-grabbed'?: string; + 'aria-haspopup'?: string; + 'aria-hidden'?: string; + 'aria-invalid'?: string; + 'aria-keyshortcuts'?: string; + 'aria-label'?: string; + 'aria-labelledby'?: string; + 'aria-level'?: number; + 'aria-live'?: string; + 'aria-modal'?: string; + 'aria-multiline'?: string; + 'aria-multiselectable'?: string; + 'aria-orientation'?: string; + 'aria-owns'?: string; + 'aria-placeholder'?: string; + 'aria-posinset'?: number; + 'aria-pressed'?: string; + 'aria-readonly'?: string; + 'aria-relevant'?: string; + 'aria-required'?: string; + 'aria-roledescription'?: string; + 'aria-rowcount'?: number; + 'aria-rowindex'?: number; + 'aria-rowindextext'?: string; + 'aria-rowspan'?: number; + 'aria-selected'?: string; + 'aria-setsize'?: number; + 'aria-sort'?: string; + 'aria-valuemax'?: number; + 'aria-valuemin'?: number; + 'aria-valuenow'?: number; + 'aria-valuetext'?: string; + dangerouslySetInnerHTML?: Record; + onCopy?: (...args: unknown[]) => unknown; + onCopyCapture?: (...args: unknown[]) => unknown; + onCut?: (...args: unknown[]) => unknown; + onCutCapture?: (...args: unknown[]) => unknown; + onPaste?: (...args: unknown[]) => unknown; + onPasteCapture?: (...args: unknown[]) => unknown; + onCompositionEnd?: (...args: unknown[]) => unknown; + onCompositionEndCapture?: (...args: unknown[]) => unknown; + onCompositionStart?: (...args: unknown[]) => unknown; + onCompositionStartCapture?: (...args: unknown[]) => unknown; + onCompositionUpdate?: (...args: unknown[]) => unknown; + onCompositionUpdateCapture?: (...args: unknown[]) => unknown; + onFocus?: (...args: unknown[]) => unknown; + onFocusCapture?: (...args: unknown[]) => unknown; + onBlur?: (...args: unknown[]) => unknown; + onBlurCapture?: (...args: unknown[]) => unknown; + onChange?: (...args: unknown[]) => unknown; + onChangeCapture?: (...args: unknown[]) => unknown; + onBeforeInput?: (...args: unknown[]) => unknown; + onBeforeInputCapture?: (...args: unknown[]) => unknown; + onInput?: (...args: unknown[]) => unknown; + onInputCapture?: (...args: unknown[]) => unknown; + onReset?: (...args: unknown[]) => unknown; + onResetCapture?: (...args: unknown[]) => unknown; + onSubmit?: (...args: unknown[]) => unknown; + onSubmitCapture?: (...args: unknown[]) => unknown; + onInvalid?: (...args: unknown[]) => unknown; + onInvalidCapture?: (...args: unknown[]) => unknown; + onLoad?: (...args: unknown[]) => unknown; + onLoadCapture?: (...args: unknown[]) => unknown; + onError?: (...args: unknown[]) => unknown; + onErrorCapture?: (...args: unknown[]) => unknown; + onKeyDown?: (...args: unknown[]) => unknown; + onKeyDownCapture?: (...args: unknown[]) => unknown; + onKeyPress?: (...args: unknown[]) => unknown; + onKeyPressCapture?: (...args: unknown[]) => unknown; + onKeyUp?: (...args: unknown[]) => unknown; + onKeyUpCapture?: (...args: unknown[]) => unknown; + onAbort?: (...args: unknown[]) => unknown; + onAbortCapture?: (...args: unknown[]) => unknown; + onCanPlay?: (...args: unknown[]) => unknown; + onCanPlayCapture?: (...args: unknown[]) => unknown; + onCanPlayThrough?: (...args: unknown[]) => unknown; + onCanPlayThroughCapture?: (...args: unknown[]) => unknown; + onDurationChange?: (...args: unknown[]) => unknown; + onDurationChangeCapture?: (...args: unknown[]) => unknown; + onEmptied?: (...args: unknown[]) => unknown; + onEmptiedCapture?: (...args: unknown[]) => unknown; + onEncrypted?: (...args: unknown[]) => unknown; + onEncryptedCapture?: (...args: unknown[]) => unknown; + onEnded?: (...args: unknown[]) => unknown; + onEndedCapture?: (...args: unknown[]) => unknown; + onLoadedData?: (...args: unknown[]) => unknown; + onLoadedDataCapture?: (...args: unknown[]) => unknown; + onLoadedMetadata?: (...args: unknown[]) => unknown; + onLoadedMetadataCapture?: (...args: unknown[]) => unknown; + onLoadStart?: (...args: unknown[]) => unknown; + onLoadStartCapture?: (...args: unknown[]) => unknown; + onPause?: (...args: unknown[]) => unknown; + onPauseCapture?: (...args: unknown[]) => unknown; + onPlay?: (...args: unknown[]) => unknown; + onPlayCapture?: (...args: unknown[]) => unknown; + onPlaying?: (...args: unknown[]) => unknown; + onPlayingCapture?: (...args: unknown[]) => unknown; + onProgress?: (...args: unknown[]) => unknown; + onProgressCapture?: (...args: unknown[]) => unknown; + onRateChange?: (...args: unknown[]) => unknown; + onRateChangeCapture?: (...args: unknown[]) => unknown; + onResize?: (...args: unknown[]) => unknown; + onResizeCapture?: (...args: unknown[]) => unknown; + onSeeked?: (...args: unknown[]) => unknown; + onSeekedCapture?: (...args: unknown[]) => unknown; + onSeeking?: (...args: unknown[]) => unknown; + onSeekingCapture?: (...args: unknown[]) => unknown; + onStalled?: (...args: unknown[]) => unknown; + onStalledCapture?: (...args: unknown[]) => unknown; + onSuspend?: (...args: unknown[]) => unknown; + onSuspendCapture?: (...args: unknown[]) => unknown; + onTimeUpdate?: (...args: unknown[]) => unknown; + onTimeUpdateCapture?: (...args: unknown[]) => unknown; + onVolumeChange?: (...args: unknown[]) => unknown; + onVolumeChangeCapture?: (...args: unknown[]) => unknown; + onWaiting?: (...args: unknown[]) => unknown; + onWaitingCapture?: (...args: unknown[]) => unknown; + onAuxClick?: (...args: unknown[]) => unknown; + onAuxClickCapture?: (...args: unknown[]) => unknown; + onClick?: (...args: unknown[]) => unknown; + onClickCapture?: (...args: unknown[]) => unknown; + onContextMenu?: (...args: unknown[]) => unknown; + onContextMenuCapture?: (...args: unknown[]) => unknown; + onDoubleClick?: (...args: unknown[]) => unknown; + onDoubleClickCapture?: (...args: unknown[]) => unknown; + onDrag?: (...args: unknown[]) => unknown; + onDragCapture?: (...args: unknown[]) => unknown; + onDragEnd?: (...args: unknown[]) => unknown; + onDragEndCapture?: (...args: unknown[]) => unknown; + onDragEnter?: (...args: unknown[]) => unknown; + onDragEnterCapture?: (...args: unknown[]) => unknown; + onDragExit?: (...args: unknown[]) => unknown; + onDragExitCapture?: (...args: unknown[]) => unknown; + onDragLeave?: (...args: unknown[]) => unknown; + onDragLeaveCapture?: (...args: unknown[]) => unknown; + onDragOver?: (...args: unknown[]) => unknown; + onDragOverCapture?: (...args: unknown[]) => unknown; + onDragStart?: (...args: unknown[]) => unknown; + onDragStartCapture?: (...args: unknown[]) => unknown; + onDrop?: (...args: unknown[]) => unknown; + onDropCapture?: (...args: unknown[]) => unknown; + onMouseDown?: (...args: unknown[]) => unknown; + onMouseDownCapture?: (...args: unknown[]) => unknown; + onMouseEnter?: (...args: unknown[]) => unknown; + onMouseLeave?: (...args: unknown[]) => unknown; + onMouseMove?: (...args: unknown[]) => unknown; + onMouseMoveCapture?: (...args: unknown[]) => unknown; + onMouseOut?: (...args: unknown[]) => unknown; + onMouseOutCapture?: (...args: unknown[]) => unknown; + onMouseOver?: (...args: unknown[]) => unknown; + onMouseOverCapture?: (...args: unknown[]) => unknown; + onMouseUp?: (...args: unknown[]) => unknown; + onMouseUpCapture?: (...args: unknown[]) => unknown; + onSelect?: (...args: unknown[]) => unknown; + onSelectCapture?: (...args: unknown[]) => unknown; + onTouchCancel?: (...args: unknown[]) => unknown; + onTouchCancelCapture?: (...args: unknown[]) => unknown; + onTouchEnd?: (...args: unknown[]) => unknown; + onTouchEndCapture?: (...args: unknown[]) => unknown; + onTouchMove?: (...args: unknown[]) => unknown; + onTouchMoveCapture?: (...args: unknown[]) => unknown; + onTouchStart?: (...args: unknown[]) => unknown; + onTouchStartCapture?: (...args: unknown[]) => unknown; + onPointerDown?: (...args: unknown[]) => unknown; + onPointerDownCapture?: (...args: unknown[]) => unknown; + onPointerMove?: (...args: unknown[]) => unknown; + onPointerMoveCapture?: (...args: unknown[]) => unknown; + onPointerUp?: (...args: unknown[]) => unknown; + onPointerUpCapture?: (...args: unknown[]) => unknown; + onPointerCancel?: (...args: unknown[]) => unknown; + onPointerCancelCapture?: (...args: unknown[]) => unknown; + onPointerEnter?: (...args: unknown[]) => unknown; + onPointerLeave?: (...args: unknown[]) => unknown; + onPointerOver?: (...args: unknown[]) => unknown; + onPointerOverCapture?: (...args: unknown[]) => unknown; + onPointerOut?: (...args: unknown[]) => unknown; + onPointerOutCapture?: (...args: unknown[]) => unknown; + onGotPointerCapture?: (...args: unknown[]) => unknown; + onGotPointerCaptureCapture?: (...args: unknown[]) => unknown; + onLostPointerCapture?: (...args: unknown[]) => unknown; + onLostPointerCaptureCapture?: (...args: unknown[]) => unknown; + onScroll?: (...args: unknown[]) => unknown; + onScrollCapture?: (...args: unknown[]) => unknown; + onWheel?: (...args: unknown[]) => unknown; + onWheelCapture?: (...args: unknown[]) => unknown; + onAnimationStart?: (...args: unknown[]) => unknown; + onAnimationStartCapture?: (...args: unknown[]) => unknown; + onAnimationEnd?: (...args: unknown[]) => unknown; + onAnimationEndCapture?: (...args: unknown[]) => unknown; + onAnimationIteration?: (...args: unknown[]) => unknown; + onAnimationIterationCapture?: (...args: unknown[]) => unknown; + onTransitionEnd?: (...args: unknown[]) => unknown; + onTransitionEndCapture?: (...args: unknown[]) => unknown; +}; + +export const TwentyUiClickToActionLinkElement = createRemoteElement< + TwentyUiClickToActionLinkProperties, + Record, + { 'data-tooltip-wrapper': true; children: true }, + Record +>({ + slots: ['data-tooltip-wrapper', 'children'], + properties: { + href: { type: String }, + hrefLang: { type: String }, + media: { type: String }, + ping: { type: String }, + type: { type: String }, + referrerPolicy: { type: String }, + defaultChecked: { type: Boolean }, + suppressContentEditableWarning: { type: Boolean }, + suppressHydrationWarning: { type: Boolean }, + accessKey: { type: String }, + autoFocus: { type: Boolean }, + className: { type: String }, + contentEditable: { type: String }, + contextMenu: { type: String }, + dir: { type: String }, + draggable: { type: String }, + hidden: { type: Boolean }, + id: { type: String }, + lang: { type: String }, + nonce: { type: String }, + slot: { type: String }, + spellCheck: { type: String }, + style: { type: Object }, + tabIndex: { type: Number }, + title: { type: String }, + translate: { type: String }, + radioGroup: { type: String }, + about: { type: String }, + content: { type: String }, + datatype: { type: String }, + prefix: { type: String }, + property: { type: String }, + rel: { type: String }, + resource: { type: String }, + rev: { type: String }, + typeof: { type: String }, + vocab: { type: String }, + autoCapitalize: { type: String }, + autoCorrect: { type: String }, + autoSave: { type: String }, + color: { type: String }, + itemProp: { type: String }, + itemScope: { type: Boolean }, + itemType: { type: String }, + itemID: { type: String }, + itemRef: { type: String }, + results: { type: Number }, + security: { type: String }, + unselectable: { type: String }, + inputMode: { type: String }, + is: { type: String }, + 'data-tooltip-id': { type: String }, + 'data-tooltip-place': { type: String }, + 'data-tooltip-content': { type: String }, + 'data-tooltip-html': { type: String }, + 'data-tooltip-variant': { type: String }, + 'data-tooltip-offset': { type: Number }, + 'data-tooltip-events': { type: Array }, + 'data-tooltip-position-strategy': { type: String }, + 'data-tooltip-delay-show': { type: Number }, + 'data-tooltip-delay-hide': { type: Number }, + 'data-tooltip-float': { type: Boolean }, + 'data-tooltip-hidden': { type: Boolean }, + 'data-tooltip-class-name': { type: String }, + 'aria-activedescendant': { type: String }, + 'aria-atomic': { type: String }, + 'aria-autocomplete': { type: String }, + 'aria-braillelabel': { type: String }, + 'aria-brailleroledescription': { type: String }, + 'aria-busy': { type: String }, + 'aria-checked': { type: String }, + 'aria-colcount': { type: Number }, + 'aria-colindex': { type: Number }, + 'aria-colindextext': { type: String }, + 'aria-colspan': { type: Number }, + 'aria-controls': { type: String }, + 'aria-current': { type: String }, + 'aria-describedby': { type: String }, + 'aria-description': { type: String }, + 'aria-details': { type: String }, + 'aria-disabled': { type: String }, + 'aria-dropeffect': { type: String }, + 'aria-errormessage': { type: String }, + 'aria-expanded': { type: String }, + 'aria-flowto': { type: String }, + 'aria-grabbed': { type: String }, + 'aria-haspopup': { type: String }, + 'aria-hidden': { type: String }, + 'aria-invalid': { type: String }, + 'aria-keyshortcuts': { type: String }, + 'aria-label': { type: String }, + 'aria-labelledby': { type: String }, + 'aria-level': { type: Number }, + 'aria-live': { type: String }, + 'aria-modal': { type: String }, + 'aria-multiline': { type: String }, + 'aria-multiselectable': { type: String }, + 'aria-orientation': { type: String }, + 'aria-owns': { type: String }, + 'aria-placeholder': { type: String }, + 'aria-posinset': { type: Number }, + 'aria-pressed': { type: String }, + 'aria-readonly': { type: String }, + 'aria-relevant': { type: String }, + 'aria-required': { type: String }, + 'aria-roledescription': { type: String }, + 'aria-rowcount': { type: Number }, + 'aria-rowindex': { type: Number }, + 'aria-rowindextext': { type: String }, + 'aria-rowspan': { type: Number }, + 'aria-selected': { type: String }, + 'aria-setsize': { type: Number }, + 'aria-sort': { type: String }, + 'aria-valuemax': { type: Number }, + 'aria-valuemin': { type: Number }, + 'aria-valuenow': { type: Number }, + 'aria-valuetext': { type: String }, + dangerouslySetInnerHTML: { type: Object }, + onCopy: { type: Function }, + onCopyCapture: { type: Function }, + onCut: { type: Function }, + onCutCapture: { type: Function }, + onPaste: { type: Function }, + onPasteCapture: { type: Function }, + onCompositionEnd: { type: Function }, + onCompositionEndCapture: { type: Function }, + onCompositionStart: { type: Function }, + onCompositionStartCapture: { type: Function }, + onCompositionUpdate: { type: Function }, + onCompositionUpdateCapture: { type: Function }, + onFocus: { type: Function }, + onFocusCapture: { type: Function }, + onBlur: { type: Function }, + onBlurCapture: { type: Function }, + onChange: { type: Function }, + onChangeCapture: { type: Function }, + onBeforeInput: { type: Function }, + onBeforeInputCapture: { type: Function }, + onInput: { type: Function }, + onInputCapture: { type: Function }, + onReset: { type: Function }, + onResetCapture: { type: Function }, + onSubmit: { type: Function }, + onSubmitCapture: { type: Function }, + onInvalid: { type: Function }, + onInvalidCapture: { type: Function }, + onLoad: { type: Function }, + onLoadCapture: { type: Function }, + onError: { type: Function }, + onErrorCapture: { type: Function }, + onKeyDown: { type: Function }, + onKeyDownCapture: { type: Function }, + onKeyPress: { type: Function }, + onKeyPressCapture: { type: Function }, + onKeyUp: { type: Function }, + onKeyUpCapture: { type: Function }, + onAbort: { type: Function }, + onAbortCapture: { type: Function }, + onCanPlay: { type: Function }, + onCanPlayCapture: { type: Function }, + onCanPlayThrough: { type: Function }, + onCanPlayThroughCapture: { type: Function }, + onDurationChange: { type: Function }, + onDurationChangeCapture: { type: Function }, + onEmptied: { type: Function }, + onEmptiedCapture: { type: Function }, + onEncrypted: { type: Function }, + onEncryptedCapture: { type: Function }, + onEnded: { type: Function }, + onEndedCapture: { type: Function }, + onLoadedData: { type: Function }, + onLoadedDataCapture: { type: Function }, + onLoadedMetadata: { type: Function }, + onLoadedMetadataCapture: { type: Function }, + onLoadStart: { type: Function }, + onLoadStartCapture: { type: Function }, + onPause: { type: Function }, + onPauseCapture: { type: Function }, + onPlay: { type: Function }, + onPlayCapture: { type: Function }, + onPlaying: { type: Function }, + onPlayingCapture: { type: Function }, + onProgress: { type: Function }, + onProgressCapture: { type: Function }, + onRateChange: { type: Function }, + onRateChangeCapture: { type: Function }, + onResize: { type: Function }, + onResizeCapture: { type: Function }, + onSeeked: { type: Function }, + onSeekedCapture: { type: Function }, + onSeeking: { type: Function }, + onSeekingCapture: { type: Function }, + onStalled: { type: Function }, + onStalledCapture: { type: Function }, + onSuspend: { type: Function }, + onSuspendCapture: { type: Function }, + onTimeUpdate: { type: Function }, + onTimeUpdateCapture: { type: Function }, + onVolumeChange: { type: Function }, + onVolumeChangeCapture: { type: Function }, + onWaiting: { type: Function }, + onWaitingCapture: { type: Function }, + onAuxClick: { type: Function }, + onAuxClickCapture: { type: Function }, + onClick: { type: Function }, + onClickCapture: { type: Function }, + onContextMenu: { type: Function }, + onContextMenuCapture: { type: Function }, + onDoubleClick: { type: Function }, + onDoubleClickCapture: { type: Function }, + onDrag: { type: Function }, + onDragCapture: { type: Function }, + onDragEnd: { type: Function }, + onDragEndCapture: { type: Function }, + onDragEnter: { type: Function }, + onDragEnterCapture: { type: Function }, + onDragExit: { type: Function }, + onDragExitCapture: { type: Function }, + onDragLeave: { type: Function }, + onDragLeaveCapture: { type: Function }, + onDragOver: { type: Function }, + onDragOverCapture: { type: Function }, + onDragStart: { type: Function }, + onDragStartCapture: { type: Function }, + onDrop: { type: Function }, + onDropCapture: { type: Function }, + onMouseDown: { type: Function }, + onMouseDownCapture: { type: Function }, + onMouseEnter: { type: Function }, + onMouseLeave: { type: Function }, + onMouseMove: { type: Function }, + onMouseMoveCapture: { type: Function }, + onMouseOut: { type: Function }, + onMouseOutCapture: { type: Function }, + onMouseOver: { type: Function }, + onMouseOverCapture: { type: Function }, + onMouseUp: { type: Function }, + onMouseUpCapture: { type: Function }, + onSelect: { type: Function }, + onSelectCapture: { type: Function }, + onTouchCancel: { type: Function }, + onTouchCancelCapture: { type: Function }, + onTouchEnd: { type: Function }, + onTouchEndCapture: { type: Function }, + onTouchMove: { type: Function }, + onTouchMoveCapture: { type: Function }, + onTouchStart: { type: Function }, + onTouchStartCapture: { type: Function }, + onPointerDown: { type: Function }, + onPointerDownCapture: { type: Function }, + onPointerMove: { type: Function }, + onPointerMoveCapture: { type: Function }, + onPointerUp: { type: Function }, + onPointerUpCapture: { type: Function }, + onPointerCancel: { type: Function }, + onPointerCancelCapture: { type: Function }, + onPointerEnter: { type: Function }, + onPointerLeave: { type: Function }, + onPointerOver: { type: Function }, + onPointerOverCapture: { type: Function }, + onPointerOut: { type: Function }, + onPointerOutCapture: { type: Function }, + onGotPointerCapture: { type: Function }, + onGotPointerCaptureCapture: { type: Function }, + onLostPointerCapture: { type: Function }, + onLostPointerCaptureCapture: { type: Function }, + onScroll: { type: Function }, + onScrollCapture: { type: Function }, + onWheel: { type: Function }, + onWheelCapture: { type: Function }, + onAnimationStart: { type: Function }, + onAnimationStartCapture: { type: Function }, + onAnimationEnd: { type: Function }, + onAnimationEndCapture: { type: Function }, + onAnimationIteration: { type: Function }, + onAnimationIterationCapture: { type: Function }, + onTransitionEnd: { type: Function }, + onTransitionEndCapture: { type: Function }, + }, +}); + +export type TwentyUiContactLinkProperties = { + href: string; + maxWidth?: number; +}; + +export const TwentyUiContactLinkElement = createRemoteElement< + TwentyUiContactLinkProperties, + Record, + { children: true }, + { click(event: RemoteEvent): void } +>({ + slots: ['children'], + properties: { + href: { type: String }, + maxWidth: { type: Number }, + }, + events: ['click'], +}); + +export type TwentyUiGithubVersionLinkProperties = { + version: string; +}; + +export const TwentyUiGithubVersionLinkElement = createRemoteElement< + TwentyUiGithubVersionLinkProperties, + Record, + Record, + Record +>({ + properties: { + version: { type: String }, + }, +}); + +export type TwentyUiRawLinkProperties = { + className?: string; + href: string; +}; + +export const TwentyUiRawLinkElement = createRemoteElement< + TwentyUiRawLinkProperties, + Record, + { children: true }, + { click(event: RemoteEvent): void } +>({ + slots: ['children'], + properties: { + className: { type: String }, + href: { type: String }, + }, + events: ['click'], +}); + +export type TwentyUiRoundedLinkProperties = { + href: string; + label?: string; + className?: string; +}; + +export const TwentyUiRoundedLinkElement = createRemoteElement< + TwentyUiRoundedLinkProperties, + Record, + Record, + { click(event: RemoteEvent): void } +>({ + properties: { + href: { type: String }, + label: { type: String }, + className: { type: String }, + }, + events: ['click'], +}); + +export type TwentyUiSocialLinkProperties = { + label: string; + href: string; + type: string; +}; + +export const TwentyUiSocialLinkElement = createRemoteElement< + TwentyUiSocialLinkProperties, + Record, + Record, + { click(event: RemoteEvent): void } +>({ + properties: { + label: { type: String }, + href: { type: String }, + type: { type: String }, + }, + events: ['click'], +}); + +export type TwentyUiUndecoratedLinkProperties = { + to: string; + replace?: boolean; + onClick?: (...args: unknown[]) => unknown; + fullWidth?: boolean; +}; + +export const TwentyUiUndecoratedLinkElement = createRemoteElement< + TwentyUiUndecoratedLinkProperties, + Record, + { children: true }, + Record +>({ + slots: ['children'], + properties: { + to: { type: String }, + replace: { type: Boolean }, + onClick: { type: Function }, fullWidth: { type: Boolean }, }, - events: [...HTML_COMMON_EVENTS_ARRAY], +}); + +export type TwentyUiMenuPickerProperties = { + id: string; + className?: string; + disabled?: boolean; + label?: string; + onClick?: (...args: unknown[]) => unknown; + selected?: boolean; + showLabel?: boolean; + testId?: string; + tooltipContent?: string; + tooltipDelay?: string; + tooltipOffset?: number; +}; + +export const TwentyUiMenuPickerElement = createRemoteElement< + TwentyUiMenuPickerProperties, + Record, + { icon: true }, + Record +>({ + slots: ['icon'], + properties: { + id: { type: String }, + className: { type: String }, + disabled: { type: Boolean }, + label: { type: String }, + onClick: { type: Function }, + selected: { type: Boolean }, + showLabel: { type: Boolean }, + testId: { type: String }, + tooltipContent: { type: String }, + tooltipDelay: { type: String }, + tooltipOffset: { type: Number }, + }, +}); + +export type TwentyUiMenuItemProperties = { + accent?: string; + className?: string; + withIconContainer?: boolean; + iconButtons?: unknown[]; + isIconDisplayedOnHoverOnly?: boolean; + isTooltipOpen?: boolean; + testId?: string; + disabled?: boolean; + contextualTextPosition?: string; + hasSubMenu?: boolean; + focused?: boolean; + hotKeys?: unknown[]; + isSubMenuOpened?: boolean; +}; + +export const TwentyUiMenuItemElement = createRemoteElement< + TwentyUiMenuItemProperties, + Record, + { + LeftIcon: true; + LeftComponent: true; + RightIcon: true; + RightComponent: true; + text: true; + contextualText: true; + }, + { + click(event: RemoteEvent): void; + mouseenter(event: RemoteEvent): void; + mouseleave(event: RemoteEvent): void; + } +>({ + slots: [ + 'LeftIcon', + 'LeftComponent', + 'RightIcon', + 'RightComponent', + 'text', + 'contextualText', + ], + properties: { + accent: { type: String }, + className: { type: String }, + withIconContainer: { type: Boolean }, + iconButtons: { type: Array }, + isIconDisplayedOnHoverOnly: { type: Boolean }, + isTooltipOpen: { type: Boolean }, + testId: { type: String }, + disabled: { type: Boolean }, + contextualTextPosition: { type: String }, + hasSubMenu: { type: Boolean }, + focused: { type: Boolean }, + hotKeys: { type: Array }, + isSubMenuOpened: { type: Boolean }, + }, + events: ['click', 'mouseenter', 'mouseleave'], +}); + +export type TwentyUiMenuItemAvatarProperties = { + accent?: string; + className?: string; + iconButtons?: unknown[]; + isIconDisplayedOnHoverOnly?: boolean; + isTooltipOpen?: boolean; + avatar?: Record; + testId?: string; + text: string; + hasSubMenu?: boolean; +}; + +export const TwentyUiMenuItemAvatarElement = createRemoteElement< + TwentyUiMenuItemAvatarProperties, + Record, + { contextualText: true }, + { + click(event: RemoteEvent): void; + mouseenter(event: RemoteEvent): void; + mouseleave(event: RemoteEvent): void; + } +>({ + slots: ['contextualText'], + properties: { + accent: { type: String }, + className: { type: String }, + iconButtons: { type: Array }, + isIconDisplayedOnHoverOnly: { type: Boolean }, + isTooltipOpen: { type: Boolean }, + avatar: { type: Object }, + testId: { type: String }, + text: { type: String }, + hasSubMenu: { type: Boolean }, + }, + events: ['click', 'mouseenter', 'mouseleave'], +}); + +export type TwentyUiMenuItemDraggableProperties = { + withIconContainer?: boolean; + accent?: string; + iconButtons?: unknown[]; + isTooltipOpen?: boolean; + onClick?: (...args: unknown[]) => unknown; + className?: string; + isIconDisplayedOnHoverOnly?: boolean; + showGrip?: boolean; + isDragDisabled?: boolean; + isHoverDisabled?: boolean; +}; + +export const TwentyUiMenuItemDraggableElement = createRemoteElement< + TwentyUiMenuItemDraggableProperties, + Record, + { LeftIcon: true; text: true }, + Record +>({ + slots: ['LeftIcon', 'text'], + properties: { + withIconContainer: { type: Boolean }, + accent: { type: String }, + iconButtons: { type: Array }, + isTooltipOpen: { type: Boolean }, + onClick: { type: Function }, + className: { type: String }, + isIconDisplayedOnHoverOnly: { type: Boolean }, + showGrip: { type: Boolean }, + isDragDisabled: { type: Boolean }, + isHoverDisabled: { type: Boolean }, + }, +}); + +export type TwentyUiMenuItemHotKeysProperties = { + hotKeys?: unknown[]; + joinLabel?: string; +}; + +export const TwentyUiMenuItemHotKeysElement = createRemoteElement< + TwentyUiMenuItemHotKeysProperties, + Record, + Record, + Record +>({ + properties: { + hotKeys: { type: Array }, + joinLabel: { type: String }, + }, +}); + +export type TwentyUiMenuItemMultiSelectProperties = { + color?: string; + selected: boolean; + isKeySelected?: boolean; + withIconContainer?: boolean; + text: string; + className: string; + onSelectChange?: (...args: unknown[]) => unknown; +}; + +export const TwentyUiMenuItemMultiSelectElement = createRemoteElement< + TwentyUiMenuItemMultiSelectProperties, + Record, + { LeftIcon: true }, + Record +>({ + slots: ['LeftIcon'], + properties: { + color: { type: String }, + selected: { type: Boolean }, + isKeySelected: { type: Boolean }, + withIconContainer: { type: Boolean }, + text: { type: String }, + className: { type: String }, + onSelectChange: { type: Function }, + }, +}); + +export type TwentyUiMenuItemMultiSelectAvatarProperties = { + selected: boolean; + isKeySelected?: boolean; + text?: string; + contextualText?: string; + className?: string; + onSelectChange?: (...args: unknown[]) => unknown; +}; + +export const TwentyUiMenuItemMultiSelectAvatarElement = createRemoteElement< + TwentyUiMenuItemMultiSelectAvatarProperties, + Record, + { avatar: true }, + Record +>({ + slots: ['avatar'], + properties: { + selected: { type: Boolean }, + isKeySelected: { type: Boolean }, + text: { type: String }, + contextualText: { type: String }, + className: { type: String }, + onSelectChange: { type: Function }, + }, +}); + +export type TwentyUiMenuItemMultiSelectTagProperties = { + selected: boolean; + className?: string; + isKeySelected?: boolean; + onClick?: (...args: unknown[]) => unknown; + color: string; + text: string; +}; + +export const TwentyUiMenuItemMultiSelectTagElement = createRemoteElement< + TwentyUiMenuItemMultiSelectTagProperties, + Record, + { Icon: true }, + Record +>({ + slots: ['Icon'], + properties: { + selected: { type: Boolean }, + className: { type: String }, + isKeySelected: { type: Boolean }, + onClick: { type: Function }, + color: { type: String }, + text: { type: String }, + }, +}); + +export type TwentyUiMenuItemNavigateProperties = { + withIconContainer?: boolean; + text: string; + onClick?: (...args: unknown[]) => unknown; + className?: string; +}; + +export const TwentyUiMenuItemNavigateElement = createRemoteElement< + TwentyUiMenuItemNavigateProperties, + Record, + { LeftIcon: true }, + Record +>({ + slots: ['LeftIcon'], + properties: { + withIconContainer: { type: Boolean }, + text: { type: String }, + onClick: { type: Function }, + className: { type: String }, + }, +}); + +export type TwentyUiMenuItemSelectProperties = { + withIconContainer?: boolean; + selected: boolean; + needIconCheck?: boolean; + text: string; + className?: string; + onClick?: (...args: unknown[]) => unknown; + disabled?: boolean; + focused?: boolean; + hasSubMenu?: boolean; + contextualTextPosition?: string; +}; + +export const TwentyUiMenuItemSelectElement = createRemoteElement< + TwentyUiMenuItemSelectProperties, + Record, + { LeftIcon: true; contextualText: true }, + Record +>({ + slots: ['LeftIcon', 'contextualText'], + properties: { + withIconContainer: { type: Boolean }, + selected: { type: Boolean }, + needIconCheck: { type: Boolean }, + text: { type: String }, + className: { type: String }, + onClick: { type: Function }, + disabled: { type: Boolean }, + focused: { type: Boolean }, + hasSubMenu: { type: Boolean }, + contextualTextPosition: { type: String }, + }, +}); + +export type TwentyUiMenuItemSelectAvatarProperties = { + selected: boolean; + text: string; + contextualText?: string; + className?: string; + onClick?: (...args: unknown[]) => unknown; + disabled?: boolean; + focused?: boolean; + testId?: string; +}; + +export const TwentyUiMenuItemSelectAvatarElement = createRemoteElement< + TwentyUiMenuItemSelectAvatarProperties, + Record, + { avatar: true }, + Record +>({ + slots: ['avatar'], + properties: { + selected: { type: Boolean }, + text: { type: String }, + contextualText: { type: String }, + className: { type: String }, + onClick: { type: Function }, + disabled: { type: Boolean }, + focused: { type: Boolean }, + testId: { type: String }, + }, +}); + +export type TwentyUiMenuItemSelectColorProperties = { + selected: boolean; + className?: string; + onClick?: (...args: unknown[]) => unknown; + disabled?: boolean; + focused?: boolean; + color: string; + variant?: string; + colorLabels?: Record; +}; + +export const TwentyUiMenuItemSelectColorElement = createRemoteElement< + TwentyUiMenuItemSelectColorProperties, + Record, + Record, + Record +>({ + properties: { + selected: { type: Boolean }, + className: { type: String }, + onClick: { type: Function }, + disabled: { type: Boolean }, + focused: { type: Boolean }, + color: { type: String }, + variant: { type: String }, + colorLabels: { type: Object }, + }, +}); + +export type TwentyUiMenuItemSelectTagProperties = { + selected?: boolean; + focused?: boolean; + isKeySelected?: boolean; + className?: string; + onClick?: (...args: unknown[]) => unknown; + color: string; + text: string; + variant?: string; +}; + +export const TwentyUiMenuItemSelectTagElement = createRemoteElement< + TwentyUiMenuItemSelectTagProperties, + Record, + { LeftIcon: true }, + Record +>({ + slots: ['LeftIcon'], + properties: { + selected: { type: Boolean }, + focused: { type: Boolean }, + isKeySelected: { type: Boolean }, + className: { type: String }, + onClick: { type: Function }, + color: { type: String }, + text: { type: String }, + variant: { type: String }, + }, +}); + +export type TwentyUiMenuItemSuggestionProperties = { + withIconContainer?: boolean; + text: string; + selected?: boolean; + className?: string; +}; + +export const TwentyUiMenuItemSuggestionElement = createRemoteElement< + TwentyUiMenuItemSuggestionProperties, + Record, + { LeftIcon: true }, + { click(event: RemoteEvent): void } +>({ + slots: ['LeftIcon'], + properties: { + withIconContainer: { type: Boolean }, + text: { type: String }, + selected: { type: Boolean }, + className: { type: String }, + }, + events: ['click'], +}); + +export type TwentyUiMenuItemToggleProperties = { + focused?: boolean; + withIconContainer?: boolean; + toggled: boolean; + text: string; + className?: string; + onToggleChange?: (...args: unknown[]) => unknown; + toggleSize?: string; + disabled?: boolean; +}; + +export const TwentyUiMenuItemToggleElement = createRemoteElement< + TwentyUiMenuItemToggleProperties, + Record, + { LeftIcon: true }, + Record +>({ + slots: ['LeftIcon'], + properties: { + focused: { type: Boolean }, + withIconContainer: { type: Boolean }, + toggled: { type: Boolean }, + text: { type: String }, + className: { type: String }, + onToggleChange: { type: Function }, + toggleSize: { type: String }, + disabled: { type: Boolean }, + }, +}); + +export type TwentyUiMenuItemLeftContentProperties = { + className?: string; + withIconContainer?: boolean; + showGrip?: boolean; + disabled?: boolean; + contextualTextPosition?: string; +}; + +export const TwentyUiMenuItemLeftContentElement = createRemoteElement< + TwentyUiMenuItemLeftContentProperties, + Record, + { LeftComponent: true; LeftIcon: true; text: true; contextualText: true }, + Record +>({ + slots: ['LeftComponent', 'LeftIcon', 'text', 'contextualText'], + properties: { + className: { type: String }, + withIconContainer: { type: Boolean }, + showGrip: { type: Boolean }, + disabled: { type: Boolean }, + contextualTextPosition: { type: String }, + }, +}); + +export type TwentyUiNavigationBarProperties = { + activeItemName: string; + items: unknown[]; +}; + +export const TwentyUiNavigationBarElement = createRemoteElement< + TwentyUiNavigationBarProperties, + Record, + Record, + Record +>({ + properties: { + activeItemName: { type: String }, + items: { type: Array }, + }, +}); + +export type TwentyUiNavigationBarItemProperties = { + isActive: boolean; + onClick: (...args: unknown[]) => unknown; +}; + +export const TwentyUiNavigationBarItemElement = createRemoteElement< + TwentyUiNavigationBarItemProperties, + Record, + { Icon: true }, + Record +>({ + slots: ['Icon'], + properties: { + isActive: { type: Boolean }, + onClick: { type: Function }, + }, +}); + +export type TwentyUiNotificationCounterProperties = { + count: number; + variant?: string; + className?: string; +}; + +export const TwentyUiNotificationCounterElement = createRemoteElement< + TwentyUiNotificationCounterProperties, + Record, + Record, + Record +>({ + properties: { + count: { type: Number }, + variant: { type: String }, + className: { type: String }, + }, }); customElements.define('html-div', HtmlDivElement); customElements.define('html-span', HtmlSpanElement); @@ -677,10 +7120,215 @@ customElements.define('html-th', HtmlThElement); customElements.define('html-td', HtmlTdElement); customElements.define('html-br', HtmlBrElement); customElements.define('html-hr', HtmlHrElement); +customElements.define( + 'twenty-ui-animated-button', + TwentyUiAnimatedButtonElement, +); +customElements.define( + 'twenty-ui-animated-light-icon-button', + TwentyUiAnimatedLightIconButtonElement, +); customElements.define('twenty-ui-button', TwentyUiButtonElement); +customElements.define('twenty-ui-button-group', TwentyUiButtonGroupElement); +customElements.define( + 'twenty-ui-color-picker-button', + TwentyUiColorPickerButtonElement, +); +customElements.define( + 'twenty-ui-floating-button', + TwentyUiFloatingButtonElement, +); +customElements.define( + 'twenty-ui-floating-button-group', + TwentyUiFloatingButtonGroupElement, +); +customElements.define( + 'twenty-ui-floating-icon-button', + TwentyUiFloatingIconButtonElement, +); +customElements.define( + 'twenty-ui-floating-icon-button-group', + TwentyUiFloatingIconButtonGroupElement, +); +customElements.define('twenty-ui-inside-button', TwentyUiInsideButtonElement); +customElements.define('twenty-ui-light-button', TwentyUiLightButtonElement); +customElements.define( + 'twenty-ui-light-icon-button', + TwentyUiLightIconButtonElement, +); +customElements.define( + 'twenty-ui-light-icon-button-group', + TwentyUiLightIconButtonGroupElement, +); +customElements.define('twenty-ui-main-button', TwentyUiMainButtonElement); +customElements.define( + 'twenty-ui-rounded-icon-button', + TwentyUiRoundedIconButtonElement, +); +customElements.define('twenty-ui-tab-content', TwentyUiTabContentElement); +customElements.define('twenty-ui-tab-button', TwentyUiTabButtonElement); +customElements.define('twenty-ui-code-editor', TwentyUiCodeEditorElement); +customElements.define( + 'twenty-ui-core-editor-header', + TwentyUiCoreEditorHeaderElement, +); +customElements.define( + 'twenty-ui-color-scheme-card', + TwentyUiColorSchemeCardElement, +); +customElements.define( + 'twenty-ui-color-scheme-picker', + TwentyUiColorSchemePickerElement, +); +customElements.define('twenty-ui-card-picker', TwentyUiCardPickerElement); +customElements.define('twenty-ui-checkbox', TwentyUiCheckboxElement); +customElements.define('twenty-ui-radio', TwentyUiRadioElement); +customElements.define('twenty-ui-radio-group', TwentyUiRadioGroupElement); +customElements.define('twenty-ui-search-input', TwentyUiSearchInputElement); +customElements.define('twenty-ui-toggle', TwentyUiToggleElement); +customElements.define('twenty-ui-avatar-chip', TwentyUiAvatarChipElement); +customElements.define( + 'twenty-ui-multiple-avatar-chip', + TwentyUiMultipleAvatarChipElement, +); +customElements.define('twenty-ui-chip', TwentyUiChipElement); +customElements.define('twenty-ui-link-chip', TwentyUiLinkChipElement); +customElements.define('twenty-ui-pill', TwentyUiPillElement); +customElements.define('twenty-ui-tag', TwentyUiTagElement); +customElements.define('twenty-ui-avatar', TwentyUiAvatarElement); +customElements.define('twenty-ui-avatar-group', TwentyUiAvatarGroupElement); +customElements.define('twenty-ui-banner', TwentyUiBannerElement); +customElements.define( + 'twenty-ui-side-panel-information-banner', + TwentyUiSidePanelInformationBannerElement, +); +customElements.define('twenty-ui-callout', TwentyUiCalloutElement); +customElements.define( + 'twenty-ui-animated-checkmark', + TwentyUiAnimatedCheckmarkElement, +); +customElements.define('twenty-ui-checkmark', TwentyUiCheckmarkElement); +customElements.define('twenty-ui-color-sample', TwentyUiColorSampleElement); +customElements.define('twenty-ui-command-block', TwentyUiCommandBlockElement); +customElements.define('twenty-ui-icon', TwentyUiIconElement); +customElements.define('twenty-ui-info', TwentyUiInfoElement); +customElements.define('twenty-ui-status', TwentyUiStatusElement); +customElements.define( + 'twenty-ui-horizontal-separator', + TwentyUiHorizontalSeparatorElement, +); +customElements.define('twenty-ui-app-tooltip', TwentyUiAppTooltipElement); +customElements.define( + 'twenty-ui-overflowing-text-with-tooltip', + TwentyUiOverflowingTextWithTooltipElement, +); +customElements.define('twenty-ui-h1-title', TwentyUiH1TitleElement); +customElements.define('twenty-ui-h2-title', TwentyUiH2TitleElement); +customElements.define('twenty-ui-h3-title', TwentyUiH3TitleElement); +customElements.define('twenty-ui-loader', TwentyUiLoaderElement); +customElements.define( + 'twenty-ui-circular-progress-bar', + TwentyUiCircularProgressBarElement, +); +customElements.define('twenty-ui-progress-bar', TwentyUiProgressBarElement); +customElements.define( + 'twenty-ui-animated-expandable-container', + TwentyUiAnimatedExpandableContainerElement, +); +customElements.define( + 'twenty-ui-animated-placeholder', + TwentyUiAnimatedPlaceholderElement, +); +customElements.define('twenty-ui-section', TwentyUiSectionElement); +customElements.define( + 'twenty-ui-advanced-settings-toggle', + TwentyUiAdvancedSettingsToggleElement, +); +customElements.define( + 'twenty-ui-click-to-action-link', + TwentyUiClickToActionLinkElement, +); +customElements.define('twenty-ui-contact-link', TwentyUiContactLinkElement); +customElements.define( + 'twenty-ui-github-version-link', + TwentyUiGithubVersionLinkElement, +); +customElements.define('twenty-ui-raw-link', TwentyUiRawLinkElement); +customElements.define('twenty-ui-rounded-link', TwentyUiRoundedLinkElement); +customElements.define('twenty-ui-social-link', TwentyUiSocialLinkElement); +customElements.define( + 'twenty-ui-undecorated-link', + TwentyUiUndecoratedLinkElement, +); +customElements.define('twenty-ui-menu-picker', TwentyUiMenuPickerElement); +customElements.define('twenty-ui-menu-item', TwentyUiMenuItemElement); +customElements.define( + 'twenty-ui-menu-item-avatar', + TwentyUiMenuItemAvatarElement, +); +customElements.define( + 'twenty-ui-menu-item-draggable', + TwentyUiMenuItemDraggableElement, +); +customElements.define( + 'twenty-ui-menu-item-hot-keys', + TwentyUiMenuItemHotKeysElement, +); +customElements.define( + 'twenty-ui-menu-item-multi-select', + TwentyUiMenuItemMultiSelectElement, +); +customElements.define( + 'twenty-ui-menu-item-multi-select-avatar', + TwentyUiMenuItemMultiSelectAvatarElement, +); +customElements.define( + 'twenty-ui-menu-item-multi-select-tag', + TwentyUiMenuItemMultiSelectTagElement, +); +customElements.define( + 'twenty-ui-menu-item-navigate', + TwentyUiMenuItemNavigateElement, +); +customElements.define( + 'twenty-ui-menu-item-select', + TwentyUiMenuItemSelectElement, +); +customElements.define( + 'twenty-ui-menu-item-select-avatar', + TwentyUiMenuItemSelectAvatarElement, +); +customElements.define( + 'twenty-ui-menu-item-select-color', + TwentyUiMenuItemSelectColorElement, +); +customElements.define( + 'twenty-ui-menu-item-select-tag', + TwentyUiMenuItemSelectTagElement, +); +customElements.define( + 'twenty-ui-menu-item-suggestion', + TwentyUiMenuItemSuggestionElement, +); +customElements.define( + 'twenty-ui-menu-item-toggle', + TwentyUiMenuItemToggleElement, +); +customElements.define( + 'twenty-ui-menu-item-left-content', + TwentyUiMenuItemLeftContentElement, +); +customElements.define('twenty-ui-navigation-bar', TwentyUiNavigationBarElement); +customElements.define( + 'twenty-ui-navigation-bar-item', + TwentyUiNavigationBarItemElement, +); +customElements.define( + 'twenty-ui-notification-counter', + TwentyUiNotificationCounterElement, +); customElements.define('remote-root', RemoteRootElement); customElements.define('remote-fragment', RemoteFragmentElement); - export { RemoteRootElement, RemoteFragmentElement }; declare global { interface HTMLElementTagNameMap { @@ -727,7 +7375,174 @@ declare global { 'html-td': InstanceType; 'html-br': InstanceType; 'html-hr': InstanceType; + 'twenty-ui-animated-button': InstanceType< + typeof TwentyUiAnimatedButtonElement + >; + 'twenty-ui-animated-light-icon-button': InstanceType< + typeof TwentyUiAnimatedLightIconButtonElement + >; 'twenty-ui-button': InstanceType; + 'twenty-ui-button-group': InstanceType; + 'twenty-ui-color-picker-button': InstanceType< + typeof TwentyUiColorPickerButtonElement + >; + 'twenty-ui-floating-button': InstanceType< + typeof TwentyUiFloatingButtonElement + >; + 'twenty-ui-floating-button-group': InstanceType< + typeof TwentyUiFloatingButtonGroupElement + >; + 'twenty-ui-floating-icon-button': InstanceType< + typeof TwentyUiFloatingIconButtonElement + >; + 'twenty-ui-floating-icon-button-group': InstanceType< + typeof TwentyUiFloatingIconButtonGroupElement + >; + 'twenty-ui-inside-button': InstanceType; + 'twenty-ui-light-button': InstanceType; + 'twenty-ui-light-icon-button': InstanceType< + typeof TwentyUiLightIconButtonElement + >; + 'twenty-ui-light-icon-button-group': InstanceType< + typeof TwentyUiLightIconButtonGroupElement + >; + 'twenty-ui-main-button': InstanceType; + 'twenty-ui-rounded-icon-button': InstanceType< + typeof TwentyUiRoundedIconButtonElement + >; + 'twenty-ui-tab-content': InstanceType; + 'twenty-ui-tab-button': InstanceType; + 'twenty-ui-code-editor': InstanceType; + 'twenty-ui-core-editor-header': InstanceType< + typeof TwentyUiCoreEditorHeaderElement + >; + 'twenty-ui-color-scheme-card': InstanceType< + typeof TwentyUiColorSchemeCardElement + >; + 'twenty-ui-color-scheme-picker': InstanceType< + typeof TwentyUiColorSchemePickerElement + >; + 'twenty-ui-card-picker': InstanceType; + 'twenty-ui-checkbox': InstanceType; + 'twenty-ui-radio': InstanceType; + 'twenty-ui-radio-group': InstanceType; + 'twenty-ui-search-input': InstanceType; + 'twenty-ui-toggle': InstanceType; + 'twenty-ui-avatar-chip': InstanceType; + 'twenty-ui-multiple-avatar-chip': InstanceType< + typeof TwentyUiMultipleAvatarChipElement + >; + 'twenty-ui-chip': InstanceType; + 'twenty-ui-link-chip': InstanceType; + 'twenty-ui-pill': InstanceType; + 'twenty-ui-tag': InstanceType; + 'twenty-ui-avatar': InstanceType; + 'twenty-ui-avatar-group': InstanceType; + 'twenty-ui-banner': InstanceType; + 'twenty-ui-side-panel-information-banner': InstanceType< + typeof TwentyUiSidePanelInformationBannerElement + >; + 'twenty-ui-callout': InstanceType; + 'twenty-ui-animated-checkmark': InstanceType< + typeof TwentyUiAnimatedCheckmarkElement + >; + 'twenty-ui-checkmark': InstanceType; + 'twenty-ui-color-sample': InstanceType; + 'twenty-ui-command-block': InstanceType; + 'twenty-ui-icon': InstanceType; + 'twenty-ui-info': InstanceType; + 'twenty-ui-status': InstanceType; + 'twenty-ui-horizontal-separator': InstanceType< + typeof TwentyUiHorizontalSeparatorElement + >; + 'twenty-ui-app-tooltip': InstanceType; + 'twenty-ui-overflowing-text-with-tooltip': InstanceType< + typeof TwentyUiOverflowingTextWithTooltipElement + >; + 'twenty-ui-h1-title': InstanceType; + 'twenty-ui-h2-title': InstanceType; + 'twenty-ui-h3-title': InstanceType; + 'twenty-ui-loader': InstanceType; + 'twenty-ui-circular-progress-bar': InstanceType< + typeof TwentyUiCircularProgressBarElement + >; + 'twenty-ui-progress-bar': InstanceType; + 'twenty-ui-animated-expandable-container': InstanceType< + typeof TwentyUiAnimatedExpandableContainerElement + >; + 'twenty-ui-animated-placeholder': InstanceType< + typeof TwentyUiAnimatedPlaceholderElement + >; + 'twenty-ui-section': InstanceType; + 'twenty-ui-advanced-settings-toggle': InstanceType< + typeof TwentyUiAdvancedSettingsToggleElement + >; + 'twenty-ui-click-to-action-link': InstanceType< + typeof TwentyUiClickToActionLinkElement + >; + 'twenty-ui-contact-link': InstanceType; + 'twenty-ui-github-version-link': InstanceType< + typeof TwentyUiGithubVersionLinkElement + >; + 'twenty-ui-raw-link': InstanceType; + 'twenty-ui-rounded-link': InstanceType; + 'twenty-ui-social-link': InstanceType; + 'twenty-ui-undecorated-link': InstanceType< + typeof TwentyUiUndecoratedLinkElement + >; + 'twenty-ui-menu-picker': InstanceType; + 'twenty-ui-menu-item': InstanceType; + 'twenty-ui-menu-item-avatar': InstanceType< + typeof TwentyUiMenuItemAvatarElement + >; + 'twenty-ui-menu-item-draggable': InstanceType< + typeof TwentyUiMenuItemDraggableElement + >; + 'twenty-ui-menu-item-hot-keys': InstanceType< + typeof TwentyUiMenuItemHotKeysElement + >; + 'twenty-ui-menu-item-multi-select': InstanceType< + typeof TwentyUiMenuItemMultiSelectElement + >; + 'twenty-ui-menu-item-multi-select-avatar': InstanceType< + typeof TwentyUiMenuItemMultiSelectAvatarElement + >; + 'twenty-ui-menu-item-multi-select-tag': InstanceType< + typeof TwentyUiMenuItemMultiSelectTagElement + >; + 'twenty-ui-menu-item-navigate': InstanceType< + typeof TwentyUiMenuItemNavigateElement + >; + 'twenty-ui-menu-item-select': InstanceType< + typeof TwentyUiMenuItemSelectElement + >; + 'twenty-ui-menu-item-select-avatar': InstanceType< + typeof TwentyUiMenuItemSelectAvatarElement + >; + 'twenty-ui-menu-item-select-color': InstanceType< + typeof TwentyUiMenuItemSelectColorElement + >; + 'twenty-ui-menu-item-select-tag': InstanceType< + typeof TwentyUiMenuItemSelectTagElement + >; + 'twenty-ui-menu-item-suggestion': InstanceType< + typeof TwentyUiMenuItemSuggestionElement + >; + 'twenty-ui-menu-item-toggle': InstanceType< + typeof TwentyUiMenuItemToggleElement + >; + 'twenty-ui-menu-item-left-content': InstanceType< + typeof TwentyUiMenuItemLeftContentElement + >; + 'twenty-ui-navigation-bar': InstanceType< + typeof TwentyUiNavigationBarElement + >; + 'twenty-ui-navigation-bar-item': InstanceType< + typeof TwentyUiNavigationBarItemElement + >; + 'twenty-ui-notification-counter': InstanceType< + typeof TwentyUiNotificationCounterElement + >; 'remote-root': InstanceType; 'remote-fragment': InstanceType; } diff --git a/packages/twenty-sdk/src/front-component/types/PropertySchema.ts b/packages/twenty-sdk/src/front-component/types/PropertySchema.ts index b5436137f0..eb544a8f0d 100644 --- a/packages/twenty-sdk/src/front-component/types/PropertySchema.ts +++ b/packages/twenty-sdk/src/front-component/types/PropertySchema.ts @@ -1,4 +1,4 @@ export type PropertySchema = { - type: 'string' | 'number' | 'boolean'; + type: 'string' | 'number' | 'boolean' | 'array' | 'object' | 'function'; optional: boolean; }; diff --git a/packages/twenty-sdk/src/sdk/front-component-common/AllowedUiComponents.ts b/packages/twenty-sdk/src/sdk/front-component-common/AllowedUiComponents.ts deleted file mode 100644 index 23ccfa2ee9..0000000000 --- a/packages/twenty-sdk/src/sdk/front-component-common/AllowedUiComponents.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { type PropertySchema } from '@/front-component/types/PropertySchema'; - -export type AllowedUiComponent = { - tag: string; - name: string; - properties: Record; - componentImport: string; - componentPath: string; -}; - -export const ALLOWED_UI_COMPONENTS: AllowedUiComponent[] = [ - { - tag: 'twenty-ui-button', - name: 'TwentyUiButton', - properties: { - title: { type: 'string', optional: true }, - variant: { type: 'string', optional: true }, - accent: { type: 'string', optional: true }, - size: { type: 'string', optional: true }, - disabled: { type: 'boolean', optional: true }, - fullWidth: { type: 'boolean', optional: true }, - }, - componentImport: 'Button', - componentPath: 'twenty-ui/input', - }, -]; diff --git a/packages/twenty-sdk/src/sdk/front-component-common/index.ts b/packages/twenty-sdk/src/sdk/front-component-common/index.ts index 3bb42cfa91..e12418d511 100644 --- a/packages/twenty-sdk/src/sdk/front-component-common/index.ts +++ b/packages/twenty-sdk/src/sdk/front-component-common/index.ts @@ -9,8 +9,6 @@ export type { AllowedHtmlElement } from './AllowedHtmlElements'; export { ALLOWED_HTML_ELEMENTS } from './AllowedHtmlElements'; -export type { AllowedUiComponent } from './AllowedUiComponents'; -export { ALLOWED_UI_COMPONENTS } from './AllowedUiComponents'; export { COMMON_HTML_EVENTS } from './CommonHtmlEvents'; export { EVENT_TO_REACT } from './EventToReact'; export { HTML_COMMON_PROPERTIES } from './HtmlCommonProperties'; diff --git a/packages/twenty-sdk/src/sdk/index.ts b/packages/twenty-sdk/src/sdk/index.ts index 0f8c63bf18..1051fb6d5f 100644 --- a/packages/twenty-sdk/src/sdk/index.ts +++ b/packages/twenty-sdk/src/sdk/index.ts @@ -59,8 +59,6 @@ export type { FrontComponentExecutionContext } from './front-component-api'; // Front Component Common exports export type { AllowedHtmlElement } from './front-component-common'; export { ALLOWED_HTML_ELEMENTS } from './front-component-common'; -export type { AllowedUiComponent } from './front-component-common'; -export { ALLOWED_UI_COMPONENTS } from './front-component-common'; export { COMMON_HTML_EVENTS } from './front-component-common'; export { EVENT_TO_REACT } from './front-component-common'; export { HTML_COMMON_PROPERTIES } from './front-component-common'; diff --git a/packages/twenty-sdk/tsconfig.json b/packages/twenty-sdk/tsconfig.json index c6d8a86880..6a1417758b 100644 --- a/packages/twenty-sdk/tsconfig.json +++ b/packages/twenty-sdk/tsconfig.json @@ -20,6 +20,7 @@ "src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts", + "scripts/**/*.ts", ".storybook/*.ts", ".storybook/*.tsx", "**/__mocks__/**/*", diff --git a/packages/twenty-sdk/vite.config.ts b/packages/twenty-sdk/vite.config.ts index aeaa1cbaec..876b66fb06 100644 --- a/packages/twenty-sdk/vite.config.ts +++ b/packages/twenty-sdk/vite.config.ts @@ -77,19 +77,26 @@ export default defineConfig(() => { } warn(warning); }, - external: [ - ...Object.keys((packageJson as any).dependencies || {}), - 'path', - 'fs', - 'fs/promises', - 'url', - 'crypto', - 'stream', - 'util', - 'os', - 'module', - /^node:/, - ], + external: (id: string) => { + if (/^node:/.test(id)) return true; + + const builtins = [ + 'path', + 'fs', + 'fs/promises', + 'url', + 'crypto', + 'stream', + 'util', + 'os', + 'module', + ]; + if (builtins.includes(id)) return true; + + const deps = Object.keys((packageJson as any).dependencies || {}); + + return deps.some((dep) => id === dep || id.startsWith(dep + '/')); + }, output: [ { format: 'es', diff --git a/packages/twenty-server/test/integration/graphql/codegen/index.ts b/packages/twenty-server/test/integration/graphql/codegen/index.ts index 1862b00b8e..ecd0ccd771 100644 --- a/packages/twenty-server/test/integration/graphql/codegen/index.ts +++ b/packages/twenty-server/test/integration/graphql/codegen/index.ts @@ -2,6 +2,8 @@ import * as fs from 'fs'; import * as path from 'path'; import * as process from 'process'; +import { pascalToKebab } from 'twenty-shared/utils'; + import { INTROSPECTION_QUERY } from './introspection-query'; import { type Field, @@ -33,10 +35,6 @@ const fetchGraphQLSchema = async (): Promise => { return response.json(); }; -const toKebabCase = (name: string): string => { - return name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); -}; - const unwrapType = (typeInfo: TypeRef): any => { while (typeInfo.ofType) { typeInfo = typeInfo.ofType; @@ -124,7 +122,7 @@ const writeTestFile = ( ): string => { if (!content) return 'skipped'; - const fileName = `${toKebabCase(queryName)}.integration-spec.ts`; + const fileName = `${pascalToKebab(queryName)}.integration-spec.ts`; const filePath = path.join(TEST_OUTPUT_DIR, fileName); if (fs.existsSync(filePath) && !force) { diff --git a/packages/twenty-shared/src/utils/index.ts b/packages/twenty-shared/src/utils/index.ts index 2a23fb9158..5f57df7d70 100644 --- a/packages/twenty-shared/src/utils/index.ts +++ b/packages/twenty-shared/src/utils/index.ts @@ -148,6 +148,7 @@ export { appendCopySuffix } from './strings/appendCopySuffix'; export { camelToSnakeCase } from './strings/camelToSnakeCase'; export { capitalize } from './strings/capitalize'; export { pascalCase } from './strings/pascalCase'; +export { pascalToKebab } from './strings/pascalToKebab'; export { stringifySafely } from './strings/stringifySafely'; export { uncapitalize } from './strings/uncapitalize'; export type { diff --git a/packages/twenty-shared/src/utils/strings/__tests__/pascalToKebab.test.ts b/packages/twenty-shared/src/utils/strings/__tests__/pascalToKebab.test.ts new file mode 100644 index 0000000000..78959846b6 --- /dev/null +++ b/packages/twenty-shared/src/utils/strings/__tests__/pascalToKebab.test.ts @@ -0,0 +1,27 @@ +import { pascalToKebab } from '../pascalToKebab'; + +describe('pascalToKebab', () => { + it('should convert PascalCase to kebab-case', () => { + expect(pascalToKebab('UserProfile')).toBe('user-profile'); + }); + + it('should convert single word', () => { + expect(pascalToKebab('Button')).toBe('button'); + }); + + it('should handle consecutive uppercase letters', () => { + expect(pascalToKebab('HTMLElement')).toBe('html-element'); + }); + + it('should handle numbers in the name', () => { + expect(pascalToKebab('H1Title')).toBe('h1-title'); + }); + + it('should handle multi-word PascalCase', () => { + expect(pascalToKebab('MyComponentName')).toBe('my-component-name'); + }); + + it('should handle already lowercase', () => { + expect(pascalToKebab('button')).toBe('button'); + }); +}); diff --git a/packages/twenty-shared/src/utils/strings/index.ts b/packages/twenty-shared/src/utils/strings/index.ts index 618c37627f..760f56ced4 100644 --- a/packages/twenty-shared/src/utils/strings/index.ts +++ b/packages/twenty-shared/src/utils/strings/index.ts @@ -1,3 +1,4 @@ export * from './appendCopySuffix'; export * from './capitalize'; export * from './pascalCase'; +export * from './pascalToKebab'; diff --git a/packages/twenty-shared/src/utils/strings/pascalToKebab.ts b/packages/twenty-shared/src/utils/strings/pascalToKebab.ts new file mode 100644 index 0000000000..e23e9d6482 --- /dev/null +++ b/packages/twenty-shared/src/utils/strings/pascalToKebab.ts @@ -0,0 +1,6 @@ +export const pascalToKebab = (name: string): string => { + return name + .replace(/([a-z0-9])([A-Z])/g, '$1-$2') + .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2') + .toLowerCase(); +}; diff --git a/packages/twenty-ui/eslint.config.mjs b/packages/twenty-ui/eslint.config.mjs index 4820d47f2f..d148a9400f 100644 --- a/packages/twenty-ui/eslint.config.mjs +++ b/packages/twenty-ui/eslint.config.mjs @@ -69,4 +69,26 @@ export default [ 'lingui/text-restrictions': 'off', }, }, + + { + files: [ + '**/src/input/**/*.tsx', + '**/src/components/**/*.tsx', + '**/src/display/**/*.tsx', + '**/src/feedback/**/*.tsx', + '**/src/layout/**/*.tsx', + '**/src/navigation/**/*.tsx', + '**/src/accessibility/**/*.tsx', + ], + ignores: [ + '**/*.stories.tsx', + '**/__stories__/**/*.tsx', + '**/*.test.tsx', + '**/__tests__/**/*.tsx', + '**/testing/**/*.tsx', + ], + rules: { + 'twenty/export-component-props': 'error', + }, + }, ]; diff --git a/packages/twenty-ui/src/components/Pill/Pill.tsx b/packages/twenty-ui/src/components/Pill/Pill.tsx index d014e1d521..ea649fbd33 100644 --- a/packages/twenty-ui/src/components/Pill/Pill.tsx +++ b/packages/twenty-ui/src/components/Pill/Pill.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { type IconComponent } from '@ui/display'; -type PillProps = { +export type PillProps = { className?: string; label?: string; Icon?: IconComponent; diff --git a/packages/twenty-ui/src/components/index.ts b/packages/twenty-ui/src/components/index.ts index 4e0e83d25e..c8758ac6c4 100644 --- a/packages/twenty-ui/src/components/index.ts +++ b/packages/twenty-ui/src/components/index.ts @@ -16,6 +16,7 @@ export { ChipSize, ChipAccent, ChipVariant, Chip } from './chip/Chip'; export { LINK_CHIP_CLICK_OUTSIDE_ID } from './chip/constants/LinkChipClickOutsideId'; export type { LinkChipProps } from './chip/LinkChip'; export { LinkChip } from './chip/LinkChip'; +export type { PillProps } from './Pill/Pill'; export { Pill } from './Pill/Pill'; -export type { TagColor } from './tag/Tag'; +export type { TagColor, TagProps } from './tag/Tag'; export { Tag } from './tag/Tag'; diff --git a/packages/twenty-ui/src/components/tag/Tag.tsx b/packages/twenty-ui/src/components/tag/Tag.tsx index c6d1584c8f..428d58f5db 100644 --- a/packages/twenty-ui/src/components/tag/Tag.tsx +++ b/packages/twenty-ui/src/components/tag/Tag.tsx @@ -86,7 +86,7 @@ type TagWeight = 'regular' | 'medium'; type TagVariant = 'solid' | 'outline' | 'border'; export type TagColor = ThemeColor | 'transparent'; -type TagProps = { +export type TagProps = { className?: string; color: TagColor; text: string; diff --git a/packages/twenty-ui/src/display/banner/components/Banner.tsx b/packages/twenty-ui/src/display/banner/components/Banner.tsx index ae1b8d7808..6472a24760 100644 --- a/packages/twenty-ui/src/display/banner/components/Banner.tsx +++ b/packages/twenty-ui/src/display/banner/components/Banner.tsx @@ -22,7 +22,7 @@ const StyledBanner = styled.div<{ variant?: BannerVariant }>` export type BannerVariant = 'danger' | 'default'; -type BannerProps = { +export type BannerProps = { variant?: BannerVariant; className?: string; children: React.ReactNode; diff --git a/packages/twenty-ui/src/display/command-block/components/CommandBlock.tsx b/packages/twenty-ui/src/display/command-block/components/CommandBlock.tsx index 9c2d2c3bf5..6ef29d3354 100644 --- a/packages/twenty-ui/src/display/command-block/components/CommandBlock.tsx +++ b/packages/twenty-ui/src/display/command-block/components/CommandBlock.tsx @@ -29,7 +29,7 @@ const StyledLineSpan = styled.span` color: ${({ theme }) => theme.code.text.green}; `; -type CommandBlockProps = { +export type CommandBlockProps = { commands: string[]; button?: ReactElement; }; diff --git a/packages/twenty-ui/src/display/icon/components/IconAddressBook.tsx b/packages/twenty-ui/src/display/icon/components/IconAddressBook.tsx index 35f5daae21..e43fbd5a8a 100644 --- a/packages/twenty-ui/src/display/icon/components/IconAddressBook.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconAddressBook.tsx @@ -2,7 +2,7 @@ import IconAddressBookRaw from '@assets/icons/address-book.svg?react'; import { useTheme } from '@emotion/react'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IconAddressBookProps = Pick< +export type IconAddressBookProps = Pick< IconComponentProps, 'size' | 'stroke' | 'color' >; diff --git a/packages/twenty-ui/src/display/icon/components/IconChartBarHorizontal.tsx b/packages/twenty-ui/src/display/icon/components/IconChartBarHorizontal.tsx index 7d61c2b5ab..1f7a7cba55 100644 --- a/packages/twenty-ui/src/display/icon/components/IconChartBarHorizontal.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconChartBarHorizontal.tsx @@ -9,7 +9,7 @@ const StyledRotatedIconWrapper = styled.div` transform: rotate(90deg); `; -type IconChartBarHorizontalProps = Pick< +export type IconChartBarHorizontalProps = Pick< IconComponentProps, 'size' | 'stroke' | 'color' >; diff --git a/packages/twenty-ui/src/display/icon/components/IconGmail.tsx b/packages/twenty-ui/src/display/icon/components/IconGmail.tsx index 2361be516a..9c1cfa7e43 100644 --- a/packages/twenty-ui/src/display/icon/components/IconGmail.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconGmail.tsx @@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react'; import IconGmailRaw from '@assets/icons/gmail.svg?react'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IconGmailProps = Pick; +export type IconGmailProps = Pick; export const IconGmail = (props: IconGmailProps) => { const theme = useTheme(); diff --git a/packages/twenty-ui/src/display/icon/components/IconGoogle.tsx b/packages/twenty-ui/src/display/icon/components/IconGoogle.tsx index 18f0cf030d..2a5369a0a6 100644 --- a/packages/twenty-ui/src/display/icon/components/IconGoogle.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconGoogle.tsx @@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react'; import IconGoogleRaw from '@assets/icons/google.svg?react'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IconGoogleProps = Pick; +export type IconGoogleProps = Pick; export const IconGoogle = (props: IconGoogleProps) => { const theme = useTheme(); diff --git a/packages/twenty-ui/src/display/icon/components/IconGoogleCalendar.tsx b/packages/twenty-ui/src/display/icon/components/IconGoogleCalendar.tsx index f5af378e9a..ed3eb433b7 100644 --- a/packages/twenty-ui/src/display/icon/components/IconGoogleCalendar.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconGoogleCalendar.tsx @@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react'; import IconGoogleCalendarRaw from '@assets/icons/google-calendar.svg?react'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IconGoogleCalendarProps = Pick; +export type IconGoogleCalendarProps = Pick; export const IconGoogleCalendar = (props: IconGoogleCalendarProps) => { const theme = useTheme(); diff --git a/packages/twenty-ui/src/display/icon/components/IconLock.tsx b/packages/twenty-ui/src/display/icon/components/IconLock.tsx index e083b20b65..77913d1512 100644 --- a/packages/twenty-ui/src/display/icon/components/IconLock.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconLock.tsx @@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react'; import IconLockRaw from '@assets/icons/lock.svg?react'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IconLockCustomProps = Pick; +export type IconLockCustomProps = Pick; export const IconLockCustom = (props: IconLockCustomProps) => { const theme = useTheme(); diff --git a/packages/twenty-ui/src/display/icon/components/IconMicrosoft.tsx b/packages/twenty-ui/src/display/icon/components/IconMicrosoft.tsx index f32ee63183..95e55b2ecc 100644 --- a/packages/twenty-ui/src/display/icon/components/IconMicrosoft.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconMicrosoft.tsx @@ -2,7 +2,7 @@ import { useTheme } from '@emotion/react'; import IconMicrosoftRaw from '@assets/icons/microsoft.svg?react'; -interface IconMicrosoftProps { +export interface IconMicrosoftProps { size?: number | string; } diff --git a/packages/twenty-ui/src/display/icon/components/IconMicrosoftCalendar.tsx b/packages/twenty-ui/src/display/icon/components/IconMicrosoftCalendar.tsx index d65d5800c5..11bb5a3526 100644 --- a/packages/twenty-ui/src/display/icon/components/IconMicrosoftCalendar.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconMicrosoftCalendar.tsx @@ -2,7 +2,7 @@ import { useTheme } from '@emotion/react'; import IconMicrosoftCalendarRaw from '@assets/icons/microsoft-calendar.svg?react'; -interface IconMicrosoftCalendarProps { +export interface IconMicrosoftCalendarProps { size?: number | string; } diff --git a/packages/twenty-ui/src/display/icon/components/IconMicrosoftOutlook.tsx b/packages/twenty-ui/src/display/icon/components/IconMicrosoftOutlook.tsx index fbdf9bee50..8b44e0bb02 100644 --- a/packages/twenty-ui/src/display/icon/components/IconMicrosoftOutlook.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconMicrosoftOutlook.tsx @@ -2,7 +2,7 @@ import { useTheme } from '@emotion/react'; import IconMicrosoftOutlookRaw from '@assets/icons/microsoft-outlook.svg?react'; -interface IconMicrosoftOutlookProps { +export interface IconMicrosoftOutlookProps { size?: number | string; } diff --git a/packages/twenty-ui/src/display/icon/components/IconRelationManyToOne.tsx b/packages/twenty-ui/src/display/icon/components/IconRelationManyToOne.tsx index 0bd21c4cbd..9713057587 100644 --- a/packages/twenty-ui/src/display/icon/components/IconRelationManyToOne.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconRelationManyToOne.tsx @@ -3,7 +3,10 @@ import { useTheme } from '@emotion/react'; import IconRelationManyToOneRaw from '@assets/icons/many-to-one.svg?react'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IconRelationManyToOneProps = Pick; +export type IconRelationManyToOneProps = Pick< + IconComponentProps, + 'size' | 'stroke' +>; export const IconRelationManyToOne = (props: IconRelationManyToOneProps) => { const theme = useTheme(); diff --git a/packages/twenty-ui/src/display/icon/components/IconTrashXOff.tsx b/packages/twenty-ui/src/display/icon/components/IconTrashXOff.tsx index 2363506647..5c21ba5d12 100644 --- a/packages/twenty-ui/src/display/icon/components/IconTrashXOff.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconTrashXOff.tsx @@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react'; import IconTrashXOffRaw from '@assets/icons/trash-x-off.svg?react'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IconTrashXOffProps = Pick; +export type IconTrashXOffProps = Pick; export const IconTrashXOff = (props: IconTrashXOffProps) => { const theme = useTheme(); diff --git a/packages/twenty-ui/src/display/icon/components/IconTwentyStar.tsx b/packages/twenty-ui/src/display/icon/components/IconTwentyStar.tsx index d11b2d449c..21d09eb2c4 100644 --- a/packages/twenty-ui/src/display/icon/components/IconTwentyStar.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconTwentyStar.tsx @@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react'; import IconTwentyStarRaw from '@assets/icons/twenty-star.svg?react'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IconTwentyStarProps = Pick; +export type IconTwentyStarProps = Pick; export const IconTwentyStar = (props: IconTwentyStarProps) => { const theme = useTheme(); diff --git a/packages/twenty-ui/src/display/icon/components/IconTwentyStarFilled.tsx b/packages/twenty-ui/src/display/icon/components/IconTwentyStarFilled.tsx index 98f0154be7..b268d78050 100644 --- a/packages/twenty-ui/src/display/icon/components/IconTwentyStarFilled.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconTwentyStarFilled.tsx @@ -2,7 +2,10 @@ import IconTwentyStarFilledRaw from '@assets/icons/twenty-star-filled.svg?react' import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; import { THEME_COMMON } from '@ui/theme'; -type IconTwentyStarFilledProps = Pick; +export type IconTwentyStarFilledProps = Pick< + IconComponentProps, + 'size' | 'stroke' +>; const iconStrokeMd = THEME_COMMON.icon.stroke.md; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconArray.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconArray.tsx index 17dc958f22..091f66bf0d 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconArray.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconArray.tsx @@ -2,7 +2,7 @@ import IllustrationIconArrayRaw from '@assets/icons/illustration-array.svg?react import { useTheme } from '@emotion/react'; import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IllustrationIconArrayProps = Pick; +export type IllustrationIconArrayProps = Pick; export const IllustrationIconArray = (props: IllustrationIconArrayProps) => { const theme = useTheme(); diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarEvent.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarEvent.tsx index 150987cf84..4fccffa6ad 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarEvent.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarEvent.tsx @@ -2,7 +2,10 @@ import IllustrationIconCalendarEventRaw from '@assets/icons/illustration-calenda import { useTheme } from '@emotion/react'; import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IllustrationIconCalendarEventProps = Pick; +export type IllustrationIconCalendarEventProps = Pick< + IconComponentProps, + 'size' +>; export const IllustrationIconCalendarEvent = ( props: IllustrationIconCalendarEventProps, diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarTime.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarTime.tsx index 5b736a25b4..1639acbcda 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarTime.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconCalendarTime.tsx @@ -3,7 +3,10 @@ import { useTheme } from '@emotion/react'; import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IllustrationIconCalendarTimeProps = Pick; +export type IllustrationIconCalendarTimeProps = Pick< + IconComponentProps, + 'size' +>; export const IllustrationIconCalendarTime = ( props: IllustrationIconCalendarTimeProps, diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconCurrency.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconCurrency.tsx index c0c8631c00..682276469a 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconCurrency.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconCurrency.tsx @@ -4,7 +4,7 @@ import { IllustrationIconWrapper } from '@ui/display/icon/components/Illustratio import IllustrationIconCurrencyRaw from '@assets/icons/illustration-currency.svg?react'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IllustrationIconCurrencyProps = Pick; +export type IllustrationIconCurrencyProps = Pick; export const IllustrationIconCurrency = ( props: IllustrationIconCurrencyProps, diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconFile.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconFile.tsx index bf9a31266e..546dd7ef18 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconFile.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconFile.tsx @@ -4,7 +4,7 @@ import { IllustrationIconWrapper } from '@ui/display/icon/components/Illustratio import IllustrationIconFileRaw from '@assets/icons/illustration-file.svg?react'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IllustrationIconFileProps = Pick; +export type IllustrationIconFileProps = Pick; export const IllustrationIconFile = (props: IllustrationIconFileProps) => { const theme = useTheme(); diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconJson.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconJson.tsx index 28c97c9002..d694890dd0 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconJson.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconJson.tsx @@ -4,7 +4,7 @@ import { IllustrationIconWrapper } from '@ui/display/icon/components/Illustratio import IllustrationIconJsonRaw from '@assets/icons/illustration-json.svg?react'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IllustrationIconJsonProps = Pick; +export type IllustrationIconJsonProps = Pick; export const IllustrationIconJson = (props: IllustrationIconJsonProps) => { const theme = useTheme(); diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconLink.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconLink.tsx index 1abdf9e613..e44d8df58c 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconLink.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconLink.tsx @@ -4,7 +4,7 @@ import { IllustrationIconWrapper } from '@ui/display/icon/components/Illustratio import IllustrationIconLinkRaw from '@assets/icons/illustration-link.svg?react'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IllustrationIconLinkProps = Pick; +export type IllustrationIconLinkProps = Pick; export const IllustrationIconLink = (props: IllustrationIconLinkProps) => { const theme = useTheme(); diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconMail.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconMail.tsx index 4312b8847b..a652efc1c3 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconMail.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconMail.tsx @@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react'; import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IllustrationIconMailProps = Pick; +export type IllustrationIconMailProps = Pick; export const IllustrationIconMail = (props: IllustrationIconMailProps) => { const theme = useTheme(); diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconManyToMany.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconManyToMany.tsx index 05c29db357..456a2c5b02 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconManyToMany.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconManyToMany.tsx @@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react'; import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IllustrationIconManyToManyProps = Pick; +export type IllustrationIconManyToManyProps = Pick; export const IllustrationIconManyToMany = ( props: IllustrationIconManyToManyProps, diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconMap.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconMap.tsx index 01d409d845..28e8c1a182 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconMap.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconMap.tsx @@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react'; import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IllustrationIconMapProps = Pick; +export type IllustrationIconMapProps = Pick; export const IllustrationIconMap = (props: IllustrationIconMapProps) => { const theme = useTheme(); diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconNumbers.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconNumbers.tsx index c762a79dfe..65d3fc9a21 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconNumbers.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconNumbers.tsx @@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react'; import { IllustrationIconWrapper } from '@ui/display/icon/components/IllustrationIconWrapper'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IllustrationIconNumbersProps = Pick; +export type IllustrationIconNumbersProps = Pick; export const IllustrationIconNumbers = ( props: IllustrationIconNumbersProps, diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToMany.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToMany.tsx index 2edbe6b0ea..d45fcf4368 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToMany.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToMany.tsx @@ -4,7 +4,7 @@ import { IllustrationIconWrapper } from '@ui/display/icon/components/Illustratio import IllustrationIconOneToManyRaw from '@assets/icons/illustration-one-to-many.svg?react'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IllustrationIconOneToManyProps = Pick; +export type IllustrationIconOneToManyProps = Pick; export const IllustrationIconOneToMany = ( props: IllustrationIconOneToManyProps, diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToOne.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToOne.tsx index 8050d8d415..83474b9a8f 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToOne.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconOneToOne.tsx @@ -4,7 +4,7 @@ import { IllustrationIconWrapper } from '@ui/display/icon/components/Illustratio import IllustrationIconOneToOneRaw from '@assets/icons/illustration-one-to-one.svg?react'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IllustrationIconOneToOneProps = Pick; +export type IllustrationIconOneToOneProps = Pick; export const IllustrationIconOneToOne = ( props: IllustrationIconOneToOneProps, diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconPhone.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconPhone.tsx index 23ce1650fa..ec0d4f205a 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconPhone.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconPhone.tsx @@ -4,7 +4,7 @@ import { IllustrationIconWrapper } from '@ui/display/icon/components/Illustratio import IllustrationIconPhoneRaw from '@assets/icons/illustration-phone.svg?react'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IllustrationIconPhoneProps = Pick; +export type IllustrationIconPhoneProps = Pick; export const IllustrationIconPhone = (props: IllustrationIconPhoneProps) => { const theme = useTheme(); diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconSetting.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconSetting.tsx index b381697183..5471c72ae3 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconSetting.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconSetting.tsx @@ -4,7 +4,7 @@ import { IllustrationIconWrapper } from '@ui/display/icon/components/Illustratio import IllustrationIconSettingRaw from '@assets/icons/illustration-setting.svg?react'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IllustrationIconSettingProps = Pick; +export type IllustrationIconSettingProps = Pick; export const IllustrationIconSetting = ( props: IllustrationIconSettingProps, diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconStar.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconStar.tsx index b2e4012fda..697ff0554d 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconStar.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconStar.tsx @@ -4,7 +4,7 @@ import { IllustrationIconWrapper } from '@ui/display/icon/components/Illustratio import IllustrationIconStarRaw from '@assets/icons/illustration-star.svg?react'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IllustrationIconStarProps = Pick; +export type IllustrationIconStarProps = Pick; export const IllustrationIconStar = (props: IllustrationIconStarProps) => { const theme = useTheme(); diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconTag.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconTag.tsx index 637c87471e..7afbff6055 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconTag.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconTag.tsx @@ -4,7 +4,7 @@ import { IllustrationIconWrapper } from '@ui/display/icon/components/Illustratio import IllustrationIconTagRaw from '@assets/icons/illustration-tag.svg?react'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IllustrationIconTagProps = Pick; +export type IllustrationIconTagProps = Pick; export const IllustrationIconTag = (props: IllustrationIconTagProps) => { const theme = useTheme(); diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconTags.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconTags.tsx index 6e64c7e512..4b25777fbe 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconTags.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconTags.tsx @@ -4,7 +4,7 @@ import { IllustrationIconWrapper } from '@ui/display/icon/components/Illustratio import IllustrationIconTagsRaw from '@assets/icons/illustration-tags.svg?react'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IllustrationIconTagsProps = Pick; +export type IllustrationIconTagsProps = Pick; export const IllustrationIconTags = (props: IllustrationIconTagsProps) => { const theme = useTheme(); diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconText.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconText.tsx index 9edcf16423..a06b8b5fe3 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconText.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconText.tsx @@ -4,7 +4,7 @@ import { IllustrationIconWrapper } from '@ui/display/icon/components/Illustratio import IllustrationIconTextRaw from '@assets/icons/illustration-text.svg?react'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IllustrationIconTextProps = Pick; +export type IllustrationIconTextProps = Pick; export const IllustrationIconText = (props: IllustrationIconTextProps) => { const theme = useTheme(); diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconToggle.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconToggle.tsx index fd503168ae..bded68170f 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconToggle.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconToggle.tsx @@ -4,7 +4,7 @@ import { IllustrationIconWrapper } from '@ui/display/icon/components/Illustratio import IllustrationIconToggleRaw from '@assets/icons/illustration-toggle.svg?react'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IllustrationIconToggleProps = Pick; +export type IllustrationIconToggleProps = Pick; export const IllustrationIconToggle = (props: IllustrationIconToggleProps) => { const theme = useTheme(); diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconUid.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconUid.tsx index d13161d8cd..01b7899919 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconUid.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconUid.tsx @@ -4,7 +4,7 @@ import { IllustrationIconWrapper } from '@ui/display/icon/components/Illustratio import IllustrationIconUidRaw from '@assets/icons/illustration-uid.svg?react'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IllustrationIconUidProps = Pick; +export type IllustrationIconUidProps = Pick; export const IllustrationIconUid = (props: IllustrationIconUidProps) => { const theme = useTheme(); diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconUser.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconUser.tsx index 6286bf25ec..7af58ecc59 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconUser.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconUser.tsx @@ -4,7 +4,7 @@ import { IllustrationIconWrapper } from '@ui/display/icon/components/Illustratio import IllustrationIconUserRaw from '@assets/icons/illustration-user.svg?react'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IllustrationIconUserProps = Pick; +export type IllustrationIconUserProps = Pick; export const IllustrationIconUser = (props: IllustrationIconUserProps) => { const theme = useTheme(); diff --git a/packages/twenty-ui/src/display/icon/providers/IconsProvider.tsx b/packages/twenty-ui/src/display/icon/providers/IconsProvider.tsx index 3b929e6349..037978c336 100644 --- a/packages/twenty-ui/src/display/icon/providers/IconsProvider.tsx +++ b/packages/twenty-ui/src/display/icon/providers/IconsProvider.tsx @@ -3,7 +3,7 @@ import { useSetRecoilState } from 'recoil'; import { iconsState } from '@ui/display/icon/states/iconsState'; -type IconsProviderProps = { +export type IconsProviderProps = { children: JSX.Element; }; diff --git a/packages/twenty-ui/src/display/index.ts b/packages/twenty-ui/src/display/index.ts index 72b56fe730..7757562ddf 100644 --- a/packages/twenty-ui/src/display/index.ts +++ b/packages/twenty-ui/src/display/index.ts @@ -15,7 +15,7 @@ export { invalidAvatarUrlsState } from './avatar/components/states/isInvalidAvat export { AVATAR_PROPERTIES_BY_SIZE } from './avatar/constants/AvatarPropertiesBySize'; export type { AvatarSize } from './avatar/types/AvatarSize'; export type { AvatarType } from './avatar/types/AvatarType'; -export type { BannerVariant } from './banner/components/Banner'; +export type { BannerVariant, BannerProps } from './banner/components/Banner'; export { Banner } from './banner/components/Banner'; export type { SidePanelInformationBannerProps } from './banner/components/SidePanelInformationBanner'; export { SidePanelInformationBanner } from './banner/components/SidePanelInformationBanner'; @@ -30,43 +30,79 @@ export type { ColorSampleProps, } from './color/components/ColorSample'; export { ColorSample } from './color/components/ColorSample'; +export type { CommandBlockProps } from './command-block/components/CommandBlock'; export { CommandBlock } from './command-block/components/CommandBlock'; export type { IconProps } from './icon/components/Icon'; export { Icon } from './icon/components/Icon'; +export type { IconAddressBookProps } from './icon/components/IconAddressBook'; export { IconAddressBook } from './icon/components/IconAddressBook'; +export type { IconChartBarHorizontalProps } from './icon/components/IconChartBarHorizontal'; export { IconChartBarHorizontal } from './icon/components/IconChartBarHorizontal'; +export type { IconGmailProps } from './icon/components/IconGmail'; export { IconGmail } from './icon/components/IconGmail'; +export type { IconGoogleProps } from './icon/components/IconGoogle'; export { IconGoogle } from './icon/components/IconGoogle'; +export type { IconGoogleCalendarProps } from './icon/components/IconGoogleCalendar'; export { IconGoogleCalendar } from './icon/components/IconGoogleCalendar'; +export type { IconLockCustomProps } from './icon/components/IconLock'; export { IconLockCustom } from './icon/components/IconLock'; +export type { IconMicrosoftProps } from './icon/components/IconMicrosoft'; export { IconMicrosoft } from './icon/components/IconMicrosoft'; +export type { IconMicrosoftCalendarProps } from './icon/components/IconMicrosoftCalendar'; export { IconMicrosoftCalendar } from './icon/components/IconMicrosoftCalendar'; +export type { IconMicrosoftOutlookProps } from './icon/components/IconMicrosoftOutlook'; export { IconMicrosoftOutlook } from './icon/components/IconMicrosoftOutlook'; +export type { IconRelationManyToOneProps } from './icon/components/IconRelationManyToOne'; export { IconRelationManyToOne } from './icon/components/IconRelationManyToOne'; +export type { IconTrashXOffProps } from './icon/components/IconTrashXOff'; export { IconTrashXOff } from './icon/components/IconTrashXOff'; +export type { IconTwentyStarProps } from './icon/components/IconTwentyStar'; export { IconTwentyStar } from './icon/components/IconTwentyStar'; +export type { IconTwentyStarFilledProps } from './icon/components/IconTwentyStarFilled'; export { IconTwentyStarFilled } from './icon/components/IconTwentyStarFilled'; +export type { IllustrationIconArrayProps } from './icon/components/IllustrationIconArray'; export { IllustrationIconArray } from './icon/components/IllustrationIconArray'; +export type { IllustrationIconCalendarEventProps } from './icon/components/IllustrationIconCalendarEvent'; export { IllustrationIconCalendarEvent } from './icon/components/IllustrationIconCalendarEvent'; +export type { IllustrationIconCalendarTimeProps } from './icon/components/IllustrationIconCalendarTime'; export { IllustrationIconCalendarTime } from './icon/components/IllustrationIconCalendarTime'; +export type { IllustrationIconCurrencyProps } from './icon/components/IllustrationIconCurrency'; export { IllustrationIconCurrency } from './icon/components/IllustrationIconCurrency'; +export type { IllustrationIconFileProps } from './icon/components/IllustrationIconFile'; export { IllustrationIconFile } from './icon/components/IllustrationIconFile'; +export type { IllustrationIconJsonProps } from './icon/components/IllustrationIconJson'; export { IllustrationIconJson } from './icon/components/IllustrationIconJson'; +export type { IllustrationIconLinkProps } from './icon/components/IllustrationIconLink'; export { IllustrationIconLink } from './icon/components/IllustrationIconLink'; +export type { IllustrationIconMailProps } from './icon/components/IllustrationIconMail'; export { IllustrationIconMail } from './icon/components/IllustrationIconMail'; +export type { IllustrationIconManyToManyProps } from './icon/components/IllustrationIconManyToMany'; export { IllustrationIconManyToMany } from './icon/components/IllustrationIconManyToMany'; +export type { IllustrationIconMapProps } from './icon/components/IllustrationIconMap'; export { IllustrationIconMap } from './icon/components/IllustrationIconMap'; +export type { IllustrationIconNumbersProps } from './icon/components/IllustrationIconNumbers'; export { IllustrationIconNumbers } from './icon/components/IllustrationIconNumbers'; +export type { IllustrationIconOneToManyProps } from './icon/components/IllustrationIconOneToMany'; export { IllustrationIconOneToMany } from './icon/components/IllustrationIconOneToMany'; +export type { IllustrationIconOneToOneProps } from './icon/components/IllustrationIconOneToOne'; export { IllustrationIconOneToOne } from './icon/components/IllustrationIconOneToOne'; +export type { IllustrationIconPhoneProps } from './icon/components/IllustrationIconPhone'; export { IllustrationIconPhone } from './icon/components/IllustrationIconPhone'; +export type { IllustrationIconSettingProps } from './icon/components/IllustrationIconSetting'; export { IllustrationIconSetting } from './icon/components/IllustrationIconSetting'; +export type { IllustrationIconStarProps } from './icon/components/IllustrationIconStar'; export { IllustrationIconStar } from './icon/components/IllustrationIconStar'; +export type { IllustrationIconTagProps } from './icon/components/IllustrationIconTag'; export { IllustrationIconTag } from './icon/components/IllustrationIconTag'; +export type { IllustrationIconTagsProps } from './icon/components/IllustrationIconTags'; export { IllustrationIconTags } from './icon/components/IllustrationIconTags'; +export type { IllustrationIconTextProps } from './icon/components/IllustrationIconText'; export { IllustrationIconText } from './icon/components/IllustrationIconText'; +export type { IllustrationIconToggleProps } from './icon/components/IllustrationIconToggle'; export { IllustrationIconToggle } from './icon/components/IllustrationIconToggle'; +export type { IllustrationIconUidProps } from './icon/components/IllustrationIconUid'; export { IllustrationIconUid } from './icon/components/IllustrationIconUid'; +export type { IllustrationIconUserProps } from './icon/components/IllustrationIconUser'; export { IllustrationIconUser } from './icon/components/IllustrationIconUser'; export { IllustrationIconWrapper } from './icon/components/IllustrationIconWrapper'; export type { TablerIconsProps } from './icon/components/TablerIcons'; @@ -471,6 +507,7 @@ export { IconX, } from './icon/components/TablerIcons'; export { useIcons } from './icon/hooks/useIcons'; +export type { IconsProviderProps } from './icon/providers/IconsProvider'; export { IconsProvider } from './icon/providers/IconsProvider'; export { iconsState } from './icon/states/iconsState'; export type { @@ -479,7 +516,9 @@ export type { } from './icon/types/IconComponent'; export type { InfoAccent, InfoProps } from './info/components/Info'; export { Info } from './info/components/Info'; +export type { StatusProps } from './status/components/Status'; export { Status } from './status/components/Status'; +export type { HorizontalSeparatorProps } from './text/components/HorizontalSeparator'; export { HorizontalSeparator } from './text/components/HorizontalSeparator'; export { SeparatorLineText } from './text/components/SeparatorLineText'; export type { AppTooltipProps } from './tooltip/AppTooltip'; @@ -488,12 +527,17 @@ export { TooltipDelay, AppTooltip, } from './tooltip/AppTooltip'; +export type { OverflowingTextWithTooltipProps } from './tooltip/OverflowingTextWithTooltip'; export { OverflowingTextWithTooltip } from './tooltip/OverflowingTextWithTooltip'; +export type { H1TitleProps } from './typography/components/H1Title'; export { H1TitleFontColor, H1Title } from './typography/components/H1Title'; +export type { H2TitleProps } from './typography/components/H2Title'; export { H2Title } from './typography/components/H2Title'; +export type { H3TitleProps } from './typography/components/H3Title'; export { H3Title } from './typography/components/H3Title'; export type { LabelVariant } from './typography/components/Label'; export { Label } from './typography/components/Label'; +export type { StyledTextProps } from './typography/components/StyledText'; export { StyledTextContent, StyledTextWrapper, diff --git a/packages/twenty-ui/src/display/status/components/Status.tsx b/packages/twenty-ui/src/display/status/components/Status.tsx index 66d41f8627..68c9f2d081 100644 --- a/packages/twenty-ui/src/display/status/components/Status.tsx +++ b/packages/twenty-ui/src/display/status/components/Status.tsx @@ -43,7 +43,7 @@ const StyledContent = styled.span` white-space: nowrap; `; -type StatusProps = { +export type StatusProps = { className?: string; color: ThemeColor; isLoaderVisible?: boolean; diff --git a/packages/twenty-ui/src/display/text/components/HorizontalSeparator.tsx b/packages/twenty-ui/src/display/text/components/HorizontalSeparator.tsx index beb96067c6..3fb87c1abd 100644 --- a/packages/twenty-ui/src/display/text/components/HorizontalSeparator.tsx +++ b/packages/twenty-ui/src/display/text/components/HorizontalSeparator.tsx @@ -2,7 +2,7 @@ import styled from '@emotion/styled'; import { type JSX } from 'react'; import { Label } from '@ui/display'; -type HorizontalSeparatorProps = { +export type HorizontalSeparatorProps = { visible?: boolean; text?: string; noMargin?: boolean; diff --git a/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx b/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx index 520ed7b776..12e7ab4bd9 100644 --- a/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx +++ b/packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx @@ -59,7 +59,7 @@ const StyledPre = styled.pre` white-space: pre-wrap; `; -type OverflowingTextWithTooltipProps = { +export type OverflowingTextWithTooltipProps = { size?: 'large' | 'small'; isTooltipMultiline?: boolean; displayedMaxRows?: number; diff --git a/packages/twenty-ui/src/display/typography/components/H1Title.tsx b/packages/twenty-ui/src/display/typography/components/H1Title.tsx index 8175a644bf..42c75fc9fb 100644 --- a/packages/twenty-ui/src/display/typography/components/H1Title.tsx +++ b/packages/twenty-ui/src/display/typography/components/H1Title.tsx @@ -1,7 +1,7 @@ import { type ReactNode } from 'react'; import styled from '@emotion/styled'; -type H1TitleProps = { +export type H1TitleProps = { title: ReactNode; fontColor?: H1TitleFontColor; className?: string; diff --git a/packages/twenty-ui/src/display/typography/components/H2Title.tsx b/packages/twenty-ui/src/display/typography/components/H2Title.tsx index 022a967e59..6b19abca3c 100644 --- a/packages/twenty-ui/src/display/typography/components/H2Title.tsx +++ b/packages/twenty-ui/src/display/typography/components/H2Title.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { OverflowingTextWithTooltip } from '@ui/display/tooltip/OverflowingTextWithTooltip'; -type H2TitleProps = { +export type H2TitleProps = { title: string; description?: string; adornment?: React.ReactNode; diff --git a/packages/twenty-ui/src/display/typography/components/H3Title.tsx b/packages/twenty-ui/src/display/typography/components/H3Title.tsx index 630a41fcd4..05f665282d 100644 --- a/packages/twenty-ui/src/display/typography/components/H3Title.tsx +++ b/packages/twenty-ui/src/display/typography/components/H3Title.tsx @@ -2,7 +2,7 @@ import styled from '@emotion/styled'; import { OverflowingTextWithTooltip } from '@ui/display/tooltip/OverflowingTextWithTooltip'; import { type ReactNode } from 'react'; -type H3TitleProps = { +export type H3TitleProps = { title: ReactNode; description?: string; className?: string; diff --git a/packages/twenty-ui/src/display/typography/components/StyledText.tsx b/packages/twenty-ui/src/display/typography/components/StyledText.tsx index e6165b91bd..6053886f46 100644 --- a/packages/twenty-ui/src/display/typography/components/StyledText.tsx +++ b/packages/twenty-ui/src/display/typography/components/StyledText.tsx @@ -1,7 +1,7 @@ import { type ReactElement, type ReactNode } from 'react'; import styled from '@emotion/styled'; -type StyledTextProps = { +export type StyledTextProps = { PrefixComponent?: ReactElement; text: ReactNode; color?: string; diff --git a/packages/twenty-ui/src/feedback/index.ts b/packages/twenty-ui/src/feedback/index.ts index dc1e659331..5e3442026a 100644 --- a/packages/twenty-ui/src/feedback/index.ts +++ b/packages/twenty-ui/src/feedback/index.ts @@ -7,7 +7,9 @@ * |___/ */ +export type { LoaderProps } from './loader/components/Loader'; export { Loader } from './loader/components/Loader'; +export type { CircularProgressBarProps } from './progress-bar/components/CircularProgressBar'; export { CircularProgressBar } from './progress-bar/components/CircularProgressBar'; export type { ProgressBarProps, diff --git a/packages/twenty-ui/src/feedback/loader/components/Loader.tsx b/packages/twenty-ui/src/feedback/loader/components/Loader.tsx index 6ebba29bc1..69f8122851 100644 --- a/packages/twenty-ui/src/feedback/loader/components/Loader.tsx +++ b/packages/twenty-ui/src/feedback/loader/components/Loader.tsx @@ -33,7 +33,7 @@ const StyledLoader = styled(motion.div)<{ width: 8px; `; -type LoaderProps = { +export type LoaderProps = { color?: ThemeColor; }; diff --git a/packages/twenty-ui/src/feedback/progress-bar/components/CircularProgressBar.tsx b/packages/twenty-ui/src/feedback/progress-bar/components/CircularProgressBar.tsx index 5324f3027f..b455f62a3f 100644 --- a/packages/twenty-ui/src/feedback/progress-bar/components/CircularProgressBar.tsx +++ b/packages/twenty-ui/src/feedback/progress-bar/components/CircularProgressBar.tsx @@ -1,7 +1,7 @@ import { motion, useAnimation } from 'framer-motion'; import { useEffect, useMemo } from 'react'; -interface CircularProgressBarProps { +export interface CircularProgressBarProps { size?: number; barWidth?: number; barColor?: string; diff --git a/packages/twenty-ui/src/input/button/components/Button/internal/ButtonSoon.tsx b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonSoon.tsx index e9f435af58..1d26dca98b 100644 --- a/packages/twenty-ui/src/input/button/components/Button/internal/ButtonSoon.tsx +++ b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonSoon.tsx @@ -5,7 +5,7 @@ const StyledSoonPill = styled(Pill)` margin-left: auto; `; -type ButtonSoonProps = { +export type ButtonSoonProps = { label?: string; }; diff --git a/packages/twenty-ui/src/input/button/components/ColorPickerButton.tsx b/packages/twenty-ui/src/input/button/components/ColorPickerButton.tsx index d9c97a766a..93fa5fb595 100644 --- a/packages/twenty-ui/src/input/button/components/ColorPickerButton.tsx +++ b/packages/twenty-ui/src/input/button/components/ColorPickerButton.tsx @@ -6,7 +6,7 @@ import { type LightIconButtonProps, } from '@ui/input/button/components/LightIconButton'; -type ColorPickerButtonProps = Pick & +export type ColorPickerButtonProps = Pick & Pick & { isSelected?: boolean; }; diff --git a/packages/twenty-ui/src/input/button/components/MainButton.tsx b/packages/twenty-ui/src/input/button/components/MainButton.tsx index d415d2bd3e..e7d57f8105 100644 --- a/packages/twenty-ui/src/input/button/components/MainButton.tsx +++ b/packages/twenty-ui/src/input/button/components/MainButton.tsx @@ -5,7 +5,7 @@ import React, { type FunctionComponent } from 'react'; export type MainButtonVariant = 'primary' | 'secondary'; -type Props = { +export type Props = { title: string; fullWidth?: boolean; width?: number; @@ -102,7 +102,7 @@ const StyledButton = styled.button< }}; `; -type MainButtonProps = Props & { +export type MainButtonProps = Props & { Icon?: IconComponent | FunctionComponent<{ size: number }>; }; diff --git a/packages/twenty-ui/src/input/button/components/RoundedIconButton.tsx b/packages/twenty-ui/src/input/button/components/RoundedIconButton.tsx index 161b165abe..76eb848cbc 100644 --- a/packages/twenty-ui/src/input/button/components/RoundedIconButton.tsx +++ b/packages/twenty-ui/src/input/button/components/RoundedIconButton.tsx @@ -28,7 +28,7 @@ const StyledIconButton = styled.button<{ size: RoundedIconButtonSize }>` width: ${({ size }) => (size === 'small' ? '20px' : '24px')}; `; -type RoundedIconButtonProps = { +export type RoundedIconButtonProps = { Icon: IconComponent; size?: RoundedIconButtonSize; } & React.ButtonHTMLAttributes; diff --git a/packages/twenty-ui/src/input/button/components/TabButton/TabButton.tsx b/packages/twenty-ui/src/input/button/components/TabButton/TabButton.tsx index 9c2b3d4a5f..a4a551aa3d 100644 --- a/packages/twenty-ui/src/input/button/components/TabButton/TabButton.tsx +++ b/packages/twenty-ui/src/input/button/components/TabButton/TabButton.tsx @@ -4,7 +4,7 @@ import { TabContent } from '@ui/input/button/components/TabButton/internals/comp import { type ReactElement } from 'react'; import { Link } from 'react-router-dom'; -type TabButtonProps = { +export type TabButtonProps = { id: string; active?: boolean; disabled?: boolean; diff --git a/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx b/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx index 803b6ff6f0..1473d13ee3 100644 --- a/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx +++ b/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx @@ -10,7 +10,7 @@ import { isDefined } from 'twenty-shared/utils'; type CodeEditorVariant = 'default' | 'with-header' | 'borderless'; -type CodeEditorProps = Pick< +export type CodeEditorProps = Pick< EditorProps, 'value' | 'language' | 'onMount' | 'onValidate' | 'height' | 'options' > & { diff --git a/packages/twenty-ui/src/input/components/CardPicker.tsx b/packages/twenty-ui/src/input/components/CardPicker.tsx index b5565371b2..6068a6d544 100644 --- a/packages/twenty-ui/src/input/components/CardPicker.tsx +++ b/packages/twenty-ui/src/input/components/CardPicker.tsx @@ -23,7 +23,7 @@ const StyledRadioContainer = styled.div` top: ${({ theme }) => theme.spacing(2)}; `; -type CardPickerProps = { +export type CardPickerProps = { children: React.ReactNode; handleChange?: () => void; checked?: boolean; diff --git a/packages/twenty-ui/src/input/components/Checkbox.tsx b/packages/twenty-ui/src/input/components/Checkbox.tsx index 106876a18b..e3fc5b0bcc 100644 --- a/packages/twenty-ui/src/input/components/Checkbox.tsx +++ b/packages/twenty-ui/src/input/components/Checkbox.tsx @@ -24,7 +24,7 @@ export enum CheckboxAccent { Orange = 'orange', } -type CheckboxProps = { +export type CheckboxProps = { checked: boolean; indeterminate?: boolean; hoverable?: boolean; @@ -38,7 +38,7 @@ type CheckboxProps = { accent?: CheckboxAccent; }; -type InputProps = { +export type InputProps = { checkboxSize: CheckboxSize; variant: CheckboxVariant; accent?: CheckboxAccent; diff --git a/packages/twenty-ui/src/input/components/IconListViewGrip.tsx b/packages/twenty-ui/src/input/components/IconListViewGrip.tsx index c7f4b344bf..f07e310710 100644 --- a/packages/twenty-ui/src/input/components/IconListViewGrip.tsx +++ b/packages/twenty-ui/src/input/components/IconListViewGrip.tsx @@ -1,7 +1,7 @@ import IconListViewGripRaw from '@assets/misc/list-view-grip.svg?react'; import { type IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IconListViewGripProps = Pick; +export type IconListViewGripProps = Pick; export const IconListViewGrip = (props: IconListViewGripProps) => { const width = props.size ?? 8; diff --git a/packages/twenty-ui/src/input/components/RadioGroup.tsx b/packages/twenty-ui/src/input/components/RadioGroup.tsx index c8f2aede5d..c5193f5d42 100644 --- a/packages/twenty-ui/src/input/components/RadioGroup.tsx +++ b/packages/twenty-ui/src/input/components/RadioGroup.tsx @@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react'; import { type RadioProps } from './Radio'; -type RadioGroupProps = React.PropsWithChildren & { +export type RadioGroupProps = React.PropsWithChildren & { value?: string; onChange?: (event: React.ChangeEvent) => void; onValueChange?: (value: string) => void; diff --git a/packages/twenty-ui/src/input/index.ts b/packages/twenty-ui/src/input/index.ts index 0e148b1653..aa4a3da013 100644 --- a/packages/twenty-ui/src/input/index.ts +++ b/packages/twenty-ui/src/input/index.ts @@ -22,6 +22,7 @@ export { Button } from './button/components/Button/Button'; export { baseTransitionTiming } from './button/components/Button/constant'; export type { ButtonGroupProps } from './button/components/ButtonGroup'; export { ButtonGroup } from './button/components/ButtonGroup'; +export type { ColorPickerButtonProps } from './button/components/ColorPickerButton'; export { ColorPickerButton } from './button/components/ColorPickerButton'; export type { FloatingButtonSize, @@ -64,9 +65,16 @@ export type { export { LightIconButton } from './button/components/LightIconButton'; export type { LightIconButtonGroupProps } from './button/components/LightIconButtonGroup'; export { LightIconButtonGroup } from './button/components/LightIconButtonGroup'; -export type { MainButtonVariant } from './button/components/MainButton'; +export type { + MainButtonVariant, + Props, + MainButtonProps, +} from './button/components/MainButton'; export { MainButton } from './button/components/MainButton'; -export type { RoundedIconButtonSize } from './button/components/RoundedIconButton'; +export type { + RoundedIconButtonSize, + RoundedIconButtonProps, +} from './button/components/RoundedIconButton'; export { RoundedIconButton } from './button/components/RoundedIconButton'; export { StyledTabButton, @@ -75,7 +83,9 @@ export { } from './button/components/TabButton/internals/components/StyledTabBase'; export type { TabContentProps } from './button/components/TabButton/internals/components/TabContent'; export { TabContent } from './button/components/TabButton/internals/components/TabContent'; +export type { TabButtonProps } from './button/components/TabButton/TabButton'; export { TabButton } from './button/components/TabButton/TabButton'; +export type { CodeEditorProps } from './code-editor/components/CodeEditor'; export { CodeEditor } from './code-editor/components/CodeEditor'; export type { CoreEditorHeaderProps } from './code-editor/components/CodeEditorHeader'; export { CoreEditorHeader } from './code-editor/components/CodeEditorHeader'; @@ -88,7 +98,9 @@ export type { export { ColorSchemeCard } from './color-scheme/components/ColorSchemeCard'; export type { ColorSchemePickerProps } from './color-scheme/components/ColorSchemePicker'; export { ColorSchemePicker } from './color-scheme/components/ColorSchemePicker'; +export type { CardPickerProps } from './components/CardPicker'; export { CardPicker } from './components/CardPicker'; +export type { CheckboxProps, InputProps } from './components/Checkbox'; export { CheckboxVariant, CheckboxShape, @@ -96,9 +108,11 @@ export { CheckboxAccent, Checkbox, } from './components/Checkbox'; +export type { IconListViewGripProps } from './components/IconListViewGrip'; export { IconListViewGrip } from './components/IconListViewGrip'; export type { RadioProps } from './components/Radio'; export { RadioSize, LabelPosition, Radio } from './components/Radio'; +export type { RadioGroupProps } from './components/RadioGroup'; export { RadioGroup } from './components/RadioGroup'; export type { SearchInputProps } from './components/SearchInput'; export { SearchInput } from './components/SearchInput'; diff --git a/packages/twenty-ui/src/layout/animated-expandable-container/components/AnimatedExpandableContainer.tsx b/packages/twenty-ui/src/layout/animated-expandable-container/components/AnimatedExpandableContainer.tsx index 4f9bc75e39..fb49a75630 100644 --- a/packages/twenty-ui/src/layout/animated-expandable-container/components/AnimatedExpandableContainer.tsx +++ b/packages/twenty-ui/src/layout/animated-expandable-container/components/AnimatedExpandableContainer.tsx @@ -23,7 +23,7 @@ const StyledMotionContainer = styled(motion.div)<{ `} `; -type AnimatedExpandableContainerProps = { +export type AnimatedExpandableContainerProps = { children: ReactNode; isExpanded: boolean; dimension?: AnimationDimension; diff --git a/packages/twenty-ui/src/layout/animated-placeholder/components/AnimatedPlaceholder.tsx b/packages/twenty-ui/src/layout/animated-placeholder/components/AnimatedPlaceholder.tsx index 32343df621..70b06112ca 100644 --- a/packages/twenty-ui/src/layout/animated-placeholder/components/AnimatedPlaceholder.tsx +++ b/packages/twenty-ui/src/layout/animated-placeholder/components/AnimatedPlaceholder.tsx @@ -39,7 +39,7 @@ export type AnimatedPlaceholderType = | keyof typeof BACKGROUND | keyof typeof MOVING_IMAGE; -interface AnimatedPlaceholderProps { +export interface AnimatedPlaceholderProps { type: AnimatedPlaceholderType; } diff --git a/packages/twenty-ui/src/layout/index.ts b/packages/twenty-ui/src/layout/index.ts index 29939a08bf..c6fa46ab0d 100644 --- a/packages/twenty-ui/src/layout/index.ts +++ b/packages/twenty-ui/src/layout/index.ts @@ -7,6 +7,7 @@ * |___/ */ +export type { AnimatedExpandableContainerProps } from './animated-expandable-container/components/AnimatedExpandableContainer'; export { AnimatedExpandableContainer } from './animated-expandable-container/components/AnimatedExpandableContainer'; export type { AnimationDimension } from './animated-expandable-container/types/AnimationDimension'; export type { AnimationDurationObject } from './animated-expandable-container/types/AnimationDurationObject'; @@ -16,7 +17,10 @@ export type { AnimationSize } from './animated-expandable-container/types/Animat export { getCommonStyles } from './animated-expandable-container/utils/getCommonStyles'; export { getExpandableAnimationConfig } from './animated-expandable-container/utils/getExpandableAnimationConfig'; export { getTransitionValues } from './animated-expandable-container/utils/getTransitionValues'; -export type { AnimatedPlaceholderType } from './animated-placeholder/components/AnimatedPlaceholder'; +export type { + AnimatedPlaceholderType, + AnimatedPlaceholderProps, +} from './animated-placeholder/components/AnimatedPlaceholder'; export { AnimatedPlaceholder } from './animated-placeholder/components/AnimatedPlaceholder'; export { AnimatedPlaceholderEmptyContainer, @@ -39,6 +43,7 @@ export { Card } from './card/components/Card'; export { CardContent } from './card/components/CardContent'; export { CardFooter } from './card/components/CardFooter'; export { CardHeader } from './card/components/CardHeader'; +export type { SectionProps } from './section/components/Section'; export { SectionAlignment, SectionFontColor, diff --git a/packages/twenty-ui/src/layout/section/components/Section.tsx b/packages/twenty-ui/src/layout/section/components/Section.tsx index f050288822..23488ac3fa 100644 --- a/packages/twenty-ui/src/layout/section/components/Section.tsx +++ b/packages/twenty-ui/src/layout/section/components/Section.tsx @@ -1,7 +1,7 @@ import { type ReactNode } from 'react'; import styled from '@emotion/styled'; -type SectionProps = { +export type SectionProps = { children: ReactNode; className?: string; alignment?: SectionAlignment; diff --git a/packages/twenty-ui/src/navigation/index.ts b/packages/twenty-ui/src/navigation/index.ts index 3dd9fa5fa6..5a11857174 100644 --- a/packages/twenty-ui/src/navigation/index.ts +++ b/packages/twenty-ui/src/navigation/index.ts @@ -7,13 +7,21 @@ * |___/ */ +export type { AdvancedSettingsToggleProps } from './link/components/AdvancedSettingsToggle'; export { AdvancedSettingsToggle } from './link/components/AdvancedSettingsToggle'; +export type { ClickToActionLinkProps } from './link/components/ClickToActionLink'; export { ClickToActionLink } from './link/components/ClickToActionLink'; +export type { ContactLinkProps } from './link/components/ContactLink'; export { ContactLink } from './link/components/ContactLink'; +export type { GithubVersionLinkProps } from './link/components/GithubVersionLink'; export { GithubVersionLink } from './link/components/GithubVersionLink'; +export type { RawLinkProps } from './link/components/RawLink'; export { RawLink } from './link/components/RawLink'; +export type { RoundedLinkProps } from './link/components/RoundedLink'; export { RoundedLink } from './link/components/RoundedLink'; +export type { SocialLinkProps } from './link/components/SocialLink'; export { LinkType, SocialLink } from './link/components/SocialLink'; +export type { UndecoratedLinkProps } from './link/components/UndecoratedLink'; export { UndecoratedLink } from './link/components/UndecoratedLink'; export { CAL_LINK } from './link/constants/Cal'; export { GITHUB_LINK } from './link/constants/GithubLink'; @@ -31,23 +39,33 @@ export type { MenuItemDraggableProps } from './menu/menu-item/components/MenuIte export { MenuItemDraggable } from './menu/menu-item/components/MenuItemDraggable'; export type { MenuItemHotKeysProps } from './menu/menu-item/components/MenuItemHotKeys'; export { MenuItemHotKeys } from './menu/menu-item/components/MenuItemHotKeys'; +export type { MenuItemMultiSelectProps } from './menu/menu-item/components/MenuItemMultiSelect'; export { MenuItemMultiSelect } from './menu/menu-item/components/MenuItemMultiSelect'; +export type { MenuItemMultiSelectAvatarProps } from './menu/menu-item/components/MenuItemMultiSelectAvatar'; export { MenuItemMultiSelectAvatar } from './menu/menu-item/components/MenuItemMultiSelectAvatar'; +export type { MenuItemMultiSelectTagProps } from './menu/menu-item/components/MenuItemMultiSelectTag'; export { MenuItemMultiSelectTag } from './menu/menu-item/components/MenuItemMultiSelectTag'; export type { MenuItemNavigateProps } from './menu/menu-item/components/MenuItemNavigate'; export { MenuItemNavigate } from './menu/menu-item/components/MenuItemNavigate'; +export type { MenuItemSelectProps } from './menu/menu-item/components/MenuItemSelect'; export { StyledMenuItemSelect, MenuItemSelect, } from './menu/menu-item/components/MenuItemSelect'; +export type { MenuItemSelectAvatarProps } from './menu/menu-item/components/MenuItemSelectAvatar'; export { MenuItemSelectAvatar } from './menu/menu-item/components/MenuItemSelectAvatar'; -export type { ColorLabels } from './menu/menu-item/components/MenuItemSelectColor'; +export type { + ColorLabels, + MenuItemSelectColorProps, +} from './menu/menu-item/components/MenuItemSelectColor'; export { MenuItemSelectColor } from './menu/menu-item/components/MenuItemSelectColor'; +export type { MenuItemSelectTagProps } from './menu/menu-item/components/MenuItemSelectTag'; export { MenuItemSelectTag } from './menu/menu-item/components/MenuItemSelectTag'; export type { MenuItemSuggestionProps } from './menu/menu-item/components/MenuItemSuggestion'; export { MenuItemSuggestion } from './menu/menu-item/components/MenuItemSuggestion'; export type { MenuItemToggleProps } from './menu/menu-item/components/MenuItemToggle'; export { MenuItemToggle } from './menu/menu-item/components/MenuItemToggle'; +export type { MenuItemLeftContentProps } from './menu/menu-item/internals/components/MenuItemLeftContent'; export { MenuItemLeftContent } from './menu/menu-item/internals/components/MenuItemLeftContent'; export type { MenuItemBaseProps } from './menu/menu-item/internals/components/StyledMenuItemBase'; export { @@ -64,6 +82,9 @@ export { StyledRightMenuItemContextualText, } from './menu/menu-item/internals/components/StyledMenuItemBase'; export type { MenuItemAccent } from './menu/menu-item/types/MenuItemAccent'; +export type { NavigationBarProps } from './navigation-bar/components/NavigationBar'; export { NavigationBar } from './navigation-bar/components/NavigationBar'; +export type { NavigationBarItemProps } from './navigation-bar/components/NavigationBarItem'; export { NavigationBarItem } from './navigation-bar/components/NavigationBarItem'; +export type { NotificationCounterProps } from './notification-counter/components/NotificationCounter'; export { NotificationCounter } from './notification-counter/components/NotificationCounter'; diff --git a/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx b/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx index f6d0e8e531..98c5a316cd 100644 --- a/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx +++ b/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx @@ -34,7 +34,7 @@ const StyledToggleContainer = styled.label` width: 100%; `; -type AdvancedSettingsToggleProps = { +export type AdvancedSettingsToggleProps = { isAdvancedModeEnabled: boolean; setIsAdvancedModeEnabled: (enabled: boolean) => void; label?: string; diff --git a/packages/twenty-ui/src/navigation/link/components/ClickToActionLink.tsx b/packages/twenty-ui/src/navigation/link/components/ClickToActionLink.tsx index dd7067c15a..874adfd32b 100644 --- a/packages/twenty-ui/src/navigation/link/components/ClickToActionLink.tsx +++ b/packages/twenty-ui/src/navigation/link/components/ClickToActionLink.tsx @@ -17,7 +17,7 @@ const StyledButtonLink = styled.a` } `; -type ClickToActionLinkProps = React.ComponentProps<'a'> & { +export type ClickToActionLinkProps = React.ComponentProps<'a'> & { className?: string; }; diff --git a/packages/twenty-ui/src/navigation/link/components/ContactLink.tsx b/packages/twenty-ui/src/navigation/link/components/ContactLink.tsx index 647b7ccd05..7978758f9f 100644 --- a/packages/twenty-ui/src/navigation/link/components/ContactLink.tsx +++ b/packages/twenty-ui/src/navigation/link/components/ContactLink.tsx @@ -23,7 +23,7 @@ const StyledClickableLink = withTheme(styled.a<{ } `); -type ContactLinkProps = { +export type ContactLinkProps = { href: string; children?: React.ReactNode; onClick?: (event: React.MouseEvent) => void; diff --git a/packages/twenty-ui/src/navigation/link/components/GithubVersionLink.tsx b/packages/twenty-ui/src/navigation/link/components/GithubVersionLink.tsx index 69d7fc0085..792c1b7ce3 100644 --- a/packages/twenty-ui/src/navigation/link/components/GithubVersionLink.tsx +++ b/packages/twenty-ui/src/navigation/link/components/GithubVersionLink.tsx @@ -3,7 +3,7 @@ import { IconBrandGithub } from '@ui/display'; import { ClickToActionLink } from '@ui/navigation/link/components/ClickToActionLink'; import { GITHUB_LINK } from '../constants/GithubLink'; -interface GithubVersionLinkProps { +export interface GithubVersionLinkProps { version: string; } diff --git a/packages/twenty-ui/src/navigation/link/components/RawLink.tsx b/packages/twenty-ui/src/navigation/link/components/RawLink.tsx index cb1444417a..dc9153415a 100644 --- a/packages/twenty-ui/src/navigation/link/components/RawLink.tsx +++ b/packages/twenty-ui/src/navigation/link/components/RawLink.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Link as ReactLink } from 'react-router-dom'; import styled from '@emotion/styled'; -type RawLinkProps = { +export type RawLinkProps = { className?: string; href: string; children?: React.ReactNode; diff --git a/packages/twenty-ui/src/navigation/link/components/RoundedLink.tsx b/packages/twenty-ui/src/navigation/link/components/RoundedLink.tsx index 25bccd9a83..252bc643f1 100644 --- a/packages/twenty-ui/src/navigation/link/components/RoundedLink.tsx +++ b/packages/twenty-ui/src/navigation/link/components/RoundedLink.tsx @@ -3,7 +3,7 @@ import { isNonEmptyString } from '@sniptt/guards'; import { FONT_COMMON, THEME_COMMON, ThemeContext } from '@ui/theme'; import { type MouseEvent, useContext } from 'react'; -type RoundedLinkProps = { +export type RoundedLinkProps = { href: string; label?: string; onClick?: (event: React.MouseEvent) => void; diff --git a/packages/twenty-ui/src/navigation/link/components/SocialLink.tsx b/packages/twenty-ui/src/navigation/link/components/SocialLink.tsx index 13b69a24db..68edd628f2 100644 --- a/packages/twenty-ui/src/navigation/link/components/SocialLink.tsx +++ b/packages/twenty-ui/src/navigation/link/components/SocialLink.tsx @@ -10,7 +10,7 @@ export enum LinkType { Facebook = 'facebook', } -type SocialLinkProps = { +export type SocialLinkProps = { label: string; href: string; type: LinkType; diff --git a/packages/twenty-ui/src/navigation/link/components/UndecoratedLink.tsx b/packages/twenty-ui/src/navigation/link/components/UndecoratedLink.tsx index f67f8ad7c5..eccb0a0309 100644 --- a/packages/twenty-ui/src/navigation/link/components/UndecoratedLink.tsx +++ b/packages/twenty-ui/src/navigation/link/components/UndecoratedLink.tsx @@ -14,7 +14,7 @@ const StyledUndecoratedLink = styled( width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')}; `; -type UndecoratedLinkProps = { +export type UndecoratedLinkProps = { to: string | number; children: React.ReactNode; replace?: boolean; diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemMultiSelect.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemMultiSelect.tsx index f16937eb47..7812722acb 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemMultiSelect.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemMultiSelect.tsx @@ -16,7 +16,7 @@ const StyledLeftContentWithCheckboxContainer = styled.div` overflow: hidden; `; -type MenuItemMultiSelectProps = { +export type MenuItemMultiSelectProps = { color?: ThemeColor; LeftIcon?: IconComponent; selected: boolean; diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemMultiSelectAvatar.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemMultiSelectAvatar.tsx index c6fc82d040..fa052ba855 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemMultiSelectAvatar.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemMultiSelectAvatar.tsx @@ -28,7 +28,7 @@ const StyledTextContainer = styled.div` overflow: hidden; `; -type MenuItemMultiSelectAvatarProps = { +export type MenuItemMultiSelectAvatarProps = { avatar?: ReactNode; selected: boolean; isKeySelected?: boolean; diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemMultiSelectTag.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemMultiSelectTag.tsx index 0f7e7b6b05..7c91b25e3a 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemMultiSelectTag.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemMultiSelectTag.tsx @@ -7,7 +7,7 @@ import { StyledMenuItemLeftContent, } from '../internals/components/StyledMenuItemBase'; -type MenuItemMultiSelectTagProps = { +export type MenuItemMultiSelectTagProps = { selected: boolean; className?: string; isKeySelected?: boolean; diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelect.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelect.tsx index 524c5ca450..13d69a8ae0 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelect.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelect.tsx @@ -41,7 +41,7 @@ export const StyledMenuItemSelect = styled(StyledMenuItemBase)<{ }} `; -type MenuItemSelectProps = { +export type MenuItemSelectProps = { LeftIcon?: IconComponent | null | undefined; withIconContainer?: boolean; selected: boolean; diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelectAvatar.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelectAvatar.tsx index 36411bb69c..6cb21fd68e 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelectAvatar.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelectAvatar.tsx @@ -12,7 +12,7 @@ import styled from '@emotion/styled'; import { OverflowingTextWithTooltip } from '@ui/display'; import { StyledMenuItemSelect } from './MenuItemSelect'; -type MenuItemSelectAvatarProps = { +export type MenuItemSelectAvatarProps = { avatar?: ReactNode; selected: boolean; text: string; diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelectColor.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelectColor.tsx index 741e980349..1925061ffd 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelectColor.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelectColor.tsx @@ -40,7 +40,7 @@ const DEFAULT_COLOR_LABELS: ColorLabels = { yellow: 'Yellow', }; -type MenuItemSelectColorProps = { +export type MenuItemSelectColorProps = { selected: boolean; className?: string; onClick?: () => void; diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelectTag.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelectTag.tsx index cdc0d3f391..1a4616a927 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelectTag.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelectTag.tsx @@ -10,7 +10,7 @@ import { type IconComponent } from '@ui/display'; import { type ThemeColor } from '@ui/theme'; import { StyledMenuItemSelect } from './MenuItemSelect'; -type MenuItemSelectTagProps = { +export type MenuItemSelectTagProps = { selected?: boolean; focused?: boolean; isKeySelected?: boolean; diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemLeftContent.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemLeftContent.tsx index 1f5a84c154..56e860518b 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemLeftContent.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemLeftContent.tsx @@ -37,7 +37,7 @@ const StyledMenuItemLabelRight = styled(StyledMenuItemLabel)` margin-left: auto; `; -type MenuItemLeftContentProps = { +export type MenuItemLeftContentProps = { className?: string; LeftComponent?: ReactNode; LeftIcon: IconComponent | null | undefined; diff --git a/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBar.tsx b/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBar.tsx index cd53d51f56..f0b063bfc0 100644 --- a/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBar.tsx +++ b/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBar.tsx @@ -11,7 +11,7 @@ const StyledContainer = styled.div` z-index: 1001; `; -type NavigationBarProps = { +export type NavigationBarProps = { activeItemName: string; items: { name: string; Icon: IconComponent; onClick: () => void }[]; }; diff --git a/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBarItem.tsx b/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBarItem.tsx index 7f893f5745..71b525234f 100644 --- a/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBarItem.tsx +++ b/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBarItem.tsx @@ -20,7 +20,7 @@ const StyledIconButton = styled.div<{ isActive?: boolean }>` } `; -type NavigationBarItemProps = { +export type NavigationBarItemProps = { Icon: IconComponent; isActive: boolean; onClick: () => void; diff --git a/packages/twenty-ui/src/navigation/notification-counter/components/NotificationCounter.tsx b/packages/twenty-ui/src/navigation/notification-counter/components/NotificationCounter.tsx index d193adb72a..d98abedc85 100644 --- a/packages/twenty-ui/src/navigation/notification-counter/components/NotificationCounter.tsx +++ b/packages/twenty-ui/src/navigation/notification-counter/components/NotificationCounter.tsx @@ -19,7 +19,7 @@ const StyledNotificationCounter = styled.div<{ variant === 'primary' ? 'white' : theme.font.color.secondary}; `; -type NotificationCounterProps = { +export type NotificationCounterProps = { count: number; variant?: 'primary' | 'secondary'; className?: string;