@caseparts-org/caseblocks 0.0.9 → 0.0.11

package/dist/assets/Input.css

@@ -0,0 +1 @@
+._input-container_1fwgs_1{display:flex;flex-direction:column;align-items:flex-start;width:100%;box-sizing:border-box}._input-container_1fwgs_1>label{font-family:var(--font-family-label);font-size:var(--font-size-xs)}._input_1fwgs_1{height:32px;border-radius:var(--radius-radius-minimal, 2px);border:1px solid var(--border-border-primary, #dfdfdf);background:var(--surface-surface-secondary, #f6f6f6);padding:0px var(--spacing-spacing-1xs, 12px);outline:none;font-size:var(--font-size-sm);width:100%}._input_1fwgs_1:focus{border:1px solid var(--border-border-primary-btn, #1380b1);box-shadow:0 0 2px 1px var(--border-border-primary-btn)}

package/dist/atoms/Input/Input.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { HideAtProps } from '../HideAt';
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, HideAtProps {
+    label: string | null;
+}
+export declare function Input({ label, hideAt, className, ...otherProps }: InputProps): import("react/jsx-runtime").JSX.Element;

package/dist/atoms/Input/Input.js

@@ -0,0 +1,24 @@
+import { jsxs as p, jsx as i } from "react/jsx-runtime";
+import { c as m } from "../../clsx-OuTLNxxd.js";
+import { getHideAtStyles as r } from "../HideAt.js";
+import '../../assets/Input.css';const u = "_input_1fwgs_1", e = {
+  "input-container": "_input-container_1fwgs_1",
+  input: u
+};
+function f({ label: n, hideAt: s, className: c, ...t }) {
+  return /* @__PURE__ */ p("div", { className: e["input-container"], children: [
+    n && /* @__PURE__ */ i("label", { htmlFor: t.name, children: n }),
+    /* @__PURE__ */ i(
+      "input",
+      {
+        id: t.name,
+        type: "text",
+        className: m(e.input, r(s), c),
+        ...t
+      }
+    )
+  ] });
+}
+export {
+  f as Input
+};

package/dist/atoms/Input/Input.stories.d.ts

@@ -0,0 +1,14 @@
+import { StoryObj } from '@storybook/react';
+import { Input } from './Input';
+declare const meta: {
+    title: string;
+    component: typeof Input;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithHideAt: Story;

package/dist/atoms/Input/Input.stories.js

@@ -0,0 +1,27 @@
+import { Input as e } from "./Input.js";
+const a = {
+  title: "Case Parts/Atoms/Input",
+  component: e,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered"
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"]
+}, l = {
+  args: {
+    label: "Label",
+    placeholder: "Type here..."
+  }
+}, o = {
+  args: {
+    label: "Label",
+    placeholder: "Hidden at md",
+    hideAt: "md"
+  }
+};
+export {
+  l as Default,
+  o as WithHideAt,
+  a as default
+};

package/dist/main.d.ts

@@ -13,6 +13,8 @@ export { Separator } from './atoms/Separator/Separator';
 export type { SeparatorProps } from './atoms/Separator/Separator';
 export { Text } from './atoms/Text/Text';
 export type { TextProps } from './atoms/Text/Text';
+export { Input } from './atoms/Input/Input';
+export type { InputProps } from './atoms/Input/Input';
 export { Account } from './molecules/Account/Account';
 export type { AccountProps } from './molecules/Account/Account';
 export { Avatar } from './molecules/Avatar/Avatar';

package/dist/main.js

@@ -1,37 +1,39 @@
 import { Button as e } from "./atoms/Button/Button.js";
 import { Flex as p } from "./atoms/Flex/Flex.js";
 import { Column as m, Grid as f } from "./atoms/Grid/Grid.js";
-import { Head as i } from "./atoms/Root/Head.js";
+import { Head as n } from "./atoms/Root/Head.js";
 import { Icon as c } from "./atoms/Icon/Icon.js";
-import { Link as g } from "./atoms/Link/Link.js";
-import { Root as u } from "./atoms/Root/Root.js";
+import { Link as u } from "./atoms/Link/Link.js";
+import { Root as h } from "./atoms/Root/Root.js";
 import { Separator as S } from "./atoms/Separator/Separator.js";
 import { Text as v } from "./atoms/Text/Text.js";
-import { Account as B } from "./molecules/Account/Account.js";
-import { Avatar as T } from "./molecules/Avatar/Avatar.js";
-import { Chip as w } from "./molecules/Chip/Chip.js";
-import { Logo as G } from "./molecules/Logo/Logo.js";
-import { SearchBox as I } from "./molecules/SearchBox/SearchBox.js";
-import { ToggleView as N } from "./molecules/ToggleView/ToggleView.js";
-import { MainNav as V } from "./organisms/MainNav/MainNav.js";
-import { ChipSelector as j } from "./organisms/ChipSelector/ChipSelector.js";
+import { Input as B } from "./atoms/Input/Input.js";
+import { Account as L } from "./molecules/Account/Account.js";
+import { Avatar as k } from "./molecules/Avatar/Avatar.js";
+import { Chip as F } from "./molecules/Chip/Chip.js";
+import { Logo as H } from "./molecules/Logo/Logo.js";
+import { SearchBox as N } from "./molecules/SearchBox/SearchBox.js";
+import { ToggleView as V } from "./molecules/ToggleView/ToggleView.js";
+import { MainNav as j } from "./organisms/MainNav/MainNav.js";
+import { ChipSelector as s } from "./organisms/ChipSelector/ChipSelector.js";
 export {
-  B as Account,
-  T as Avatar,
+  L as Account,
+  k as Avatar,
   e as Button,
-  w as Chip,
-  j as ChipSelector,
+  F as Chip,
+  s as ChipSelector,
   m as Column,
   p as Flex,
   f as Grid,
-  i as Head,
+  n as Head,
   c as Icon,
-  g as Link,
-  G as Logo,
-  V as MainNav,
-  u as Root,
-  I as SearchBox,
+  B as Input,
+  u as Link,
+  H as Logo,
+  j as MainNav,
+  h as Root,
+  N as SearchBox,
   S as Separator,
   v as Text,
-  N as ToggleView
+  V as ToggleView
 };

package/dist/organisms/SpinZoomViewer/SpinZoomViewer.d.ts

@@ -0,0 +1,20 @@
+import { default as React, CSSProperties, ComponentType } from 'react';
+type SpinZoom360Props = {
+    images: string[];
+    defaultIndex?: number;
+    disableSpin?: boolean;
+    disableZoom?: boolean;
+    clickZoomFactor?: number;
+    scrollZoomFactor?: number;
+    maxZoomLevel?: number;
+    spinOverlayComponent?: ComponentType<{
+        style?: CSSProperties;
+    }>;
+    rotationSpeedThreshold?: number;
+    onImageChange?: (_info: {
+        index: number;
+        src: string;
+    }) => void;
+};
+declare const SpinZoomViewer: React.FC<SpinZoom360Props>;
+export default SpinZoomViewer;

package/dist/organisms/SpinZoomViewer/SpinZoomViewer.js

@@ -0,0 +1,292 @@
+import { jsxs as rt, jsx as k } from "react/jsx-runtime";
+import { useState as f, useRef as x, useEffect as G } from "react";
+import { Text as lt } from "../../atoms/Text/Text.js";
+const ut = 4, dt = ({
+  images: Y,
+  defaultIndex: M = 0,
+  disableSpin: w = !1,
+  disableZoom: P = !1,
+  clickZoomFactor: D = 1.5,
+  scrollZoomFactor: B = 1.1,
+  maxZoomLevel: m = 5,
+  spinOverlayComponent: U,
+  rotationSpeedThreshold: O = 15,
+  onImageChange: H = () => {
+  }
+}) => {
+  const [J, tt] = f(!1), [X, N] = f(M), [S, L] = f(!1), [Q, R] = f(!1), [Z, T] = f(!1), [c, h] = f(!1), [l, p] = f(1), [d, a] = f({
+    top: 0,
+    left: 0
+  }), [C, et] = f(!1), u = x(null), q = x(0), b = x({ x: 0, y: 0 }), V = x({
+    initialPosition: 0,
+    centerX: 0,
+    centerY: 0
+  }), y = x({
+    x: 0,
+    y: 0,
+    isZoomIn: !1
+  }), W = x({ x: 0, y: 0 });
+  G(() => {
+    const t = u.current;
+    return t && t.addEventListener("wheel", A, {
+      passive: !1
+    }), () => {
+      t && t.removeEventListener(
+        "wheel",
+        A,
+        { passive: !1 }
+      );
+    };
+  }, []), G(() => {
+    H == null || H({ index: X, src: Y[X] });
+  }, [X]);
+  function K(t) {
+    if (!P && "touches" in t && t.touches && t.touches.length > 1) {
+      T(!0), h(!0), R(!1), L(!1);
+      const o = t.touches[0].clientX - t.touches[1].clientX, i = t.touches[0].clientY - t.touches[1].clientY;
+      V.current.initialPosition = Math.sqrt(o * o + i * i);
+    } else c ? R(!0) : w || L(!0);
+    const e = "type" in t && t.type === "mousedown" ? t.clientX : t.touches[0].clientX, n = "type" in t && t.type === "mousedown" ? t.clientY : t.touches[0].clientY;
+    q.current = e, b.current = { x: e, y: n }, W.current = { x: e, y: n };
+  }
+  function F(t) {
+    if (!P && "touches" in t && t.touches && t.touches.length > 1) {
+      const o = t.touches[0].clientX - t.touches[1].clientX, i = t.touches[0].clientY - t.touches[1].clientY, r = Math.sqrt(o * o + i * i), I = r / V.current.initialPosition;
+      let s = l * I;
+      if (p((g) => (s = g * I, s < 1.001 ? (h(!1), a({ top: 0, left: 0 }), 1) : s >= m ? g : s)), s < m) {
+        const g = (t.touches[0].clientX + t.touches[1].clientX) / 2, E = (t.touches[0].clientY + t.touches[1].clientY) / 2, v = u.current.getBoundingClientRect();
+        a((_) => {
+          const { relX: st, relY: ct } = z(
+            g,
+            E,
+            v.left,
+            v.top
+          );
+          return j(
+            !0,
+            st,
+            ct,
+            _.left,
+            _.top,
+            I
+          );
+        });
+      }
+      V.current.initialPosition = r;
+    }
+    const e = "type" in t && t.type === "mousemove" ? t.clientX : t.touches[0].clientX, n = "type" in t && t.type === "mousemove" ? t.clientY : t.touches[0].clientY;
+    if (S) {
+      et(!0);
+      const o = e - q.current;
+      Math.abs(o) > O && (o > 0 ? N(
+        (i) => (i - 1 + Y.length) % Y.length
+      ) : N((i) => (i + 1) % Y.length), q.current = e);
+    }
+    if (Q) {
+      const o = e - b.current.x, i = n - b.current.y;
+      a({
+        top: d.top + i,
+        left: d.left + o
+      }), b.current = { x: e, y: n };
+    }
+  }
+  function $(t) {
+    L(!1), T(!1);
+    let e, n, o = 0;
+    if ("type" in t && (t.type === "mouseup" || t.type === "mouseleave"))
+      e = t.clientX, n = t.clientY, o = t.button;
+    else {
+      const s = t.changedTouches[0];
+      e = s.clientX, n = s.clientY;
+    }
+    const i = e - W.current.x, r = n - W.current.y, I = Math.hypot(i, r);
+    if (!P && Math.abs(I) < ut) {
+      if (o === 0)
+        if (l >= m)
+          h(!1), p(1), a({ top: 0, left: 0 });
+        else {
+          const s = u.current.getBoundingClientRect(), { relX: g, relY: E } = z(
+            e,
+            n,
+            s.left,
+            s.top
+          ), v = j(
+            !0,
+            g,
+            E,
+            d.left,
+            d.top,
+            D
+          );
+          a(v), p(l * D), h(!0);
+        }
+      else if (o === 1)
+        if (l / D <= 1)
+          h(!1), p(1), a({ top: 0, left: 0 });
+        else {
+          const s = u.current.getBoundingClientRect(), { relX: g, relY: E } = z(
+            e,
+            n,
+            s.left,
+            s.top
+          ), v = j(
+            !1,
+            g,
+            E,
+            d.left,
+            d.top,
+            D
+          );
+          a(v), p(l / D), h(!0);
+        }
+    }
+    R(!1);
+  }
+  function A(t) {
+    if (P)
+      return;
+    t.preventDefault(), h(!0);
+    const e = t.deltaY < 0;
+    p(e ? (n) => {
+      const o = n * B;
+      return o >= m ? m : o;
+    } : (n) => {
+      const o = n / B;
+      return o <= 1 ? (h(!1), p(1), a({ top: 0, left: 0 }), 1) : o;
+    }), y.current = {
+      x: t.clientX,
+      y: t.clientY,
+      isZoomIn: e,
+      isScrolling: !0
+    };
+  }
+  G(() => {
+    var e;
+    const t = (e = u.current) == null ? void 0 : e.getBoundingClientRect();
+    l !== 1 && l !== m && y.current.isScrolling && t && (y.current = {
+      ...y.current,
+      isScrolling: !1
+    }, a((n) => {
+      const { relX: o, relY: i } = z(
+        y.current.x,
+        y.current.y,
+        t.left,
+        t.top
+      );
+      return j(
+        y.current.isZoomIn,
+        o,
+        i,
+        n.left,
+        n.top,
+        B
+      );
+    }));
+  }, [l]);
+  function nt(t) {
+    t.preventDefault();
+  }
+  function z(t, e, n, o) {
+    const i = t - n, r = e - o;
+    return { relX: i, relY: r };
+  }
+  function j(t, e, n, o, i, r) {
+    return t ? {
+      top: n - (n - i) * r,
+      left: e - (e - o) * r
+    } : {
+      top: n - (n - i) / r,
+      left: e - (e - o) / r
+    };
+  }
+  function ot() {
+    return w && P ? "default" : c && l >= m ? "zoom-out" : S ? "grabbing" : Q ? "move" : c || w ? "zoom-in" : "grab";
+  }
+  const it = {
+    height: c && u.current ? u.current.offsetHeight * l + "px" : "100%",
+    width: c && u.current ? u.current.offsetWidth * l + "px" : "100%",
+    position: c ? "absolute" : "static",
+    top: c ? `${d.top}px` : "0",
+    left: c ? `${d.left}px` : "0",
+    objectFit: "contain",
+    touchAction: c || Z ? "none" : "auto"
+  };
+  return /* @__PURE__ */ rt(
+    "div",
+    {
+      onTouchStart: K,
+      onTouchMove: F,
+      onTouchEnd: $,
+      onMouseDown: K,
+      onMouseMove: F,
+      onMouseUp: $,
+      onMouseLeave: $,
+      onDragStart: nt,
+      onContextMenu: (t) => t.preventDefault(),
+      ref: u,
+      style: {
+        cursor: ot(),
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        overflow: "hidden",
+        touchAction: c || Z ? "none" : "auto"
+      },
+      children: [
+        Y.map((t, e) => /* @__PURE__ */ k(
+          "img",
+          {
+            style: {
+              display: e === X ? "block" : "none",
+              ...e === X ? it : {}
+            },
+            src: t,
+            alt: "",
+            onContextMenu: (n) => n.preventDefault(),
+            onLoad: e === M ? () => tt(!0) : void 0
+          },
+          t
+        )),
+        U ? /* @__PURE__ */ k(
+          U,
+          {
+            style: {
+              position: "absolute",
+              opacity: S || c || C || !J || w ? "0" : ".7",
+              transition: "opacity .3s ease-in",
+              pointerEvents: "none",
+              left: "50%",
+              top: "50%",
+              transform: "translate(-50%, -50%)"
+            }
+          }
+        ) : /* @__PURE__ */ k(
+          "div",
+          {
+            style: {
+              backgroundColor: "#393939",
+              color: "white",
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "center",
+              height: "max-content",
+              width: "max-content",
+              padding: "8px 16px",
+              left: "50%",
+              top: "50%",
+              transform: "translate(-50%, -50%)",
+              position: "absolute",
+              transition: "opacity .3s ease-in",
+              opacity: S || c || C || !J || w ? "0" : "0.7"
+            },
+            children: /* @__PURE__ */ k(lt, { size: "sm", children: "Drag to spin" })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  dt as default
+};

package/dist/organisms/SpinZoomViewer/SpinZoomViewer.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as SpinZoomViewer } from './SpinZoomViewer';
+declare const meta: Meta<typeof SpinZoomViewer>;
+export default meta;
+type Story = StoryObj<typeof SpinZoomViewer>;
+export declare const Default: Story;

package/dist/organisms/SpinZoomViewer/SpinZoomViewer.stories.js

@@ -0,0 +1,24 @@
+import { jsx as t } from "react/jsx-runtime";
+import r from "./SpinZoomViewer.js";
+const o = "1092-01", a = `https://dev.caseparts.com/graphics/ortery/web%20spin/${o}/${o}/images/lv1/`, s = [];
+for (let e = 0; e < 20; e++)
+  s.push(`${a}img${(e + 1).toString().padStart(2, "0")}.webp`);
+const n = {
+  title: "Case Parts/Organisms/SpinZoomViewer",
+  component: r,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered"
+  }
+}, p = {
+  render: (e) => /* @__PURE__ */ t("div", { style: { height: "500px", width: "500px" }, children: /* @__PURE__ */ t(r, { ...e }) }),
+  args: {
+    defaultIndex: 3,
+    images: s,
+    maxZoomLevel: 5
+  }
+};
+export {
+  p as Default,
+  n as default
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@caseparts-org/caseblocks",
   "private": false,
-  "version": "0.0.9",
+  "version": "0.0.11",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",