@g4rcez/components 3.0.1 → 4.0.0

package/dist/styles/theme.js

@@ -0,0 +1,4 @@
+import { DARK_THEME } from "./dark";
+import { LIGHT_THEME } from "./light";
+export var defaultDarkTheme = DARK_THEME;
+export var defaultLightTheme = LIGHT_THEME;

package/dist/styles/theme.types.js

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

package/dist/tabs-S00a8qq8.js

@@ -0,0 +1,106 @@
+import { jsx as l, jsxs as g } from "react/jsx-runtime";
+import A, { useState as k, useEffect as u, createContext as p, useRef as C, useContext as N, Fragment as S } from "react";
+import { c as m, I as R } from "./dom-Dl8XH0CK.js";
+import { u as T } from "./use-stable-ref-CYh-YkID.js";
+import { P as q } from "./polymorph-B5n9fs_K.js";
+import { Card as I } from "./components/display/card.js";
+const _ = (t, r) => {
+  const [n, a] = k(() => r || t);
+  return u(() => {
+    a(t);
+  }, [t]), [n, a];
+}, h = {
+  ArrowLeft: "ArrowLeft",
+  ArrowRight: "ArrowRight"
+}, y = p(""), j = (t) => t.hasAttribute("disabled") || t.getAttribute("aria-disabled") === "true", f = (t, r, n) => {
+  const a = n === "forward" ? 1 : -1, o = r + a;
+  for (let s = o; s >= 0 && s < t.length; s += a) {
+    const d = t[s];
+    if (!j(d)) return d;
+  }
+  return n === "backward" ? f(t, t.length - 1, "backward") : f(t, -1, "forward");
+}, w = (t, r) => {
+  const n = Array.from(t.querySelectorAll("li")), a = n.findIndex((s) => s.dataset.active === "true");
+  if (a === -1) return null;
+  const o = f(n, a, r);
+  return o === null ? null : (o.querySelector("button")?.focus({ preventScroll: !1 }), o.getAttribute("data-id") || "");
+}, v = {
+  [h.ArrowLeft]: (t, r) => w(r, "backward"),
+  [h.ArrowRight]: (t, r) => w(r, "forward")
+}, $ = (t) => {
+  const [r, n] = _(t.active), a = C(null), o = T(t.onChange);
+  u(() => {
+    const i = a.current;
+    if (i === null) return;
+    let e = i.querySelector("li[data-active=true]");
+    if (e === null) {
+      e = i.querySelector("li[data-id]");
+      const c = e.getAttribute("data-id") || "";
+      n(c);
+    }
+  }, [t.active, n]), u(() => {
+    o.current && o.current(r);
+  }, [o, r]);
+  const s = A.Children.toArray(t.children), d = (i) => {
+    const e = i.currentTarget;
+    n(e.dataset.id || "");
+  }, x = (i) => {
+    if (a.current === null) return;
+    const e = i.key;
+    if (R.keyof(v, e)) {
+      const c = v[e], b = c(i, a.current);
+      if (b === null) return;
+      n(b);
+    }
+  };
+  return /* @__PURE__ */ l(y.Provider, { value: r, children: /* @__PURE__ */ l(
+    I,
+    {
+      className: t.className,
+      container: m("pt-0 max-w-full w-full min-w-0", t.container),
+      header: /* @__PURE__ */ g("header", { className: "relative mb-2 overflow-x-auto", children: [
+        /* @__PURE__ */ l("div", { className: "absolute bottom-0 h-[1px] w-full bg-card-border" }),
+        /* @__PURE__ */ l("nav", { className: "min-w-0", children: /* @__PURE__ */ l("ul", { onKeyDown: x, ref: a, className: "flex w-0 min-w-full flex-1 justify-start overflow-x-auto", children: s.map((i) => {
+          const e = i.props, c = r === e.id;
+          return /* @__PURE__ */ l(
+            "li",
+            {
+              "data-id": e.id,
+              "data-active": c,
+              "aria-disabled": e.disabled,
+              className: m(
+                "relative w-fit border-b border-transparent transition-all",
+                c ? "border-primary font-medium text-primary" : "",
+                e.disabled ? "aria-disabled:text-disabled" : ""
+              ),
+              children: /* @__PURE__ */ l(
+                q,
+                {
+                  as: "button",
+                  type: "button",
+                  "data-id": e.id,
+                  "aria-current": "page",
+                  disabled: e.disabled,
+                  onClick: e.disabled ? void 0 : d,
+                  className: "block w-full whitespace-nowrap px-10 py-4 disabled:cursor-not-allowed",
+                  children: e.title
+                }
+              )
+            },
+            `tab-header-${e.id}`
+          );
+        }) }) })
+      ] }),
+      children: t.children
+    }
+  ) });
+}, E = () => N(y), z = (t) => {
+  const r = E();
+  return /* @__PURE__ */ l(S, { children: t.id === r ? t.children : null });
+};
+export {
+  $ as T,
+  z as a,
+  _ as u
+};
+//# sourceMappingURL=tabs-S00a8qq8.js.map

