@arolariu/components 0.4.2 → 1.0.0

package/src/components/ui/skeleton.module.css

@@ -0,0 +1,14 @@
+.skeleton {
+  border-radius: var(--ac-radius-md);
+  background-color: var(--ac-muted);
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}

package/src/components/ui/skeleton.tsx

@@ -1,15 +1,45 @@
-"use client";
+import * as React from "react";
 
 import {cn} from "@/lib/utilities";
-import * as React from "react";
+import styles from "./skeleton.module.css";
 
-function Skeleton({className, ...props}: Readonly<React.HTMLAttributes<HTMLDivElement>>) {
-  return (
-    <div
-      className={cn("animate-pulse rounded-md bg-neutral-900/10 dark:bg-neutral-50/10", className)}
-      {...props}
-    />
-  );
+/**
+ * Represents the configurable props for the Skeleton component.
+ *
+ * @remarks
+ * Extends native `<div>` attributes so loading placeholders can be sized, annotated,
+ * and composed freely while exposing a documented class override.
+ */
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Additional CSS classes merged with the default skeleton shimmer styles.
+   */
+  className?: string;
 }
 
+/**
+ * A loading placeholder used while content is being fetched or prepared.
+ *
+ * @remarks
+ * **Rendering Context**: Server- and client-compatible presentational component.
+ *
+ * Renders a styled `<div>` with the library's skeleton animation. Size it with layout
+ * classes to mimic the eventual content and reduce perceived loading jank.
+ *
+ * @example
+ * ```tsx
+ * <Skeleton className="h-4 w-32" aria-label="Loading account name" />
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/overview Base UI documentation}
+ */
+const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(({className, ...props}, ref) => (
+  <div
+    ref={ref}
+    className={cn(styles.skeleton, className)}
+    {...props}
+  />
+));
+Skeleton.displayName = "Skeleton";
+
 export {Skeleton};

package/src/components/ui/slider.module.css

@@ -0,0 +1,48 @@
+.root {
+  display: flex;
+  width: 100%;
+  touch-action: none;
+  user-select: none;
+}
+
+.control {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 1rem;
+}
+
+.track {
+  position: relative;
+  width: 100%;
+  height: 0.375rem;
+  overflow: hidden;
+  border-radius: 999px;
+  background-color: color-mix(in oklch, var(--ac-foreground), transparent 88%);
+}
+
+.indicator {
+  position: absolute;
+  inset: 0 auto 0 0;
+  background-color: var(--ac-primary);
+}
+
+.thumb {
+  width: 0.875rem;
+  height: 0.875rem;
+  border: 1px solid color-mix(in oklch, var(--ac-primary), transparent 60%);
+  border-radius: 999px;
+  background-color: var(--ac-background);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.14);
+  outline: none;
+}
+
+.thumb:focus-visible {
+  outline: 2px solid var(--ac-ring);
+  outline-offset: 2px;
+}
+
+.thumb[data-disabled] {
+  opacity: 0.5;
+}

package/src/components/ui/slider.tsx

@@ -1,24 +1,97 @@
 "use client";
 
-import * as SliderPrimitive from "@radix-ui/react-slider";
+import {mergeProps} from "@base-ui/react/merge-props";
+import {Slider as BaseSlider} from "@base-ui/react/slider";
+import {useRender} from "@base-ui/react/use-render";
 import * as React from "react";
 
 import {cn} from "@/lib/utilities";
+import styles from "./slider.module.css";
 
