@octoguide/mui-ui-toolkit 0.1.0 → 0.3.0

package/README.md

@@ -145,87 +145,3 @@ Peer dependencies (install in your consuming app):
 ```bash
 yarn add @mui/material @emotion/react @emotion/styled react react-dom
 ```
-
-## command used to create the foundational components
-
-nder the src/components/foundation folder i want to add  
-wrapper objects for each of the following. these objects will  
-live in their own component file. not 1 big file  
-each component will extend the base typography component in the  
-mui-design library  
-H1
-
-<div class="css-1pjc7v5"><h1 class="MuiTypography-root           
-MuiTypography-h1 css-p6re0n">How can you choose a                
-typeface?</h1><pre class="MuiBox-root css-6cymt6">{              
-  "fontWeight": 800,                                             
-  "fontSize": "2.5rem (40px)",                                   
-  "lineHeight": 1.25,                                            
-  "@media (min-width:600px)": {                                  
-    "fontSize": "3.25rem (52px)"                                 
-  },                                                             
-  "@media (min-width:900px)": {                                  
-    "fontSize": "3.625rem (58px)"                                
-  },                                                             
-  "@media (min-width:1200px)": {                                 
-    "fontSize": "4rem (64px)"                                    
-  }                                                              
-}</pre></div>                                                    
-  ⎿  Interrupted · What should Claude do instead?
-
-[Image #2] (↑ to select)
-─────────────────────────────────────────────────────────── ▪▪▪ ─
-❯ under the src/components/foundation folder i want to add
-wrapper objects for each of the following. these objects will
-live in their own component file. not 1 big file
-each component will extend the base typography component in
-the mui-design library
-for each component i will give 2 lines for the name of the
-component and what to export it as, the div element that
-contains the component itself as it is used on a web page and
-the pre object that contains the styles for the component
-rules for each component
-always use the theme values rather than hardcoding values
-i.e fontweight:800, the 800 should come from the theme
-definition
-also create the storybook entry from the component entry i
-have provided above showing the component name, example text,
-and the styles from the pre section to show the styles that
-make up the component all on a card like this
-
-all the theme elements can be found in docs/theme.json which
-is a json object showing all the current default theme values
-H1
-[Pasted text #1 +13 lines]
-H2
-[Pasted text #3 +13 lines]  
- H3  
- [Pasted text #4 +13 lines]  
- H4  
- [Pasted text #5 +7 lines]  
- H5  
- [Pasted text #6 +7 lines]  
- H6  
- [Pasted text #7 +7 lines]  
- Subtitle1  
- [Pasted text #8 +4 lines]  
- Subtitle2  
- [Pasted text #9 +4 lines]  
- Body1  
- [Pasted text #10 +4 lines]  
- Body2  
- [Pasted text #11 +4 lines]  
- Caption  
- [Pasted text #12 +4 lines]  
- Overline  
- [Pasted text #13 +4 lines]  
- Button  
- [Pasted text #14 +4 lines]  
- use the text.primary values from the theme palette object as  
- the text colour and use the theme entry from the typeography  
- object for each component  
- for example H1 fontweight should come from the them value  
- typography.h1.fontWeight  
- at the end if you can add tests for each component  
- build and check for completness  
- i can use storybook to see if the components creation worked

package/dist/index.d.mts

@@ -60,6 +60,16 @@ interface ColorTokens {
     borderFocus: string;
     overlayLight: string;
     overlayDark: string;
+    overlayLight60: string;
+    overlayLight70: string;
+    overlayLight75: string;
+    overlayLight85: string;
+    colorRed: string;
+    colorAmber: string;
+    colorOrange: string;
+    colorGreen: string;
+    colorBlue: string;
+    colorGrey: string;
 }
 interface TypographyTokens {
     fontFamilyBase: string;
@@ -71,6 +81,7 @@ interface TypographyTokens {
     fontSizeXl: string;
     fontSize2xl: string;
     fontSize3xl: string;
+    fontSize4xl: string;
     fontWeightLight: number;
     fontWeightRegular: number;
     fontWeightMedium: number;
@@ -128,7 +139,14 @@ interface ZIndexTokens {
     toast: number;
     tooltip: number;
 }
+interface FooterTokens {
+    background: string;
+    textColor: string;
+    linkColor: string;
+    linkHoverColor: string;
+}
 interface ComponentTokens {
+    footer: FooterTokens;
     button: {
         paddingX: string;
         paddingY: string;
@@ -412,11 +430,20 @@ declare const CardContent: _mui_material_OverridableComponent.OverridableCompone
 declare const CardHeader: _mui_material.OverridableCardHeader;
 declare const CardActions: typeof CardActions$1;
 
-type TextFieldProps = TextFieldProps$1;
-declare function TextField({ error, FormHelperTextProps, inputProps, label, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
-declare namespace TextField {
-    var displayName: string;
-}
+type TextFieldProps = TextFieldProps$1 & {
+    /** When true and type="password", renders a visibility toggle icon button as end adornment. */
+    showPasswordToggle?: boolean;
+};
+declare const TextField: React.ForwardRefExoticComponent<(Omit<_mui_material.OutlinedTextFieldProps & {
+    /** When true and type="password", renders a visibility toggle icon button as end adornment. */
+    showPasswordToggle?: boolean;
+}, "ref"> | Omit<_mui_material.FilledTextFieldProps & {
+    /** When true and type="password", renders a visibility toggle icon button as end adornment. */
+    showPasswordToggle?: boolean;
+}, "ref"> | Omit<_mui_material.StandardTextFieldProps & {
+    /** When true and type="password", renders a visibility toggle icon button as end adornment. */
+    showPasswordToggle?: boolean;
+}, "ref">) & React.RefAttributes<HTMLInputElement>>;
 
 type AlertProps = AlertProps$1;
 type AlertTitleProps = AlertTitleProps$1;

package/dist/index.d.ts

@@ -60,6 +60,16 @@ interface ColorTokens {
     borderFocus: string;
     overlayLight: string;
     overlayDark: string;
+    overlayLight60: string;
+    overlayLight70: string;
+    overlayLight75: string;
+    overlayLight85: string;
+    colorRed: string;
+    colorAmber: string;
+    colorOrange: string;
+    colorGreen: string;
+    colorBlue: string;
+    colorGrey: string;
 }
 interface TypographyTokens {
     fontFamilyBase: string;
@@ -71,6 +81,7 @@ interface TypographyTokens {
     fontSizeXl: string;
     fontSize2xl: string;
     fontSize3xl: string;
+    fontSize4xl: string;
     fontWeightLight: number;
     fontWeightRegular: number;
     fontWeightMedium: number;
@@ -128,7 +139,14 @@ interface ZIndexTokens {
     toast: number;
     tooltip: number;
 }
+interface FooterTokens {
+    background: string;
+    textColor: string;
+    linkColor: string;
+    linkHoverColor: string;
+}
 interface ComponentTokens {
+    footer: FooterTokens;
     button: {
         paddingX: string;
         paddingY: string;
@@ -412,11 +430,20 @@ declare const CardContent: _mui_material_OverridableComponent.OverridableCompone
 declare const CardHeader: _mui_material.OverridableCardHeader;
 declare const CardActions: typeof CardActions$1;
 
-type TextFieldProps = TextFieldProps$1;
-declare function TextField({ error, FormHelperTextProps, inputProps, label, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
-declare namespace TextField {
-    var displayName: string;
-}
+type TextFieldProps = TextFieldProps$1 & {
+    /** When true and type="password", renders a visibility toggle icon button as end adornment. */
+    showPasswordToggle?: boolean;
+};
+declare const TextField: React.ForwardRefExoticComponent<(Omit<_mui_material.OutlinedTextFieldProps & {
+    /** When true and type="password", renders a visibility toggle icon button as end adornment. */
+    showPasswordToggle?: boolean;
+}, "ref"> | Omit<_mui_material.FilledTextFieldProps & {
+    /** When true and type="password", renders a visibility toggle icon button as end adornment. */
+    showPasswordToggle?: boolean;
+}, "ref"> | Omit<_mui_material.StandardTextFieldProps & {
+    /** When true and type="password", renders a visibility toggle icon button as end adornment. */
+    showPasswordToggle?: boolean;
+}, "ref">) & React.RefAttributes<HTMLInputElement>>;
 
 type AlertProps = AlertProps$1;
 type AlertTitleProps = AlertTitleProps$1;

package/dist/index.js

@@ -116,7 +116,17 @@ var defaultTheme = {
     border: "#C5CFE0",
     borderFocus: "#1565C0",
     overlayLight: "rgba(255, 255, 255, 0.8)",
-    overlayDark: "rgba(0, 0, 0, 0.12)"
+    overlayDark: "rgba(0, 0, 0, 0.12)",
+    overlayLight60: "rgba(255, 255, 255, 0.6)",
+    overlayLight70: "rgba(255, 255, 255, 0.7)",
+    overlayLight75: "rgba(255, 255, 255, 0.75)",
+    overlayLight85: "rgba(255, 255, 255, 0.85)",
+    colorRed: "#FF5630",
+    colorAmber: "#FFAB00",
+    colorOrange: "#FF8B00",
+    colorGreen: "#36B37E",
+    colorBlue: "#0065FF",
+    colorGrey: "#6B778C"
   },
   typography: {
     fontFamilyBase: '"Source Sans Pro", sans-serif',
@@ -136,6 +146,8 @@ var defaultTheme = {
     // 22px
     fontSize3xl: "1.75rem",
     // 28px
+    fontSize4xl: "2.25rem",
+    // 36px
     // ── Weights (identical across all themes) ─────────────────────────────
     fontWeightLight: 300,
     fontWeightRegular: 400,
@@ -196,6 +208,12 @@ var defaultTheme = {
     tooltip: 700
   },
   components: {
+    footer: {
+      background: "#003c8f",
+      textColor: "rgba(255, 255, 255, 0.7)",
+      linkColor: "rgba(255, 255, 255, 0.7)",
+      linkHoverColor: "#ffffff"
+    },
     button: {
       // Sizes & paddings (identical across themes)
       paddingX: "12px",
@@ -1245,9 +1263,12 @@ var CardActions = import_material4.CardActions;
 Card.displayName = "ToolkitCard";
 
 // src/components/TextField/TextField.tsx
+var import_react = __toESM(require("react"));
 var import_material5 = require("@mui/material");
 var import_styles4 = require("@mui/material/styles");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var VisibilityIcon = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.SvgIcon, { viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { fill: "currentColor", d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3" }) });
+var VisibilityOffIcon = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.SvgIcon, { viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { fill: "currentColor", d: "M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75C21.27 5.61 17 2.5 12 2.5c-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 5.13 11.35 5 12 5M2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27M7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2m4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01" }) });
 var StyledTextField = (0, import_styles4.styled)(import_material5.TextField)(({ theme }) => ({
   // Transition on the entire field when focus changes
   "& .MuiOutlinedInput-root": {
@@ -1257,25 +1278,42 @@ var StyledTextField = (0, import_styles4.styled)(import_material5.TextField)(({
     }
   }
 }));
-function TextField({ error, FormHelperTextProps, inputProps, label, ...props }) {
-  if (process.env.NODE_ENV !== "production") {
-    if (!label && !props["aria-label"] && !props["aria-labelledby"] && !inputProps?.["aria-label"] && !inputProps?.["aria-labelledby"]) {
-      console.warn("[ToolkitTextField] Missing accessible label. Provide `label`, `aria-label`, or `aria-labelledby`.");
+var TextField = import_react.default.forwardRef(
+  function TextField2({ error, FormHelperTextProps, inputProps, label, showPasswordToggle, type, slotProps, ...props }, ref) {
+    const [showPassword, setShowPassword] = (0, import_react.useState)(false);
+    if (process.env.NODE_ENV !== "production") {
+      if (!label && !props["aria-label"] && !props["aria-labelledby"] && !inputProps?.["aria-label"] && !inputProps?.["aria-labelledby"]) {
+        console.warn("[ToolkitTextField] Missing accessible label. Provide `label`, `aria-label`, or `aria-labelledby`.");
+      }
     }
+    const resolvedType = showPasswordToggle && type === "password" ? showPassword ? "text" : "password" : type;
+    const toggleAdornment = showPasswordToggle && type === "password" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.InputAdornment, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_material5.IconButton,
+      {
+        "aria-label": showPassword ? "Hide password" : "Show password",
+        onClick: () => setShowPassword((prev) => !prev),
+        edge: "end",
+        children: showPassword ? VisibilityOffIcon : VisibilityIcon
+      }
+    ) }) : null;
+    const mergedSlotProps = toggleAdornment ? { ...slotProps, input: { endAdornment: toggleAdornment, ...slotProps?.input } } : slotProps;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      StyledTextField,
+      {
+        fullWidth: true,
+        variant: "outlined",
+        label,
+        error,
+        type: resolvedType,
+        inputRef: ref,
+        inputProps,
+        slotProps: mergedSlotProps,
+        FormHelperTextProps: error ? { role: "alert", ...FormHelperTextProps } : FormHelperTextProps,
+        ...props
+      }
+    );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    StyledTextField,
-    {
-      fullWidth: true,
-      variant: "outlined",
-      label,
-      error,
-      inputProps,
-      FormHelperTextProps: error ? { role: "alert", ...FormHelperTextProps } : FormHelperTextProps,
-      ...props
-    }
-  );
-}
+);
 TextField.displayName = "ToolkitTextField";
 
 // src/components/Alert/Alert.tsx
@@ -1377,7 +1415,7 @@ function ToggleButtonGroup(props) {
 ToggleButtonGroup.displayName = "ToolkitToggleButtonGroup";
 
 // src/components/DatePicker/DatePicker.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 var import_AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
 var import_LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
 var import_DatePicker = require("@mui/x-date-pickers/DatePicker");
@@ -1484,8 +1522,8 @@ function DateRangePickerInput({
   endLabel = "End date",
   buttonLabel = "Click me!"
 }) {
-  const [open, setOpen] = (0, import_react.useState)(false);
-  const [draft, setDraft] = (0, import_react.useState)(value);
+  const [open, setOpen] = (0, import_react2.useState)(false);
+  const [draft, setDraft] = (0, import_react2.useState)(value);
   const handleOpen = () => {
     setDraft(value);
     setOpen(true);
@@ -1531,9 +1569,9 @@ function DateRangePickerCalendar({
   onChange,
   buttonLabel = "Click me!"
 }) {
-  const [open, setOpen] = (0, import_react.useState)(false);
-  const [draft, setDraft] = (0, import_react.useState)(value);
-  const [selecting, setSelecting] = (0, import_react.useState)("start");
+  const [open, setOpen] = (0, import_react2.useState)(false);
+  const [draft, setDraft] = (0, import_react2.useState)(value);
+  const [selecting, setSelecting] = (0, import_react2.useState)("start");
   const handleOpen = () => {
     setDraft(value);
     setSelecting("start");