neatkit 0.6.0 → 0.7.0

package/dist/Content.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),l=require("./units-PzuiQNnw.cjs"),C=[{minWidth:l.breakpoint("xl"),marginPercent:32,preferredWidth:1200},{minWidth:l.breakpoint("lg"),marginPercent:20,preferredWidth:1100},{minWidth:l.breakpoint("md"),marginPercent:14,preferredWidth:l.breakpoint("md")},{minWidth:l.breakpoint("sm"),marginPercent:8,preferredWidth:650}],W=16;function M(e){for(const t of C)if(e>=t.minWidth)return t}function k(e,t){if(!Number.isFinite(e)||!Number.isFinite(t)||e<l.breakpoint("sm")||t<=0)return;const n=M(e);if(!n)return;const r=e*n.marginPercent/100,s=e-r*2,m=Math.min(n.preferredWidth,e-W),a=Math.max(s,m);let o=Math.floor(a/t);return o%2===0&&(o-=1),o=Math.max(o,1),Math.min((o-1)*t,e)}const R=typeof window>"u"?c.useEffect:c.useLayoutEffect;function w(e,t){if(typeof e=="function"){e(t);return}e&&(e.current=t)}function N(e){const t=window.getComputedStyle(e),n=Number.parseFloat(t.paddingLeft)+Number.parseFloat(t.paddingRight);return Math.max(e.clientWidth-n,0)}function P(e){const n=window.getComputedStyle(e).getPropertyValue("--nk-cell").trim().match(/^([+]?(?:\d+\.?\d*|\.\d+))px$/i);if(!n)return;const r=Number.parseFloat(n[1]);return Number.isFinite(r)&&r>0?r:void 0}function S(e,t){const n=c.useRef(null),r=c.useRef(null),s=c.useRef(void 0),[m,a]=c.useState(void 0),o=c.useCallback(i=>{if(!t){if(s.current===void 0)return;s.current=void 0,a(void 0);return}const u=N(i),d=P(i),h=d===void 0?void 0:k(u,d);s.current!==h&&(s.current=h,a(h))},[t]),f=c.useCallback(i=>{var d;if((d=r.current)==null||d.disconnect(),r.current=null,typeof ResizeObserver>"u")return;const u=new ResizeObserver(()=>o(i));u.observe(i),r.current=u},[o]),g=c.useCallback(i=>{var u;(u=r.current)==null||u.disconnect(),r.current=null,n.current=i,w(e,i),!(!i||typeof window>"u"||!t)&&(o(i),f(i))},[f,t,e,o]);return R(()=>{n.current&&o(n.current)}),c.useEffect(()=>(n.current&&t&&f(n.current),()=>{var i;(i=r.current)==null||i.disconnect(),r.current=null}),[f,t]),{rootReference:g,innerWidth:m}}const x=c.forwardRef(function(t,n){const{accent:r,as:s,children:m,className:a,constrain:o=!0,minHeight:f="auto",mode:g="grid",spacing:i="standard",style:u,theme:d="light",...h}=t,{rootReference:v,innerWidth:p}=S(n,o),b=s??"div",y=r!==void 0?{...u,"--nk-accent":r}:u;return c.createElement(b,{...h,ref:v,className:["nk-content",a].filter(Boolean).join(" "),"data-constrain":o,"data-min-height":f,"data-mode":g,"data-spacing":i,"data-theme":d,style:y},c.createElement("div",{className:"nk-content__inner",style:p===void 0?void 0:{width:`${p}px`}},m))});exports.default=x;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),l=require("./units-PzuiQNnw.cjs"),C=[{minWidth:l.breakpoint("xl"),marginPercent:32,preferredWidth:1200},{minWidth:l.breakpoint("lg"),marginPercent:20,preferredWidth:1100},{minWidth:l.breakpoint("md"),marginPercent:14,preferredWidth:l.breakpoint("md")},{minWidth:l.breakpoint("sm"),marginPercent:8,preferredWidth:650}],w=16;function W(e){for(const t of C)if(e>=t.minWidth)return t}function M(e,t){if(!Number.isFinite(e)||!Number.isFinite(t)||e<l.breakpoint("sm")||t<=0)return;const r=W(e);if(!r)return;const i=e*r.marginPercent/100,s=e-i*2,h=Math.min(r.preferredWidth,e-w),d=Math.max(s,h);let o=Math.floor(d/t);return o%2===0&&(o-=1),o=Math.max(o,1),Math.min((o-1)*t,e)}const k=typeof window>"u"?c.useEffect:c.useLayoutEffect;function R(e,t){if(typeof e=="function"){e(t);return}e&&(e.current=t)}function N(e){const t=window.getComputedStyle(e),r=Number.parseFloat(t.paddingLeft)+Number.parseFloat(t.paddingRight);return Math.max(e.clientWidth-r,0)}function P(e){const r=window.getComputedStyle(e).getPropertyValue("--nk-cell").trim().match(/^([+]?(?:\d+\.?\d*|\.\d+))px$/i);if(!r)return;const i=Number.parseFloat(r[1]);return Number.isFinite(i)&&i>0?i:void 0}function S(e,t){const r=c.useRef(null),i=c.useRef(null),s=c.useRef(void 0),[h,d]=c.useState(void 0),o=c.useCallback(n=>{if(!t){if(s.current===void 0)return;s.current=void 0,d(void 0);return}const u=N(n),f=P(n),m=f===void 0?void 0:M(u,f);s.current!==m&&(s.current=m,d(m))},[t]),a=c.useCallback(n=>{var f;if((f=i.current)==null||f.disconnect(),i.current=null,typeof ResizeObserver>"u")return;const u=new ResizeObserver(()=>o(n));u.observe(n),i.current=u},[o]),g=c.useCallback(n=>{var u;(u=i.current)==null||u.disconnect(),i.current=null,r.current=n,R(e,n),!(!n||typeof window>"u"||!t)&&(o(n),a(n))},[a,e,o,t]);return k(()=>{r.current&&o(r.current)}),c.useEffect(()=>(r.current&&t&&a(r.current),()=>{var n;(n=i.current)==null||n.disconnect(),i.current=null}),[a,t]),{rootReference:g,innerWidth:h}}const x=c.forwardRef(function(t,r){const{as:i,children:s,className:h,style:d,theme:o="light",accent:a,mode:g="grid",width:n="narrow",height:u="content",spacing:f="standard",...m}=t,{rootReference:v,innerWidth:p}=S(r,n==="narrow"),b=i??"div",y=a!==void 0?{...d,"--nk-accent":a}:d;return c.createElement(b,{...m,ref:v,className:["nk-content",h].filter(Boolean).join(" "),"data-theme":o,"data-mode":g,"data-width":n,"data-height":u,"data-spacing":f,style:y},c.createElement("div",{className:"nk-content__inner",style:p===void 0?void 0:{width:`${p}px`}},s))});exports.default=x;

