@chitrank2050/monoline-ui 0.2.0

package/foundations/breakpoints.js

@@ -0,0 +1,2 @@
+export{a as monolineBreakpoints}from'../chunk-XEB7C557.js';//# sourceMappingURL=breakpoints.js.map
+//# sourceMappingURL=breakpoints.js.map

package/foundations/breakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"breakpoints.js"}

package/foundations/use-breakpoint.d.ts

@@ -0,0 +1,5 @@
+import { MonolineBreakpoint } from './breakpoints.js';
+
+declare function useBreakpoint(defaultValue?: MonolineBreakpoint): MonolineBreakpoint;
+
+export { useBreakpoint };

package/foundations/use-breakpoint.js

@@ -0,0 +1,3 @@
+"use client";
+export{a as useBreakpoint}from'../chunk-KGLH6WI6.js';import'../chunk-XEB7C557.js';//# sourceMappingURL=use-breakpoint.js.map
+//# sourceMappingURL=use-breakpoint.js.map

package/foundations/use-breakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"use-breakpoint.js"}

package/index.d.ts

@@ -0,0 +1,42 @@
+export { ActionRail, ActionRailProps } from './components/action-rail/index.js';
+export { Avatar, AvatarImageProps, AvatarProps, AvatarSize } from './components/avatar/index.js';
+export { BackLink, BackLinkProps } from './components/back-link/index.js';
+export { Badge, BadgeCountProps, BadgeProps, BadgeSize, BadgeVariant } from './components/badge/index.js';
+export { Button, ButtonArrowProps, ButtonIconProps, ButtonIconSide, ButtonProps, ButtonSize, ButtonVariant } from './components/button/index.js';
+export { Callout, CalloutProps, CalloutVariant } from './components/callout/index.js';
+export { Card, CardAction, CardActionProps, CardArrowProps, CardBody, CardDescription, CardDescriptionLines, CardDescriptionProps, CardEyebrow, CardFooter, CardHeader, CardHeadingProps, CardImage, CardImageCaption, CardImageProps, CardImageRatio, CardMeta, CardProps, CardSize, CardSlotProps, CardTagList, CardTagListProps, CardTextProps, CardTitle } from './components/card/index.js';
+export { CodeBlock, CodeBlockProps } from './components/code-block/index.js';
+export { CommandSearch, CommandSearchContextValue, CommandSearchEmptyProps, CommandSearchFooterProps, CommandSearchGroupProps, CommandSearchInputProps, CommandSearchItemProps, CommandSearchListProps, CommandSearchProps } from './components/command-search/index.js';
+export { Container, ContainerProps, ContainerSize } from './components/container/index.js';
+export { DataList, DataListItemData, DataListItemProps, DataListProps, DataListSize, DataListVariant } from './components/data-list/index.js';
+export { EditorialLine, EditorialLineProps } from './components/editorial-line/index.js';
+export { Eyebrow, EyebrowProps, EyebrowSize } from './components/eyebrow/index.js';
+export { Footer, FooterColumn, FooterLink, FooterLinkComponentProps, FooterLinkProps, FooterProps, FooterSize, FooterStatusProps, FooterSubscribeFormProps } from './components/footer/index.js';
+export { Input, InputKbdProps, InputProps, InputSize, InputVariant } from './components/input/index.js';
+export { LinkList, LinkListItem, LinkListItemProps, LinkListProps, LinkListRoot, LinkListSize } from './components/link-list/index.js';
+export { MediaFrame, MediaFrameCaption, MediaFrameCaptionProps, MediaFrameMeta, MediaFrameMetaProps, MediaFrameProps, MediaFrameRatio, MediaFrameRoot, MediaFrameSize } from './components/media-frame/index.js';
+export { MetaRow, MetaRowProps, MetaRowSepProps } from './components/meta-row/index.js';
+export { Metric, MetricProps, MetricSize, MetricTrend } from './components/metric/index.js';
+export { Navbar, NavbarActionsProps, NavbarBrandProps, NavbarBrandTextStyle, NavbarLayout, NavbarLinkItem, NavbarLinkProps, NavbarNavProps, NavbarProps, NavbarSize } from './components/navbar/index.js';
+export { Progress, ProgressProps, ProgressSize } from './components/progress/index.js';
+export { PullQuote, PullQuoteProps } from './components/pull-quote/index.js';
+export { Rail, RailCountProps, RailItemProps, RailProps } from './components/rail/index.js';
+export { ResourcesPanel, ResourcesPanelItem, ResourcesPanelKind, ResourcesPanelProps, ResourcesPanelRoot, ResourcesPanelSize } from './components/resources-panel/index.js';
+export { SectionHead, SectionHeadLevel, SectionHeadProps, SectionHeadSize } from './components/section-head/index.js';
+export { SegmentedControl, SegmentedControlOption, SegmentedControlProps, SegmentedControlSize, SegmentedControlVariant } from './components/segmented-control/index.js';
+export { Select, SelectContentProps, SelectItemProps, SelectLabelProps, SelectOption, SelectRootProps, SelectSize, SelectTriggerProps, SelectValueProps, SelectVariant } from './components/select/index.js';
+export { Skeleton, SkeletonProps, SkeletonVariant } from './components/skeleton/index.js';
+export { Status, StatusProps, StatusSize, StatusVariant } from './components/status/index.js';
+export { InteractiveTagProps, StaticTagProps, Tag, TagCountProps, TagProps, TagSize, TagVariant } from './components/tag/index.js';
+export { Testimonial, TestimonialProps, TestimonialSize, TestimonialVariant } from './components/testimonial/index.js';
+export { TestimonialGrid, TestimonialGridAlign, TestimonialGridProps, TestimonialGridVariant } from './components/testimonial-grid/index.js';
+export { ThemeSwitcher, ThemeSwitcherMode, ThemeSwitcherProps, ThemeSwitcherSize, ThemeSwitcherTheme } from './components/theme-switcher/index.js';
+export { Toast, ToastProps, ToastVariant } from './components/toast/index.js';
+export { Toc, TocItem, TocProps } from './components/toc/index.js';
+export { Toggle, ToggleProps, ToggleSize } from './components/toggle/index.js';
+export { MonolineBreakpoint, monolineBreakpoints } from './foundations/breakpoints.js';
+export { useBreakpoint } from './foundations/use-breakpoint.js';
+export { cn, composeRefs } from './lib/utils.js';
+import 'react';
+import 'cmdk';
+import 'clsx';

