@drjoshcsimmons/scl 0.1.2 → 0.1.4

package/README.md

@@ -1,17 +1,74 @@
+```
+  ____   ____  _
+ / ___| / ___|| |
+ \___ \| |    | |
+  ___) | |___ | |___
+ |____/ \____||_____|
+
+SIMSIES COMPONENT LIBRARY
+"because copy-pasting is for normies"
+```
+
 # SCL - Simsies Component Library
 
+[![Storybook](https://img.shields.io/badge/Storybook-ff4785?logo=storybook&logoColor=white)](https://jcpsimmons.github.io/scl/)
+[![npm](https://img.shields.io/npm/v/@drjoshcsimmons/scl)](https://www.npmjs.com/package/@drjoshcsimmons/scl)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
 A BASED React component library that doesn't suck. Built on [shadcn/ui](https://ui.shadcn.com/), Radix primitives, and Tailwind CSS because I'm not a masochist who writes CSS from scratch anymore.
 
-[![Storybook](https://img.shields.io/badge/Storybook-ff4785?logo=storybook&logoColor=white)](https://jcpsimmons.github.io/scl/)
+```
+    ╔══════════════════════════════════════════════════════════════╗
+    ║                                                              ║
+    ║   > npm install @drjoshcsimmons/scl                          ║
+    ║                                                              ║
+    ║   [████████████████████████████████████████] 100%            ║
+    ║                                                              ║
+    ║   ✓ installed 1 package                                      ║
+    ║   ✓ your code now has TASTE                                  ║
+    ║   ✓ maidens acquired                                         ║
+    ║                                                              ║
+    ╚══════════════════════════════════════════════════════════════╝
+```
 
 ## What the hell is this?
 
-It's my personal component library. I got tired of copy-pasting the same damn components between projects, so I made this. Now I just `npm install` and get on with my life.
+It's my personal component library. I got tired of copy-pasting the same damn components between projects, so I made this. Now I just `npm install` and get on with my life like a functional adult.
+
+```
+                    ┌─────────────────────┐
+                    │   VIRGIN DEVS:      │
+                    │   "Let me just      │
+                    │    copy this file   │
+                    │    real quick..."   │
+                    └─────────┬───────────┘
+                              │
+                              ▼
+                    ┌─────────────────────┐
+                    │   *3 hours later*   │
+                    │   "Why doesn't this │
+                    │    work anymore"    │
+                    └─────────────────────┘
+
+        vs.
+
+                    ┌─────────────────────┐
+                    │   CHAD SCL USERS:   │
+                    │   npm install       │
+                    │   *ships product*   │
+                    │   *goes outside*    │
+                    └─────────────────────┘
+```
 
 ## Installation
 
 ```bash
 npm install @drjoshcsimmons/scl
+# or
+pnpm add @drjoshcsimmons/scl
+# or
+yarn add @drjoshcsimmons/scl
+# (we don't discriminate against package managers here)
 ```
 
 ## Usage
@@ -32,17 +89,36 @@ function App() {
 
 ## Components
 
-All the boring-but-necessary UI shit:
-
-**Layout** - Accordion, Card, Collapsible, Scroll Area, Separator, Sheet, Tabs
-
-**Forms** - Button, Checkbox, Input, Label, Radio Group, Select, Slider, Switch, Textarea, Toggle
-
-**Data Display** - Avatar, Badge, Progress, Skeleton, Table, Tooltip
-
-**Feedback** - Alert, Alert Dialog, Dialog, Popover, Dropdown Menu
-
-**Weird Custom Shit** - Dithered Image, Statusline, Terminal Textarea
+```
+┌────────────────────────────────────────────────────────────────┐
+│                       COMPONENT ARSENAL                        │
+├────────────────────────────────────────────────────────────────┤
+│                                                                │
+│  ┌─ LAYOUT ─────────────────────────────────────────────────┐  │
+│  │ Accordion • Card • Collapsible • Scroll Area             │  │
+│  │ Separator • Sheet • Tabs • Resizable                     │  │
+│  └──────────────────────────────────────────────────────────┘  │
+│                                                                │
+│  ┌─ FORMS ──────────────────────────────────────────────────┐  │
+│  │ Button • Checkbox • Input • Label • Radio Group          │  │
+│  │ Select • Slider • Switch • Textarea • Toggle             │  │
+│  └──────────────────────────────────────────────────────────┘  │
+│                                                                │
+│  ┌─ DATA DISPLAY ───────────────────────────────────────────┐  │
+│  │ Avatar • Badge • Progress • Skeleton • Table • Tooltip   │  │
+│  └──────────────────────────────────────────────────────────┘  │
+│                                                                │
+│  ┌─ FEEDBACK ───────────────────────────────────────────────┐  │
+│  │ Alert • Alert Dialog • Dialog • Popover • Dropdown Menu  │  │
+│  └──────────────────────────────────────────────────────────┘  │
+│                                                                │
+│  ┌─ WEIRD CUSTOM SHIT ──────────────────────────────────────┐  │
+│  │ Dithered Image • Statusline • Terminal Textarea          │  │
+│  │ Code Editor (with VIM MODE because we're not animals)    │  │
+│  └──────────────────────────────────────────────────────────┘  │
+│                                                                │
+└────────────────────────────────────────────────────────────────┘
+```
 
 ## Development
 
@@ -58,16 +134,129 @@ pnpm test
 
 # Build the library
 pnpm build
+
+# Type check (for the paranoid)
+pnpm typecheck
 ```
 
 ## Storybook
 
 Check out the components at [jcpsimmons.github.io/scl](https://jcpsimmons.github.io/scl/)
 
+```
+         ┌─────────────────────────────────────┐
+         │                                     │
+         │   STORYBOOK PREVIEW:                │
+         │                                     │
+         │   ┌─────────────────────────────┐   │
+         │   │  [=========]  Button        │   │
+         │   │  [    ●    ]  Toggle        │   │
+         │   │  [████░░░░░]  Progress      │   │
+         │   │  ┌─────────┐  Card          │   │
+         │   │  │ Content │                │   │
+         │   │  └─────────┘                │   │
+         │   └─────────────────────────────┘   │
+         │                                     │
+         │   (but cooler because retro theme) │
+         │                                     │
+         └─────────────────────────────────────┘
+```
+
+## The Aesthetic
+
+```
+╔════════════════════════════════════════════════════════════════════╗
+║                                                                    ║
+║   This library has a RETRO TERMINAL AESTHETIC because:             ║
+║                                                                    ║
+║   • No border-radius (corners are for cowards)                     ║
+║   • No shadows (we live in FLATLAND)                               ║
+║   • BigBlueTerm437 monospace font (embrace the CRT vibes)          ║
+║   • CSS variables for theming (HSL colors because we're not        ║
+║     savages who use hex in 2099)                                   ║
+║   • Dark mode (obviously)                                          ║
+║                                                                    ║
+║   If you want rounded corners and drop shadows, Material UI is     ║
+║   ──────────────────────────────────────────────>  that way        ║
+║                                                                    ║
+╚════════════════════════════════════════════════════════════════════╝
+```
+
 ## Why "Simsies"?
 
 It's my name. Well, part of it. Don't overthink it.
 
+```
+             ___________________
+            < Simmons -> Simsies >
+             -------------------
+                    \   ^__^
+                     \  (oo)\_______
+                        (__)\       )\/\
+                            ||----w |
+                            ||     ||
+```
+
+## Tech Stack
+
+```
+    ┌────────────────────────────────────────────────────────┐
+    │                                                        │
+    │   React ──────────────► Because it's 2099              │
+    │      │                                                 │
+    │      ▼                                                 │
+    │   Radix UI ──────────► Accessibility handled           │
+    │      │                                                 │
+    │      ▼                                                 │
+    │   Tailwind CSS ──────► Utility classes go brrrr        │
+    │      │                                                 │
+    │      ▼                                                 │
+    │   CVA ────────────────► Variants without the pain      │
+    │      │                                                 │
+    │      ▼                                                 │
+    │   TypeScript ─────────► Red squiggles save lives       │
+    │      │                                                 │
+    │      ▼                                                 │
+    │   Vite ───────────────► Fast AF builds                 │
+    │      │                                                 │
+    │      ▼                                                 │
+    │   Vitest ─────────────► Tests that don't take forever  │
+    │                                                        │
+    └────────────────────────────────────────────────────────┘
+```
+
+## Contributing
+
+```
+    ┌───────────────────────────────────────────────┐
+    │                                               │
+    │   1. Fork the repo                            │
+    │   2. Make your changes                        │
+    │   3. Write tests (non-negotiable)             │
+    │   4. Open a PR                                │
+    │   5. ???                                      │
+    │   6. Profit                                   │
+    │                                               │
+    └───────────────────────────────────────────────┘
+```
+
 ## License
 
 MIT - Do whatever the fuck you want with it.
+
+```
+    ████████████████████████████████████████████████████████████
+    █                                                          █
+    █   "I used to copy-paste components like a peasant.       █
+    █    Now I npm install SCL and actually touch grass."      █
+    █                                                          █
+    █                              - Some developer, probably  █
+    █                                                          █
+    ████████████████████████████████████████████████████████████
+```
+
+---
+
+<p align="center">
+  <sub>Made with ☕ and mass quantities of mass quantities by <a href="https://github.com/jcpsimmons">@jcpsimmons</a></sub>
+</p>

package/dist/index100.js

@@ -1,221 +1,17 @@
-import * as p from "react";
-import { useFloating as xe, offset as Pe, shift as ye, flip as Ae, size as ve, arrow as Ce, hide as be, limitShift as Se } from "./index111.js";
-import { Root as Oe } from "./index112.js";
-import { useComposedRefs as j } from "./index80.js";
-import { createContextScope as Re } from "./index77.js";
-import { Primitive as z } from "./index81.js";
-import { useCallbackRef as Ee } from "./index85.js";
-import { useLayoutEffect as T } from "./index79.js";
-import { useSize as Ne } from "./index99.js";
-import { jsx as f } from "react/jsx-runtime";
-import { autoUpdate as _e } from "./index113.js";
-var N = "Popper", [L, Ue] = Re(N), [$e, Z] = L(N), U = (e) => {
-  const { __scopePopper: s, children: a } = e, [t, i] = p.useState(null);
-  return /* @__PURE__ */ f($e, { scope: s, anchor: t, onAnchorChange: i, children: a });
-};
-U.displayName = N;
-var q = "PopperAnchor", G = p.forwardRef(
-  (e, s) => {
-    const { __scopePopper: a, virtualRef: t, ...i } = e, r = Z(q, a), o = p.useRef(null), w = j(s, o), n = p.useRef(null);
-    return p.useEffect(() => {
-      const c = n.current;
-      n.current = (t == null ? void 0 : t.current) || o.current, c !== n.current && r.onAnchorChange(n.current);
-    }), t ? null : /* @__PURE__ */ f(z.div, { ...i, ref: w });
-  }
-);
-G.displayName = q;
-var _ = "PopperContent", [He, We] = L(_), J = p.forwardRef(
-  (e, s) => {
-    var Y, M, X, D, F, k;
-    const {
-      __scopePopper: a,
-      side: t = "bottom",
-      sideOffset: i = 0,
-      align: r = "center",
-      alignOffset: o = 0,
-      arrowPadding: w = 0,
-      avoidCollisions: n = !0,
-      collisionBoundary: c = [],
-      collisionPadding: x = 0,
-      sticky: m = "partial",
-      hideWhenDetached: y = !1,
-      updatePositionStrategy: A = "optimized",
-      onPlaced: l,
-      ...d
-    } = e, v = Z(_, a), [h, C] = p.useState(null), ee = j(s, (P) => C(P)), [E, te] = p.useState(null), u = Ne(E), re = (u == null ? void 0 : u.width) ?? 0, $ = (u == null ? void 0 : u.height) ?? 0, oe = t + (r !== "center" ? "-" + r : ""), ne = typeof x == "number" ? x : { top: 0, right: 0, bottom: 0, left: 0, ...x }, H = Array.isArray(c) ? c : [c], ae = H.length > 0, b = {
-      padding: ne,
-      boundary: H.filter(Ye),
-      // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
-      altBoundary: ae
-    }, { refs: ie, floatingStyles: W, placement: se, isPositioned: S, middlewareData: g } = xe({
-      // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
-      strategy: "fixed",
-      placement: oe,
-      whileElementsMounted: (...P) => _e(...P, {
-        animationFrame: A === "always"
-      }),
-      elements: {
-        reference: v.anchor
-      },
-      middleware: [
-        Pe({ mainAxis: i + $, alignmentAxis: o }),
-        n && ye({
-          mainAxis: !0,
-          crossAxis: !1,
-          limiter: m === "partial" ? Se() : void 0,
-          ...b
-        }),
-        n && Ae({ ...b }),
-        ve({
-          ...b,
-          apply: ({ elements: P, rects: B, availableWidth: he, availableHeight: ue }) => {
-            const { width: ge, height: we } = B.reference, R = P.floating.style;
-            R.setProperty("--radix-popper-available-width", `${he}px`), R.setProperty("--radix-popper-available-height", `${ue}px`), R.setProperty("--radix-popper-anchor-width", `${ge}px`), R.setProperty("--radix-popper-anchor-height", `${we}px`);
-          }
-        }),
-        E && Ce({ element: E, padding: w }),
-        Me({ arrowWidth: re, arrowHeight: $ }),
-        y && be({ strategy: "referenceHidden", ...b })
-      ]
-    }), [I, ce] = V(se), O = Ee(l);
-    T(() => {
-      S && (O == null || O());
-    }, [S, O]);
-    const pe = (Y = g.arrow) == null ? void 0 : Y.x, de = (M = g.arrow) == null ? void 0 : M.y, le = ((X = g.arrow) == null ? void 0 : X.centerOffset) !== 0, [fe, me] = p.useState();
-    return T(() => {
-      h && me(window.getComputedStyle(h).zIndex);
-    }, [h]), /* @__PURE__ */ f(
-      "div",
-      {
-        ref: ie.setFloating,
-        "data-radix-popper-content-wrapper": "",
-        style: {
-          ...W,
-          transform: S ? W.transform : "translate(0, -200%)",
-          // keep off the page when measuring
-          minWidth: "max-content",
-          zIndex: fe,
-          "--radix-popper-transform-origin": [
-            (D = g.transformOrigin) == null ? void 0 : D.x,
-            (F = g.transformOrigin) == null ? void 0 : F.y
-          ].join(" "),
-          // hide the content if using the hide middleware and should be hidden
-          // set visibility to hidden and disable pointer events so the UI behaves
-          // as if the PopperContent isn't there at all
-          ...((k = g.hide) == null ? void 0 : k.referenceHidden) && {
-            visibility: "hidden",
-            pointerEvents: "none"
-          }
-        },
-        dir: e.dir,
-        children: /* @__PURE__ */ f(
-          He,
-          {
-            scope: a,
-            placedSide: I,
-            onArrowChange: te,
-            arrowX: pe,
-            arrowY: de,
-            shouldHideArrow: le,
-            children: /* @__PURE__ */ f(
-              z.div,
-              {
-                "data-side": I,
-                "data-align": ce,
-                ...d,
-                ref: ee,
-                style: {
-                  ...d.style,
-                  // if the PopperContent hasn't been placed yet (not all measurements done)
-                  // we prevent animations so that users's animation don't kick in too early referring wrong sides
-                  animation: S ? void 0 : "none"
-                }
-              }
-            )
-          }
-        )
-      }
-    );
-  }
-);
-J.displayName = _;
-var K = "PopperArrow", Ie = {
-  top: "bottom",
-  right: "left",
-  bottom: "top",
-  left: "right"
-}, Q = p.forwardRef(function(s, a) {
-  const { __scopePopper: t, ...i } = s, r = We(K, t), o = Ie[r.placedSide];
-  return (
-    // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
-    // doesn't report size as we'd expect on SVG elements.
-    // it reports their bounding box which is effectively the largest path inside the SVG.
-    /* @__PURE__ */ f(
-      "span",
-      {
-        ref: r.onArrowChange,
-        style: {
-          position: "absolute",
-          left: r.arrowX,
-          top: r.arrowY,
-          [o]: 0,
-          transformOrigin: {
-            top: "",
-            right: "0 0",
-            bottom: "center 0",
-            left: "100% 0"
-          }[r.placedSide],
-          transform: {
-            top: "translateY(100%)",
-            right: "translateY(50%) rotate(90deg) translateX(-50%)",
-            bottom: "rotate(180deg)",
-            left: "translateY(50%) rotate(-90deg) translateX(50%)"
-          }[r.placedSide],
-          visibility: r.shouldHideArrow ? "hidden" : void 0
-        },
-        children: /* @__PURE__ */ f(
-          Oe,
-          {
-            ...i,
-            ref: a,
-            style: {
-              ...i.style,
-              // ensures the element can be measured correctly (mostly for if SVG)
-              display: "block"
-            }
-          }
-        )
-      }
-    )
-  );
-});
-Q.displayName = K;
-function Ye(e) {
-  return e !== null;
+import * as r from "react";
+var t = 0;
+function a() {
+  r.useEffect(() => {
+    const e = document.querySelectorAll("[data-radix-focus-guard]");
+    return document.body.insertAdjacentElement("afterbegin", e[0] ?? n()), document.body.insertAdjacentElement("beforeend", e[1] ?? n()), t++, () => {
+      t === 1 && document.querySelectorAll("[data-radix-focus-guard]").forEach((o) => o.remove()), t--;
+    };
+  }, []);
 }
-var Me = (e) => ({
-  name: "transformOrigin",
-  options: e,
-  fn(s) {
-    var v, h, C;
-    const { placement: a, rects: t, middlewareData: i } = s, o = ((v = i.arrow) == null ? void 0 : v.centerOffset) !== 0, w = o ? 0 : e.arrowWidth, n = o ? 0 : e.arrowHeight, [c, x] = V(a), m = { start: "0%", center: "50%", end: "100%" }[x], y = (((h = i.arrow) == null ? void 0 : h.x) ?? 0) + w / 2, A = (((C = i.arrow) == null ? void 0 : C.y) ?? 0) + n / 2;
-    let l = "", d = "";
-    return c === "bottom" ? (l = o ? m : `${y}px`, d = `${-n}px`) : c === "top" ? (l = o ? m : `${y}px`, d = `${t.floating.height + n}px`) : c === "right" ? (l = `${-n}px`, d = o ? m : `${A}px`) : c === "left" && (l = `${t.floating.width + n}px`, d = o ? m : `${A}px`), { data: { x: l, y: d } };
-  }
-});
-function V(e) {
-  const [s, a = "center"] = e.split("-");
-  return [s, a];
+function n() {
+  const e = document.createElement("span");
+  return e.setAttribute("data-radix-focus-guard", ""), e.tabIndex = 0, e.style.outline = "none", e.style.opacity = "0", e.style.position = "fixed", e.style.pointerEvents = "none", e;
 }
-var qe = U, Ge = G, Je = J, Ke = Q;
 export {
-  Ge as Anchor,
-  Ke as Arrow,
-  Je as Content,
-  U as Popper,
-  G as PopperAnchor,
-  Q as PopperArrow,
-  J as PopperContent,
-  qe as Root,
-  Ue as createPopperScope
+  a as useFocusGuards
 };