@wrdagency/blockout 0.0.0

package/dist/primitives/draggable/index.d.ts

@@ -0,0 +1,17 @@
+import { Vector2D } from '../../types/math';
+import { FC, HTMLAttributes } from 'react';
+export type DragContext = {
+    isDragging: boolean;
+    start: Vector2D;
+    current: Vector2D;
+    delta: Vector2D;
+};
+interface DraggableProps extends HTMLAttributes<HTMLDivElement> {
+    axis?: "x" | "y" | "both";
+    transform?: boolean;
+    onGrab?: (context: DragContext) => void;
+    onMove?: (context: DragContext) => void;
+    onRelease?: (context: DragContext) => void;
+}
+export declare const Draggable: FC<DraggableProps>;
+export {};

package/dist/primitives/draggable/index.js

@@ -0,0 +1,52 @@
+import { jsx as M } from "react/jsx-runtime";
+import { cn as b } from "../../utils/css.js";
+import { noop as c } from "../../utils/noop.js";
+import { useState as y, useRef as S, useEffect as p } from "react";
+const C = ({
+  className: v,
+  onGrab: w = c,
+  onMove: E = c,
+  onRelease: L = c,
+  transform: D = !0,
+  axis: d = "both",
+  ...h
+}) => {
+  const [r, m] = y(!1), [o, f] = y({ x: -1, y: -1 }), t = S(null), s = (e) => {
+    let n = e.clientX, l = e.clientY, g = n - o.x, x = l - o.y;
+    return d === "x" ? (x = 0, l = o.y) : d === "y" && (g = 0, n = o.x), {
+      isDragging: r,
+      start: o,
+      current: { x: n, y: l },
+      delta: { x: g, y: x }
+    };
+  }, u = (e) => {
+    m(!0), f({ x: e.clientX, y: e.clientY }), w(s(e));
+  }, i = (e) => {
+    if (!r)
+      return;
+    const n = s(e);
+    D && (t.current.style.transform = `translate(${n.delta.x}px, ${n.delta.y}px)`), E(n);
+  }, a = (e) => {
+    r && (m(!1), L(s(e)), f({ x: -1, y: -1 }), t.current.style.transform = "");
+  };
+  return p(() => {
+    document.documentElement.style.userSelect = r ? "none" : "";
+  }, [r]), p(() => {
+    if (t.current)
+      return t.current.addEventListener("mousedown", u), window.addEventListener("mousemove", i), window.addEventListener("mouseup", a), () => {
+        var e;
+        (e = t.current) == null || e.removeEventListener("mousedown", u), window.removeEventListener("mousemove", i), window.removeEventListener("mouseup", a);
+      };
+  }, [t, u, i, a]), /* @__PURE__ */ M(
+    "div",
+    {
+      className: b("primitive-draggable", v),
+      ref: t,
+      "data-dragging": r,
+      ...h
+    }
+  );
+};
+export {
+  C as Draggable
+};

package/dist/primitives/index.d.ts

@@ -0,0 +1 @@
+export { Draggable } from './draggable';

package/dist/primitives/index.js

@@ -0,0 +1,4 @@
+import { Draggable as e } from "./draggable/index.js";
+export {
+  e as Draggable
+};

package/dist/primitives/resizable/index.d.ts

