@cryptlex/web-components 5.2.0 → 5.3.0

package/lib/components/ui/tabs.tsx

@@ -1,82 +0,0 @@
-import {
-  Tab as AriaTab,
-  TabList as AriaTabList,
-  TabListProps as AriaTabListProps,
-  TabPanel as AriaTabPanel,
-  TabPanelProps as AriaTabPanelProps,
-  TabProps as AriaTabProps,
-  Tabs as AriaTabs,
-  TabsProps as AriaTabsProps,
-  composeRenderProps,
-} from "react-aria-components"
-
-import { cn } from "lib/utils/primitives"
-
-export function Tabs({ className, ...props }: AriaTabsProps) {
-  return (
-    <AriaTabs
-      className={composeRenderProps(className, (className) =>
-        cn(
-          "group flex flex-col gap-2",
-          /* Orientation */
-          "data-[orientation=vertical]:flex-row",
-          className
-        )
-      )}
-      {...props}
-    />
-  )
-}
-
-export function TabList<T extends object>({
-  className,
-  ...props
-}: AriaTabListProps<T>) {
-  return (
-    <AriaTabList
-      className={composeRenderProps(className, (className) =>
-        cn(
-          "inline-flex items-center border-b text-muted-foreground",
-          /* Orientation */
-          "data-[orientation=vertical]:h-auto data-[orientation=vertical]:flex-col",
-          className
-        )
-      )}
-      {...props}
-    />
-  )
-}
-
-export function Tab({ className, ...props }: AriaTabProps) {
-  return (
-    <AriaTab
-      className={composeRenderProps(className, (className) =>
-        cn(
-          "btn btn-ghost leading-none text-accent h-input truncate inline-flex items-center px-3 body font-medium transition-all",
-          /* Selected */
-          "data-[selected]:bg-primary/20 data-[selected]:text-primary",
-          /* Orientation */
-          "group-data-[orientation=vertical]:w-full",
-          className
-        )
-      )}
-      {...props}
-    />
-  )
-}
-
-export function TabPanel({ className, ...props }: AriaTabPanelProps) {
-  return (
-    <AriaTabPanel
-      className={composeRenderProps(className, (className) =>
-        cn(
-          "ring-offset-background",
-          /* Focus Visible */
-          "focus-ring",
-          className
-        )
-      )}
-      {...props}
-    />
-  )
-}

package/lib/components/ui/timeline.tsx

@@ -1,52 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "lib/utils/primitives";
-import type { LucideIcon } from "lucide-react";
-
-export function Timeline({ className, ...props }: React.ComponentProps<'ol'>) {
-    return <ol className={cn("grid grid-col-1 gap-icon", className)} {...props} />
-}
-
-export function TimelineItem({ className, ...props }: React.ComponentProps<'li'> & {}) {
-    return (
-        <li className={cn("grid grid-cols-[4rem_2rem_1fr] grid-rows-subgrid list-none gap-icon", className)} {...props} />
-    )
-}
-
-export const timelineIconVariants = cva(
-    `p-1 rounded-full`,
-    {
-        variants: {
-            variant: {
-                destructive: "text-destructive-foreground bg-destructive",
-                success: "text-success-foreground bg-success",
-                muted: "text-muted-foreground bg-muted",
-            },
-        },
-        defaultVariants: {
-            variant: "muted",
-        },
-    },
-);
-
-export function TimelineIcon({ icon: Icon, className, variant, ...props }: Omit<React.ComponentProps<'div'>, 'children'> & VariantProps<typeof timelineIconVariants> & {
-    icon: LucideIcon
-}) {
-    return <div {...props} className="flex flex-col items-center gap-2">
-        <div className={cn(timelineIconVariants({ variant, className }))}>
-            <Icon className="size-icon " />
-        </div>
-        <div className="h-full w-[1px]" />
-    </div>
-}
-
-export function TimelineDate({ className, date, dateFormatter, ...props }: Omit<React.ComponentProps<'time'>, 'dateTime' | 'children'> & {
-    date: Date
-    dateFormatter?: (d: Date) => string;
-}) {
-    const defaultDateDisplay = `${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getFullYear()}`;
-    return <time {...props} dateTime={date.toISOString()} className={cn("font-mono leading-none text-muted", className)}>{dateFormatter ? dateFormatter(date) : defaultDateDisplay}</time>
-}
-
-export function TimelineContent({ className, ...props }: React.ComponentProps<'section'>) {
-    return <section className={cn("", className)} {...props} />;
-}

package/lib/components/ui/tooltip.tsx

@@ -1,30 +0,0 @@
-import {
-	Tooltip as AriaTooltip,
-	TooltipTrigger as AriaTooltipTrigger,
-	composeRenderProps,
-	type TooltipProps as AriaTooltipProps,
-} from "react-aria-components"
-
-import { cn } from "lib/utils/primitives"
-
-const TooltipTrigger = AriaTooltipTrigger
-const Tooltip = ({ className, offset = 4, ...props }: AriaTooltipProps) => (
-	<AriaTooltip
-		offset={offset}
-		className={composeRenderProps(className, (className) =>
-			cn(
-				"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0",
-				/* Entering */
-				"data-[entering]:zoom-in-95",
-				/* Exiting */
-				"data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95",
-				/* Placement */
-				"data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2",
-				className
-			)
-		)}
-		{...props}
-	/>
-)
-
-export { Tooltip, TooltipTrigger }

package/lib/tokens.scss

