@febkosq8/arc 0.6.7 → 0.7.0

package/README.md

@@ -20,7 +20,7 @@ Arc is a React + Tailwind CSS component library that brings together the UI buil
 ## 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, and hash navigation helpers.
+- **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/).
@@ -46,10 +46,15 @@ Arc's stylesheet registers its compiled components with Tailwind CSS v4, so thei
 Import components from the package:
 
 ```tsx
-import { Button } from "@febkosq8/arc";
+import { Button, GridLoader } from "@febkosq8/arc";
 
 export function Example() {
-	return <Button>Save</Button>;
+	return (
+		<>
+			<Button>Save</Button>
+			<GridLoader rows={3} columns={3} label="Saving" />
+		</>
+	);
 }
 ```
 

package/components/index.css

@@ -29,6 +29,62 @@
 	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);