@manuscripts/style-guide 3.4.0 → 3.4.2

package/dist/es/components/TextField.js

@@ -1,33 +1,75 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field } from 'formik';
 import styled, { css } from 'styled-components';
 export const commonStyles = css `
   border: 1px solid
     ${(props) => props.error
     ? props.theme.colors.border.error
     : props.theme.colors.border.field.default};
-  border-radius: ${(props) => props.theme.grid.radius.small};
+  border-radius: 3px;
   box-sizing: border-box;
   font: ${(props) => props.theme.font.weight.normal}
     ${(props) => props.theme.font.size.medium} / 1
     ${(props) => props.theme.font.family.sans};
+  line-height: ${(props) => props.theme.font.lineHeight.large};
   outline: none;
-  padding: 10px ${(props) => props.theme.grid.unit * 4}px;
+  padding: ${(props) => {
+    if (props.variant === 'small') {
+        return '0 12px';
+    }
+    if (props.variant === 'large') {
+        return '4px 16px';
+    }
+    return '0 12px';
+}};
+  min-height: ${(props) => {
+    if (props.variant === 'small') {
+        return '32px';
+    }
+    if (props.variant === 'large') {
+        return '40px';
+    }
+    return '40px';
+}};
   position: relative;
   width: 100%;
-  ${(props) => props.error && 'z-index: 2'};
+  background-color: #fff;
+  color: ${(props) => props.theme.colors.text.primary};
+
+  &::placeholder {
+    color: ${(props) => props.theme.colors.text.secondary};
+    opacity: 1;
+    font-family: ${(props) => props.theme.font.family.sans};
+    font-size: ${(props) => props.theme.font.size.medium};
+    font-style: italic;
+    font-weight: ${(props) => props.theme.font.weight.normal};
+    line-height: ${(props) => props.theme.font.lineHeight.large};
+  }
 
-  &:focus {
-    border-color: ${(props) => props.theme.colors.border.field.hover};
-    background-color: ${(props) => props.theme.colors.background.fifth};
+  &:hover:not(:disabled) {
+    background-color: #f2fbfc;
   }
 
-  &:hover {
-    background-color: ${(props) => props.theme.colors.background.fifth};
+  &:focus:not(:disabled) {
+    border: 2px solid
+      ${(props) => props.error
+    ? props.theme.colors.border.error
+    : props.theme.colors.brand.default};
+    background-color: #f2fbfc;
+
+    &::placeholder {
+      color: #c9c9c9;
+    }
   }
 
-  &:invalid {
-    box-shadow: none;
+  &:disabled {
+    background-color: #f5f5f5;
+    border-color: #e4e4e4;
+    color: #b3b3b3;
+    cursor: not-allowed;
   }
+
+  ${(props) => props.error && 'z-index: 2'};
 `;
 export const TextField = styled.input `
   display: block;
@@ -37,6 +79,10 @@ export const TextArea = styled.textarea `
   ${commonStyles}
   max-width: 100%;
 `;
+export const YearInput = styled.input `
+  ${commonStyles}
+`;
+export const YearField = styled(Field).attrs({ as: YearInput }) ``;
 export const TextFieldGroup = styled.div `
   & ${TextField}:first-of-type {
     margin-top: ${(props) => props.theme.grid.unit}px;

package/dist/es/components/ToggleSwitch.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+const Track = styled.button `
+  position: relative;
+  width: 30px;
+  height: 16px;
+  border-radius: 999px;
+  border: 1px solid
+    ${(props) => props.checked ? '#0d79d0' : props.theme.colors.text.secondary};
+  background: ${(props) => props.checked ? '#0d79d0' : props.theme.colors.text.secondary};
+  padding: 0;
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+  outline: none;
+  flex-shrink: 0;
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px #0d79d04d;
+  }
+
+  &:disabled {
+    background: #c9c9c9;
+    border-color: #c9c9c9;
+  }
+`;
+const Thumb = styled.span `
+  position: absolute;
+  top: 0;
+  left: ${(props) => (props.checked ? '14px' : '0px')};
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  transition: left 120ms ease;
+
+  ${(props) => props.disabled &&
+    `
+    background: #fdfdfd;
+    box-shadow: none;
+  `}
+`;
+const LabelText = styled.span `
+  color: ${(props) => props.disabled ? '#b3b3b3' : props.theme.colors.text.primary};
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.medium} / 1
+    ${(props) => props.theme.font.family.sans};
+  line-height: 20px;
+`;
+const Container = styled.label `
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  flex-direction: ${(props) => props.labelPosition === 'left' ? 'row' : 'row-reverse'};
+`;
+export const ToggleSwitch = ({ checked, disabled, onChange, label, id, labelPosition = 'left', }) => {
+    return (_jsxs(Container, { labelPosition: labelPosition, children: [label && _jsx(LabelText, { disabled: disabled, children: label }), _jsx(Track, { id: id, type: "button", role: "switch", "aria-checked": checked, "aria-label": label, checked: checked, disabled: disabled, onClick: () => !disabled && onChange(!checked), children: _jsx(Thumb, { checked: checked, disabled: disabled }) })] }));
+};

package/dist/es/hooks/use-menus.js

@@ -28,6 +28,7 @@ const getSubmenuState = (specs, pointer, position) => {
         const current = [...position, index];
         return {
             ...spec,
+            position: current,
             submenu: spec.submenu && getSubmenuState(spec.submenu, pointer, current),
             isOpen: isPart(pointer, current),
         };
@@ -38,6 +39,7 @@ const getMenuState = (specs, pointer) => {
         const position = [index];
         return {
             ...spec,
+            position,
             submenu: spec.submenu && getSubmenuState(spec.submenu, pointer, position),
             isOpen: isPart(pointer, position),
         };
@@ -86,13 +88,13 @@ export const useMenus = (menus) => {
             document.removeEventListener('click', handleClickOutside);
         };
     }, []);
-    const closeAll = useCallback(() => {
-        setPointer(initialPointer);
+    const close = useCallback((depth) => {
+        setPointer(depth === undefined ? initialPointer : transformPointer(depth, -1));
     }, []);
     return {
         menus: state,
         handleClick,
-        closeAll,
+        close,
         ref,
     };
 };

package/dist/es/index.js

@@ -34,6 +34,7 @@ export * from './components/TextField';
 export * from './components/TextFieldContainer';
 export * from './components/TextFieldError';
 export * from './components/TextFieldGroupContainer';
+export * from './components/ToggleSwitch';
 export { ToggleHeader, ToggleIcon } from './components/ToggleHeader';
 export * from './components/Tooltip';
 export * from './components/icons';

package/dist/types/components/Form.d.ts

@@ -23,3 +23,18 @@ export interface FormErrors {
 export interface ErrorProps {
     error?: string | null | Record<string, unknown>;
 }
+export declare const FormContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const FormField: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const FormRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    direction?: "row" | "column";
+    justify?: string;
+    align?: string;
+}, never>;
+export declare const FormLabel: import("styled-components").StyledComponent<"legend", import("styled-components").DefaultTheme, {}, never>;
+export declare const FormActionsBar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const FormTitle: import("styled-components").StyledComponent<"h2", import("styled-components").DefaultTheme, {}, never>;
+export declare const FormSubtitle: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
+export declare const LabelText: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const InputHelperText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const InputErrorText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

package/dist/types/components/Menus/Menus.d.ts

@@ -19,7 +19,7 @@ interface MenusProps {
     menus: Menu[];
     innerRef: Ref<HTMLDivElement>;
     handleClick: (position: number[]) => void;
-    closeAll: () => void;
+    close: (depth?: number) => void;
 }
 export declare const Menus: React.FC<MenusProps>;
 export {};

package/dist/types/components/Menus/Submenu.d.ts

@@ -23,7 +23,7 @@ export declare const NestedSubmenusContainer: import("styled-components").Styled
 export interface SubmenuProps {
     menu: Menu | MenuSeparator;
     handleClick: (position: number[]) => void;
-    closeAll: () => void;
+    close: (depth?: number) => void;
 }
 export declare const SubmenuLabel: React.FC<SubmenuProps>;
 export declare const Submenu: React.FC<SubmenuProps>;

package/dist/types/components/SelectField.d.ts

@@ -22,6 +22,9 @@ export type OptionType = {
 interface Props {
     id?: string;
     options: OptionType[];
+    error?: boolean;
+    variant?: 'small' | 'large';
+    isDisabled?: boolean;
 }
-export declare const SelectField: React.FC<Props & FieldProps>;
+export declare const SelectField: React.FC<Props & Partial<FieldProps>>;
 export {};

package/dist/types/components/StyledModal.d.ts

@@ -44,6 +44,10 @@ export declare const ModalSidebarHeader: import("styled-components").StyledCompo
 export declare const ModalSidebarTitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ModelContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ScrollableModalContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ModalCardBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    width?: number | string;
+}, never>;
+export declare const ModalTitle: import("styled-components").StyledComponent<"h2", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledModal: import("styled-components").StyledComponent<React.FC<ReactModal.Props & ThemeProps<ReactModal> & Props>, import("styled-components").DefaultTheme, {
     closeTimeoutMS: 800;
     overlayClassName: {

package/dist/types/components/TextField.d.ts

@@ -13,11 +13,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { Field } from 'formik';
 import React from 'react';
-import { ErrorProps } from './Form';
-export declare const commonStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<ErrorProps, import("styled-components").DefaultTheme>>;
-export declare const TextField: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, ErrorProps, never>;
-export declare const TextArea: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, ErrorProps, never>;
+export interface BaseTextFieldProps {
+    error?: boolean | string;
+    variant?: 'small' | 'large';
+}
+export interface TextFieldProps extends React.InputHTMLAttributes<HTMLInputElement>, BaseTextFieldProps {
+}
+export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, BaseTextFieldProps {
+}
+export declare const commonStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<BaseTextFieldProps, import("styled-components").DefaultTheme>>;
+export declare const TextField: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, TextFieldProps, never>;
+export declare const TextArea: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, TextAreaProps, never>;
+export declare const YearInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, TextFieldProps, never>;
+export declare const YearField: import("styled-components").StyledComponent<typeof Field, import("styled-components").DefaultTheme, {
+    as: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, TextFieldProps, never>;
+}, "as">;
 export declare const TextFieldGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const TextFieldLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
 export declare const TextFieldWrapper: React.FC<{

package/dist/types/components/ToggleSwitch.d.ts

@@ -0,0 +1,25 @@
+/*!
+ * © 2026 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+export interface ToggleSwitchProps {
+    checked: boolean;
+    disabled?: boolean;
+    onChange: (checked: boolean) => void;
+    label?: string;
+    id?: string;
+    labelPosition?: 'left' | 'right';
+}
+export declare const ToggleSwitch: React.FC<ToggleSwitchProps>;

package/dist/types/hooks/use-menus.d.ts

@@ -2,6 +2,6 @@ import { Menu, MenuSpec } from '../lib/menus';
 export declare const useMenus: (menus: MenuSpec[]) => {
     menus: Menu[];
     handleClick: (indices: number[]) => void;
-    closeAll: () => void;
+    close: (depth?: number) => void;
     ref: import("react").RefObject<HTMLDivElement | null>;
 };

package/dist/types/index.d.ts

@@ -35,6 +35,7 @@ export * from './components/TextField';
 export * from './components/TextFieldContainer';
 export * from './components/TextFieldError';
 export * from './components/TextFieldGroupContainer';
+export * from './components/ToggleSwitch';
 export { ToggleHeader, ToggleIcon } from './components/ToggleHeader';
 export * from './components/Tooltip';
 export * from './components/icons';

package/dist/types/lib/menus.d.ts

@@ -21,7 +21,7 @@ export interface MenuShortcut {
 export interface MenuComponentProps {
     menu: Menu;
     handleClick: (position: number[]) => void;
-    closeAll: () => void;
+    close: (depth?: number) => void;
 }
 export interface MenuSpec {
     id: string;
@@ -38,6 +38,7 @@ export interface MenuSpec {
 export interface Menu extends MenuSpec {
     isOpen: boolean;
     submenu?: (Menu | MenuSeparator)[];
+    position?: number[];
 }
 export type MenuSeparator = {
     role: 'separator';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "3.4.0",
+  "version": "3.4.2",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",