@techzyapp/ui-library 1.0.0

package/dist/FullscreenToggle-oWzYqUPH.js

@@ -0,0 +1,42 @@
+import { jsx as u } from "react/jsx-runtime";
+import { forwardRef as F, useState as s, useEffect as h } from "react";
+import { I as E } from "./Icon-CophpkHo.js";
+import { I } from "./IconButton-CBusrDa9.js";
+import { a as v } from "./ConfigProvider-2c94kUOk.js";
+const w = F(
+  function({ variant: m = "outlined", ...t }, i) {
+    const [a] = s(
+      () => typeof document < "u" && typeof document.documentElement.requestFullscreen == "function"
+    ), [l, f] = s(!1), d = v();
+    if (h(() => {
+      const e = () => f(document.fullscreenElement != null);
+      return e(), document.addEventListener("fullscreenchange", e), () => document.removeEventListener("fullscreenchange", e);
+    }, []), !a) return null;
+    const g = () => {
+      var e, n, c, o, r;
+      document.fullscreenElement ? (n = (e = document.exitFullscreen) == null ? void 0 : e.call(document)) == null || n.catch(() => {
+      }) : (r = (o = (c = document.documentElement).requestFullscreen) == null ? void 0 : o.call(c)) == null || r.catch(() => {
+      });
+    };
+    return /* @__PURE__ */ u(
+      I,
+      {
+        ref: i,
+        variant: m,
+        role: "switch",
+        "aria-checked": l,
+        "aria-label": d("fullscreenToggle.label"),
+        ...t,
+        onClick: (e) => {
+          var n;
+          (n = t.onClick) == null || n.call(t, e), g();
+        },
+        children: /* @__PURE__ */ u(E, { name: "Maximize3", style: l ? { transform: "rotate(180deg)" } : void 0 })
+      }
+    );
+  }
+);
+export {
+  w as F
+};
+//# sourceMappingURL=FullscreenToggle-oWzYqUPH.js.map