package/dist/tabs-S00a8qq8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-S00a8qq8.js","sources":["../src/hooks/use-reactive.ts","../src/lib/keyboard-area.ts","../src/components/display/tabs.tsx"],"sourcesContent":["\"use client\";\nimport { useEffect, useState } from \"react\";\n\nexport const useReactive = <T>(t: T, initial?: T) => {\n    const [state, setState] = useState(() => (initial ? initial : t));\n    useEffect(() => {\n        setState(t);\n    }, [t]);\n    return [state, setState] as const;\n};\n","import React from \"react\";\n\ntype EventKey =\n    | \"Backspace\"\n    | \"Tab\"\n    | \"Enter\"\n    | \"Shift\"\n    | \"Control\"\n    | \"Alt\"\n    | \"Pause\"\n    | \"CapsLock\"\n    | \"Escape\"\n    | \"Space\"\n    | \"PageUp\"\n    | \"PageDown\"\n    | \"End\"\n    | \"Home\"\n    | \"ArrowLeft\"\n    | \"ArrowUp\"\n    | \"ArrowRight\"\n    | \"ArrowDown\"\n    | \"PrintScreen\"\n    | \"Insert\"\n    | \"Delete\"\n    | \"0\"\n    | \"1\"\n    | \"2\"\n    | \"3\"\n    | \"4\"\n    | \"5\"\n    | \"6\"\n    | \"7\"\n    | \"8\"\n    | \"9\"\n    | \"a\"\n    | \"b\"\n    | \"c\"\n    | \"d\"\n    | \"e\"\n    | \"f\"\n    | \"g\"\n    | \"h\"\n    | \"i\"\n    | \"j\"\n    | \"k\"\n    | \"l\"\n    | \"m\"\n    | \"n\"\n    | \"o\"\n    | \"p\"\n    | \"q\"\n    | \"r\"\n    | \"s\"\n    | \"t\"\n    | \"u\"\n    | \"v\"\n    | \"w\"\n    | \"x\"\n    | \"y\"\n    | \"z\"\n    | \"Meta\"\n    | \"ContextMenu\"\n    | \"F1\"\n    | \"F2\"\n    | \"F3\"\n    | \"F4\"\n    | \"F5\"\n    | \"F6\"\n    | \"F7\"\n    | \"F8\"\n    | \"F9\"\n    | \"F10\"\n    | \"F11\"\n    | \"F12\"\n    | \"NumLock\"\n    | \"ScrollLock\"\n    | \"AudioVolumeMute\"\n    | \"AudioVolumeUp\"\n    | \"AudioVolumeDown\"\n    | \"MediaTrackNext\"\n    | \"MediaTrackPrevious\"\n    | \"MediaStop\"\n    | \"MediaPlayPause\"\n    | \"LaunchMail\"\n    | \"LaunchMediaPlayer\"\n    | \"LaunchApplication1\"\n    | \"LaunchApplication2\"\n    | \"Semicolon\"\n    | \"Equal\"\n    | \"Comma\"\n    | \"Minus\"\n    | \"Period\"\n    | \"Slash\"\n    | \"Backquote\"\n    | \"BracketLeft\"\n    | \"Backslash\"\n    | \"BracketRight\"\n    | \"Quote\";\n\nexport const keyboardKeys = {\n    ArrowUp: \"ArrowUp\",\n    ArrowDown: \"ArrowDown\",\n    ArrowLeft: \"ArrowLeft\",\n    ArrowRight: \"ArrowRight\",\n} as const;\n\ntype Callback<T extends HTMLElement = HTMLElement> = (e: KeyboardEvent | React.KeyboardEvent<T>) => void;\n\nexport class KeyboardArea<T extends HTMLElement> {\n    private set = new Set();\n\n    public key(key: EventKey, callback: Callback<T>) {\n        const fn: Callback<T> = (e) => (e.key === key ? callback(e) : undefined);\n        return () => this.set.delete(fn);\n    }\n\n    public onKeyDown(_: Callback<T>) {}\n}\n","\"use client\";\nimport React, { createContext, Fragment, PropsWithChildren, useContext, useEffect, useRef } from \"react\";\nimport { Is, Nullable } from \"sidekicker\";\nimport { useReactive } from \"../../hooks/use-reactive\";\nimport { useStableRef } from \"../../hooks/use-stable-ref\";\nimport { css } from \"../../lib/dom\";\nimport { keyboardKeys } from \"../../lib/keyboard-area\";\nimport { Label } from \"../../types\";\nimport { Polymorph } from \"../core/polymorph\";\nimport { Card, CardProps } from \"./card\";\n\nexport type TabsProps = Omit<CardProps<\"div\">, \"onChange\"> & {\n    active: string;\n    container?: string;\n    className?: string;\n    onChange?: (id: string) => void;\n};\n\nconst Context = createContext<string>(\"\");\n\nconst isElementDisabled = (element: HTMLElement): boolean => element.hasAttribute(\"disabled\") || element.getAttribute(\"aria-disabled\") === \"true\";\n\nconst getNElement = (elements: HTMLElement[], currentIndex: number, direction: \"backward\" | \"forward\"): HTMLElement | null => {\n    const step = direction === \"forward\" ? 1 : -1;\n    const startIndex = currentIndex + step;\n    for (let i = startIndex; i >= 0 && i < elements.length; i += step) {\n        const element = elements[i];\n        if (!isElementDisabled(element)) return element;\n    }\n    return direction === \"backward\" ? getNElement(elements, elements.length - 1, \"backward\") : getNElement(elements, -1, \"forward\");\n};\n\nconst moveOn = (ul: HTMLUListElement, direction: \"backward\" | \"forward\") => {\n    const items = Array.from(ul.querySelectorAll(\"li\"));\n    const find = items.findIndex((x) => x.dataset.active === \"true\");\n    if (find === -1) return null;\n    const item = getNElement(items, find, direction);\n    if (item === null) return null;\n    item.querySelector(\"button\")?.focus({ preventScroll: false });\n    return item.getAttribute(\"data-id\") || \"\";\n};\n\nconst actionKeys = {\n    [keyboardKeys.ArrowLeft]: (_: unknown, ul: HTMLUListElement): Nullable<string> => moveOn(ul, \"backward\"),\n    [keyboardKeys.ArrowRight]: (_: unknown, ul: HTMLUListElement): Nullable<string> => moveOn(ul, \"forward\"),\n};\n\nexport const Tabs = (props: PropsWithChildren<TabsProps>) => {\n    const [active, setActive] = useReactive(props.active);\n    const ref = useRef<HTMLUListElement | null>(null);\n    const onChangeRef = useStableRef(props.onChange);\n\n    useEffect(() => {\n        const header = ref.current;\n        if (header === null) return;\n        let first = header.querySelector<HTMLElement>(`li[data-active=true]`);\n        if (first === null) {\n            first = header.querySelector<HTMLElement>(`li[data-id]`)!;\n            const id = first.getAttribute(\"data-id\") || \"\";\n            setActive(id);\n        }\n    }, [props.active, setActive]);\n\n    useEffect(() => {\n        if (onChangeRef.current) onChangeRef.current(active);\n    }, [onChangeRef, active]);\n\n    const items = React.Children.toArray(props.children as React.ReactElement<TabProps>);\n\n    const onClick = (e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {\n        const anchor = e.currentTarget;\n        setActive(anchor.dataset.id || \"\");\n    };\n\n    const onKeyDown = (e: React.KeyboardEvent<HTMLUListElement>) => {\n        if (ref.current === null) return;\n        const k = e.key;\n        if (Is.keyof(actionKeys, k)) {\n            const fn = actionKeys[k];\n            const result = fn(e, ref.current);\n            if (result === null) return;\n            setActive(result);\n        }\n    };\n\n    return (\n        <Context.Provider value={active}>\n            <Card\n                className={props.className}\n                container={css(\"pt-0 max-w-full w-full min-w-0\", props.container)}\n                header={\n                    <header className=\"relative mb-2 overflow-x-auto\">\n                        <div className=\"absolute bottom-0 h-[1px] w-full bg-card-border\" />\n                        <nav className=\"min-w-0\">\n                            <ul onKeyDown={onKeyDown} ref={ref} className=\"flex w-0 min-w-full flex-1 justify-start overflow-x-auto\">\n                                {items.map((x: any) => {\n                                    const inner = x.props as TabProps;\n                                    const current = active === inner.id;\n                                    return (\n                                        <li\n                                            data-id={inner.id}\n                                            data-active={current}\n                                            key={`tab-header-${inner.id}`}\n                                            aria-disabled={inner.disabled}\n                                            className={css(\n                                                \"relative w-fit border-b border-transparent transition-all\",\n                                                current ? \"border-primary font-medium text-primary\" : \"\",\n                                                inner.disabled ? \"aria-disabled:text-disabled\" : \"\"\n                                            )}\n                                        >\n                                            <Polymorph\n                                                as=\"button\"\n                                                type=\"button\"\n                                                data-id={inner.id}\n                                                aria-current=\"page\"\n                                                disabled={inner.disabled}\n                                                onClick={inner.disabled ? undefined : onClick}\n                                                className=\"block w-full whitespace-nowrap px-10 py-4 disabled:cursor-not-allowed\"\n                                            >\n                                                {inner.title as any}\n                                            </Polymorph>\n                                        </li>\n                                    );\n                                })}\n                            </ul>\n                        </nav>\n                    </header>\n                }\n            >\n                {props.children}\n            </Card>\n        </Context.Provider>\n    );\n};\n\nconst useTabs = () => useContext(Context);\n\ntype CommonTabProps = { id: string; disabled?: boolean };\n\nexport type TabProps = CommonTabProps &\n    (\n        | { title: string; label?: undefined }\n        | {\n              label: string;\n              title: Omit<Label, string>;\n          }\n    );\n\nexport const Tab = (props: PropsWithChildren<TabProps>) => {\n    const active = useTabs();\n    return <Fragment>{props.id === active ? props.children : null}</Fragment>;\n};\n"],"names":["useReactive","initial","state","setState","useState","useEffect","keyboardKeys","Context","createContext","isElementDisabled","element","getNElement","elements","currentIndex","direction","step","startIndex","i","moveOn","ul","items","find","x","item","actionKeys","_","Tabs","props","active","setActive","ref","useRef","onChangeRef","useStableRef","header","first","id","React","onClick","e","anchor","onKeyDown","k","Is","fn","result","jsx","Card","css","jsxs","inner","current","Polymorph","useTabs","useContext","Tab","Fragment"],"mappings":"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"}

