@arolariu/components 0.4.2 → 1.0.0

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

@@ -0,0 +1,35 @@
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ac-space-3);
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: var(--ac-space-3);
+}
+
+.avatar {
+  width: 2.5rem;
+  height: 2.5rem;
+  flex-shrink: 0;
+  border-radius: 50%;
+}
+
+.text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--ac-space-1);
+}
+
+.primary {
+  width: 60%;
+  height: 0.875rem;
+}
+
+.secondary {
+  width: 40%;
+  height: 0.75rem;
+}

package/src/components/ui/list-skeleton.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+
+import {cn} from "@/lib/utilities";
+
+import styles from "./list-skeleton.module.css";
+import {Skeleton} from "./skeleton";
+
+/**
+ * Represents the configurable props for the {@link ListSkeleton} component.
+ *
+ * @remarks
+ * Extends native `<div>` attributes so list-shaped placeholders can be embedded in
+ * semantic containers and customized with layout or accessibility attributes.
+ */
+interface ListSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Number of list item placeholders to render.
+   *
+   * @default 5
+   */
+  items?: number;
+  /**
+   * Whether each item should render a leading circular avatar placeholder.
+   *
+   * @default true
+   */
+  showAvatar?: boolean;
+}
+
+/**
+ * Renders a skeleton placeholder shaped like a stacked list of items.
+ *
+ * @remarks
+ * **Rendering Context**: Server- and client-compatible presentational component.
+ *
+ * Each item includes optional avatar media plus two text lines, making it suitable for
+ * activity feeds, contact lists, or navigation menus that load incrementally.
+ *
+ * @example
+ * ```tsx
+ * <ListSkeleton items={8} showAvatar={false} aria-label="Loading notifications" />
+ * ```
+ *
+ * @see {@link ListSkeletonProps} for available props
+ */
+const ListSkeleton = React.forwardRef<HTMLDivElement, ListSkeletonProps>(
+  ({items = 5, showAvatar = true, className, ...props}: Readonly<ListSkeletonProps>, ref): React.JSX.Element => (
+    <div
+      ref={ref}
+      className={cn(styles.list, className)}
+      {...props}>
+      {Array.from({length: items}, (_, index) => (
+        <div
+          key={index}
+          className={styles.item}>
+          {showAvatar ? <Skeleton className={styles.avatar} /> : null}
+          <div className={styles.text}>
+            <Skeleton className={styles.primary} />
+            <Skeleton className={styles.secondary} />
+          </div>
+        </div>
+      ))}
+    </div>
+  ),
+);
+
+ListSkeleton.displayName = "ListSkeleton";
+
+export {ListSkeleton};
+export type {ListSkeletonProps};

package/src/components/ui/loading-overlay.module.css

@@ -0,0 +1,19 @@
+.overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: inherit;
+  background-color: rgb(from var(--ac-background) r g b / 0.7);
+}
+
+.blur {
+  backdrop-filter: blur(4px);
+}
+
+.spinner {
+  width: 2rem;
+  height: 2rem;
+}

package/src/components/ui/loading-overlay.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import * as React from "react";
+
+import {cn} from "@/lib/utilities";
+
+import styles from "./loading-overlay.module.css";
+import {Spinner} from "./spinner";
+
+/**
+ * Represents the configurable props for the {@link LoadingOverlay} component.
+ *
+ * @remarks
+ * Extends native `<div>` attributes so overlays can be positioned inside relatively
+ * positioned containers, annotated for accessibility, and visually customized.
+ */
+interface LoadingOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Whether the overlay should be rendered.
+   *
+   * @default true
+   */
+  visible?: boolean;
+  /**
+   * Whether a backdrop blur effect should be applied behind the overlay.
+   *
+   * @default false
+   */
+  blur?: boolean;
+}
+
+/**
+ * Renders a centered loading overlay for pending asynchronous operations.
+ *
+ * @remarks
+ * **Rendering Context**: Client component.
+ *
+ * Place this component inside a relatively positioned container to block interactions
+ * while preserving the layout underneath. By default, it renders the shared spinner, but
+ * custom children can replace that indicator when richer progress UI is needed.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative">
+ *   <LoadingOverlay visible blur />
+ *   <Content />
+ * </div>
+ * ```
+ *
+ * @see {@link LoadingOverlayProps} for available props
+ */
+const LoadingOverlay = React.forwardRef<HTMLDivElement, LoadingOverlayProps>(
+  ({visible = true, blur = false, className, children, ...props}: Readonly<LoadingOverlayProps>, ref): React.JSX.Element | null => {
+    if (!visible) {
+      return null;
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(styles.overlay, blur && styles.blur, className)}
+        {...props}>
+        {children ?? <Spinner className={styles.spinner} />}
+      </div>
+    );
+  },
+);
+
+LoadingOverlay.displayName = "LoadingOverlay";
+
+export {LoadingOverlay};
+export type {LoadingOverlayProps};

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

