@arolariu/components 0.4.2 → 1.0.0

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

@@ -0,0 +1,32 @@
+.root {
+  display: grid;
+  gap: var(--ac-space-2);
+}
+
+.label {
+  color: var(--ac-foreground);
+  font-size: var(--ac-text-sm);
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.track {
+  position: relative;
+  width: 100%;
+  height: 0.5rem;
+  overflow: hidden;
+  border-radius: 9999px;
+  background-color: var(--ac-secondary);
+  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ac-border), transparent 20%);
+}
+
+.indicator {
+  height: inherit;
+  border-radius: inherit;
+  background: linear-gradient(
+    90deg,
+    color-mix(in oklch, var(--ac-primary), white 10%) 0%,
+    var(--ac-primary) 100%
+  );
+  transition: width var(--ac-transition-slow);
+}

package/src/components/ui/meter.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import {mergeProps} from "@base-ui/react/merge-props";
+import {Meter as BaseMeter} from "@base-ui/react/meter";
+import {useRender} from "@base-ui/react/use-render";
+import * as React from "react";
+
+import {cn} from "@/lib/utilities";
+import styles from "./meter.module.css";
+
+type MeterProps = React.ComponentPropsWithRef<typeof BaseMeter.Root>;
+type MeterTrackProps = React.ComponentPropsWithRef<typeof BaseMeter.Track>;
+type MeterIndicatorProps = React.ComponentPropsWithRef<typeof BaseMeter.Indicator>;
+type MeterLabelProps = React.ComponentPropsWithRef<typeof BaseMeter.Label>;
+
+/**
+ * Displays a scalar measurement within a known range.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on Base UI Meter primitives
+ * - Intended for values such as storage usage, health, or completion
+ *
+ * @example
+ * ```tsx
+ * <Meter value={72}>
+ *   <MeterTrack>
+ *     <MeterIndicator />
+ *   </MeterTrack>
+ * </Meter>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/meter | Base UI Meter Docs}
+ */
+function Meter(props: Readonly<Meter.Props>): React.ReactElement {
+  const {className, children, render, ...otherProps} = props;
+
+  return (
+    <BaseMeter.Root
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "div",
+        render: render as never,
+        props: mergeProps({className: cn(styles.root, className)}, {}),
+      })}>
+      {children}
+    </BaseMeter.Root>
+  );
+}
+
+/**
+ * Renders the background track for a meter.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on Base UI Meter track primitives
+ *
+ * @example
+ * ```tsx
+ * <MeterTrack />
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/meter | Base UI Meter Docs}
+ */
+function MeterTrack(props: Readonly<MeterTrack.Props>): React.ReactElement {
+  const {className, children, render, ...otherProps} = props;
+
+  return (
+    <BaseMeter.Track
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "div",
+        render: render as never,
+        props: mergeProps({className: cn(styles.track, className)}, {}),
+      })}>
+      {children}
+    </BaseMeter.Track>
+  );
+}
+
+/**
+ * Renders the filled indicator that reflects the current meter value.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on Base UI Meter indicator primitives
+ *
+ * @example
+ * ```tsx
+ * <MeterIndicator />
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/meter | Base UI Meter Docs}
+ */
+function MeterIndicator(props: Readonly<MeterIndicator.Props>): React.ReactElement {
+  const {className, children, render, ...otherProps} = props;
+
+  return (
+    <BaseMeter.Indicator
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "div",
+        render: render as never,
+        props: mergeProps({className: cn(styles.indicator, className)}, {}),
+      })}>
+      {children}
+    </BaseMeter.Indicator>
+  );
+}
+
+/**
+ * Renders the accessible label associated with a meter.
+ *
+ * @remarks
+ * - Renders a `<span>` element by default
+ * - Built on Base UI Meter label primitives
+ *
+ * @example
+ * ```tsx
+ * <MeterLabel>Storage used</MeterLabel>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/meter | Base UI Meter Docs}
+ */
+function MeterLabel(props: Readonly<MeterLabel.Props>): React.ReactElement {
+  const {className, children, render, ...otherProps} = props;
+
+  return (
+    <BaseMeter.Label
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "span",
+        render: render as never,
+        props: mergeProps({className: cn(styles.label, className)}, {}),
+      })}>
+      {children}
+    </BaseMeter.Label>
+  );
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace Meter {
+  export type Props = MeterProps;
+  export type State = BaseMeter.Root.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace MeterTrack {
+  export type Props = MeterTrackProps;
+  export type State = BaseMeter.Track.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace MeterIndicator {
+  export type Props = MeterIndicatorProps;
+  export type State = BaseMeter.Indicator.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace MeterLabel {
+  export type Props = MeterLabelProps;
+  export type State = BaseMeter.Label.State;
+}
+
+Meter.displayName = "Meter";
+MeterTrack.displayName = "MeterTrack";
+MeterIndicator.displayName = "MeterIndicator";
+MeterLabel.displayName = "MeterLabel";
+
+export {Meter, MeterIndicator, MeterLabel, MeterTrack};

package/src/components/ui/navigation-menu.module.css

@@ -0,0 +1,110 @@
+.root {
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.list {
+  display: flex;
+  align-items: center;
+  gap: var(--ac-space-1);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ac-space-1);
+  min-height: var(--ac-size-default);
+  padding: 0 var(--ac-space-3);
+  border: none;
+  border-radius: var(--ac-radius-md);
+  background-color: var(--ac-background);
+  color: var(--ac-foreground);
+  font-size: var(--ac-text-sm);
+  font-weight: 500;
+  outline: none;
+  cursor: pointer;
+  transition: background-color var(--ac-transition-fast), color var(--ac-transition-fast);
+}
+
+.trigger:hover,
+.trigger[data-open],
+.trigger:focus-visible {
+  background-color: var(--ac-accent);
+  color: var(--ac-accent-foreground);
+}
+
+.triggerIcon {
+  width: 0.875rem;
+  height: 0.875rem;
+  transition: transform var(--ac-transition-normal);
+}
+
+.trigger[data-open] .triggerIcon {
+  transform: rotate(180deg);
+}
+
+.content {
+  width: 100%;
+}
+
+.link {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--ac-radius-sm);
+  color: inherit;
+  outline: none;
+  text-decoration: none;
+}
+
+.link:focus-visible {
+  outline: 2px solid var(--ac-ring);
+  outline-offset: 2px;
+}
+
+.viewportWrapper {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding-top: var(--ac-space-2);
+}
+
+.positioner {
+  z-index: 40;
+}
+
+.popup {
+  overflow: hidden;
+  border: 1px solid var(--ac-border);
+  border-radius: var(--ac-radius-md);
+  background-color: var(--ac-popover);
+  box-shadow: 0 16px 40px -16px rgb(0 0 0 / 0.25);
+}
+
+.viewport {
+  width: min(100vw - 2rem, var(--ac-nav-content-width, 20rem));
+  height: var(--ac-nav-content-height);
+  transition: width var(--ac-transition-normal), height var(--ac-transition-normal);
+}
+
+.indicator {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 0.5rem;
+}
+
+.indicatorInner {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-top-left-radius: var(--ac-radius-xs);
+  background-color: var(--ac-border);
+  transform: translateY(0.125rem) rotate(45deg);
+}