@octoguide/mui-ui-toolkit 0.1.0 → 0.2.0

package/dist/index.d.mts

@@ -412,11 +412,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

@@ -412,11 +412,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

@@ -1245,9 +1245,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 +1260,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 +1397,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 +1504,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 +1551,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");