package/dist/use-motion-value-eGwNuWuw.js

@@ -0,0 +1,14 @@
+import { useContext as n, useState as u, useEffect as a } from "react";
+import { u as c, y as f, M as i } from "./MotionConfigContext-C7MqlSdv.js";
+function C(t) {
+  const o = c(() => f(t)), { isStatic: e } = n(i);
+  if (e) {
+    const [, s] = u(t);
+    a(() => o.on("change", s), []);
+  }
+  return o;
+}
+export {
+  C as u
+};
+//# sourceMappingURL=use-motion-value-eGwNuWuw.js.map

package/dist/use-motion-value-eGwNuWuw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-motion-value-eGwNuWuw.js","sources":["../node_modules/framer-motion/dist/es/value/use-motion-value.mjs"],"sourcesContent":["\"use client\";\nimport { motionValue } from 'motion-dom';\nimport { useContext, useState, useEffect } from 'react';\nimport { MotionConfigContext } from '../context/MotionConfigContext.mjs';\nimport { useConstant } from '../utils/use-constant.mjs';\n\n/**\n * Creates a `MotionValue` to track the state and velocity of a value.\n *\n * Usually, these are created automatically. For advanced use-cases, like use with `useTransform`, you can create `MotionValue`s externally and pass them into the animated component via the `style` prop.\n *\n * ```jsx\n * export const MyComponent = () => {\n *   const scale = useMotionValue(1)\n *\n *   return <motion.div style={{ scale }} />\n * }\n * ```\n *\n * @param initial - The initial state.\n *\n * @public\n */\nfunction useMotionValue(initial) {\n    const value = useConstant(() => motionValue(initial));\n    /**\n     * If this motion value is being used in static mode, like on\n     * the Framer canvas, force components to rerender when the motion\n     * value is updated.\n     */\n    const { isStatic } = useContext(MotionConfigContext);\n    if (isStatic) {\n        const [, setLatest] = useState(initial);\n        useEffect(() => value.on(\"change\", setLatest), []);\n    }\n    return value;\n}\n\nexport { useMotionValue };\n//# sourceMappingURL=use-motion-value.mjs.map\n"],"names":["useMotionValue","initial","value","useConstant","motionValue","isStatic","useContext","MotionConfigContext","setLatest","useState","useEffect"],"mappings":";;AAuBA,SAASA,EAAeC,GAAS;AAC7B,QAAMC,IAAQC,EAAY,MAAMC,EAAYH,CAAO,CAAC,GAM9C,EAAE,UAAAI,EAAQ,IAAKC,EAAWC,CAAmB;AACnD,MAAIF,GAAU;AACV,UAAM,GAAGG,CAAS,IAAIC,EAASR,CAAO;AACtC,IAAAS,EAAU,MAAMR,EAAM,GAAG,UAAUM,CAAS,GAAG,EAAE;AAAA,EACzD;AACI,SAAON;AACX;","x_google_ignoreList":[0]}