@@ -1,89 +0,0 @@
-/// This file is used to generate the tokens.css file in this project.
-/// Since a single variable is used to determine most swatches and the ramps formulae are repetitive, we use Sass to generate these tokens.
-@mixin generate-variables-for-hue($name, $value) {
-  --#{$name}-hue: #{$value};
-
-  --x#{$name}-1: oklch(0.99 0.01 var(--#{$name}-hue));
-  --x#{$name}-2: oklch(0.97 0.03 var(--#{$name}-hue));
-  --x#{$name}-3: oklch(0.9 0.04 var(--#{$name}-hue));
-  --x#{$name}-4: oklch(0.72 0.13 var(--#{$name}-hue));
-  --x#{$name}-5: oklch(0.67 0.13 var(--#{$name}-hue));
-  --x#{$name}-6: oklch(0.5 0.13 var(--#{$name}-hue));
-  --x#{$name}-7: oklch(0.35 0.13 var(--#{$name}-hue));
-  --x#{$name}-8: oklch(0.25 0.13 var(--#{$name}-hue));
-  --x#{$name}-9: oklch(0.2 0.09 var(--#{$name}-hue));
-  --x#{$name}-10: oklch(0.1 0.03 var(--#{$name}-hue));
-
-  --#{$name}-1: var(--x#{$name}-1);
-  --#{$name}-2: var(--x#{$name}-2);
-  --#{$name}-3: var(--x#{$name}-3);
-  --#{$name}-4: var(--x#{$name}-4);
-  --#{$name}-5: var(--x#{$name}-5);
-  --#{$name}-6: var(--x#{$name}-6);
-  --#{$name}-7: var(--x#{$name}-7);
-  --#{$name}-8: var(--x#{$name}-8);
-  --#{$name}-9: var(--x#{$name}-9);
-  --#{$name}-10: var(--x#{$name}-10);
-}
-
-/// Generates CSS variables using OKLCH for a Neutral palette.
-@mixin generate-variables-for-neutral() {
-  --neutral-hue: var(--primary-hue);
-  --neutral-s: 0.0005;
-
-  --xneutral-1: oklch(0.985 var(--neutral-s) var(--neutral-hue));
-  --xneutral-2: oklch(0.97 var(--neutral-s) var(--neutral-hue));
-  --xneutral-3: oklch(0.95 var(--neutral-s) var(--neutral-hue));
-  --xneutral-4: oklch(0.87 var(--neutral-s) var(--neutral-hue));
-  --xneutral-5: oklch(0.708 var(--neutral-s) var(--neutral-hue));
-  --xneutral-6: oklch(0.556 var(--neutral-s) var(--neutral-hue));
-  --xneutral-7: oklch(0.439 var(--neutral-s) var(--neutral-hue));
-  --xneutral-8: oklch(0.29 var(--neutral-s) var(--neutral-hue));
-  --xneutral-9: oklch(0.269 var(--neutral-s) var(--neutral-hue));
-  --xneutral-10: oklch(0.205 var(--neutral-s) var(--neutral-hue));
-
-  --neutral-1: var(--xneutral-1);
-  --neutral-2: var(--xneutral-2);
-  --neutral-3: var(--xneutral-3);
-  --neutral-4: var(--xneutral-4);
-  --neutral-5: var(--xneutral-5);
-  --neutral-6: var(--xneutral-6);
-  --neutral-7: var(--xneutral-7);
-  --neutral-8: var(--xneutral-8);
-  --neutral-9: var(--xneutral-9);
-  --neutral-10: var(--xneutral-10);
-}
-
-/// Swap Swatch 1 & Swatch 10, Swatch 2 and Swatch 9, and so on.
-@mixin generate-dark-mode($name) {
-  --#{$name}-1: var(--x#{$name}-10);
-  --#{$name}-2: var(--x#{$name}-9);
-  --#{$name}-3: var(--x#{$name}-8);
-  --#{$name}-4: var(--x#{$name}-7);
-  --#{$name}-5: var(--x#{$name}-6);
-  --#{$name}-6: var(--x#{$name}-5);
-  --#{$name}-7: var(--x#{$name}-4);
-  --#{$name}-8: var(--x#{$name}-3);
-  --#{$name}-9: var(--x#{$name}-2);
-  --#{$name}-10: var(--x#{$name}-1);
-}
-
-/*! 
-    This CSS is generated by tokens.scss, do not modify directly.
-    Instead, compile the SCSS file again to create modifications.
-*/
-:root {
-  @include generate-variables-for-hue(primary, 240);
-  @include generate-variables-for-hue(secondary, calc(var(--primary-hue) + 30));
-  @include generate-variables-for-hue(destructive, calc(var(--primary-hue) - 230));
-  @include generate-variables-for-hue(success, calc(var(--primary-hue) - 90));
-  @include generate-variables-for-neutral();
-
-  @media (prefers-color-scheme: dark) {
-    @include generate-dark-mode(primary);
-    @include generate-dark-mode(secondary);
-    @include generate-dark-mode(destructive);
-    @include generate-dark-mode(success);
-    @include generate-dark-mode(neutral);
-  }
-}

package/lib/utils/use-mobile.tsx

@@ -1,21 +0,0 @@
-import { useEffect, useState } from "react";
-
-const MOBILE_BREAKPOINT = 768;
-
-export function useIsMobile() {
-	const [isMobile, setIsMobile] = useState<boolean | undefined>(
-		undefined,
-	);
-
-	useEffect(() => {
-		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-		const onChange = () => {
-			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-		};
-		mql.addEventListener("change", onChange);
-		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-		return () => mql.removeEventListener("change", onChange);
-	}, []);
-
-	return !!isMobile;
-}