@febkosq8/arc 0.3.0 → 0.7.0

package/README.md

@@ -1,5 +1,69 @@
-# ARC
-
-This is a component library that will be used in all of my projects.
-
-Not something I would recommend using in your projects, but feel free to take a look at the code.
+<div align="center">
+	<h1>Arc</h1>
+	<p>A collection of reusable React components and interaction patterns for the interfaces I build.</p>
+	<p>
+		<a href="https://www.npmjs.com/package/@febkosq8/arc">
+			<img alt="NPM Version" src="https://img.shields.io/npm/v/%40febkosq8%2Farc">
+		</a>
+		<a href="https://www.npmjs.com/package/@febkosq8/arc">
+			<img alt="NPM Downloads" src="https://img.shields.io/npm/dm/%40febkosq8%2Farc">
+		</a>
+	</p>
+</div>
+
+---
+
+Arc is a React + Tailwind CSS component library that brings together the UI building blocks I reuse across my projects. It focuses on practical components, consistent styling, and small interaction details, while leaving page layout and product decisions to the application.
+
+👉 **[Explore the components in Storybook](https://arc.febkosq8.me/)** 👈
+
+## Features
+
+- **Reusable UI building blocks:** Buttons, inputs, cards, menus, dropdowns, selects, switches, tags, modals, and more.
+- **Interaction-focused components:** Long-press and double-click buttons, preview cards, typing animation, a configurable grid loader, and hash navigation helpers.
+- **Themed styling:** Built with React and Tailwind CSS, with shared design tokens and light and dark theme styles.
+- **Composable components:** Use the components as parts of your interface without handing over control of your page layout.
+- **Interactive examples:** Browse component examples and states in [Storybook](https://arc.febkosq8.me/).
+
+## Installation
+
+```bash
+npm install @febkosq8/arc
+# or
+pnpm add @febkosq8/arc
+```
+
+## Usage
+
+Import Arc's stylesheet from your application CSS:
+
+```css
+@import "@febkosq8/arc/styles.css";
+```
+
+Arc's stylesheet registers its compiled components with Tailwind CSS v4, so their utility classes are generated automatically without an application-level `@source` directive.
+
+Import components from the package:
+
+```tsx
+import { Button, GridLoader } from "@febkosq8/arc";
+
+export function Example() {
+	return (
+		<>
+			<Button>Save</Button>
+			<GridLoader rows={3} columns={3} label="Saving" />
+		</>
+	);
+}
+```
+
+## Explore the project
+
+- [Live Storybook](https://arc.febkosq8.me/)
+- [npm package](https://www.npmjs.com/package/@febkosq8/arc)
+- [GitHub repository](https://github.com/febkosq8/arc)
+- [Component source](./components/)
+- [Storybook stories](./stories/)
+
+Arc is primarily built to meet my own projects' needs. It's shared publicly for anyone who might find the code useful, but it isn't intended as a polished, general-purpose replacement for a larger UI framework.

package/components/index.css

@@ -1,114 +1,319 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-	:root {
-		--background: 0 0% 96%;
-		--foreground: 20 14.3% 4.1%;
-		--card: 0 0% 100%;
-		--card-foreground: 20 14.3% 4.1%;
-		--popover: 0 0% 100%;
-		--popover-foreground: 20 14.3% 4.1%;
-		--primary: 24.6 95% 53.1%;
-		--primary-foreground: 60 9.1% 97.8%;
-		--secondary: 60 4.8% 95.9%;
-		--secondary-foreground: 24 9.8% 10%;
-		--muted: 60 4.8% 95.9%;
-		--muted-foreground: 25 5.3% 44.7%;
-		--accent: 60 4.8% 95.9%;
-		--accent-foreground: 24 9.8% 10%;
-		--destructive: 0 84.2% 60.2%;
-		--destructive-foreground: 60 9.1% 97.8%;
-		--border: 20 5.9% 90%;
-		--input: 20 5.9% 90%;
-		--ring: 24.6 95% 53.1%;
-		--radius: 1rem;
-	}
-
-	.dark {
-		--background: 20 14.3% 4.1%;
-		--foreground: 60 9.1% 97.8%;
-		--card: 20 14.3% 4.1%;
-		--card-foreground: 60 9.1% 97.8%;
-		--popover: 20 14.3% 4.1%;
-		--popover-foreground: 60 9.1% 97.8%;
-		--primary: 20.5 90.2% 48.2%;
-		--primary-foreground: 60 9.1% 97.8%;
-		--secondary: 12 6.5% 15.1%;
-		--secondary-foreground: 60 9.1% 97.8%;
-		--muted: 12 6.5% 15.1%;
-		--muted-foreground: 24 5.4% 63.9%;
-		--accent: 12 6.5% 15.1%;
-		--accent-foreground: 60 9.1% 97.8%;
-		--destructive: 0 72.2% 50.6%;
-		--destructive-foreground: 60 9.1% 97.8%;
-		--border: 12 6.5% 15.1%;
-		--input: 12 6.5% 15.1%;
-		--ring: 20.5 90.2% 48.2%;
-	}
-}
-
-@layer base {
-	* {
-		@apply border-border;
-	}
-	body {
-		@apply bg-background text-foreground;
-	}
-}
-
-@layer components {
-	.typography-heading-1 {
-		@apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
-	}
-	.typography-heading-2 {
-		@apply scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0;
-	}
-	.typography-heading-3 {
-		@apply scroll-m-20 text-2xl font-semibold tracking-tight;
-	}
-	.typography-heading-4 {
-		@apply scroll-m-20 text-xl font-semibold tracking-tight;
-	}
-	.typography-paragraph {
-		@apply leading-7 [&:not(:first-child)]:mt-6;
-	}
-	.typography-lead {
-		@apply text-xl text-muted-foreground;
-	}
-	.typography-large {
-		@apply text-lg font-semibold;
-	}
-	.typography-small {
-		@apply text-sm font-medium leading-none;
-	}
-	.typography-muted {
-		@apply text-sm text-muted-foreground;
-	}
-}
-
-/* Style for the scrollbar */
-::-webkit-scrollbar {
-	width: 10px;
-}
-
-/* Track */
-::-webkit-scrollbar-track {
-	background: hsl(var(--background));
-}
-
-/* Handle */
-::-webkit-scrollbar-thumb {
-	background: hsl(var(--primary));
-	border-radius: 5px;
-}
-
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-	background: hsl(var(--primary));
-}
-
-* {
-	@apply scroll-smooth;
-}
+@import "tailwindcss";
+@source "../dist/arc.js";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@property --double-click-progress {
+	syntax: "<number>";
+	inherits: false;
+	initial-value: 100;
+}
+
+@keyframes double-click-countdown {
+	from {
+		--double-click-progress: 100;
+	}
+	to {
+		--double-click-progress: 0;
+	}
+}
+
+.arc-double-click-progress-ring {
+	-webkit-mask:
+		linear-gradient(#000 0 0) content-box,
+		linear-gradient(#000 0 0);
+	-webkit-mask-composite: xor;
+	mask:
+		linear-gradient(#000 0 0) content-box,
+		linear-gradient(#000 0 0);
+	mask-composite: exclude;
+}
+
+@keyframes arc-grid-loader-pulse {
+	0%,
+	100% {
+		transform: scale(0.45);
+		opacity: 0.8;
+	}
+	50% {
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
+.arc-grid-loader__cell {
+	background-color: color-mix(in srgb, var(--color-primary) 85%, var(--color-primary-foreground) 15%);
+	color: var(--color-foreground);
+	animation: arc-grid-loader-pulse 1.2s ease-in-out infinite;
+}
+
+.arc-grid-loader__cell--diamond {
+	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+}
+
+.arc-grid-loader__cell--star {
+	clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 94%, 50% 71%, 21% 94%, 32% 57%, 2% 35%, 39% 35%);
+}
+
+.arc-grid-loader__cell--heart {
+	clip-path: polygon(
+		50% 94%,
+		8% 54%,
+		2% 39%,
+		5% 24%,
+		16% 13%,
+		30% 12%,
+		42% 21%,
+		50% 33%,
+		58% 21%,
+		70% 12%,
+		84% 13%,
+		95% 24%,
+		98% 39%,
+		92% 54%
+	);
+}
+
+.arc-grid-loader__cell--hexagon {
+	clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.arc-grid-loader__cell {
+		animation: none;
+		opacity: 1;
+	}
+}
+
+.arc-pill:hover,
+.arc-pill-link:hover {
+	border-color: var(--color-border);
+	background-color: color-mix(in srgb, var(--color-background) 94%, var(--color-foreground) 6%) !important;
+}
+
+.dark .arc-pill:hover,
+.dark .arc-pill-link:hover {
+	border-color: var(--color-primary);
+	background-color: color-mix(in srgb, var(--color-background) 88%, var(--color-primary) 12%) !important;
+}
+
+.arc-menu-content {
+	background-color: color-mix(in srgb, var(--color-background) 92%, var(--color-foreground) 8%);
+}
+
+.arc-theme-switcher .arc-menu-content [data-highlighted] {
+	border-color: transparent !important;
+}
+
+.arc-menu-content [data-highlighted] {
+	background-color: color-mix(in srgb, var(--color-background) 94%, var(--color-foreground) 6%) !important;
+	color: var(--color-primary) !important;
+}
+
+.dark .arc-menu-content [data-highlighted] {
+	background-color: color-mix(in srgb, var(--color-background) 88%, var(--color-primary) 12%) !important;
+}
+
+.arc-menu-content [data-highlighted] {
+	border-color: var(--color-border) !important;
+}
+
+.dark .arc-menu-content [data-highlighted] {
+	border-color: var(--color-primary) !important;
+}
+
+@layer base {
+	:root {
+		--background: 220 14% 94%;
+		--foreground: 220 20% 12%;
+		--card: 0 0% 98%;
+		--card-foreground: 220 20% 12%;
+		--popover: 0 0% 98%;
+		--popover-foreground: 220 20% 12%;
+		--primary: 24.6 95% 53.1%;
+		--primary-foreground: 60 9.1% 97.8%;
+		--secondary: 220 14% 90%;
+		--secondary-foreground: 220 20% 12%;
+		--muted: 220 14% 90%;
+		--muted-foreground: 220 10% 40%;
+		--accent: 220 14% 90%;
+		--accent-foreground: 220 20% 12%;
+		--destructive: 0 84.2% 60.2%;
+		--destructive-foreground: 60 9.1% 97.8%;
+		--success: 142 71% 45%;
+		--success-foreground: 144 70% 98%;
+		--warning: 38 92% 50%;
+		--warning-foreground: 24 10% 10%;
+		--border: 220 10% 82%;
+		--input: 220 10% 82%;
+		--ring: 24.6 95% 53.1%;
+		--radius: 1rem;
+	}
+
+	.dark {
+		--background: 220 15% 14%;
+		--foreground: 60 9.1% 97.8%;
+		--card: 220 15% 18%;
+		--card-foreground: 60 9.1% 97.8%;
+		--popover: 220 15% 22%;
+		--popover-foreground: 60 9.1% 97.8%;
+		--primary: 20.5 90.2% 48.2%;
+		--primary-foreground: 60 9.1% 97.8%;
+		--secondary: 12 6.5% 15.1%;
+		--secondary-foreground: 60 9.1% 97.8%;
+		--muted: 12 6.5% 15.1%;
+		--muted-foreground: 24 5.4% 63.9%;
+		--accent: 12 6.5% 15.1%;
+		--accent-foreground: 60 9.1% 97.8%;
+		--destructive: 0 72.2% 50.6%;
+		--destructive-foreground: 60 9.1% 97.8%;
+		--success: 142 70% 45%;
+		--success-foreground: 144 70% 98%;
+		--warning: 38 92% 50%;
+		--warning-foreground: 24 10% 10%;
+		--border: 12 6.5% 25.1%;
+		--input: 12 6.5% 25.1%;
+		--ring: 20.5 90.2% 48.2%;
+	}
+}
+
+@theme inline {
+	--color-background: hsl(var(--background));
+	--color-foreground: hsl(var(--foreground));
+	--color-card: hsl(var(--card));
+	--color-card-foreground: hsl(var(--card-foreground));
+	--color-popover: hsl(var(--popover));
+	--color-popover-foreground: hsl(var(--popover-foreground));
+	--color-primary: hsl(var(--primary));
+	--color-primary-foreground: hsl(var(--primary-foreground));
+	--color-secondary: hsl(var(--secondary));
+	--color-secondary-foreground: hsl(var(--secondary-foreground));
+	--color-muted: hsl(var(--muted));
+	--color-muted-foreground: hsl(var(--muted-foreground));
+	--color-accent: hsl(var(--accent));
+	--color-accent-foreground: hsl(var(--accent-foreground));
+	--color-destructive: hsl(var(--destructive));
+	--color-destructive-foreground: hsl(var(--destructive-foreground));
+	--color-success: hsl(var(--success));
+	--color-success-foreground: hsl(var(--success-foreground));
+	--color-warning: hsl(var(--warning));
+	--color-warning-foreground: hsl(var(--warning-foreground));
+	--color-border: hsl(var(--border));
+	--color-input: hsl(var(--input));
+	--color-ring: hsl(var(--ring));
+}
+
+@layer base {
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}
+
+@layer components {
+	.typography-heading-1 {
+		@apply text-4xl font-extrabold tracking-tight;
+	}
+	.typography-heading-2 {
+		@apply pb-2 text-3xl font-bold tracking-tight transition-colors;
+	}
+	.typography-heading-3 {
+		@apply text-2xl font-semibold tracking-tight;
+	}
+	.typography-heading-4 {
+		@apply text-xl font-semibold tracking-tight;
+	}
+	.typography-paragraph {
+		@apply leading-7;
+	}
+	.typography-lead {
+		@apply text-xl text-muted-foreground;
+	}
+	.typography-large {
+		@apply text-lg font-semibold;
+	}
+	.typography-small {
+		@apply text-sm leading-none font-medium;
+	}
+	.typography-muted {
+		@apply text-sm text-muted-foreground;
+	}
+
+	.arc-card-cursor-border {
+		--card-pointer-x: 50%;
+		--card-pointer-y: 50%;
+	}
+
+	.arc-card-cursor-border::before {
+		position: absolute;
+		opacity: 0;
+		z-index: 20;
+		-webkit-mask:
+			linear-gradient(#000 0 0) content-box,
+			linear-gradient(#000 0 0);
+		-webkit-mask-composite: xor;
+		mask:
+			linear-gradient(#000 0 0) content-box,
+			linear-gradient(#000 0 0);
+		mask-composite: exclude;
+		transition: opacity 300ms ease-out;
+		inset: 0;
+		border-radius: inherit;
+		background: radial-gradient(
+			300px circle at var(--card-pointer-x) var(--card-pointer-y),
+			color-mix(in srgb, var(--primary) 55%, var(--foreground)),
+			transparent 68%
+		);
+		padding: 1px;
+		pointer-events: none;
+		content: "";
+	}
+
+	@media (hover: hover) {
+		.arc-card-cursor-border:hover::before {
+			opacity: 1;
+		}
+	}
+
+	.typography-heading-2:first-child {
+		margin-top: 0;
+	}
+
+	.typography-paragraph:not(:first-child) {
+		margin-top: 1.5rem;
+	}
+}
+
+@media (min-width: 64rem) {
+	.typography-heading-1 {
+		font-size: var(--text-5xl);
+		line-height: var(--text-5xl--line-height);
+	}
+}
+
+/* Style for the scrollbar */
+::-webkit-scrollbar {
+	width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+	background: var(--color-background);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+	border-radius: 5px;
+	background: var(--color-primary);
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+	background: var(--color-primary);
+}
+
+* {
+	@apply scroll-smooth;
+}