package/dist/use-stable-ref-CYh-YkID.js

@@ -0,0 +1,11 @@
+import { useRef as t, useEffect as f } from "react";
+const o = (e) => {
+  const r = t(e);
+  return f(() => {
+    r.current = e;
+  }, [e]), r;
+};
+export {
+  o as u
+};
+//# sourceMappingURL=use-stable-ref-CYh-YkID.js.map

package/dist/use-stable-ref-CYh-YkID.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-stable-ref-CYh-YkID.js","sources":["../src/hooks/use-stable-ref.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useRef } from \"react\";\n\nexport const useStableRef = <T>(value: T) => {\n    const ref = useRef<T>(value);\n\n    useEffect(() => {\n        ref.current = value;\n    }, [value]);\n\n    return ref;\n};\n"],"names":["useStableRef","value","ref","useRef","useEffect"],"mappings":";AAGO,MAAMA,IAAe,CAAIC,MAAa;AACzC,QAAMC,IAAMC,EAAUF,CAAK;AAE3B,SAAAG,EAAU,MAAM;AACZ,IAAAF,EAAI,UAAUD;AAAA,EAAA,GACf,CAACA,CAAK,CAAC,GAEHC;AACX;"}

package/dist/use-translations-BwLKTrZv.js

@@ -0,0 +1,10 @@
+import { useContext as o } from "react";
+import { C as r, d as s } from "./context-BFXNJVn2.js";
+const e = () => {
+  const t = o(r);
+  return t ? t.map : s;
+};
+export {
+  e as u
+};
+//# sourceMappingURL=use-translations-BwLKTrZv.js.map