package/index.js

@@ -0,0 +1,2 @@
+export{a as ThemeSwitcher}from'./chunk-FLUGXF5D.js';export{a as Toast}from'./chunk-7ANXAXP5.js';export{a as Toc}from'./chunk-ZU3HIOBU.js';export{a as Toggle}from'./chunk-QUG36ONS.js';export{b as ResourcesPanel,a as ResourcesPanelRoot}from'./chunk-2T2JZW4Z.js';export{a as SectionHead}from'./chunk-H2CRII7X.js';export{a as SegmentedControl}from'./chunk-ZOPV3BXO.js';export{a as Select}from'./chunk-IVTAW6SX.js';export{a as useBreakpoint}from'./chunk-KGLH6WI6.js';export{a as monolineBreakpoints}from'./chunk-XEB7C557.js';export{a as Skeleton}from'./chunk-7WJF6B6G.js';export{a as Status}from'./chunk-DJT3EVR4.js';export{a as Tag}from'./chunk-B5P3RAN2.js';export{a as Testimonial}from'./chunk-6AEWSPAE.js';export{a as TestimonialGrid}from'./chunk-R2YSVBHS.js';export{c as LinkList,a as LinkListItem,b as LinkListRoot}from'./chunk-5TIKYN5B.js';export{d as MediaFrame,a as MediaFrameCaption,b as MediaFrameMeta,c as MediaFrameRoot}from'./chunk-NDTTLW56.js';export{a as MetaRow}from'./chunk-D3E4G2RE.js';export{a as Metric}from'./chunk-Z7SIB4X6.js';export{a as Navbar}from'./chunk-O43OQHFN.js';export{a as Progress}from'./chunk-3F6Z4CFV.js';export{a as PullQuote}from'./chunk-37JB3ZNS.js';export{a as Rail}from'./chunk-K665XZ3N.js';export{a as CodeBlock}from'./chunk-A2LXX23X.js';export{a as CommandSearch}from'./chunk-V6PUPMAY.js';export{a as Container}from'./chunk-NDHOUIOX.js';export{a as DataList}from'./chunk-GSWZL5C2.js';export{a as EditorialLine}from'./chunk-7SDVYBBO.js';export{a as Eyebrow}from'./chunk-VSATIFOR.js';export{a as Footer}from'./chunk-COFALEVG.js';export{a as Input}from'./chunk-K72EORST.js';export{a as ActionRail}from'./chunk-EWKGYQOX.js';export{a as Avatar}from'./chunk-N37GMCSK.js';export{a as BackLink}from'./chunk-LVMQ3ZM3.js';export{a as Badge}from'./chunk-QGG3J7OW.js';export{a as Button}from'./chunk-JBOP2AJB.js';export{a as Callout}from'./chunk-TSOHITZ7.js';export{l as Card,a as CardAction,b as CardBody,c as CardDescription,d as CardEyebrow,e as CardFooter,f as CardHeader,g as CardImage,h as CardImageCaption,i as CardMeta,j as CardTagList,k as CardTitle}from'./chunk-JCKPCV2H.js';export{a as cn,b as composeRefs}from'./chunk-AACTIVV7.js';//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/lib/utils.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { ClassValue } from 'clsx';
+
+declare function cn(...inputs: ClassValue[]): string;
+declare function composeRefs<T>(...refs: Array<React.Ref<T> | undefined>): React.RefCallback<T>;
+
+export { cn, composeRefs };