package/dist/FullscreenToggle-oWzYqUPH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullscreenToggle-oWzYqUPH.js","sources":["../src/components/FullscreenToggle/FullscreenToggle.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from 'react'\nimport { useT } from '../../theme'\nimport { Icon } from '../Icon'\nimport { IconButton, type IconButtonProps } from '../IconButton'\n\n/** Inherits `IconButton`'s look (variant, color, size); the icon and toggle behavior are built in. */\nexport type FullscreenToggleProps = Omit<IconButtonProps, 'children'>\n\n/**\n * A one-tap browser fullscreen switch. Renders an `IconButton` that calls the Fullscreen API —\n * `requestFullscreen` to maximize, `exitFullscreen` to restore — and flips its `Maximize3` icon 180°\n * while fullscreen (so it reads as \"minimize\"), keeping state in sync via the `fullscreenchange`\n * event. Renders **nothing** where the Fullscreen API is unavailable (e.g. iOS Safari on iPhone), so\n * it auto-hides on devices that can't go fullscreen. Styling comes from `IconButton`, so `variant`,\n * `color` and `size` pass through.\n */\nexport const FullscreenToggle = forwardRef<HTMLButtonElement, FullscreenToggleProps>(\n  function FullscreenToggle({ variant = 'outlined', ...props }, ref) {\n    // The Fullscreen API is absent on some devices (notably iOS Safari on iPhone); hide the control\n    // there, since tapping it could never do anything.\n    const [supported] = useState(\n      () =>\n        typeof document !== 'undefined' &&\n        typeof document.documentElement.requestFullscreen === 'function',\n    )\n    const [isFullscreen, setIsFullscreen] = useState(false)\n    const t = useT()\n\n    useEffect(() => {\n      const sync = () => setIsFullscreen(document.fullscreenElement != null)\n      sync() // pick up a session that's already fullscreen on mount\n      document.addEventListener('fullscreenchange', sync)\n      return () => document.removeEventListener('fullscreenchange', sync)\n    }, [])\n\n    if (!supported) return null\n\n    const toggle = () => {\n      // `?.` guards environments without the Fullscreen API; `.catch` swallows a blocked request\n      if (document.fullscreenElement) {\n        document.exitFullscreen?.()?.catch(() => {})\n      } else {\n        document.documentElement.requestFullscreen?.()?.catch(() => {})\n      }\n    }\n\n    return (\n      <IconButton\n        ref={ref}\n        variant={variant}\n        role=\"switch\"\n        aria-checked={isFullscreen}\n        aria-label={t('fullscreenToggle.label')}\n        {...props}\n        onClick={(event) => {\n          props.onClick?.(event) // preserve a caller-supplied handler, then toggle\n          toggle()\n        }}\n      >\n        <Icon name=\"Maximize3\" style={isFullscreen ? { transform: 'rotate(180deg)' } : undefined} />\n      </IconButton>\n    )\n  },\n)\n"],"names":["FullscreenToggle","forwardRef","variant","props","ref","supported","useState","isFullscreen","setIsFullscreen","t","useT","useEffect","sync","toggle","_b","_a","_e","_d","_c","jsx","IconButton","event","Icon"],"mappings":";;;;;AAgBO,MAAMA,IAAmBC;AAAA,EAC9B,SAA0B,EAAE,SAAAC,IAAU,YAAY,GAAGC,EAAA,GAASC,GAAK;AAGjE,UAAM,CAACC,CAAS,IAAIC;AAAA,MAClB,MACE,OAAO,WAAa,OACpB,OAAO,SAAS,gBAAgB,qBAAsB;AAAA,IAAA,GAEpD,CAACC,GAAcC,CAAe,IAAIF,EAAS,EAAK,GAChDG,IAAIC,EAAA;AASV,QAPAC,EAAU,MAAM;AACd,YAAMC,IAAO,MAAMJ,EAAgB,SAAS,qBAAqB,IAAI;AACrE,aAAAI,EAAA,GACA,SAAS,iBAAiB,oBAAoBA,CAAI,GAC3C,MAAM,SAAS,oBAAoB,oBAAoBA,CAAI;AAAA,IACpE,GAAG,CAAA,CAAE,GAED,CAACP,EAAW,QAAO;AAEvB,UAAMQ,IAAS,MAAM;;AAEnB,MAAI,SAAS,qBACXC,KAAAC,IAAA,SAAS,mBAAT,gBAAAA,EAAA,2BAAAD,EAA6B,MAAM,MAAM;AAAA,MAAC,MAE1CE,KAAAC,KAAAC,IAAA,SAAS,iBAAgB,sBAAzB,gBAAAD,EAAA,KAAAC,OAAA,QAAAF,EAAgD,MAAM,MAAM;AAAA,MAAC;AAAA,IAEjE;AAEA,WACE,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAhB;AAAA,QACA,SAAAF;AAAA,QACA,MAAK;AAAA,QACL,gBAAcK;AAAA,QACd,cAAYE,EAAE,wBAAwB;AAAA,QACrC,GAAGN;AAAA,QACJ,SAAS,CAACkB,MAAU;;AAClB,WAAAN,IAAAZ,EAAM,YAAN,QAAAY,EAAA,KAAAZ,GAAgBkB,IAChBR,EAAA;AAAA,QACF;AAAA,QAEA,UAAA,gBAAAM,EAACG,GAAA,EAAK,MAAK,aAAY,OAAOf,IAAe,EAAE,WAAW,iBAAA,IAAqB,OAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAGhG;AACF;"}

package/dist/Grid-Bw95bKkJ.cjs

@@ -0,0 +1,2 @@
+"use strict";const p=require("react/jsx-runtime"),m=require("react"),t=require("./Flex-CqL3Ghda.cjs"),g={start:"start",center:"center",end:"end",stretch:"stretch",baseline:"baseline"},x=m.forwardRef(function({cols:e,minItemWidth:r,fill:s=!1,gap:i,align:n,padding:a,inline:c=!1,style:d,...l},u){const o=r!=null?`repeat(${s?"auto-fill":"auto-fit"}, minmax(${t.space(r)}, 1fr))`:typeof e=="number"?`repeat(${e}, minmax(0, 1fr))`:e,f={display:c?"inline-grid":"grid",gridTemplateColumns:o,gap:t.space(i),alignItems:n&&g[n],padding:t.space(a),...d};return p.jsx("div",{ref:u,style:f,...l})});exports.Grid=x;
+//# sourceMappingURL=Grid-Bw95bKkJ.cjs.map

package/dist/Grid-Bw95bKkJ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid-Bw95bKkJ.cjs","sources":["../src/components/Flex/Grid.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react'\nimport { space, type FlexAlign, type Spacing } from './Flex'\n\nconst GRID_ALIGN: Record<FlexAlign, string> = {\n  start: 'start',\n  center: 'center',\n  end: 'end',\n  stretch: 'stretch',\n  baseline: 'baseline',\n}\n\nexport interface GridProps extends HTMLAttributes<HTMLDivElement> {\n  /** Fixed column count (`repeat(n, minmax(0,1fr))`) or a raw `grid-template-columns` string. */\n  cols?: number | string\n  /** Responsive columns: every cell at least this wide, auto-fitting to the width (overrides `cols`). */\n  minItemWidth?: Spacing\n  /**\n   * With `minItemWidth`, use `auto-fill` instead of `auto-fit` — keeps empty tracks at the min width\n   * so a few items stay their natural size rather than stretching to fill the row. Defaults to `false`.\n   */\n  fill?: boolean\n  /** Gap between cells (token key, px number, or CSS value). */\n  gap?: Spacing\n  /** `align-items` for the cells. */\n  align?: FlexAlign\n  /** Padding (token key, px number, or CSS value). */\n  padding?: Spacing\n  /** Render as `inline-grid`. */\n  inline?: boolean\n}\n\n/**\n * A CSS-grid layout primitive — lay children out in columns via props. Use `cols` for a fixed count\n * or `minItemWidth` for a responsive grid that auto-fits as many equal columns as fit (collapsing to\n * one on narrow widths). Spacing accepts `--tz-space-*` keys, px numbers, or any CSS value; consumer\n * `style` merges last.\n */\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(function Grid(\n  { cols, minItemWidth, fill = false, gap, align, padding, inline = false, style, ...props },\n  ref,\n) {\n  const gridTemplateColumns =\n    minItemWidth != null\n      ? `repeat(${fill ? 'auto-fill' : 'auto-fit'}, minmax(${space(minItemWidth)}, 1fr))`\n      : typeof cols === 'number'\n        ? `repeat(${cols}, minmax(0, 1fr))`\n        : cols\n\n  const gridStyle: CSSProperties = {\n    display: inline ? 'inline-grid' : 'grid',\n    gridTemplateColumns,\n    gap: space(gap),\n    alignItems: align && GRID_ALIGN[align],\n    padding: space(padding),\n    ...style,\n  }\n  return <div ref={ref} style={gridStyle} {...props} />\n})\n"],"names":["GRID_ALIGN","Grid","forwardRef","cols","minItemWidth","fill","gap","align","padding","inline","style","props","ref","gridTemplateColumns","space","gridStyle"],"mappings":"sGAGMA,EAAwC,CAC5C,MAAO,QACP,OAAQ,SACR,IAAK,MACL,QAAS,UACT,SAAU,UACZ,EA4BaC,EAAOC,EAAAA,WAAsC,SACxD,CAAE,KAAAC,EAAM,aAAAC,EAAc,KAAAC,EAAO,GAAO,IAAAC,EAAK,MAAAC,EAAO,QAAAC,EAAS,OAAAC,EAAS,GAAO,MAAAC,EAAO,GAAGC,CAAA,EACnFC,EACA,CACA,MAAMC,EACJT,GAAgB,KACZ,UAAUC,EAAO,YAAc,UAAU,YAAYS,EAAAA,MAAMV,CAAY,CAAC,UACxE,OAAOD,GAAS,SACd,UAAUA,CAAI,oBACdA,EAEFY,EAA2B,CAC/B,QAASN,EAAS,cAAgB,OAClC,oBAAAI,EACA,IAAKC,EAAAA,MAAMR,CAAG,EACd,WAAYC,GAASP,EAAWO,CAAK,EACrC,QAASO,EAAAA,MAAMN,CAAO,EACtB,GAAGE,CAAA,EAEL,aAAQ,MAAA,CAAI,IAAAE,EAAU,MAAOG,EAAY,GAAGJ,EAAO,CACrD,CAAC"}

package/dist/Grid-CY-syhTX.js

@@ -0,0 +1,24 @@
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { s as r } from "./Flex-Bj3mMF5A.js";
+const g = {
+  start: "start",
+  center: "center",
+  end: "end",
+  stretch: "stretch",
+  baseline: "baseline"
+}, $ = u(function({ cols: e, minItemWidth: t, fill: n = !1, gap: i, align: a, padding: s, inline: o = !1, style: f, ...d }, l) {
+  const m = t != null ? `repeat(${n ? "auto-fill" : "auto-fit"}, minmax(${r(t)}, 1fr))` : typeof e == "number" ? `repeat(${e}, minmax(0, 1fr))` : e, p = {
+    display: o ? "inline-grid" : "grid",
+    gridTemplateColumns: m,
+    gap: r(i),
+    alignItems: a && g[a],
+    padding: r(s),
+    ...f
+  };
+  return /* @__PURE__ */ c("div", { ref: l, style: p, ...d });
+});
+export {
+  $ as G
+};
+//# sourceMappingURL=Grid-CY-syhTX.js.map

package/dist/Grid-CY-syhTX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid-CY-syhTX.js","sources":["../src/components/Flex/Grid.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react'\nimport { space, type FlexAlign, type Spacing } from './Flex'\n\nconst GRID_ALIGN: Record<FlexAlign, string> = {\n  start: 'start',\n  center: 'center',\n  end: 'end',\n  stretch: 'stretch',\n  baseline: 'baseline',\n}\n\nexport interface GridProps extends HTMLAttributes<HTMLDivElement> {\n  /** Fixed column count (`repeat(n, minmax(0,1fr))`) or a raw `grid-template-columns` string. */\n  cols?: number | string\n  /** Responsive columns: every cell at least this wide, auto-fitting to the width (overrides `cols`). */\n  minItemWidth?: Spacing\n  /**\n   * With `minItemWidth`, use `auto-fill` instead of `auto-fit` — keeps empty tracks at the min width\n   * so a few items stay their natural size rather than stretching to fill the row. Defaults to `false`.\n   */\n  fill?: boolean\n  /** Gap between cells (token key, px number, or CSS value). */\n  gap?: Spacing\n  /** `align-items` for the cells. */\n  align?: FlexAlign\n  /** Padding (token key, px number, or CSS value). */\n  padding?: Spacing\n  /** Render as `inline-grid`. */\n  inline?: boolean\n}\n\n/**\n * A CSS-grid layout primitive — lay children out in columns via props. Use `cols` for a fixed count\n * or `minItemWidth` for a responsive grid that auto-fits as many equal columns as fit (collapsing to\n * one on narrow widths). Spacing accepts `--tz-space-*` keys, px numbers, or any CSS value; consumer\n * `style` merges last.\n */\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(function Grid(\n  { cols, minItemWidth, fill = false, gap, align, padding, inline = false, style, ...props },\n  ref,\n) {\n  const gridTemplateColumns =\n    minItemWidth != null\n      ? `repeat(${fill ? 'auto-fill' : 'auto-fit'}, minmax(${space(minItemWidth)}, 1fr))`\n      : typeof cols === 'number'\n        ? `repeat(${cols}, minmax(0, 1fr))`\n        : cols\n\n  const gridStyle: CSSProperties = {\n    display: inline ? 'inline-grid' : 'grid',\n    gridTemplateColumns,\n    gap: space(gap),\n    alignItems: align && GRID_ALIGN[align],\n    padding: space(padding),\n    ...style,\n  }\n  return <div ref={ref} style={gridStyle} {...props} />\n})\n"],"names":["GRID_ALIGN","Grid","forwardRef","cols","minItemWidth","fill","gap","align","padding","inline","style","props","ref","gridTemplateColumns","space","gridStyle"],"mappings":";;;AAGA,MAAMA,IAAwC;AAAA,EAC5C,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,SAAS;AAAA,EACT,UAAU;AACZ,GA4BaC,IAAOC,EAAsC,SACxD,EAAE,MAAAC,GAAM,cAAAC,GAAc,MAAAC,IAAO,IAAO,KAAAC,GAAK,OAAAC,GAAO,SAAAC,GAAS,QAAAC,IAAS,IAAO,OAAAC,GAAO,GAAGC,EAAA,GACnFC,GACA;AACA,QAAMC,IACJT,KAAgB,OACZ,UAAUC,IAAO,cAAc,UAAU,YAAYS,EAAMV,CAAY,CAAC,YACxE,OAAOD,KAAS,WACd,UAAUA,CAAI,sBACdA,GAEFY,IAA2B;AAAA,IAC/B,SAASN,IAAS,gBAAgB;AAAA,IAClC,qBAAAI;AAAA,IACA,KAAKC,EAAMR,CAAG;AAAA,IACd,YAAYC,KAASP,EAAWO,CAAK;AAAA,IACrC,SAASO,EAAMN,CAAO;AAAA,IACtB,GAAGE;AAAA,EAAA;AAEL,2BAAQ,OAAA,EAAI,KAAAE,GAAU,OAAOG,GAAY,GAAGJ,GAAO;AACrD,CAAC;"}