-const Slider = React.forwardRef<
-  React.ComponentRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({className, ...props}, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn("relative flex w-full touch-none items-center select-none", className)}
-    {...props}>
-    <SliderPrimitive.Track className='relative h-1.5 w-full grow overflow-hidden rounded-full bg-neutral-900/20 dark:bg-neutral-50/20'>
-      <SliderPrimitive.Range className='absolute h-full bg-neutral-900 dark:bg-neutral-50' />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className='block h-4 w-4 rounded-full border border-neutral-200 border-neutral-900/50 bg-white shadow transition-colors focus-visible:ring-1 focus-visible:ring-neutral-950 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-50/50 dark:border-neutral-800 dark:bg-neutral-950 dark:focus-visible:ring-neutral-300' />
-  </SliderPrimitive.Root>
-));
-Slider.displayName = SliderPrimitive.Root.displayName;
+interface SliderProps extends Omit<
+  React.ComponentPropsWithRef<typeof BaseSlider.Root>,
+  "defaultValue" | "onValueChange" | "onValueCommitted" | "value" | "className"
+> {
+  /**
+   * Applies additional CSS classes to the component root element.
+   * @default undefined
+   */
+  className?: string;
+  /**
+   * Controls the current value when the component is used in controlled mode.
+   * @default undefined
+   */
+  value?: number[];
+  /**
+   * Sets the initial value when the component is used in uncontrolled mode.
+   * @default undefined
+   */
+  defaultValue?: number[];
+  /**
+   * Called whenever the slider value changes.
+   * @default undefined
+   */
+  onValueChange?: (value: number[], eventDetails: unknown) => void;
+  /**
+   * Called when a slider interaction is committed.
+   * @default undefined
+   */
+  onValueCommitted?: (value: number[], eventDetails: unknown) => void;
+}
+
+/**
+ * Renders the slider control.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/slider | Base UI Slider}
+ * - Supports the `render` prop for element composition
+ *
+ * @example
+ * ```tsx
+ * <Slider>Content</Slider>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/slider | Base UI Documentation}
+ */
+const Slider = React.forwardRef<React.ComponentRef<typeof BaseSlider.Root>, Slider.Props>(
+  (props: Readonly<Slider.Props>, ref): React.ReactElement => {
+    const {className, defaultValue, onValueChange, onValueCommitted, render, value, ...otherProps} = props;
+
+    return (
+      <BaseSlider.Root<readonly number[]>
+        ref={ref}
+        defaultValue={defaultValue}
+        onValueChange={(nextValue, eventDetails) => {
+          onValueChange?.([...nextValue], eventDetails);
+        }}
+        onValueCommitted={(nextValue, eventDetails) => {
+          onValueCommitted?.([...nextValue], eventDetails);
+        }}
+        value={value}
+        {...otherProps}
+        render={useRender({
+          defaultTagName: "div",
+          render: render as never,
+          props: mergeProps({className: cn(styles.root, className)}, {}),
+        })}>
+        <BaseSlider.Control className={styles.control}>
+          <BaseSlider.Track className={styles.track}>
+            <BaseSlider.Indicator className={styles.indicator} />
+          </BaseSlider.Track>
+          <BaseSlider.Thumb className={styles.thumb} />
+        </BaseSlider.Control>
+      </BaseSlider.Root>
+    );
+  },
+);
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace Slider {
+  export type Props = SliderProps;
+  export type State = BaseSlider.Root.State;
+}
+
+Slider.displayName = "Slider";
 
 export {Slider};

package/src/components/ui/sonner.module.css