package/lib/utils.js

@@ -0,0 +1,2 @@
+export{a as cn,b as composeRefs}from'../chunk-AACTIVV7.js';//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=utils.js.map

package/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"utils.js"}

package/package.json

@@ -0,0 +1,228 @@
+{
+  "name": "@chitrank2050/monoline-ui",
+  "version": "0.2.0",
+  "description": "A token-first, responsive React component library and Tailwind CSS v4 design system built from my portfolio's visual language.",
+  "type": "module",
+  "author": {
+    "name": "Chitrank Agnihotri",
+    "email": "chitrank2050@gmail.com",
+    "url": "https://www.chitrankagnihotri.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chitranklabs/monoline-ui"
+  },
+  "bugs": {
+    "url": "https://github.com/chitranklabs/monoline-ui/issues"
+  },
+  "keywords": [
+    "react",
+    "component-library",
+    "design-system",
+    "tailwindcss",
+    "tailwind-v4",
+    "typescript",
+    "portfolio",
+    "ui",
+    "jsr",
+    "button",
+    "toggle",
+    "tag",
+    "footer"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "**/*"
+  ],
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "sideEffects": [
+    "./styles/theme.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
+    "./action-rail": {
+      "types": "./components/action-rail/index.d.ts",
+      "import": "./components/action-rail/index.js"
+    },
+    "./avatar": {
+      "types": "./components/avatar/index.d.ts",
+      "import": "./components/avatar/index.js"
+    },
+    "./back-link": {
+      "types": "./components/back-link/index.d.ts",
+      "import": "./components/back-link/index.js"
+    },
+    "./badge": {
+      "types": "./components/badge/index.d.ts",
+      "import": "./components/badge/index.js"
+    },
+    "./button": {
+      "types": "./components/button/index.d.ts",
+      "import": "./components/button/index.js"
+    },
+    "./callout": {
+      "types": "./components/callout/index.d.ts",
+      "import": "./components/callout/index.js"
+    },
+    "./card": {
+      "types": "./components/card/index.d.ts",
+      "import": "./components/card/index.js"
+    },
+    "./code-block": {
+      "types": "./components/code-block/index.d.ts",
+      "import": "./components/code-block/index.js"
+    },
+    "./command-search": {
+      "types": "./components/command-search/index.d.ts",
+      "import": "./components/command-search/index.js"
+    },
+    "./container": {
+      "types": "./components/container/index.d.ts",
+      "import": "./components/container/index.js"
+    },
+    "./data-list": {
+      "types": "./components/data-list/index.d.ts",
+      "import": "./components/data-list/index.js"
+    },
+    "./editorial-line": {
+      "types": "./components/editorial-line/index.d.ts",
+      "import": "./components/editorial-line/index.js"
+    },
+    "./eyebrow": {
+      "types": "./components/eyebrow/index.d.ts",
+      "import": "./components/eyebrow/index.js"
+    },
+    "./footer": {
+      "types": "./components/footer/index.d.ts",
+      "import": "./components/footer/index.js"
+    },
+    "./input": {
+      "types": "./components/input/index.d.ts",
+      "import": "./components/input/index.js"
+    },
+    "./link-list": {
+      "types": "./components/link-list/index.d.ts",
+      "import": "./components/link-list/index.js"
+    },
+    "./media-frame": {
+      "types": "./components/media-frame/index.d.ts",
+      "import": "./components/media-frame/index.js"
+    },
+    "./meta-row": {
+      "types": "./components/meta-row/index.d.ts",
+      "import": "./components/meta-row/index.js"
+    },
+    "./metric": {
+      "types": "./components/metric/index.d.ts",
+      "import": "./components/metric/index.js"
+    },
+    "./navbar": {
+      "types": "./components/navbar/index.d.ts",
+      "import": "./components/navbar/index.js"
+    },
+    "./progress": {
+      "types": "./components/progress/index.d.ts",
+      "import": "./components/progress/index.js"
+    },
+    "./pull-quote": {
+      "types": "./components/pull-quote/index.d.ts",
+      "import": "./components/pull-quote/index.js"
+    },
+    "./rail": {
+      "types": "./components/rail/index.d.ts",
+      "import": "./components/rail/index.js"
+    },
+    "./resources-panel": {
+      "types": "./components/resources-panel/index.d.ts",
+      "import": "./components/resources-panel/index.js"
+    },
+    "./section-head": {
+      "types": "./components/section-head/index.d.ts",
+      "import": "./components/section-head/index.js"
+    },
+    "./segmented-control": {
+      "types": "./components/segmented-control/index.d.ts",
+      "import": "./components/segmented-control/index.js"
+    },
+    "./select": {
+      "types": "./components/select/index.d.ts",
+      "import": "./components/select/index.js"
+    },
+    "./skeleton": {
+      "types": "./components/skeleton/index.d.ts",
+      "import": "./components/skeleton/index.js"
+    },
+    "./status": {
+      "types": "./components/status/index.d.ts",
+      "import": "./components/status/index.js"
+    },
+    "./tag": {
+      "types": "./components/tag/index.d.ts",
+      "import": "./components/tag/index.js"
+    },
+    "./testimonial": {
+      "types": "./components/testimonial/index.d.ts",
+      "import": "./components/testimonial/index.js"
+    },
+    "./testimonial-grid": {
+      "types": "./components/testimonial-grid/index.d.ts",
+      "import": "./components/testimonial-grid/index.js"
+    },
+    "./theme-switcher": {
+      "types": "./components/theme-switcher/index.d.ts",
+      "import": "./components/theme-switcher/index.js"
+    },
+    "./toast": {
+      "types": "./components/toast/index.d.ts",
+      "import": "./components/toast/index.js"
+    },
+    "./toc": {
+      "types": "./components/toc/index.d.ts",
+      "import": "./components/toc/index.js"
+    },
+    "./toggle": {
+      "types": "./components/toggle/index.d.ts",
+      "import": "./components/toggle/index.js"
+    },
+    "./components/*": {
+      "types": "./components/*/index.d.ts",
+      "import": "./components/*/index.js"
+    },
+    "./foundations/*": {
+      "types": "./foundations/*.d.ts",
+      "import": "./foundations/*.js"
+    },
+    "./lib/*": {
+      "types": "./lib/*.d.ts",
+      "import": "./lib/*.js"
+    },
+    "./theme.css": {
+      "default": "./styles/theme.css"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.2.5",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "tailwind-merge": "^3.6.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0",
+    "tailwindcss": ">=4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  }
+}

package/styles/theme/animations.css

@@ -0,0 +1,206 @@
+/* =============================================================================
+ * animations.css · Keyframes and animation utilities
+ * ─────────────────────────────────────────────────────────────────────────────
+ * Keyframes and .animate-* classes for layout micro-interactions.
+ * ========================================================================== */
+
+/* Heart pop (like button) */
+@keyframes heart-pop {
+	0% {
+		transform: scale(1);
+	}
+	35% {
+		transform: scale(1.35);
+	}
+	70% {
+		transform: scale(0.92);
+	}
+	100% {
+		transform: scale(1);
+	}
+}
+.animate-heart-pop {
+	animation: var(--animate-heart-pop);
+}
+
+/* Ring ripple (around like button) */
+@keyframes ring-ripple {
+	0% {
+		opacity: 0.6;
+		transform: scale(0.4);
+	}
+	100% {
+		opacity: 0;
+		transform: scale(2.2);
+	}
+}
+.animate-ring-ripple {
+	animation: var(--animate-ring-ripple);
+}
+
+/* Shimmer skeleton */
+@keyframes shimmer {
+	0% {
+		background-position: -12.5rem 0;
+	}
+	100% {
+		background-position: 12.5rem 0;
+	}
+}
+.animate-shimmer {
+	background: linear-gradient(
+		90deg,
+		var(--surface-2) 0%,
+		var(--surface-3) 50%,
+		var(--surface-2) 100%
+	);
+	background-size: 12.5rem 100%;
+	animation: var(--animate-shimmer);
+}
+
+/* Reading progress indeterminate sweep */
+@keyframes progress-loop {
+	0% {
+		transform: translateX(-100%);
+	}
+	100% {
+		transform: translateX(400%);
+	}
+}
+.animate-progress-loop {
+	animation: var(--animate-progress-loop);
+}
+
+/* Toast slide-in / out */
+@keyframes toast-in {
+	0% {
+		transform: translateY(0.5rem);
+		opacity: 0;
+	}
+	15% {
+		transform: translateY(0);
+		opacity: 1;
+	}
+	85% {
+		transform: translateY(0);
+		opacity: 1;
+	}
+	100% {
+		transform: translateY(-0.25rem);
+		opacity: 0;
+	}
+}
+.animate-toast-in {
+	animation: var(--animate-toast-in);
+}
+
+/* Fade-up entry - used by sections on first paint */
+@keyframes fade-up {
+	0% {
+		opacity: 0;
+		transform: translateY(0.75rem);
+		filter: blur(4px);
+	}
+	100% {
+		opacity: 1;
+		transform: translateY(0);
+		filter: blur(0);
+	}
+}
+.animate-fade-up {
+	animation: var(--animate-fade-up);
+}
+
+/* Slide-in from left / right - used by drawers, sidebar */
+@keyframes slide-in-left {
+	from {
+		transform: translateX(-100%);
+	}
+	to {
+		transform: translateX(0);
+	}
+}
+@keyframes slide-in-right {
+	from {
+		transform: translateX(100%);
+	}
+	to {
+		transform: translateX(0);
+	}
+}
+.animate-slide-in-left {
+	animation: var(--animate-slide-in-left);
+}
+.animate-slide-in-right {
+	animation: var(--animate-slide-in-right);
+}
+
+/* Scale-in (popovers, dropdowns) */
+@keyframes scale-in {
+	from {
+		opacity: 0;
+		transform: scale(0.96);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+.animate-scale-in {
+	animation: var(--animate-scale-in);
+	transform-origin: top center;
+}
+
+/* Spin (loading) */
+@keyframes spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+.animate-spin {
+	animation: spin 0.8s linear infinite;
+}
+
+/* Pulse (status dot - Open to work) */
+@keyframes pulse {
+	0%,
+	100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
+	}
+}
+.animate-pulse {
+	animation: pulse 2s var(--ease-in-out) infinite;
+}
+
+/* Glow pulse (status dot with shadow ring) */
+@keyframes glow-pulse {
+	0%,
+	100% {
+		box-shadow: 0 0 0 0 var(--accent-soft);
+	}
+	50% {
+		box-shadow: 0 0 0 6px transparent;
+	}
+}
+.animate-glow-pulse {
+	animation: var(--animate-glow-pulse);
+}
+
+/* Entry animation - your existing @starting-style pattern, preserved */
+@layer utilities {
+	.animate-entry {
+		opacity: 1;
+		transform: translateY(0);
+		transition:
+			opacity var(--duration-long) var(--ease-out),
+			transform var(--duration-long) var(--ease-out-expo);
+
+		@starting-style {
+			opacity: 0;
+			transform: translateY(0.5rem);
+		}
+	}
+}

package/styles/theme/base.css

@@ -0,0 +1,75 @@
+/* =============================================================================
+ * base.css · Global resets and base element styles
+ * ─────────────────────────────────────────────────────────────────────────────
+ * Defines core rules for body background/colors, ::selection, customized
+ * scrollbars, and focus outlines inside the @layer base scope.
+ * ========================================================================== */
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+
+	html {
+		/* Smooth scroll for anchor jumps (table of contents) */
+		scroll-behavior: smooth;
+		/* Prevent horizontal scroll from any overflowing child.
+		   clip (not hidden) preserves position: sticky on descendants. */
+		overflow-x: clip;
+	}
+
+	body {
+		overflow-x: clip;
+		background: var(--background);
+		color: var(--foreground);
+		font-family: var(--font-sans);
+		font-feature-settings: "ss01", "cv11";
+		text-rendering: optimizeLegibility;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+
+	/* Enable smooth transitions only when explicitly toggling themes */
+	.theme-transitioning,
+	.theme-transitioning * {
+		transition:
+			background-color var(--duration-short) var(--ease-out) !important,
+			color var(--duration-short) var(--ease-out) !important,
+			border-color var(--duration-short) var(--ease-out) !important,
+			box-shadow var(--duration-short) var(--ease-out) !important;
+	}
+
+	::selection {
+		background: var(--accent-soft);
+		color: var(--foreground);
+	}
+
+	/* Themed scrollbar - subtle, follows the surface ladder */
+	::-webkit-scrollbar {
+		width: 0.625rem;
+		height: 0.625rem;
+	}
+	::-webkit-scrollbar-track {
+		background: transparent;
+	}
+	::-webkit-scrollbar-thumb {
+		background: var(--border-strong);
+		border-radius: 999px;
+		border: 0.125rem solid var(--background);
+	}
+	::-webkit-scrollbar-thumb:hover {
+		background: var(--muted-foreground);
+	}
+
+	/* Firefox */
+	* {
+		scrollbar-width: thin;
+		scrollbar-color: var(--border-strong) transparent;
+	}
+
+	/* Focus ring is consistent across all focusable elements */
+	:where(button, a, input, textarea, select, [tabindex]):focus-visible {
+		outline: none;
+		box-shadow: var(--focus-ring);
+		border-color: var(--accent);
+	}
+}