@headless-adminapp/fluent 1.4.24 → 1.4.26

package/PageEntityView/PageEntityViewDesktopFrameV2.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageEntityViewDesktopFrameV2 = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const fluent_1 = require("../components/fluent");
 // Exprement component
 const PageEntityViewDesktopFrameV2 = ({ header, content, footer }) => {
     return ((0, jsx_runtime_1.jsx)("div", { style: {
@@ -32,7 +33,7 @@ const PageEntityViewDesktopFrameV2 = ({ header, content, footer }) => {
                         display: 'flex',
                         flexDirection: 'column',
                         boxShadow: react_components_1.tokens.shadow2,
-                        borderRadius: react_components_1.tokens.borderRadiusMedium,
+                        borderRadius: fluent_1.extendedTokens.paperBorderRadius,
                         background: react_components_1.tokens.colorNeutralBackground1,
                         overflow: 'hidden',
                     }, children: [(0, jsx_runtime_1.jsx)("div", { style: {

package/PageEntityView/PageEntityViewMobileFrame.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageEntityViewMobileFrame = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const fluent_1 = require("../components/fluent");
 const MobileHeaderRightContainer_1 = require("../DataGrid/MobileHeaderRightContainer");
 const PageEntityViewMobileFrame = ({ header, content, }) => {
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
@@ -29,7 +30,7 @@ const PageEntityViewMobileFrame = ({ header, content, }) => {
                             flex: 1,
                             display: 'flex',
                             flexDirection: 'column',
-                            borderRadius: react_components_1.tokens.borderRadiusMedium,
+                            borderRadius: fluent_1.extendedTokens.paperBorderRadius,
                         }, children: (0, jsx_runtime_1.jsx)("div", { style: {
                                 gap: 8,
                                 display: 'flex',

package/ProgressIndicatorContainer/index.js

@@ -4,6 +4,7 @@ exports.ProgressIndicatorContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const hooks_1 = require("@headless-adminapp/app/progress-indicator/hooks");
+const fluent_1 = require("../components/fluent");
 const ProgressIndicatorContainer = () => {
     const state = (0, hooks_1.useProgressIndicator)();
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [state.overlayVisible && ((0, jsx_runtime_1.jsx)("div", { style: {
@@ -15,7 +16,7 @@ const ProgressIndicatorContainer = () => {
                     zIndex: 1000,
                 } })), (0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: state.visible, onOpenChange: () => {
                     // do nothing
-                }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 320 }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogBody, { children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogContent, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Spinner, {}), !!state.message && ((0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: {
+                }, children: (0, jsx_runtime_1.jsx)(fluent_1.DialogSurface, { style: { maxWidth: 320 }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogBody, { children: (0, jsx_runtime_1.jsxs)(react_components_1.DialogContent, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Spinner, {}), !!state.message && ((0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: {
                                         textAlign: 'center',
                                         display: 'flex',
                                         alignItems: 'center',

package/QuickCreateContainer/FormContainer.js

@@ -12,6 +12,7 @@ const react_1 = require("react");
 const BodyLoading_1 = require("../components/BodyLoading");
 const DrawerFooter_1 = require("../components/DrawerFooter");
 const DrawerHeader_1 = require("../components/DrawerHeader");
+const fluent_1 = require("../components/fluent");
 const PageBroken_1 = require("../components/PageBroken");
 const FormTab_1 = require("../form/layout/FormTab");
 const SectionContainer_1 = require("../PageEntityForm/SectionContainer");
@@ -45,6 +46,6 @@ const FormContainer = ({ onClose, onCreate, }) => {
                     flexDirection: 'column',
                     padding: react_components_1.tokens.spacingVerticalM,
                     // backgroundColor: tokens.colorNeutralBackground2,
-                }, children: formConfig.experience.tabs.map((tab) => ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab, { value: tab.name, columnCount: tab.columnCount, columnWidths: tab.columnWidths, children: tab.tabColumns.map((tabColumn, index) => ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab.Column, { children: tabColumn.sections.map((section) => ((0, jsx_runtime_1.jsx)(SectionContainer_1.SectionContainer, { section: section, readOnly: false, skeleton: dataState.isFetching }, section.name))) }, index))) }, tab.name))) }), (0, jsx_runtime_1.jsxs)(DrawerFooter_1.DrawerFooter, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", onClick: () => save(), children: isCreating ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny", appearance: "inverted", style: { marginRight: 8 } }), "Creating..."] })) : ('Create') }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: onClose, children: "Cancel" })] })] }));
+                }, children: formConfig.experience.tabs.map((tab) => ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab, { value: tab.name, columnCount: tab.columnCount, columnWidths: tab.columnWidths, children: tab.tabColumns.map((tabColumn, index) => ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab.Column, { children: tabColumn.sections.map((section) => ((0, jsx_runtime_1.jsx)(SectionContainer_1.SectionContainer, { section: section, readOnly: false, skeleton: dataState.isFetching }, section.name))) }, index))) }, tab.name))) }), (0, jsx_runtime_1.jsxs)(DrawerFooter_1.DrawerFooter, { children: [(0, jsx_runtime_1.jsx)(fluent_1.Button, { appearance: "primary", onClick: () => save(), children: isCreating ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny", appearance: "inverted", style: { marginRight: 8 } }), "Creating..."] })) : ('Create') }), (0, jsx_runtime_1.jsx)(fluent_1.Button, { onClick: onClose, children: "Cancel" })] })] }));
 };
 exports.FormContainer = FormContainer;

package/components/ComponentErrorBoundary.d.ts

@@ -10,6 +10,6 @@ export declare class ComponentErrorBoundary extends Component<PropsWithChildren<
         hasError: boolean;
     };
     componentDidCatch(error: unknown, errorInfo: unknown): void;
-    render(): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | null | undefined;
+    render(): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 }
 export {};

package/components/DialogLogin.js

@@ -4,6 +4,7 @@ exports.DialogLogin = DialogLogin;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const hooks_1 = require("@headless-adminapp/app/hooks");
+const fluent_1 = require("./fluent");
 const LoginForm_1 = require("./LoginForm");
 function DialogLogin(props) {
     const isMobile = (0, hooks_1.useIsMobile)();
@@ -19,5 +20,5 @@ function DialogLogin(props) {
                 margin: 'auto',
             }, children: (0, jsx_runtime_1.jsx)(LoginForm_1.LoginForm, { onLogin: props.onLogin, logoImageUrl: props.logoImageUrl, afterLoginContent: props.afterLoginContent, beforeLoginContent: props.beforeLoginContent, subtitle: props.subtitle }) }));
     }