@@ -0,0 +1,144 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ac-space-1);
+  min-height: var(--ac-size-default);
+  padding: var(--ac-space-1);
+  border: 1px solid var(--ac-border);
+  border-radius: var(--ac-radius-md);
+  background-color: var(--ac-background);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
+}
+
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(var(--ac-size-default) - var(--ac-space-1));
+  padding: 0 var(--ac-space-3);
+  border: none;
+  border-radius: var(--ac-radius-sm);
+  background: transparent;
+  color: var(--ac-foreground);
+  font-size: var(--ac-text-sm);
+  font-weight: 500;
+  cursor: default;
+  outline: none;
+}
+
+.trigger[data-popup-open],
+.trigger:focus-visible {
+  background-color: var(--ac-accent);
+  color: var(--ac-accent-foreground);
+}
+
+.positioner {
+  z-index: 50;
+}
+
+.content {
+  min-width: 12rem;
+  max-height: min(24rem, var(--available-height, 24rem));
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: var(--ac-space-1);
+  border: 1px solid var(--ac-border);
+  border-radius: var(--ac-radius-md);
+  background-color: var(--ac-popover);
+  color: var(--ac-popover-foreground);
+  box-shadow: 0 16px 40px -16px rgb(0 0 0 / 0.35);
+  transition: opacity var(--ac-transition-normal), transform var(--ac-transition-normal);
+}
+
+.content[data-starting-style],
+.content[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.96);
+}
+
+.item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--ac-space-2);
+  width: 100%;
+  min-height: var(--ac-size-default);
+  padding: var(--ac-space-1) var(--ac-space-2);
+  border-radius: var(--ac-radius-sm);
+  outline: none;
+  font-size: var(--ac-text-sm);
+  user-select: none;
+  cursor: default;
+}
+
+.item[data-highlighted] {
+  background-color: var(--ac-accent);
+  color: var(--ac-accent-foreground);
+}
+
+.item[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.subTrigger {
+  padding-right: var(--ac-space-3);
+}
+
+.subTrigger[data-popup-open] {
+  background-color: var(--ac-accent);
+  color: var(--ac-accent-foreground);
+}
+
+.subTriggerIcon {
+  width: 1rem;
+  height: 1rem;
+  margin-left: auto;
+}
+
+.indicatorItem {
+  padding-left: calc(var(--ac-space-2) + 1.25rem);
+}
+
+.indicatorSlot {
+  position: absolute;
+  left: var(--ac-space-2);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+}
+
+.indicatorIcon,
+.radioIndicatorIcon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.radioIndicatorIcon {
+  fill: currentcolor;
+}
+
+.label {
+  padding: var(--ac-space-1) var(--ac-space-2);
+  font-size: var(--ac-text-sm);
+  font-weight: 600;
+}
+
+.inset {
+  padding-left: calc(var(--ac-space-2) + 1.25rem);
+}
+
+.separator {
+  height: 1px;
+  margin: var(--ac-space-1) calc(var(--ac-space-1) * -1);
+  background-color: var(--ac-border);
+}
+
+.shortcut {
+  margin-left: auto;
+  color: var(--ac-muted-foreground);
+  font-size: var(--ac-text-xs);
+  letter-spacing: 0.08em;
+}