@jigowatts/jigowatts-ui 0.0.1-12

package/dist/components/SubMenu/index.js

@@ -0,0 +1,278 @@
+import { jsx as l, jsxs as h, Fragment as E } from "react/jsx-runtime";
+import * as x from "react";
+import { useState as _, Fragment as $ } from "react";
+import { Button as w, Menu as F } from "@mui/material";
+import { g as W, l as v, a as B, M as D, D as U } from "../../MenuItem-yBaT3_db.js";
+import { s as C, a as p, u as P, _ as N, c as j } from "../../styled-CWju4EfZ.js";
+import { c as k, P as o } from "../../index-Bs3JCwgu.js";
+import { L as O, T as g } from "../../ListContext-DOVwHqy-.js";
+const z = ["className"], V = (s) => {
+  const {
+    alignItems: e,
+    classes: r
+  } = s;
+  return j({
+    root: ["root", e === "flex-start" && "alignItemsFlexStart"]
+  }, W, r);
+}, A = C("div", {
+  name: "MuiListItemIcon",
+  slot: "Root",
+  overridesResolver: (s, e) => {
+    const {
+      ownerState: r
+    } = s;
+    return [e.root, r.alignItems === "flex-start" && e.alignItemsFlexStart];
+  }
+})(({
+  theme: s,
+  ownerState: e
+}) => p({
+  minWidth: 56,
+  color: (s.vars || s).palette.action.active,
+  flexShrink: 0,
+  display: "inline-flex"
+}, e.alignItems === "flex-start" && {
+  marginTop: 8
+})), M = /* @__PURE__ */ x.forwardRef(function(e, r) {
+  const n = P({
+    props: e,
+    name: "MuiListItemIcon"
+  }), {
+    className: i
+  } = n, a = N(n, z), c = x.useContext(O), d = p({}, n, {
+    alignItems: c.alignItems
+  }), y = V(d);
+  return /* @__PURE__ */ l(A, p({
+    className: k(y.root, i),
+    ownerState: d,
+    ref: r
+  }, a));
+});
+process.env.NODE_ENV !== "production" && (M.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component, normally `Icon`, `SvgIcon`,
+   * or a `@mui/icons-material` SVG icon element.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object])
+});
+const q = M, G = ["children", "className", "disableTypography", "inset", "primary", "primaryTypographyProps", "secondary", "secondaryTypographyProps"], H = (s) => {
+  const {
+    classes: e,
+    inset: r,
+    primary: n,
+    secondary: i,
+    dense: a
+  } = s;
+  return j({
+    root: ["root", r && "inset", a && "dense", n && i && "multiline"],
+    primary: ["primary"],
+    secondary: ["secondary"]
+  }, B, e);
+}, J = C("div", {
+  name: "MuiListItemText",
+  slot: "Root",
+  overridesResolver: (s, e) => {
+    const {
+      ownerState: r
+    } = s;
+    return [{
+      [`& .${v.primary}`]: e.primary
+    }, {
+      [`& .${v.secondary}`]: e.secondary
+    }, e.root, r.inset && e.inset, r.primary && r.secondary && e.multiline, r.dense && e.dense];
+  }
+})(({
+  ownerState: s
+}) => p({
+  flex: "1 1 auto",
+  minWidth: 0,
+  marginTop: 4,
+  marginBottom: 4
+}, s.primary && s.secondary && {
+  marginTop: 6,
+  marginBottom: 6
+}, s.inset && {
+  paddingLeft: 56
+})), R = /* @__PURE__ */ x.forwardRef(function(e, r) {
+  const n = P({
+    props: e,
+    name: "MuiListItemText"
+  }), {
+    children: i,
+    className: a,
+    disableTypography: c = !1,
+    inset: d = !1,
+    primary: y,
+    primaryTypographyProps: t,
+    secondary: m,
+    secondaryTypographyProps: I
+  } = n, S = N(n, G), {
+    dense: b
+  } = x.useContext(O);
+  let u = y ?? i, f = m;
+  const L = p({}, n, {
+    disableTypography: c,
+    inset: d,
+    primary: !!u,
+    secondary: !!f,
+    dense: b
+  }), T = H(L);
+  return u != null && u.type !== g && !c && (u = /* @__PURE__ */ l(g, p({
+    variant: b ? "body2" : "body1",
+    className: T.primary,
+    component: t != null && t.variant ? void 0 : "span",
+    display: "block"
+  }, t, {
+    children: u
+  }))), f != null && f.type !== g && !c && (f = /* @__PURE__ */ l(g, p({
+    variant: "body2",
+    className: T.secondary,
+    color: "text.secondary",
+    display: "block"
+  }, I, {
+    children: f
+  }))), /* @__PURE__ */ h(J, p({
+    className: k(T.root, a),
+    ownerState: L,
+    ref: r
+  }, S, {
+    children: [u, f]
+  }));
+});
+process.env.NODE_ENV !== "production" && (R.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Alias for the `primary` prop.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * If `true`, the children won't be wrapped by a Typography component.
+   * This can be useful to render an alternative Typography variant by wrapping
+   * the `children` (or `primary`) text, and optional `secondary` text
+   * with the Typography component.
+   * @default false
+   */
+  disableTypography: o.bool,
+  /**
+   * If `true`, the children are indented.
+   * This should be used if there is no left avatar or left icon.
+   * @default false
+   */
+  inset: o.bool,
+  /**
+   * The main content element.
+   */
+  primary: o.node,
+  /**
+   * These props will be forwarded to the primary typography component
+   * (as long as disableTypography is not `true`).
+   */
+  primaryTypographyProps: o.object,
+  /**
+   * The secondary content element.
+   */
+  secondary: o.node,
+  /**
+   * These props will be forwarded to the secondary typography component
+   * (as long as disableTypography is not `true`).
+   */
+  secondaryTypographyProps: o.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object])
+});
+const K = R, so = (s) => {
+  const { menuItems: e, buttonElement: r } = s, [n, i] = _(null), a = !!n, c = (t) => {
+    t.stopPropagation(), i(t.currentTarget);
+  }, d = (t) => {
+    t.stopPropagation(), i(null);
+  }, y = (t, m) => {
+    t.stopPropagation(), m.onClick && m.onClick(t), m.closeWhenClick !== !1 && d(t);
+  };
+  return /* @__PURE__ */ h(E, { children: [
+    /* @__PURE__ */ h(
+      w,
+      {
+        id: "fade-button",
+        "aria-controls": a ? "fade-menu" : void 0,
+        "aria-haspopup": "true",
+        "aria-expanded": a ? "true" : void 0,
+        onClick: c,
+        color: "inherit",
+        children: [
+          r,
+          " "
+        ]
+      }
+    ),
+    /* @__PURE__ */ l(
+      F,
+      {
+        id: "fade-menu",
+        MenuListProps: {
+          "aria-labelledby": "fade-button"
+        },
+        anchorEl: n,
+        open: a,
+        onClose: d,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "right"
+        },
+        children: e.map((t, m) => /* @__PURE__ */ h($, { children: [
+          /* @__PURE__ */ h(
+            D,
+            {
+              onClick: (I) => {
+                y(I, t);
+              },
+              sx: { minWidth: 200 },
+              children: [
+                /* @__PURE__ */ l(q, { children: t.icon }),
+                /* @__PURE__ */ l(K, { children: t.title }),
+                t.shortcut && /* @__PURE__ */ l(g, { variant: "body2", color: "text.secondary", children: t.shortcut })
+              ]
+            }
+          ),
+          t.separatorLine && /* @__PURE__ */ l(U, {})
+        ] }, m))
+      }
+    )
+  ] });
+};
+export {
+  so as SubMenu,
+  so as default
+};