-    return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: true, onOpenChange: () => { }, modalType: "non-modal", children: (0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { style: { maxWidth: 360 }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogBody, { children: (0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(LoginForm_1.LoginForm, { onLogin: props.onLogin, logoImageUrl: props.logoImageUrl, afterLoginContent: props.afterLoginContent, beforeLoginContent: props.beforeLoginContent, subtitle: props.subtitle }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: true, onOpenChange: () => { }, modalType: "non-modal", children: (0, jsx_runtime_1.jsx)(fluent_1.DialogSurface, { style: { maxWidth: 360 }, children: (0, jsx_runtime_1.jsx)(react_components_1.DialogBody, { children: (0, jsx_runtime_1.jsx)(react_components_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(LoginForm_1.LoginForm, { onLogin: props.onLogin, logoImageUrl: props.logoImageUrl, afterLoginContent: props.afterLoginContent, beforeLoginContent: props.beforeLoginContent, subtitle: props.subtitle }) }) }) }) }));
 }

package/components/DrawerHeader.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const icons_1 = require("@headless-adminapp/icons");
 const QuickActionItem_1 = require("../App/QuickActionItem");
+const fluent_1 = require("./fluent");
 const DrawerHeader = ({ title, onClose, showCloseButton, rightContent, bottomContent, }) => {
     return ((0, jsx_runtime_1.jsx)(react_components_1.DrawerHeader, { style: { padding: 0 }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                 display: 'flex',
@@ -12,8 +13,8 @@ const DrawerHeader = ({ title, onClose, showCloseButton, rightContent, bottomCon
             }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
                         alignItems: 'center',
-                        height: 50,
-                        minHeight: 50,
+                        height: fluent_1.extendedTokens.appBarHeight,
+                        minHeight: fluent_1.extendedTokens.appBarHeight,
                         background: react_components_1.tokens.colorNeutralBackground3,
                         paddingInline: 8,
                         gap: 8,

package/components/LoginForm.js

@@ -32,6 +32,7 @@ const yup = __importStar(require("yup"));
 const SectionControl_1 = require("../DataForm/SectionControl");
 const PasswordControl_1 = require("../form/controls/PasswordControl");
 const TextControl_1 = require("../form/controls/TextControl");
+const fluent_1 = require("./fluent");
 const validationSchema = yup
     .object()
     .shape({
@@ -78,7 +79,7 @@ function LoginForm(props) {
                         alignItems: 'stretch',
                         justifyContent: 'flex-start',
                         gap: 16,
-                    }, children: [(0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: "username", render: ({ field, fieldState, formState }) => ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: "Username", labelPosition: "top", required: true, isError: !!fieldState.error?.message && formState.isSubmitted, errorMessage: fieldState.error?.message, children: (0, jsx_runtime_1.jsx)(TextControl_1.TextControl, { placeholder: "Username", appearance: "outline", name: field.name, value: field.value, onChange: field.onChange, onBlur: field.onBlur, autoCapitalize: "none", autoCorrect: "off", error: !!fieldState.error?.message && formState.isSubmitted }) })) }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: "password", render: ({ field, fieldState, formState }) => ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: "Password", labelPosition: "top", required: true, isError: !!fieldState.error?.message && formState.isSubmitted, errorMessage: fieldState.error?.message, children: (0, jsx_runtime_1.jsx)(PasswordControl_1.PasswordControl, { placeholder: "Password", name: field.name, appearance: "outline", error: !!fieldState.error?.message && formState.isSubmitted, value: field.value, onChange: field.onChange, onBlur: field.onBlur }) })) }), props.beforeLoginContent, !!form.formState.errors.root && ((0, jsx_runtime_1.jsx)(react_components_1.MessageBar, { intent: "error", children: (0, jsx_runtime_1.jsx)(react_components_1.MessageBarBody, { children: form.formState.errors.root.message }) })), (0, jsx_runtime_1.jsxs)(react_components_1.Button, { appearance: "primary", type: "submit", style: {
+                    }, children: [(0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: "username", render: ({ field, fieldState, formState }) => ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: "Username", labelPosition: "top", required: true, isError: !!fieldState.error?.message && formState.isSubmitted, errorMessage: fieldState.error?.message, children: (0, jsx_runtime_1.jsx)(TextControl_1.TextControl, { placeholder: "Username", appearance: "outline", name: field.name, value: field.value, onChange: field.onChange, onBlur: field.onBlur, autoCapitalize: "none", autoCorrect: "off", error: !!fieldState.error?.message && formState.isSubmitted }) })) }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: "password", render: ({ field, fieldState, formState }) => ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: "Password", labelPosition: "top", required: true, isError: !!fieldState.error?.message && formState.isSubmitted, errorMessage: fieldState.error?.message, children: (0, jsx_runtime_1.jsx)(PasswordControl_1.PasswordControl, { placeholder: "Password", name: field.name, appearance: "outline", error: !!fieldState.error?.message && formState.isSubmitted, value: field.value, onChange: field.onChange, onBlur: field.onBlur }) })) }), props.beforeLoginContent, !!form.formState.errors.root && ((0, jsx_runtime_1.jsx)(react_components_1.MessageBar, { intent: "error", children: (0, jsx_runtime_1.jsx)(react_components_1.MessageBarBody, { children: form.formState.errors.root.message }) })), (0, jsx_runtime_1.jsxs)(fluent_1.Button, { appearance: "primary", type: "submit", style: {
                                 marginTop: 8,
                                 pointerEvents: form.formState.isSubmitting ? 'none' : 'auto',
                             }, children: [form.formState.isSubmitting && ((0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny", appearance: "inverted", style: { marginRight: 4 } })), "Login"] }), props.afterLoginContent] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 80 } })] }) }));

package/components/PageBroken.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageBroken = PageBroken;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const fluent_1 = require("./fluent");
 function PageBroken({ title, message, Icon, }) {
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
@@ -11,5 +12,5 @@ function PageBroken({ title, message, Icon, }) {
             alignItems: 'center',
             justifyContent: 'center',
             gap: 16,
-        }, children: [!!Icon && (0, jsx_runtime_1.jsx)(Icon, { size: 64 }), (0, jsx_runtime_1.jsx)(react_components_1.Title2, { children: title }), !!message && (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: message }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { onClick: () => window.history.back(), children: "Go back" })] }));
+        }, children: [!!Icon && (0, jsx_runtime_1.jsx)(Icon, { size: 64 }), (0, jsx_runtime_1.jsx)(react_components_1.Title2, { children: title }), !!message && (0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: message }), (0, jsx_runtime_1.jsx)(fluent_1.Button, { onClick: () => window.history.back(), children: "Go back" })] }));
 }

