meticulous-ui 2.2.8 → 2.3.0

package/components/Timer/styles.js

@@ -0,0 +1,164 @@
+import t, { css as e } from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+import n from "../Icons/Add/Add.js";
+import a from "../Icons/MediaStopFilled/MediaStopFilled.js";
+import s from "../Icons/MediaPauseFilled/MediaPauseFilled.js";
+import d from "../Icons/MediaPlayFilled/MediaPlayFilled.js";
+import i from "../../colors/white.js";
+import p from "../../colors/black.js";
+import l from "../../colors/red.js";
+import { COLOR_MAPPING as c } from "./constants.js";
+const m = ({ $color: o }) => c[o], r = e`
+  position: absolute;
+  bottom: 50%;
+  transform-origin: bottom;
+  border-radius: 4px;
+`, $ = t.div`
+  position: relative;
+  height: 20rem;
+  width: 20rem;
+  border-radius: 1.2rem;
+  background-color: ${m};
+`, A = t.div`
+  position: absolute;
+  left: 50%;
+  top: 48%;
+  width: 12rem;
+  height: 12rem;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.16);
+  pointer-events: none;
+`, M = t.div`
+  position: absolute;
+  left: 50%;
+  top: 48%;
+  transform: translate(-50%, -50%);
+`, F = t.div`
+  color: ${i};
+  font-size: 1.5rem;
+  font-weight: 600;
+  text-align: center;
+  opacity: 0.8;
+`, P = t.span`
+  position: absolute;
+  width: 2.4px;
+  height: 2.4px;
+  background: rgba(255, 255, 255, 0.4);
+  transform-origin: 94px;
+  border-radius: 2px;
+
+  &:nth-child(5n) {
+    width: 3px;
+    height: 3px;
+    background: rgba(255, 255, 255, 0.7);
+  }
+
+  &:nth-child(15n) {
+    width: 6px;
+    height: 2px;
+    background: rgba(255, 255, 255);
+  }
+`, y = t.div`
+  position: absolute;
+  left: 21%;
+  top: 44.3%;
+  transform: translate(-50%, -50%) rotate(6.7deg);
+`, H = t.div`
+  ${r};
+  width: 6px;
+  height: 60px;
+  background: ${i};
+`, S = t.div`
+  ${r};
+  width: 4px;
+  height: 80px;
+  background: ${p.m200};
+`, W = t.div`
+  ${r};
+  width: 2px;
+  height: 90px;
+  background: ${l.m800};
+`, D = t.div`
+  position: absolute;
+  left: 16%;
+  top: 14%;
+`, R = t.div`
+  position: absolute;
+  bottom: 6%;
+  left: 8%;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  ${({ $noActions: o }) => o && e`
+      pointer-events: none;
+      opacity: 0.5;
+    `}
+`, B = t.div`
+  position: absolute;
+  bottom: 6%;
+  right: 8%;
+  border-radius: 0.4rem;
+`, C = t.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  height: 2.4rem;
+  width: 2.4rem;
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.4);
+`, T = t(n)`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+`, L = t(a)`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+`, N = t(s)`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+`, O = t(d)`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+`, _ = t.div`
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background-color: ${i};
+`, z = t.div`
+  position: absolute;
+  left: 26%;
+  top: 24%;
+  rotate: ${({ $angle: o }) => 45 + o}deg;
+  height: 157.5px;
+  width: 157.5px;
+  transform-origin: center;
+`;
+export {
+  C as ActionBtn,
+  T as AddWrapper,
+  D as AlarmRing,
+  y as AllDots,
+  _ as Bullet,
+  z as BulletRing,
+  A as Dimmer,
+  P as Dots,
+  H as HourHand,
+  R as LeftActions,
+  N as MediaPauseFilledWrapper,
+  O as MediaPlayFilledWrapper,
+  L as MediaStopFilledWrapper,
+  S as MinuteHand,
+  B as RightActions,
+  W as SecondHand,
+  M as Time,
+  F as TimeTxt,
+  $ as Wrapper
+};

package/components/Typography/Headings/H1.js

@@ -0,0 +1,9 @@
+import { j as t } from "../../../_virtual/jsx-runtime.js";
+import s from "../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+const e = s.h1`
+  color: ${({ $color: o }) => o};
+  font-size: 3.6rem;
+`, n = ({ color: o, children: r }) => /* @__PURE__ */ t.jsx(e, { $color: o, children: r });
+export {
+  n as default
+};

package/components/Typography/Headings/H2.js

@@ -0,0 +1,9 @@
+import { j as t } from "../../../_virtual/jsx-runtime.js";
+import s from "../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+const e = s.h2`
+  color: ${({ $color: o }) => o};
+  font-size: 3rem;
+`, n = ({ color: o, children: r }) => /* @__PURE__ */ t.jsx(e, { $color: o, children: r });
+export {
+  n as default
+};

package/components/Typography/Headings/H3.js

@@ -0,0 +1,9 @@
+import { j as t } from "../../../_virtual/jsx-runtime.js";
+import s from "../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+const e = s.h3`
+  color: ${({ $color: o }) => o};
+  font-size: 2.4rem;
+`, n = ({ color: o, children: r }) => /* @__PURE__ */ t.jsx(e, { $color: o, children: r });
+export {
+  n as default
+};

package/components/Typography/Headings/H4.js

@@ -0,0 +1,9 @@
+import { j as t } from "../../../_virtual/jsx-runtime.js";
+import s from "../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+const e = s.h4`
+  color: ${({ $color: o }) => o};
+  font-size: 1.8rem;
+`, n = ({ color: o, children: r }) => /* @__PURE__ */ t.jsx(e, { $color: o, children: r });
+export {
+  n as default
+};

package/components/Typography/Headings/H5.js

@@ -0,0 +1,9 @@
+import { j as t } from "../../../_virtual/jsx-runtime.js";
+import s from "../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+const e = s.h5`
+  color: ${({ $color: o }) => o};
+  font-size: 1.4rem;
+`, n = ({ color: o, children: r }) => /* @__PURE__ */ t.jsx(e, { $color: o, children: r });
+export {
+  n as default
+};

package/components/Typography/Headings/H6.js

@@ -0,0 +1,9 @@
+import { j as t } from "../../../_virtual/jsx-runtime.js";
+import s from "../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+const e = s.h6`
+  color: ${({ $color: o }) => o};
+  font-size: 1.2rem;
+`, n = ({ color: o, children: r }) => /* @__PURE__ */ t.jsx(e, { $color: o, children: r });
+export {
+  n as default
+};

package/components/VideoPlayer/VideoPlayer.js

@@ -0,0 +1,34 @@
+import { j as r } from "../../_virtual/jsx-runtime.js";
+import { useRef as n } from "react";
+import { VideoContainer as p, Video as V } from "./styles.js";
+import { useSpacebarToggle as h } from "./useSpacebarToggle.js";
+import x from "./components/Volumebar/Volumebar.js";
+import { useVolumeOverlay as j } from "./useVolumeOverlay.js";
+const C = ({ link: s, thumbnail: i, width: u = "600", borderRadius: c = 8, height: l = "auto" }) => {
+  const e = n(null), t = n(null), { volume: m, showVolume: a } = j(), d = () => {
+    var o;
+    (o = e.current) == null || o.focus();
+  }, f = (o) => {
+    o.code === "Space" && o.preventDefault();
+  };
+  return h(e, t, a), /* @__PURE__ */ r.jsxs(p, { ref: t, $width: u, $height: l, children: [
+    /* @__PURE__ */ r.jsx(
+      V,
+      {
+        $borderRadius: c,
+        ref: e,
+        src: s,
+        poster: i,
+        controls: !0,
+        tabIndex: 0,
+        onClick: d,
+        onKeyDown: f,
+        children: "Your browser does not support the video tag."
+      }
+    ),
+    /* @__PURE__ */ r.jsx(x, { volume: m })
+  ] });
+};
+export {
+  C as default
+};

package/components/VideoPlayer/components/Volumebar/Volumebar.js

@@ -0,0 +1,13 @@
+import { j as r } from "../../../../_virtual/jsx-runtime.js";
+import { Wrapper as n, Track as s, Fill as e, Label as o } from "./styles.js";
+const i = ({ volume: t }) => {
+  if (t === null) return null;
+  const l = Math.round(t);
+  return /* @__PURE__ */ r.jsxs(n, { children: [
+    /* @__PURE__ */ r.jsx(s, { children: /* @__PURE__ */ r.jsx(e, { $pct: l }) }),
+    /* @__PURE__ */ r.jsx(o, { children: l })
+  ] });
+};
+export {
+  i as default
+};

package/components/VideoPlayer/components/Volumebar/styles.js

@@ -0,0 +1,38 @@
+import e from "../../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+const i = e.div`
+  position: absolute;
+  right: 0.8rem;
+  top: 1.6rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.6rem;
+  pointer-events: none;
+  user-select: none;
+`, n = e.div`
+  width: 0.4rem;
+  height: 8rem;
+  background: rgba(255, 255, 255, 0.25);
+  border-radius: 0.2rem;
+  overflow: hidden;
+  display: flex;
+  align-items: flex-end;
+`, o = e.div`
+  width: 100%;
+  height: ${({ $pct: r }) => r}%;
+  background: #fff;
+  border-radius: 0.2rem;
+  transition: height 0.1s ease;
+`, s = e.span`
+  font-size: 1.1rem;
+  color: rgba(255, 255, 255, 0.85);
+  font-weight: 500;
+  width: 3.5rem;
+  text-align: center;
+`;
+export {
+  o as Fill,
+  s as Label,
+  n as Track,
+  i as Wrapper
+};

package/components/VideoPlayer/index.js

@@ -0,0 +1,4 @@
+import o from "./VideoPlayer.js";
+export {
+  o as default
+};

package/components/VideoPlayer/styles.js

@@ -0,0 +1,34 @@
+import t from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+import o from "../../colors/black.js";
+const c = t.div`
+  position: relative;
+  display: inline-block;
+  width: ${({ $width: i }) => i}px;
+  height: ${({ $height: i }) => i}px;
+
+  &:fullscreen video {
+    width: 100vw;
+    height: 100vh;
+    object-fit: contain;
+    background: ${o.m900};
+  }
+`, r = t.video`
+  border-radius: ${({ $borderRadius: i }) => i}px;
+  outline: none;
+  width: 100%;
+  height: 100%;
+  max-width: ${({ width: i }) => i}px;
+  aspect-ratio: 16 / 9;
+  background-color: #000;
+  object-fit: contain;
+
+  &:fullscreen {
+    width: 100vw;
+    height: 100vh;
+    object-fit: contain;
+  }
+`;
+export {
+  r as Video,
+  c as VideoContainer
+};

package/components/VideoPlayer/useSpacebarToggle.js

@@ -0,0 +1,37 @@
+import { useEffect as f } from "react";
+const l = (c, a, r) => {
+  f(() => {
+    const u = (t) => {
+      var d;
+      if (![
+        "Space",
+        "KeyF",
+        "Escape",
+        "ArrowUp",
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight",
+        "KeyM"
+      ].includes(t.code))
+        return;
+      const n = t.target;
+      if (n && (n.tagName === "INPUT" || n.tagName === "TEXTAREA" || n.isContentEditable))
+        return;
+      t.preventDefault();
+      const e = c.current;
+      if (e)
+        if (t.code === "Space")
+          if (e.paused) {
+            const i = e.play();
+            i && i.catch && i.catch(() => {
+            });
+          } else
+            e.pause();
+        else t.code === "KeyF" ? document.fullscreenElement ? document.exitFullscreen() : (d = a.current) == null || d.requestFullscreen() : t.code === "ArrowUp" ? (e.volume = Math.min(1, e.volume + 0.05), r == null || r(e.volume)) : t.code === "ArrowDown" ? (e.volume = Math.max(0, e.volume - 0.05), r == null || r(e.volume)) : t.code === "KeyM" ? (e.volume = e.volume > 0 ? 0 : 1, r == null || r(e.volume)) : t.code === "ArrowLeft" ? e.currentTime > 5 ? e.currentTime -= 5 : e.currentTime > 0 && (e.currentTime = 0) : t.code === "ArrowRight" && (e.currentTime < e.duration - 5 ? e.currentTime += 5 : e.currentTime < e.duration && (e.currentTime = e.duration));
+    };
+    return window.addEventListener("keydown", u, !0), () => window.removeEventListener("keydown", u, !0);
+  }, [c, a, r]);
+};
+export {
+  l as useSpacebarToggle
+};

package/components/VideoPlayer/useVolumeOverlay.js

@@ -0,0 +1,10 @@
+import { useState as r, useRef as n, useCallback as s } from "react";
+const c = () => {
+  const [u, e] = r(null), t = n(null), o = s((l) => {
+    e(Math.round(l * 100)), clearTimeout(t.current), t.current = setTimeout(() => e(null), 1500);
+  }, []);
+  return { volume: u, showVolume: o };
+};
+export {
+  c as useVolumeOverlay
+};

package/index.js

@@ -1,24 +1,48 @@
-import { default as a } from "./components/Pagination/Pagination.js";
-import { default as e } from "./components/Toast/Toast.js";
+import { default as t } from "./components/Pagination/Pagination.js";
+import { default as r } from "./components/Toast/Toast.js";
 import { default as p } from "./components/Spinner/Spinner.js";
 import { default as u } from "./components/OtpInput/OtpInput.js";
-import { default as d } from "./components/Dropdown/Dropdown.js";
+import { default as s } from "./components/Dropdown/Dropdown.js";
 import { default as m } from "./components/Button/Button.js";
-import { default as i } from "./components/Input/Input/Input.js";
-import { default as I } from "./components/Input/Textarea/Textarea.js";
-import { default as g } from "./colors/index.js";
-import { default as B } from "./utils/index.js";
-import { default as O } from "./components/Icons/index.js";
+import { default as n } from "./components/Timer/Timer.js";
+import { default as c } from "./components/VideoPlayer/VideoPlayer.js";
+import { default as T } from "./components/Typography/P/P.js";
+import { default as b } from "./components/Input/Input/Input.js";
+import { default as h } from "./components/Input/Textarea/Textarea.js";
+import { default as w } from "./components/Input/Checkbox/Checkbox.js";
+import { default as B } from "./components/Input/RadioGroup/RadioGroup.js";
+import { default as D } from "./components/Input/FileUploader/FileUploader.js";
+import { default as G } from "./colors/index.js";
+import { default as R } from "./utils/index.js";
+import { default as U } from "./components/Icons/index.js";
+import { default as j } from "./components/Typography/Headings/H1.js";
+import { default as v } from "./components/Typography/Headings/H2.js";
+import { default as A } from "./components/Typography/Headings/H3.js";
+import { default as J } from "./components/Typography/Headings/H4.js";
+import { default as L } from "./components/Typography/Headings/H5.js";
+import { default as N } from "./components/Typography/Headings/H6.js";
 export {
   m as Button,
-  d as Dropdown,
-  i as Input,
+  w as Checkbox,
+  s as Dropdown,
+  D as FileUploader,
+  j as H1,
+  v as H2,
+  A as H3,
+  J as H4,
+  L as H5,
+  N as H6,
+  b as Input,
   u as OtpInput,
-  a as Pagination,
+  T as P,
+  t as Pagination,
+  B as RadioGroup,
   p as Spinner,
-  I as Textarea,
-  e as Toast,
-  g as colors,
-  O as icons,
-  B as utils
+  h as Textarea,
+  n as Timer,
+  r as Toast,
+  c as VideoPlayer,
+  G as colors,
+  U as icons,
+  R as utils
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "2.2.8",
+  "version": "2.3.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {
@@ -36,6 +36,9 @@
     "button",
     "input",
     "textarea",
+    "checkbox",
+    "radio",
+    "file-uploader",
     "notification",
     "dropdown",
     "spinner",
@@ -58,15 +61,18 @@
     "publish:dist": "npm publish dist/"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/addon-docs": "^9.1.13",
     "@storybook/mdx2-csf": "^1.1.0",
-    "@storybook/react-vite": "^10.3.5",
+    "@storybook/react-vite": "^9.1.10",
     "@vitejs/plugin-react": "^5.0.4",
-    "eslint-plugin-storybook": "^10.3.5",
+    "eslint-plugin-storybook": "^9.1.10",
     "gh-pages": "^6.3.0",
     "prop-types": "^15.8.1",
-    "storybook": "^10.3.5",
+    "storybook": "^9.1.10",
     "svgo": "^4.0.0",
-    "vite-plugin-svgr": "^4.5.0"
+    "vite": "^6.0.0",
+    "vite-plugin-svgr": "^4.5.0",
+    "styled-components": "^6.0.0",
+    "lodash-es": "^4.17.21"
   }
 }