package/dist/components/SubMenu/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/SubMenu/index.test.js

@@ -0,0 +1,41 @@
+import { jsx as n } from "react/jsx-runtime";
+import { a as r, s as e, f as t } from "../../react.esm-C8amP77L.js";
+import { SubMenu as k } from "./index.js";
+describe("SubMenu component", () => {
+  test("renders SubMenu component with given menu items and button element", () => {
+    const o = jest.fn(), u = jest.fn(), l = jest.fn();
+    r(/* @__PURE__ */ n(k, { menuItems: [
+      {
+        icon: /* @__PURE__ */ n("span", { children: "Icon 1" }),
+        title: "Menu 1",
+        onClick: o,
+        closeWhenClick: !0
+      },
+      {
+        icon: /* @__PURE__ */ n("span", { children: "Icon 2" }),
+        title: "Menu 2",
+        onClick: u
+      },
+      {
+        icon: /* @__PURE__ */ n("span", { children: "Icon 3" }),
+        title: "Menu 3",
+        onClick: l,
+        closeWhenClick: !1
+      }
+    ], buttonElement: /* @__PURE__ */ n("button", { children: "Menu Button" }) }));
+    const c = e.getByText("Menu Button");
+    t.click(c);
+    const i = e.getByText("Menu 1");
+    t.click(i), expect(o).toHaveBeenCalled(), setTimeout(() => {
+      expect(e.queryByText("Menu 1")).toBeNull();
+    }, 0), t.click(c);
+    const s = e.getByText("Menu 2");
+    t.click(s), expect(u).toHaveBeenCalled(), setTimeout(() => {
+      expect(e.queryByText("Menu 2")).toBeNull();
+    }, 0), t.click(c);
+    const m = e.getByText("Menu 3");
+    t.click(m), expect(l).toHaveBeenCalled(), setTimeout(() => {
+      expect(e.queryByText("Menu 3")).not.toBeNull();
+    }, 0);
+  });
+});

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+type TabItem = {
+    /** タブの識別値 */
+    value: string;
+    /** 表示名 */
+    label: string;
+    /** 表示アイコン example:
+     * <PhoneIcon sx={{ fontSize: 20 }} />
+     */
+    icon?: React.ReactElement;
+};
+type Props = {
+    /** タブアイテム情報*/
+    items: TabItem[];
+    /** 現在選択中のvalue state管理 */
+    value: string;
+    /** 選択中のTabが変更された時のhandler */
+    handleChange: (event: React.SyntheticEvent, newValue: string) => void;
+};
+export declare const Tabs: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default Tabs;