package/components/PageLogin.js

@@ -4,6 +4,7 @@ exports.PageLogin = PageLogin;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const hooks_1 = require("@headless-adminapp/app/hooks");
+const fluent_1 = require("./fluent");
 const LoginForm_1 = require("./LoginForm");
 function PageLogin(props) {
     const isMobile = (0, hooks_1.useIsMobile)();
@@ -37,7 +38,7 @@ function PageLogin(props) {
                 maxWidth: 992,
                 width: '100%',
                 overflow: 'hidden',
-                borderRadius: react_components_1.tokens.borderRadiusMedium,
+                borderRadius: fluent_1.extendedTokens.paperBorderRadius,
                 background: react_components_1.tokens.colorNeutralBackground1,
             }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', minHeight: 'calc(-200px + 100vh)' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
                             display: 'flex',

package/components/fluent/Button.d.ts

@@ -0,0 +1,4 @@
+import { ButtonProps, ForwardRefComponent } from '@fluentui/react-components';
+type ExtendedButtonProps = ButtonProps;
+export declare const Button: ForwardRefComponent<ExtendedButtonProps>;
+export {};

package/components/fluent/Button.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const tokens_1 = require("./tokens");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        fontWeight: react_components_1.tokens.fontWeightRegular,
+        borderRadius: tokens_1.extendedTokens.buttonBorderRadius,
+    },
+    small: {
+        minHeight: tokens_1.extendedTokens.buttonMinHeightS,
+        '&[data-icon-only="true"]': {
+            minWidth: tokens_1.extendedTokens.buttonMinHeightS,
+            maxWidth: tokens_1.extendedTokens.buttonMinHeightS,
+        },
+    },
+    medium: {
+        minHeight: tokens_1.extendedTokens.buttonMinHeightM,
+        '&[data-icon-only="true"]': {
+            minWidth: tokens_1.extendedTokens.buttonMinHeightM,
+            maxWidth: tokens_1.extendedTokens.buttonMinHeightM,
+        },
+    },
+    large: {
+        minHeight: tokens_1.extendedTokens.buttonMinHeightL,
+        '&[data-icon-only="true"]': {
+            minWidth: tokens_1.extendedTokens.buttonMinHeightL,
+            maxWidth: tokens_1.extendedTokens.buttonMinHeightL,
+        },
+    },
+});
+exports.Button = (0, react_1.forwardRef)(function Button({ className, ...rest }, ref) {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Button, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root, styles[rest.size || 'medium']), "data-icon-only": !rest.children && !!rest.icon ? 'true' : undefined, ref: ref }));
+});