package/dist/use-translations-BwLKTrZv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-translations-BwLKTrZv.js","sources":["../src/hooks/use-translations.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { Context } from \"../config/context\";\nimport { defaultTranslations } from \"../config/default-translations\";\n\nexport const useTranslations = () => {\n    const ctx = useContext(Context);\n    if (!ctx) return defaultTranslations;\n    return ctx.map!;\n};\n"],"names":["useTranslations","ctx","useContext","Context","defaultTranslations"],"mappings":";;AAIO,MAAMA,IAAkB,MAAM;AACjC,QAAMC,IAAMC,EAAWC,CAAO;AAC9B,SAAKF,IACEA,EAAI,MADMG;AAErB;"}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@g4rcez/components",
     "description": "Customizable react components.",
-    "version": "3.0.1",
+    "version": "4.0.0",
     "sideEffects": false,
     "private": false,
     "packageManager": "pnpm@10.12.3",
@@ -29,7 +29,7 @@
         "lib:css": "BUILD_LIB=true tailwind -i ./src/index.css -o ./dist/index.css --minify",
         "lib:tailwind": "tsc -p tsconfig.tailwind.json",
         "lib:types": "tsc -p tsconfig.lib.json",
-        "preset": "tsc -p tsconfig.tailwind.json",
+        "preset": "tsc -p tsconfig.styles.json && tsc -p tsconfig.tailwind.json",
         "test": "vitest run",
         "test:watch": "vitest watch"
     },
@@ -40,11 +40,11 @@
     "dependencies": {
         "@base-ui/react": "1.2.0",
         "@floating-ui/react": "0.27.18",
+        "@phosphor-icons/react": "2.1.10",
         "class-variance-authority": "0.7.1",
         "clsx": "2.1.1",
         "date-fns": "4.1.0",
         "linq-arrays": "3.2.5",
-        "lucide-react": "0.575.0",
         "motion": "12.34.3",
         "pretty-bytes": "7.1.0",
         "qs": "6.15.0",
@@ -87,8 +87,7 @@
     },
     "source": "./src/index.ts",
     "types": "./dist/index.d.ts",
-    "main": "./dist/index.mjs",
-    "browser": "./dist/index.umd.js",
+    "main": "./dist/index.js",
     "module": "./dist/index.js",
     "files": [
         "dist",