package/dist/components/Tabs/index.js

@@ -0,0 +1,100 @@
+import { jsx as s } from "react/jsx-runtime";
+import { styled as d } from "@mui/material";
+import { M as T, T as y } from "../../Tabs-D3lJRumZ.js";
+import { c as C, P as e } from "../../index-Bs3JCwgu.js";
+import { f as N, h as g, j as B, e as M, _ as v, a as P, b as S, k as _, T as j, C as w } from "../../styled-CWju4EfZ.js";
+import * as E from "react";
+const I = ["className", "component"];
+function O(o = {}) {
+  const {
+    themeId: t,
+    defaultTheme: c,
+    defaultClassName: n = "MuiBox-root",
+    generateClassName: a
+  } = o, u = N("div", {
+    shouldForwardProp: (r) => r !== "theme" && r !== "sx" && r !== "as"
+  })(g);
+  return /* @__PURE__ */ E.forwardRef(function(p, f) {
+    const l = B(c), i = M(p), {
+      className: x,
+      component: b = "div"
+    } = i, h = v(i, I);
+    return /* @__PURE__ */ s(u, P({
+      as: b,
+      ref: f,
+      className: C(x, a ? a(n) : n),
+      theme: t && l[t] || l
+    }, h));
+  });
+}
+const k = S("MuiBox", ["root"]), R = k, $ = _(), m = O({
+  themeId: j,
+  defaultTheme: $,
+  defaultClassName: R.root,
+  generateClassName: w.generate
+});
+process.env.NODE_ENV !== "production" && (m.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: e.node,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: e.elementType,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
+});
+const D = m, F = d((o) => /* @__PURE__ */ s(
+  T,
+  {
+    ...o,
+    "aria-label": "wrapped tabs",
+    TabIndicatorProps: { children: /* @__PURE__ */ s("span", { className: "MuiTabs-indicatorSpan" }) }
+  }
+))({
+  "& .MuiTabs-indicator": {
+    display: "flex",
+    justifyContent: "center",
+    backgroundColor: "transparent"
+  },
+  "& .MuiTabs-indicatorSpan": {
+    width: "100%",
+    backgroundColor: "#6672e8"
+  }
+}), W = d((o) => /* @__PURE__ */ s(y, { ...o, iconPosition: "start" }))(({}) => ({
+  "&.Mui-selected": {
+    color: "#000",
+    fontWeight: "800"
+  }
+})), z = (o) => {
+  const { items: t, value: c, handleChange: n } = o;
+  return /* @__PURE__ */ s(D, { sx: { width: "100%" }, children: /* @__PURE__ */ s(
+    F,
+    {
+      value: c,
+      onChange: n,
+      "aria-label": "wrapped tabs",
+      children: t.map((a) => /* @__PURE__ */ s(
+        W,
+        {
+          icon: a.icon,
+          label: a.label,
+          value: a.value
+        },
+        a.value
+      ))
+    }
+  ) });
+};
+export {
+  z as Tabs,
+  z as default
+};

package/dist/components/Tabs/index.test.d.ts

@@ -0,0 +1 @@
+