package/components/fluent/Checkbox.d.ts

@@ -0,0 +1,4 @@
+import { CheckboxProps, ForwardRefComponent } from '@fluentui/react-components';
+type ExtendedCheckboxProps = CheckboxProps;
+export declare const Checkbox: ForwardRefComponent<ExtendedCheckboxProps>;
+export {};

package/components/fluent/Checkbox.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const tokens_1 = require("./tokens");
+const useStyles = (0, react_components_1.makeStyles)({
+    indicator: {
+        borderRadius: tokens_1.extendedTokens.checkboxBorderRadius,
+    },
+});
+exports.Checkbox = (0, react_1.forwardRef)(function Checkbox({ ...rest }, ref) {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Checkbox, { ...rest, ref: ref, indicator: {
+            className: styles.indicator,
+        } }));
+});

package/components/fluent/Combobox.d.ts

@@ -0,0 +1,4 @@
+import { ComboboxProps, ForwardRefComponent } from '@fluentui/react-components';
+type ExtendedComboboxProps = ComboboxProps;
+export declare const Combobox: ForwardRefComponent<ExtendedComboboxProps>;
+export {};

package/components/fluent/Combobox.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Combobox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const tokens_1 = require("./tokens");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        borderRadius: tokens_1.extendedTokens.controlBorderRadius,
+        minHeight: tokens_1.extendedTokens.controlMinHeightM,
+    },
+    listbox: {
+        borderRadius: tokens_1.extendedTokens.paperBorderRadius,
+    },
+});
+exports.Combobox = (0, react_1.forwardRef)(function Combobox({ className, ...rest }, ref) {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Combobox, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root), ref: ref, listbox: {
+            className: styles.listbox,
+        } }));
+});