package/dist/Content.js

@@ -1,5 +1,5 @@
 "use client";
-import { useRef as g, useState as b, useCallback as p, useEffect as C, useLayoutEffect as N, forwardRef as R, createElement as y } from "react";
+import { useRef as g, useState as b, useCallback as p, useEffect as w, useLayoutEffect as N, forwardRef as R, createElement as y } from "react";
 import { b as f } from "./units-BmjPCccF.js";
 const x = [
   {
@@ -23,109 +23,109 @@ const x = [
     preferredWidth: 650
   }
 ], P = 16;
-function F(e) {
-  for (const t of x)
-    if (e >= t.minWidth) return t;
+function F(t) {
+  for (const e of x)
+    if (t >= e.minWidth) return e;
 }
-function L(e, t) {
-  if (!Number.isFinite(e) || !Number.isFinite(t) || e < f("sm") || t <= 0)
+function L(t, e) {
+  if (!Number.isFinite(t) || !Number.isFinite(e) || t < f("sm") || e <= 0)
     return;
-  const n = F(e);
-  if (!n) return;
-  const r = e * n.marginPercent / 100, u = e - r * 2, m = Math.min(
-    n.preferredWidth,
-    e - P
+  const r = F(t);
+  if (!r) return;
+  const i = t * r.marginPercent / 100, u = t - i * 2, m = Math.min(
+    r.preferredWidth,
+    t - P
   ), d = Math.max(u, m);
-  let o = Math.floor(d / t);
-  return o % 2 === 0 && (o -= 1), o = Math.max(o, 1), Math.min((o - 1) * t, e);
+  let o = Math.floor(d / e);
+  return o % 2 === 0 && (o -= 1), o = Math.max(o, 1), Math.min((o - 1) * e, t);
 }
-const S = typeof window > "u" ? C : N;
-function k(e, t) {
-  if (typeof e == "function") {
-    e(t);
+const S = typeof window > "u" ? w : N;
+function k(t, e) {
+  if (typeof t == "function") {
+    t(e);
     return;
   }
-  e && (e.current = t);
+  t && (t.current = e);
 }
-function z(e) {
-  const t = window.getComputedStyle(e), n = Number.parseFloat(t.paddingLeft) + Number.parseFloat(t.paddingRight);
-  return Math.max(e.clientWidth - n, 0);
+function z(t) {
+  const e = window.getComputedStyle(t), r = Number.parseFloat(e.paddingLeft) + Number.parseFloat(e.paddingRight);
+  return Math.max(t.clientWidth - r, 0);
 }
-function I(e) {
-  const n = window.getComputedStyle(e).getPropertyValue("--nk-cell").trim().match(
+function I(t) {
+  const r = window.getComputedStyle(t).getPropertyValue("--nk-cell").trim().match(
     /^([+]?(?:\d+\.?\d*|\.\d+))px$/i
   );
-  if (!n) return;
-  const r = Number.parseFloat(n[1]);
-  return Number.isFinite(r) && r > 0 ? r : void 0;
+  if (!r) return;
+  const i = Number.parseFloat(r[1]);
+  return Number.isFinite(i) && i > 0 ? i : void 0;
 }
-function O(e, t) {
-  const n = g(null), r = g(null), u = g(void 0), [m, d] = b(void 0), o = p((i) => {
-    if (!t) {
+function O(t, e) {
+  const r = g(null), i = g(null), u = g(void 0), [m, d] = b(void 0), o = p((n) => {
+    if (!e) {
       if (u.current === void 0) return;
       u.current = void 0, d(void 0);
       return;
     }
-    const c = z(i), s = I(i), l = s === void 0 ? void 0 : L(c, s);
-    u.current !== l && (u.current = l, d(l));
-  }, [t]), a = p(
-    (i) => {
-      var s;
-      if ((s = r.current) == null || s.disconnect(), r.current = null, typeof ResizeObserver > "u") return;
+    const c = z(n), a = I(n), h = a === void 0 ? void 0 : L(c, a);
+    u.current !== h && (u.current = h, d(h));
+  }, [e]), s = p(
+    (n) => {
+      var a;
+      if ((a = i.current) == null || a.disconnect(), i.current = null, typeof ResizeObserver > "u") return;
       const c = new ResizeObserver(
-        () => o(i)
+        () => o(n)
       );
-      c.observe(i), r.current = c;
+      c.observe(n), i.current = c;
     },
     [o]
-  ), h = p(
-    (i) => {
+  ), l = p(
+    (n) => {
       var c;
-      (c = r.current) == null || c.disconnect(), r.current = null, n.current = i, k(e, i), !(!i || typeof window > "u" || !t) && (o(i), a(i));
+      (c = i.current) == null || c.disconnect(), i.current = null, r.current = n, k(t, n), !(!n || typeof window > "u" || !e) && (o(n), s(n));
     },
     [
-      a,
+      s,
       t,
-      e,
-      o
+      o,
+      e
     ]
   );
   return S(() => {
-    n.current && o(n.current);
-  }), C(() => (n.current && t && a(n.current), () => {
-    var i;
-    (i = r.current) == null || i.disconnect(), r.current = null;
-  }), [a, t]), { rootReference: h, innerWidth: m };
+    r.current && o(r.current);
+  }), w(() => (r.current && e && s(r.current), () => {
+    var n;
+    (n = i.current) == null || n.disconnect(), i.current = null;
+  }), [s, e]), { rootReference: l, innerWidth: m };
 }
 const A = R(
-  function(t, n) {
+  function(e, r) {
     const {
-      accent: r,
-      as: u,
-      children: m,
-      className: d,
-      constrain: o = !0,
-      minHeight: a = "auto",
-      mode: h = "grid",
-      spacing: i = "standard",
-      style: c,
-      theme: s = "light",
-      ...l
-    } = t, { rootReference: W, innerWidth: v } = O(
-      n,
-      o
-    ), w = u ?? "div", M = r !== void 0 ? { ...c, "--nk-accent": r } : c;
+      as: i,
+      children: u,
+      className: m,
+      style: d,
+      theme: o = "light",
+      accent: s,
+      mode: l = "grid",
+      width: n = "narrow",
+      height: c = "content",
+      spacing: a = "standard",
+      ...h
+    } = e, { rootReference: C, innerWidth: v } = O(
+      r,
+      n === "narrow"
+    ), W = i ?? "div", M = s !== void 0 ? { ...d, "--nk-accent": s } : d;
     return y(
-      w,
+      W,
       {
-        ...l,
-        ref: W,
-        className: ["nk-content", d].filter(Boolean).join(" "),
-        "data-constrain": o,
-        "data-min-height": a,
-        "data-mode": h,
-        "data-spacing": i,
-        "data-theme": s,
+        ...h,
+        ref: C,
+        className: ["nk-content", m].filter(Boolean).join(" "),
+        "data-theme": o,
+        "data-mode": l,
+        "data-width": n,
+        "data-height": c,
+        "data-spacing": a,
         style: M
       },
       y(
@@ -134,7 +134,7 @@ const A = R(
           className: "nk-content__inner",
           style: v === void 0 ? void 0 : { width: `${v}px` }
         },
-        m
+        u
       )
     );
   }

package/dist/components/Content/Content.d.ts

@@ -4,9 +4,11 @@ import "./styles/content.css";
 export type ContentTheme = "light" | "dark";
 /** A type representing Content's visual background modes. */
 export type ContentMode = "grid" | "none";
+/** A type representing Content's horizontal layout behavior. */
+export type ContentWidth = "narrow" | "full";
 /** A type representing Content's minimum-height behavior. */
-export type ContentMinHeight = "auto" | "available" | "viewport";
-/** A type representing Content's vertical spacing behavior. */
+export type ContentHeight = "content" | "available" | "viewport";
+/** A type representing Content's spacing behavior on both axes. */
 export type ContentSpacing = "standard" | "none";
 /** A type representing CSS custom properties accepted by Content styles. */
 type ContentCustomProperties = {
@@ -24,12 +26,12 @@ type ContentOwnProps = {
     accent?: string;
     /** The visual background treatment applied to Content. */
     mode?: ContentMode;
+    /** The horizontal layout applied to Content. */
+    width?: ContentWidth;
     /** The minimum height applied to Content. */
-    minHeight?: ContentMinHeight;
-    /** The vertical spacing applied within Content. */
+    height?: ContentHeight;
+    /** The spacing applied around content within Content. */
     spacing?: ContentSpacing;
-    /** Whether Content applies its responsive cell-aligned inner width. */
-    constrain?: boolean;
 };
 /** A type representing properties for a polymorphic Content element. */
 export type ContentProps<Component extends ElementType = "div"> = ContentOwnProps & {

package/dist/components/Content/hooks/useContentLayout.d.ts

@@ -10,9 +10,9 @@ type ContentLayout = {
  * Measures a Content root and progressively enhances its inner width.
  *
  * @param forwardedReference - The public reference assigned to the root.
- * @param constrain - Whether responsive inner-width sizing is enabled.
+ * @param snap - Whether cell-aligned inner-width sizing is enabled.
  *
  * @returns The merged root reference and calculated inner width.
  */
-export declare function useContentLayout(forwardedReference: ForwardedRef<HTMLElement>, constrain: boolean): ContentLayout;
+export declare function useContentLayout(forwardedReference: ForwardedRef<HTMLElement>, snap: boolean): ContentLayout;
 export {};

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

@@ -1,2 +1,2 @@
 export { default } from "./Content";
-export type { ContentMinHeight, ContentMode, ContentProps, ContentSpacing, ContentTheme, } from "./Content";
+export type { ContentHeight, ContentMode, ContentProps, ContentSpacing, ContentTheme, ContentWidth, } from "./Content";