package/dist/components/Tabs/index.test.js

@@ -0,0 +1,24 @@
+import { jsx as n } from "react/jsx-runtime";
+import { a as o, f as c } from "../../react.esm-C8amP77L.js";
+import { Tabs as b } from "./index.js";
+import "../../index-VF82hRp0.js";
+describe("Tabs Component", () => {
+  const e = jest.fn(), a = [
+    { value: "tab1", label: "Tab 1" },
+    { value: "tab2", label: "Tab 2" },
+    { value: "tab3", label: "Tab 3" }
+  ];
+  it("renders the tabs correctly", () => {
+    const { getByText: t } = o(
+      /* @__PURE__ */ n(b, { items: a, value: "tab1", handleChange: e })
+    );
+    a.forEach((l) => {
+      expect(t(l.label)).toBeInTheDocument();
+    });
+  }), it("calls handleChange with the right value when a tab is clicked", () => {
+    const { getByText: t } = o(
+      /* @__PURE__ */ n(b, { items: a, value: "tab1", handleChange: e })
+    ), l = t("Tab 2");
+    c.click(l), expect(e).toHaveBeenCalled(), expect(e).toHaveBeenCalledWith(expect.anything(), "tab2");
+  });
+});

package/dist/components/Textarea/index.d.ts

@@ -0,0 +1,18 @@
+import { UseFormRegisterReturn } from 'react-hook-form';
+
+type Props = {
+    id?: string;
+    register?: UseFormRegisterReturn;
+    placeholder?: string;
+    rows?: number;
+    errorMessage?: string;
+    disabled?: boolean;
+};
+export declare const TextArea: {
+    (props: Props): import("react/jsx-runtime").JSX.Element;
+    defaultProps: {
+        rows: number;
+        disabled: boolean;
+    };
+};
+export default TextArea;

package/dist/components/Textarea/index.js

@@ -0,0 +1,34 @@
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { c as _ } from "../../index-DWRHnq8_.js";
+import '../../assets/index.css';const d = "_inputContainer_qfvgb_1", g = "_textArea_qfvgb_8", f = "_error_qfvgb_22", m = "_errorMessage_qfvgb_26", e = {
+  inputContainer: d,
+  textArea: g,
+  error: f,
+  errorMessage: m
+}, p = (t) => {
+  const { id: a, register: o, placeholder: n, rows: i, errorMessage: r, disabled: l } = t;
+  return /* @__PURE__ */ c("div", { className: e.inputContainer, children: [
+    /* @__PURE__ */ s(
+      "textarea",
+      {
+        id: a,
+        ...o,
+        className: _(e.textArea, {
+          [e.error]: r
+        }),
+        placeholder: n,
+        rows: i,
+        disabled: l
+      }
+    ),
+    r && /* @__PURE__ */ s("small", { className: e.errorMessage, children: r })
+  ] });
+};
+p.defaultProps = {
+  rows: 3,
+  disabled: !1
+};
+export {
+  p as TextArea,
+  p as default
+};

package/dist/components/Textarea/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Textarea/index.test.js

@@ -0,0 +1,25 @@
+import { jsx as t } from "react/jsx-runtime";
+import { a as o, s as a } from "../../react.esm-C8amP77L.js";
+import { j as i } from "../../index-Di2gTfPF.js";
+import { TextArea as r } from "./index.js";
+describe("TextArea component", () => {
+  const c = "testTextArea", s = "Test Placeholder", n = "Test Error";
+  it("renders the textarea with the provided properties", () => {
+    o(/* @__PURE__ */ t(r, { id: c, placeholder: s, rows: 4 }));
+    const e = a.getByPlaceholderText(s);
+    expect(e).toBeInTheDocument(), expect(e.tagName).toBe("TEXTAREA"), expect(e.getAttribute("rows")).toBe("4");
+  }), it("renders the error message when provided", () => {
+    o(/* @__PURE__ */ t(r, { errorMessage: n }));
+    const e = a.getByText(n);
+    expect(e).toBeInTheDocument();
+  }), it("does not render the error message when not provided", () => {
+    o(/* @__PURE__ */ t(r, {}));
+    const e = a.queryByText(n);
+    expect(e).not.toBeInTheDocument();
+  }), it("should be accessible", async () => {
+    const { container: e } = o(
+      /* @__PURE__ */ t(r, { id: c, placeholder: s, rows: 4 })
+    ), x = await i.axe(e);
+    expect.extend(i.toHaveNoViolations), expect(x).toHaveNoViolations();
+  });
+});