package/components/fluent/DialogSurface.d.ts

@@ -0,0 +1,4 @@
+import { DialogSurfaceProps, ForwardRefComponent } from '@fluentui/react-components';
+type ExtendedDialogSurfaceProps = DialogSurfaceProps;
+export declare const DialogSurface: ForwardRefComponent<ExtendedDialogSurfaceProps>;
+export {};

package/components/fluent/DialogSurface.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogSurface = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const tokens_1 = require("./tokens");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        borderRadius: tokens_1.extendedTokens.dialogBorderRadius,
+    },
+});
+exports.DialogSurface = (0, react_1.forwardRef)(function DialogSurface({ className, ...rest }, ref) {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsx)(react_components_1.DialogSurface, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root), ref: ref }));
+});

package/components/fluent/Dropdown.d.ts

@@ -0,0 +1,4 @@
+import { DropdownProps, ForwardRefComponent } from '@fluentui/react-components';
+type ExtendedDropdownProps = DropdownProps;
+export declare const Dropdown: ForwardRefComponent<ExtendedDropdownProps>;
+export {};

package/components/fluent/Dropdown.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const tokens_1 = require("./tokens");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        borderRadius: tokens_1.extendedTokens.controlBorderRadius,
+        minHeight: tokens_1.extendedTokens.controlMinHeightM,
+        '&::after': {
+            borderBottomLeftRadius: tokens_1.extendedTokens.controlBorderRadius,
+            borderBottomRightRadius: tokens_1.extendedTokens.controlBorderRadius,
+            left: tokens_1.extendedTokens.controlBottomBorderMargin,
+            right: tokens_1.extendedTokens.controlBottomBorderMargin,
+        },
+    },
+    listbox: {
+        borderRadius: tokens_1.extendedTokens.paperBorderRadius,
+    },
+    outlined: {
+        borderBottomColor: react_components_1.tokens.colorNeutralStroke1,
+        '&:hover': {
+            borderBottomColor: react_components_1.tokens.colorNeutralStroke1Hover,
+        },
+        '&:active': {
+            borderBottomColor: react_components_1.tokens.colorNeutralStroke1Pressed,
+        },
+        '&:focus-within': {
+            borderBottomColor: react_components_1.tokens.colorNeutralStroke1Pressed,
+        },
+    },
+});
+exports.Dropdown = (0, react_1.forwardRef)(function Dropdown({ className, ...rest }, ref) {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Dropdown, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root, (rest.appearance === 'outline' || !rest.appearance) && styles.outlined), ref: ref, 
+        // open
+        // onOpenChange={() => {}}
+        listbox: {
+            className: styles.listbox,
+        } }));
+});

