@drjoshcsimmons/scl 0.1.1 → 0.1.3

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 2024)                                   ║
+║   • 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 2024              │
+    │      │                                                 │
+    │      ▼                                                 │
+    │   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,11 +1,52 @@
-import { __assign as m } from "./index119.js";
-import * as r from "react";
-import { RemoveScroll as e } from "./index120.js";
-import t from "./index121.js";
-var s = r.forwardRef(function(a, o) {
-  return r.createElement(e, m({}, a, { ref: o, sideCar: t }));
-});
-s.classNames = e.classNames;
+var S = function(r) {
+  if (typeof document > "u")
+    return null;
+  var u = Array.isArray(r) ? r[0] : r;
+  return u.ownerDocument.body;
+}, f = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), p = {}, h = 0, W = function(r) {
+  return r && (r.host || W(r.parentNode));
+}, D = function(r, u) {
+  return u.map(function(e) {
+    if (r.contains(e))
+      return e;
+    var n = W(e);
+    return n && r.contains(n) ? n : (console.error("aria-hidden", e, "in not contained inside", r, ". Doing nothing"), null);
+  }).filter(function(e) {
+    return !!e;
+  });
+}, E = function(r, u, e, n) {
+  var i = D(u, Array.isArray(r) ? r : [r]);
+  p[e] || (p[e] = /* @__PURE__ */ new WeakMap());
+  var s = p[e], l = [], o = /* @__PURE__ */ new Set(), b = new Set(i), y = function(t) {
+    !t || o.has(t) || (o.add(t), y(t.parentNode));
+  };
+  i.forEach(y);
+  var A = function(t) {
+    !t || b.has(t) || Array.prototype.forEach.call(t.children, function(a) {
+      if (o.has(a))
+        A(a);
+      else
+        try {
+          var c = a.getAttribute(n), w = c !== null && c !== "false", d = (f.get(a) || 0) + 1, M = (s.get(a) || 0) + 1;
+          f.set(a, d), s.set(a, M), l.push(a), d === 1 && w && v.set(a, !0), M === 1 && a.setAttribute(e, "true"), w || a.setAttribute(n, "true");
+        } catch (k) {
+          console.error("aria-hidden: cannot operate on ", a, k);
+        }
+    });
+  };
+  return A(u), o.clear(), h++, function() {
+    l.forEach(function(t) {
+      var a = f.get(t) - 1, c = s.get(t) - 1;
+      f.set(t, a), s.set(t, c), a || (v.has(t) || t.removeAttribute(n), v.delete(t)), c || t.removeAttribute(e);
+    }), h--, h || (f = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), p = {});
+  };
+}, C = function(r, u, e) {
+  e === void 0 && (e = "data-aria-hidden");
+  var n = Array.from(Array.isArray(r) ? r : [r]), i = S(r);
+  return i ? (n.push.apply(n, Array.from(i.querySelectorAll("[aria-live], script"))), E(n, i, e, "aria-hidden")) : function() {
+    return null;
+  };
+};
 export {
-  s as default
+  C as hideOthers
 };

package/dist/index101.js

@@ -1,52 +1,11 @@
-var S = function(r) {
-  if (typeof document > "u")
-    return null;
-  var u = Array.isArray(r) ? r[0] : r;
-  return u.ownerDocument.body;
-}, f = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), p = {}, h = 0, W = function(r) {
-  return r && (r.host || W(r.parentNode));
-}, D = function(r, u) {
-  return u.map(function(e) {
-    if (r.contains(e))
-      return e;
-    var n = W(e);
-    return n && r.contains(n) ? n : (console.error("aria-hidden", e, "in not contained inside", r, ". Doing nothing"), null);
-  }).filter(function(e) {
-    return !!e;
-  });
-}, E = function(r, u, e, n) {
-  var i = D(u, Array.isArray(r) ? r : [r]);
-  p[e] || (p[e] = /* @__PURE__ */ new WeakMap());
-  var s = p[e], l = [], o = /* @__PURE__ */ new Set(), b = new Set(i), y = function(t) {
-    !t || o.has(t) || (o.add(t), y(t.parentNode));
-  };
-  i.forEach(y);
-  var A = function(t) {
-    !t || b.has(t) || Array.prototype.forEach.call(t.children, function(a) {
-      if (o.has(a))
-        A(a);
-      else
-        try {
-          var c = a.getAttribute(n), w = c !== null && c !== "false", d = (f.get(a) || 0) + 1, M = (s.get(a) || 0) + 1;
-          f.set(a, d), s.set(a, M), l.push(a), d === 1 && w && v.set(a, !0), M === 1 && a.setAttribute(e, "true"), w || a.setAttribute(n, "true");
-        } catch (k) {
-          console.error("aria-hidden: cannot operate on ", a, k);
-        }
-    });
-  };
-  return A(u), o.clear(), h++, function() {
-    l.forEach(function(t) {
-      var a = f.get(t) - 1, c = s.get(t) - 1;
-      f.set(t, a), s.set(t, c), a || (v.has(t) || t.removeAttribute(n), v.delete(t)), c || t.removeAttribute(e);
-    }), h--, h || (f = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), p = {});
-  };
-}, C = function(r, u, e) {
-  e === void 0 && (e = "data-aria-hidden");
-  var n = Array.from(Array.isArray(r) ? r : [r]), i = S(r);
-  return i ? (n.push.apply(n, Array.from(i.querySelectorAll("[aria-live], script"))), E(n, i, e, "aria-hidden")) : function() {
-    return null;
-  };
-};
+import { __assign as m } from "./index119.js";
+import * as r from "react";
+import { RemoveScroll as e } from "./index120.js";
+import t from "./index121.js";
+var s = r.forwardRef(function(a, o) {
+  return r.createElement(e, m({}, a, { ref: o, sideCar: t }));
+});
+s.classNames = e.classNames;
 export {
-  C as hideOthers
+  s as default
 };