package/dist/components/ToggleButton/index.d.ts

@@ -0,0 +1,16 @@
+import { Control, FieldPath, FieldValues, PathValue } from 'react-hook-form';
+import { ReactNode } from 'react';
+
+type Option<T extends FieldValues> = {
+    label: ReactNode;
+    value: PathValue<T, FieldPath<T>>;
+};
+type Props<T extends FieldValues> = {
+    control: Control<T>;
+    name: FieldPath<T>;
+    defaultValue: PathValue<T, FieldPath<T>>;
+    options: Option<T>[];
+    onChange?: (event: React.MouseEvent<HTMLElement>, value: unknown) => void;
+};
+export declare const ToggleButtonController: <T extends FieldValues>(props: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export default ToggleButtonController;

package/dist/components/ToggleButton/index.js

@@ -0,0 +1,39 @@
+import { jsx as l, jsxs as s } from "react/jsx-runtime";
+import { FormControl as p, ToggleButtonGroup as d, ToggleButton as h, FormHelperText as v } from "@mui/material";
+import { C as x } from "../../index.esm-ChwJSgnF.js";
+const B = (u) => {
+  const { control: i, name: m, defaultValue: c, options: g, onChange: o } = u;
+  return /* @__PURE__ */ l(
+    x,
+    {
+      control: i,
+      name: m,
+      defaultValue: c,
+      render: ({ field: t, fieldState: n }) => {
+        var a;
+        return /* @__PURE__ */ s(p, { error: n.invalid, children: [
+          /* @__PURE__ */ l(
+            d,
+            {
+              exclusive: !0,
+              ...t,
+              onChange: (r, e) => {
+                e && (t.onChange(e), o == null || o(r, e));
+              },
+              children: g.map((r) => /* @__PURE__ */ s(h, { value: r.value, children: [
+                " ",
+                r.label,
+                " "
+              ] }, r.value))
+            }
+          ),
+          /* @__PURE__ */ l(v, { children: (a = n.error) == null ? void 0 : a.message })
+        ] });
+      }
+    }
+  );
+};
+export {
+  B as ToggleButtonController,
+  B as default
+};

package/dist/components/ToggleButton/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ToggleButton/index.test.js

@@ -0,0 +1,49 @@
+import { jsx as r } from "react/jsx-runtime";
+import { r as i, a as c, s as p } from "../../react.esm-C8amP77L.js";
+import { u } from "../../index.esm-ChwJSgnF.js";
+import { ToggleButtonController as m } from "./index.js";
+describe("ToggleButtonController component", () => {
+  it("renders select box with options and correct default value", () => {
+    const { result: l } = i(() => u()), { control: s } = l.current, a = "TestToggle", e = [
+      { label: "Option 1", value: "option1" },
+      { label: "Option 2", value: "option2" },
+      { label: "Option 3", value: "option3" }
+    ], t = ["option2"];
+    c(
+      /* @__PURE__ */ r(
+        m,
+        {
+          control: s,
+          name: a,
+          options: e,
+          defaultValue: t
+        }
+      )
+    ), t.forEach((n) => {
+      const o = e.find((d) => d.value === n);
+      o && expect(p.getByText(o.label)).toBeInTheDocument();
+    });
+  }), it("renders select box with options and correct default value for single select", () => {
+    const { result: l } = i(() => u()), { control: s } = l.current, a = "TestToggle", e = [
+      { label: "Option 1", value: "option1" },
+      { label: "Option 2", value: "option2" },
+      { label: "Option 3", value: "option3" }
+    ], t = "option2";
+    c(
+      /* @__PURE__ */ r(
+        m,
+        {
+          control: s,
+          name: a,
+          options: e,
+          defaultValue: t
+        }
+      )
+    );
+    const n = e.find((o) => o.value === t);
+    if (n) {
+      const o = p.getByText(n.label);
+      expect(o).toBeInTheDocument();
+    }
+  });
+});

package/dist/constants/datetime.d.ts

@@ -0,0 +1,2 @@
+export declare const DATE_FORMAT = "yyyy/MM/dd";
+export declare const DATETIME_FORMAT = "yyyy/MM/dd HH:mm:ss";

package/dist/constants/datetime.js

@@ -0,0 +1,5 @@
+const y = "yyyy/MM/dd", M = "yyyy/MM/dd HH:mm:ss";
+export {
+  M as DATETIME_FORMAT,
+  y as DATE_FORMAT
+};