package/components/fluent/FluentProvider.d.ts

@@ -0,0 +1,12 @@
+import { FluentProviderProps, ForwardRefComponent } from '@fluentui/react-components';
+export interface ExtendedThemeProps {
+    corners: 'soft' | 'rounded' | 'square' | 'circular';
+    density: 'compact' | 'comfortable';
+}
+export type ExtendedFluentProviderProps = FluentProviderProps & Partial<ExtendedThemeProps>;
+export declare const FluentProvider: ForwardRefComponent<ExtendedFluentProviderProps>;
+export declare const ExtendedThemeContext: import("react").Context<ExtendedThemeProps | undefined>;
+export declare function useExtendedThemeContext(): {
+    corners: "rounded" | "circular" | "square" | "soft";
+    density: "compact" | "comfortable";
+};

package/components/fluent/FluentProvider.js

@@ -0,0 +1,179 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExtendedThemeContext = exports.FluentProvider = void 0;
+exports.useExtendedThemeContext = useExtendedThemeContext;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const defaultCorners = 'rounded';
+const defaultDensity = 'compact';
+exports.FluentProvider = (0, react_1.forwardRef)(function FluentProvider({ corners = defaultCorners, density = defaultDensity, children, theme, ...rest }, ref) {
+    corners ??= defaultCorners;
+    density ??= defaultDensity;
+    const contextValue = (0, react_1.useMemo)(() => ({ corners, density }), [corners, density]);
+    const extendedTheme = (0, react_1.useMemo)(() => {
+        let buttonBorderRadius;
+        let controlBorderRadius;
+        let paperBorderRadius;
+        let checkboxBorderRadius;
+        let controlBottomBorderMargin;
+        let dialogBorderRadius;
+        switch (corners) {
+            case 'soft':
+                buttonBorderRadius = '4px';
+                controlBorderRadius = '4px';
+                paperBorderRadius = '4px';
+                checkboxBorderRadius = '2px';
+                controlBottomBorderMargin = '-1px';
+                dialogBorderRadius = '8px';
+                break;
+            case 'rounded':
+                buttonBorderRadius = '8px';
+                controlBorderRadius = '8px';
+                paperBorderRadius = '8px';
+                checkboxBorderRadius = '4px';
+                controlBottomBorderMargin = '1px';
+                dialogBorderRadius = '12px';
+                break;
+            case 'square':
+                buttonBorderRadius = '0px';
+                controlBorderRadius = '0px';
+                paperBorderRadius = '0px';
+                checkboxBorderRadius = '0px';
+                controlBottomBorderMargin = '0px';
+                dialogBorderRadius = '0px';
+                break;
+            case 'circular':
+                buttonBorderRadius = '16px';
+                controlBorderRadius = '16px';
+                paperBorderRadius = '20px';
+                checkboxBorderRadius = '8px';
+                controlBottomBorderMargin = '8px';
+                dialogBorderRadius = '20px';
+                break;
+        }
+        let buttonMinWidthS = '64px';
+        let buttonMinWidthM = '96px';
+        let buttonMinWidthL = '96px';
+        let buttonMinHeightS = '24px';
+        let buttonMinHeightM = '32px';
+        let buttonMinHeightL = '40px';
+        let controlMinHeightS = '24px';
+        let controlMinHeightM = '32px';
+        let controlMinHeightL = '40px';
+        let menuItemPaddingVertical = '6px';
+        let optionPaddingVertical = '6px';
+        let appBarHeight = '48px';
+        let navItempaddingVertical = '10px';
+        if (density === 'comfortable') {
+            buttonMinWidthS = '72px';
+            buttonMinWidthM = '112px';
+            buttonMinWidthL = '112px';
+            buttonMinHeightS = '32px';
+            buttonMinHeightM = '40px';
+            buttonMinHeightL = '48px';
+            controlMinHeightS = '32px';
+            controlMinHeightM = '40px';
+            controlMinHeightL = '48px';
+            menuItemPaddingVertical = '9px';
+            optionPaddingVertical = '9px';
+            appBarHeight = '64px';
+            navItempaddingVertical = '16px';
+        }
+        let fontSizeBase100 = '10px';
+        let fontSizeBase200 = '12px';
+        let fontSizeBase300 = '14px';
+        let fontSizeBase400 = '16px';
+        let fontSizeBase500 = '20px';
+        let fontSizeBase600 = '24px';
+        let fontSizeHero700 = '28px';
+        let fontSizeHero800 = '32px';
+        let fontSizeHero900 = '40px';
+        let fontSizeHero1000 = '68px';
+        let lineHeightBase100 = '14px';
+        let lineHeightBase200 = '16px';
+        let lineHeightBase300 = '20px';
+        let lineHeightBase400 = '22px';
+        let lineHeightBase500 = '28px';
+        let lineHeightBase600 = '32px';
+        let lineHeightHero700 = '36px';
+        let lineHeightHero800 = '40px';
+        let lineHeightHero900 = '52px';
+        let lineHeightHero1000 = '92px';
+        if (density === 'comfortable') {
+            fontSizeBase100 = '12px';
+            fontSizeBase200 = '14px';
+            fontSizeBase300 = '16px';
+            fontSizeBase400 = '18px';
+            fontSizeBase500 = '22px';
+            fontSizeBase600 = '26px';
+            fontSizeHero700 = '30px';
+            fontSizeHero800 = '34px';
+            fontSizeHero900 = '42px';
+            fontSizeHero1000 = '72px';
+            lineHeightBase100 = '16px';
+            lineHeightBase200 = '18px';
+            lineHeightBase300 = '22px';
+            lineHeightBase400 = '24px';
+            lineHeightBase500 = '30px';
+            lineHeightBase600 = '34px';
+            lineHeightHero700 = '38px';
+            lineHeightHero800 = '42px';
+            lineHeightHero900 = '54px';
+            lineHeightHero1000 = '94px';
+        }
+        return {
+            ...theme,
+            buttonBorderRadius,
+            controlBorderRadius,
+            paperBorderRadius,
+            checkboxBorderRadius,
+            controlBottomBorderMargin,
+            dialogBorderRadius,
+            buttonMinHeightS,
+            buttonMinHeightM,
+            buttonMinHeightL,
+            buttonMinWidthS,
+            buttonMinWidthM,
+            buttonMinWidthL,
+            controlMinHeightS,
+            controlMinHeightM,
+            controlMinHeightL,
+            menuItemPaddingVertical,
+            optionPaddingVertical,
+            navItempaddingVertical,
+            appBarHeight,
+            fontSizeBase100,
+            fontSizeBase200,
+            fontSizeBase300,
+            fontSizeBase400,
+            fontSizeBase500,
+            fontSizeBase600,
+            fontSizeHero700,
+            fontSizeHero800,
+            fontSizeHero900,
+            fontSizeHero1000,
+            lineHeightBase100,
+            lineHeightBase200,
+            lineHeightBase300,
+            lineHeightBase400,
+            lineHeightBase500,
+            lineHeightBase600,
+            lineHeightHero700,
+            lineHeightHero800,
+            lineHeightHero900,
+            lineHeightHero1000,
+        };
+    }, [corners, density, theme]);
+    return ((0, jsx_runtime_1.jsx)(react_components_1.FluentProvider, { ...rest, theme: extendedTheme, ref: ref, children: (0, jsx_runtime_1.jsx)(exports.ExtendedThemeContext.Provider, { value: contextValue, children: children }) }));
+});
+exports.ExtendedThemeContext = (0, react_1.createContext)(undefined);
+function useExtendedThemeContext() {
+    const value = (0, react_1.useContext)(exports.ExtendedThemeContext);
+    return (0, react_1.useMemo)(() => {
+        return {
+            corners: value?.corners ?? defaultCorners,
+            density: value?.density ?? defaultDensity,
+        };
+    }, [value]);
+}