@@ -0,0 +1,246 @@
+.viewport {
+  position: fixed;
+  z-index: 100;
+  display: flex;
+  width: min(calc(100vw - 2rem), 24rem);
+  flex-direction: column;
+  gap: var(--ac-space-3);
+  padding: var(--ac-space-4);
+  pointer-events: none;
+}
+
+.viewportTopLeft {
+  top: 0;
+  left: 0;
+  align-items: flex-start;
+}
+
+.viewportTopRight {
+  top: 0;
+  right: 0;
+  align-items: flex-end;
+}
+
+.viewportBottomLeft {
+  bottom: 0;
+  left: 0;
+  align-items: flex-start;
+}
+
+.viewportBottomRight {
+  right: 0;
+  bottom: 0;
+  align-items: flex-end;
+}
+
+.viewportTopCenter {
+  top: 0;
+  left: 50%;
+  align-items: center;
+  transform: translateX(-50%);
+}
+
+.viewportBottomCenter {
+  bottom: 0;
+  left: 50%;
+  align-items: center;
+  transform: translateX(-50%);
+}
+
+.root {
+  pointer-events: auto;
+  width: 100%;
+  border: 1px solid var(--ac-border);
+  border-radius: var(--ac-radius-xl);
+  background: color-mix(in oklab, var(--ac-background), var(--ac-card, var(--ac-background)) 25%);
+  color: var(--ac-foreground);
+  box-shadow:
+    0 18px 40px -24px rgb(15 23 42 / 0.45),
+    0 10px 18px -12px rgb(15 23 42 / 0.28);
+  overflow: hidden;
+  backdrop-filter: blur(16px);
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease;
+
+  &[data-starting] {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+
+  &[data-ending] {
+    opacity: 0;
+    transform: translateY(4px) scale(0.98);
+  }
+}
+
+.content {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: var(--ac-space-3);
+  align-items: flex-start;
+  padding: var(--ac-space-4);
+}
+
+.leading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-top: 0.125rem;
+  color: inherit;
+}
+
+.body {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--ac-space-1);
+}
+
+.title {
+  margin: 0;
+  font-size: var(--ac-text-sm);
+  font-weight: 600;
+  line-height: 1.4;
+  color: inherit;
+}
+
+.description {
+  margin: 0;
+  font-size: var(--ac-text-sm);
+  line-height: 1.5;
+  color: var(--ac-muted-foreground);
+}
+
+.close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 0;
+  border-radius: calc(var(--ac-radius-md) - 2px);
+  background: transparent;
+  color: var(--ac-muted-foreground);
+  cursor: pointer;
+  transition:
+    background-color 140ms ease,
+    color 140ms ease;
+
+  &:hover,
+  &:focus-visible {
+    background: color-mix(in oklab, var(--ac-muted) 84%, transparent);
+    color: var(--ac-foreground);
+    outline: none;
+  }
+}
+
+.closeIcon,
+.icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.iconSpin {
+  animation: toast-spin 900ms linear infinite;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ac-space-2);
+  margin-top: var(--ac-space-2);
+}
+
+.primaryAction,
+.secondaryAction {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2rem;
+  padding: 0 var(--ac-space-3);
+  border-radius: var(--ac-radius-md);
+  border: 1px solid transparent;
+  font-size: var(--ac-text-xs);
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background-color 140ms ease,
+    border-color 140ms ease,
+    color 140ms ease;
+}
+
+.primaryAction {
+  background: var(--ac-foreground);
+  color: var(--ac-background);
+
+  &:hover,
+  &:focus-visible {
+    background: color-mix(in oklab, var(--ac-foreground) 88%, white);
+    outline: none;
+  }
+}
+
+.secondaryAction {
+  background: transparent;
+  border-color: color-mix(in oklab, var(--ac-border) 75%, transparent);
+  color: var(--ac-foreground);
+
+  &:hover,
+  &:focus-visible {
+    background: color-mix(in oklab, var(--ac-muted) 72%, transparent);
+    outline: none;
+  }
+}
+
+.default {
+  border-color: color-mix(in oklab, var(--ac-border) 88%, transparent);
+}
+
+.success {
+  border-color: color-mix(in oklab, var(--ac-success, #16a34a) 45%, var(--ac-border));
+  background: color-mix(in oklab, var(--ac-success, #16a34a) 10%, var(--ac-background));
+  color: color-mix(in oklab, var(--ac-success, #16a34a) 78%, var(--ac-foreground));
+}
+
+.error {
+  border-color: color-mix(in oklab, var(--ac-destructive) 48%, var(--ac-border));
+  background: color-mix(in oklab, var(--ac-destructive) 10%, var(--ac-background));
+  color: color-mix(in oklab, var(--ac-destructive) 82%, var(--ac-foreground));
+}
+
+.info {
+  border-color: color-mix(in oklab, var(--ac-primary, #2563eb) 42%, var(--ac-border));
+  background: color-mix(in oklab, var(--ac-primary, #2563eb) 10%, var(--ac-background));
+  color: color-mix(in oklab, var(--ac-primary, #2563eb) 78%, var(--ac-foreground));
+}
+
+.warning {
+  border-color: color-mix(in oklab, #f59e0b 45%, var(--ac-border));
+  background: color-mix(in oklab, #f59e0b 12%, var(--ac-background));
+  color: color-mix(in oklab, #f59e0b 80%, var(--ac-foreground));
+}
+
+.loading {
+  border-color: color-mix(in oklab, var(--ac-muted-foreground) 34%, var(--ac-border));
+}
+
+.success .description,
+.error .description,
+.info .description,
+.warning .description {
+  color: color-mix(in oklab, currentcolor 68%, var(--ac-muted-foreground));
+}
+
+@keyframes toast-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}