@@ -0,0 +1,7 @@
+import { PolymorphicProps } from '../../types/component';
+import { ElementType } from 'react';
+interface ResizableProps {
+    axis?: "x" | "y" | "both";
+}
+export declare const Resizable: <As extends ElementType = "div">({ as, axis, className, children, ...restProps }: PolymorphicProps<As, ResizableProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/primitives/resizable/index.js

@@ -0,0 +1,76 @@
+import { jsxs as v, jsx as h } from "react/jsx-runtime";
+import { cn as g } from "../../utils/css.js";
+import { useRef as _, useState as z, useEffect as R } from "react";
+import { Draggable as d } from "../draggable/index.js";
+import '../../assets/index.css';const j = ({
+  as: c,
+  axis: t = "both",
+  className: m,
+  children: f,
+  ...b
+}) => {
+  const u = c || "div", i = _(null), [r, n] = z({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  }), a = () => {
+    const e = i.current.getBoundingClientRect();
+    n({
+      x: e.x,
+      y: e.y,
+      width: e.width,
+      height: e.height
+    });
+  }, o = (e) => {
+    a();
+  }, s = (e) => {
+    t !== "y" && (i.current.style.width = `${r.width + e.delta.x}px`), t !== "x" && (i.current.style.height = `${r.height + e.delta.y}px`);
+  }, l = (e) => {
+    n(({ x: p, y: x, ...y }) => ({
+      x: p + e.delta.x,
+      y: x + e.delta.y,
+      ...y
+    })), a();
+  };
+  return R(() => {
+    a();
+  }, []), /* @__PURE__ */ v(
+    u,
+    {
+      className: g("primitive-resizable", m),
+      ref: i,
+      ...b,
+      children: [
+        t !== "y" && /* @__PURE__ */ h(
+          d,
+          {
+            className: "primitive-resizable__handle primitive-resizable__handle--x",
+            "aria-orientation": "horizontal",
+            axis: "x",
+            transform: !1,
+            onGrab: o,
+            onMove: s,
+            onRelease: l
+          }
+        ),
+        t !== "x" && /* @__PURE__ */ h(
+          d,
+          {
+            className: "primitive-resizable__handle primitive-resizable__handle--y",
+            "aria-orientation": "vertical",
+            axis: "y",
+            transform: !1,
+            onGrab: o,
+            onMove: s,
+            onRelease: l
+          }
+        ),
+        f
+      ]
+    }
+  );
+};
+export {
+  j as Resizable
+};

package/dist/types/component.d.ts

@@ -0,0 +1,4 @@
+import { ComponentPropsWithoutRef, ElementType } from 'react';
+export type PolymorphicProps<As extends ElementType, Props extends Object = {}> = {
+    as?: As;
+} & ComponentPropsWithoutRef<As> & Props;

package/dist/types/component.js

@@ -0,0 +1 @@
+

package/dist/types/math.d.ts

@@ -0,0 +1,10 @@
+export type Vector2D = {
+    x: number;
+    y: number;
+};
+export type Bounds2D = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};

package/dist/types/math.js

@@ -0,0 +1 @@
+

package/dist/utils/css.d.ts

@@ -0,0 +1 @@
+export declare function cn(...classes: (string | boolean | number | undefined | null)[]): string;

package/dist/utils/css.js

@@ -0,0 +1,6 @@
+function o(...n) {
+  return n.filter(Boolean).join(" ");
+}
+export {
+  o as cn
+};

package/dist/utils/noop.d.ts

@@ -0,0 +1 @@
+export declare const noop: () => void;

package/dist/utils/noop.js

@@ -0,0 +1,5 @@
+const o = () => {
+};
+export {
+  o as noop
+};

package/package.json

@@ -0,0 +1,61 @@
+{
+	"name": "@wrdagency/blockout",
+	"version": "0.0.0",
+	"description": "A React component library created by WRD.agency",
+	"type": "module",
+	"main": "dist/main.js",
+	"types": "dist/main.d.ts",
+	"files": [
+		"dist"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"author": {
+		"name": "WRD",
+		"url": "https://wrd.agency"
+	},
+	"license": "MIT",
+	"keywords": [
+		"react",
+		"components"
+	],
+	"scripts": {
+		"start": "npm run dev",
+		"dev": "vite",
+		"build": "tsc -b ./tsconfig.lib.json && vite build",
+		"lint": "eslint .",
+		"preview": "vite preview",
+		"prepublishOnly": "npm run build"
+	},
+	"peerDependencies": {
+		"react": "^19.1.0",
+		"react-dom": "^19.1.0"
+	},
+	"devDependencies": {
+		"@eslint/js": "^9.25.0",
+		"@types/node": "^22.15.18",
+		"@types/object-hash": "^3.0.6",
+		"@types/react": "^19.1.2",
+		"@types/react-dom": "^19.1.2",
+		"@vitejs/plugin-react": "^4.4.1",
+		"eslint": "^9.25.0",
+		"eslint-plugin-react-hooks": "^5.2.0",
+		"eslint-plugin-react-refresh": "^0.4.19",
+		"glob": "^11.0.2",
+		"globals": "^16.0.0",
+		"react": "^19.1.0",
+		"react-dom": "^19.1.0",
+		"typescript": "~5.8.3",
+		"typescript-eslint": "^8.30.1",
+		"vite": "^6.3.5",
+		"vite-plugin-dts": "^4.5.4",
+		"vite-plugin-lib-inject-css": "^2.2.2",
+		"vite-tsconfig-paths": "^5.1.4"
+	},
+	"dependencies": {
+		"@ariakit/react": "^0.4.17",
+		"@phosphor-icons/react": "^2.1.8",
+		"object-hash": "^3.0.0"
+	}
+}

package/readme.md

@@ -0,0 +1,3 @@
+# Blockout
+
+A React component library created by [WRD](https://wrd.agency).