package/components/fluent/Input.d.ts

@@ -0,0 +1,4 @@
+import { ForwardRefComponent, InputProps } from '@fluentui/react-components';
+type ExtendedInputProps = InputProps;
+export declare const Input: ForwardRefComponent<ExtendedInputProps>;
+export {};

package/components/fluent/Input.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const tokens_1 = require("./tokens");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        borderRadius: tokens_1.extendedTokens.controlBorderRadius,
+        minHeight: tokens_1.extendedTokens.controlMinHeightM,
+        '&::after': {
+            borderBottomLeftRadius: tokens_1.extendedTokens.controlBorderRadius,
+            borderBottomRightRadius: tokens_1.extendedTokens.controlBorderRadius,
+            left: tokens_1.extendedTokens.controlBottomBorderMargin,
+            right: tokens_1.extendedTokens.controlBottomBorderMargin,
+        },
+    },
+    readonly: {
+        '&::after': {
+            borderBottomColor: react_components_1.tokens.colorNeutralStrokeDisabled,
+        },
+        '&:focus-within:active::after': {
+            borderBottomColor: react_components_1.tokens.colorNeutralStrokeDisabled,
+        },
+    },
+    outlined: {
+        borderBottomColor: react_components_1.tokens.colorNeutralStroke1,
+        '&:hover': {
+            borderBottomColor: react_components_1.tokens.colorNeutralStroke1Hover,
+        },
+        '&:active': {
+            borderBottomColor: react_components_1.tokens.colorNeutralStroke1Pressed,
+        },
+        '&:focus-within': {
+            borderBottomColor: react_components_1.tokens.colorNeutralStroke1Pressed,
+        },
+    },
+});
+exports.Input = (0, react_1.forwardRef)(function Input({ className, ...rest }, ref) {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root, rest.readOnly && styles.readonly, (rest.appearance === 'outline' || !rest.appearance) && styles.outlined), ref: ref }));
+});

package/components/fluent/MenuItem.d.ts

@@ -0,0 +1,4 @@
+import { ForwardRefComponent, MenuItemProps } from '@fluentui/react-components';
+type ExtendedMenuItemProps = MenuItemProps;
+export declare const MenuItem: ForwardRefComponent<ExtendedMenuItemProps>;
+export {};

package/components/fluent/MenuItem.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const tokens_1 = require("./tokens");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        borderRadius: tokens_1.extendedTokens.buttonBorderRadius,
+        paddingBlock: tokens_1.extendedTokens.menuItemPaddingVertical,
+    },
+});
+exports.MenuItem = (0, react_1.forwardRef)(function MenuItem({ className, ...rest }, ref) {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { ...rest, className: (0, react_components_1.mergeClasses)(className, styles.root), ref: ref }));
+});

package/components/fluent/MenuPopover.d.ts

@@ -0,0 +1,4 @@
+import { ForwardRefComponent, MenuPopoverProps } from '@fluentui/react-components';
+type ExtendedMenuPopoverProps = MenuPopoverProps;
+export declare const MenuPopover: ForwardRefComponent<ExtendedMenuPopoverProps>;
+export {};