@arolariu/components 0.4.2 → 1.0.0

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

@@ -0,0 +1,70 @@
+.item {
+  border-bottom: 1px solid var(--ac-border);
+}
+
+.header {
+  display: flex;
+}
+
+.trigger {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ac-space-3);
+  padding: var(--ac-space-3) 0;
+  border: none;
+  background: transparent;
+  color: var(--ac-foreground);
+  font-size: var(--ac-text-sm);
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+  transition: color var(--ac-transition-fast);
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--ac-primary);
+    }
+  }
+
+  &:focus-visible {
+    border-radius: var(--ac-radius-sm);
+    outline: 2px solid var(--ac-ring);
+    outline-offset: 2px;
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &[data-panel-open] .icon {
+    transform: rotate(180deg);
+  }
+}
+
+.icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  color: var(--ac-muted-foreground);
+  transition: transform var(--ac-transition-normal);
+}
+
+.panel {
+  overflow: hidden;
+  color: var(--ac-muted-foreground);
+  font-size: var(--ac-text-sm);
+  transition: grid-template-rows var(--ac-transition-normal), opacity var(--ac-transition-normal);
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+  }
+}
+
+.panelInner {
+  padding: 0 0 var(--ac-space-3);
+}

package/src/components/ui/accordion.tsx

@@ -1,55 +1,289 @@
 "use client";
 
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import {Accordion as BaseAccordion} from "@base-ui/react/accordion";
+import {mergeProps} from "@base-ui/react/merge-props";
+import {useRender} from "@base-ui/react/use-render";
 import {ChevronDown} from "lucide-react";
 import * as React from "react";
 
 import {cn} from "@/lib/utilities";
+import styles from "./accordion.module.css";
 
-const Accordion = AccordionPrimitive.Root;
-
-const AccordionItem = React.forwardRef<
-  React.ComponentRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({className, ...props}, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn("border-b", className)}
-    {...props}
-  />
-));
-AccordionItem.displayName = "AccordionItem";
+type AccordionRootBaseProps = Omit<
+  React.ComponentPropsWithRef<typeof BaseAccordion.Root>,
+  "defaultValue" | "multiple" | "onValueChange" | "value" | "className"
+>;
+
+/**
+ * Props for the single-item accordion root wrapper.
+ */
+interface AccordionSingleProps extends AccordionRootBaseProps {
+  /** Controls whether the accordion only allows one item to be expanded at a time. @default "single" */
+  type?: "single";
+  /** Legacy compatibility flag accepted by the wrapper but not forwarded to Base UI. @default undefined */
+  collapsible?: boolean;
+  /** Additional CSS classes merged with the accordion root styles. @default undefined */
+  className?: string;
+  /** The initially expanded item value in uncontrolled single mode. @default undefined */
+  defaultValue?: string;
+  /** Called when the expanded item changes in single mode. @default undefined */
+  onValueChange?: (value: string | undefined, eventDetails: unknown) => void;
+  /** The controlled expanded item value in single mode. @default undefined */
+  value?: string;
+}
+
+/**
+ * Props for the multi-item accordion root wrapper.
+ */
+interface AccordionMultipleProps extends AccordionRootBaseProps {
+  /** Controls whether the accordion allows multiple items to stay expanded. @default "multiple" */
+  type: "multiple";
+  /** Legacy compatibility flag accepted by the wrapper but not forwarded to Base UI. @default undefined */
+  collapsible?: boolean;
+  /** Additional CSS classes merged with the accordion root styles. @default undefined */
+  className?: string;
+  /** The initially expanded item values in uncontrolled multi mode. @default undefined */
+  defaultValue?: string[];
+  /** Called when the expanded item values change in multi mode. @default undefined */
+  onValueChange?: (value: string[], eventDetails: unknown) => void;
+  /** The controlled expanded item values in multi mode. @default undefined */
+  value?: string[];
+}
+
+type AccordionSingleRootProps = Omit<AccordionSingleProps, "className" | "collapsible" | "render" | "type">;
+type AccordionMultipleRootProps = Omit<AccordionMultipleProps, "className" | "collapsible" | "render" | "type">;
+
+/**
+ * Props for an accordion item wrapper.
+ */
+interface AccordionItemProps extends Omit<React.ComponentPropsWithRef<typeof BaseAccordion.Item>, "className"> {
+  /** Additional CSS classes merged with the accordion item styles. @default undefined */
+  className?: string;
+}
+
+/**
+ * Props for an accordion trigger wrapper.
+ */
+interface AccordionTriggerProps extends Omit<React.ComponentPropsWithRef<typeof BaseAccordion.Trigger>, "className"> {
+  /** Additional CSS classes merged with the accordion trigger styles. @default undefined */
+  className?: string;
+}
+
+/**
+ * Props for an accordion content wrapper.
+ */
+interface AccordionContentProps extends Omit<React.ComponentPropsWithRef<typeof BaseAccordion.Panel>, "className"> {
+  /** Additional CSS classes merged with the accordion content styles. @default undefined */
+  className?: string;
+}
+
+/**
+ * Groups disclosure items into a styled accordion container.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/accordion | Base UI Accordion}
+ * - Supports the `render` prop for element composition
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Accordion>
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>Section</AccordionTrigger>
+ *     <AccordionContent>Content</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/accordion | Base UI Documentation}
+ */
+function Accordion(props: Readonly<Accordion.Props>): React.ReactElement {
+  const {className, render, type = "single"} = props;
+  const accordionRender = useRender({
+    defaultTagName: "div",
+    render: render as never,
+    props: mergeProps({className: cn(className)}, {}),
+  });
+
+  if (type === "multiple") {
+    const {defaultValue, onValueChange, value, ...otherProps} = omitAccordionWrapperProps(props) as AccordionMultipleRootProps;
+
+    return (
+      <BaseAccordion.Root
+        multiple
+        defaultValue={defaultValue}
+        onValueChange={onValueChange}
+        value={value}
+        {...otherProps}
+        render={accordionRender}
+      />
+    );
+  }
+
+  const {defaultValue, onValueChange, value, ...otherProps} = omitAccordionWrapperProps(props) as AccordionSingleRootProps;
+
+  return (
+    <BaseAccordion.Root
+      multiple={false}
+      defaultValue={defaultValue ? [defaultValue] : undefined}
+      onValueChange={(nextValue, eventDetails) => {
+        onValueChange?.(nextValue[0], eventDetails);
+      }}
+      value={value ? [value] : undefined}
+      {...otherProps}
+      render={accordionRender}
+    />
+  );
+}
+Accordion.displayName = "Accordion";
+
+function omitAccordionWrapperProps(props: Accordion.Props): AccordionSingleRootProps | AccordionMultipleRootProps {
+  const rootProps: Partial<Accordion.Props> = {...props};
 
-const AccordionTrigger = React.forwardRef<
-  React.ComponentRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({className, children, ...props}, ref) => (
-  <AccordionPrimitive.Header className='flex'>
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between py-4 text-left text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className,
-      )}
-      {...props}>
+  Reflect.deleteProperty(rootProps, "className");
+  Reflect.deleteProperty(rootProps, "collapsible");
+  Reflect.deleteProperty(rootProps, "render");
+  Reflect.deleteProperty(rootProps, "type");
+
+  return rootProps as AccordionSingleRootProps | AccordionMultipleRootProps;
+}
+
+/**
+ * Wraps a single accordion item with shared border and spacing styles.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/accordion | Base UI Accordion}
+ * - Supports the `render` prop for element composition
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example Basic usage
+ * ```tsx
+ * <AccordionItem value="item-1">
+ *   <AccordionTrigger>Section</AccordionTrigger>
+ *   <AccordionContent>Content</AccordionContent>
+ * </AccordionItem>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/accordion | Base UI Documentation}
+ */
+function AccordionItem(props: Readonly<AccordionItem.Props>): React.ReactElement {
+  const {className, children, render, ...otherProps} = props;
+
+  return (
+    <BaseAccordion.Item
+      {...otherProps}
+      render={useRender({
+        defaultTagName: "div",
+        render: render as never,
+        props: mergeProps({className: cn(styles.item, className)}, {}),
+      })}>
       {children}
-      <ChevronDown className='h-4 w-4 shrink-0 text-neutral-500 transition-transform duration-200 dark:text-neutral-400' />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-
-const AccordionContent = React.forwardRef<
-  React.ComponentRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({className, children, ...props}, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className='data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm'
-    {...props}>
-    <div className={cn("pt-0 pb-4", className)}>{children}</div>
-  </AccordionPrimitive.Content>
-));
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+    </BaseAccordion.Item>
+  );
+}
+AccordionItem.displayName = "AccordionItem";
+
+/**
+ * Toggles an accordion item while rendering the chevron affordance.
+ *
+ * @remarks
+ * - Renders a `<button>` element by default
+ * - Built on {@link https://base-ui.com/react/components/accordion | Base UI Accordion}
+ * - Supports the `render` prop for element composition
+ * - Includes a built-in chevron icon; use the `render` prop for full custom trigger rendering or wrap
+ *   the component when you need a different icon treatment
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example Basic usage
+ * ```tsx
+ * <AccordionTrigger>Section</AccordionTrigger>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/accordion | Base UI Documentation}
+ */
+const AccordionTrigger = React.forwardRef<React.ComponentRef<typeof BaseAccordion.Trigger>, AccordionTrigger.Props>(
+  (props: Readonly<AccordionTrigger.Props>, ref): React.ReactElement => {
+    const {className, children, render, ...otherProps} = props;
+
+    return (
+      <BaseAccordion.Header className={styles.header}>
+        <BaseAccordion.Trigger
+          ref={ref}
+          {...otherProps}
+          render={useRender({
+            defaultTagName: "button",
+            render: render as never,
+            props: mergeProps({className: cn(styles.trigger, className)}, {}),
+          })}>
+          <span>{children}</span>
+          <ChevronDown className={styles.icon} />
+        </BaseAccordion.Trigger>
+      </BaseAccordion.Header>
+    );
+  },
+);
+AccordionTrigger.displayName = "AccordionTrigger";
+
+/**
+ * Reveals accordion panel content with shared spacing and animation hooks.
+ *
+ * @remarks
+ * - Renders a `<div>` element by default
+ * - Built on {@link https://base-ui.com/react/components/accordion | Base UI Accordion}
+ * - Supports the `render` prop for element composition
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example Basic usage
+ * ```tsx
+ * <AccordionContent>Content</AccordionContent>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/accordion | Base UI Documentation}
+ */
+const AccordionContent = React.forwardRef<React.ComponentRef<typeof BaseAccordion.Panel>, AccordionContent.Props>(
+  (props: Readonly<AccordionContent.Props>, ref): React.ReactElement => {
+    const {className, children, render, ...otherProps} = props;
+
+    return (
+      <BaseAccordion.Panel
+        ref={ref}
+        {...otherProps}
+        render={useRender({
+          defaultTagName: "div",
+          render: render as never,
+          props: mergeProps({className: styles.panel}, {}),
+        })}>
+        <div className={cn(styles.panelInner, className)}>{children}</div>
+      </BaseAccordion.Panel>
+    );
+  },
+);
+AccordionContent.displayName = "AccordionContent";
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace Accordion {
+  export type Props = AccordionSingleProps | AccordionMultipleProps;
+  export type State = BaseAccordion.Root.State<string>;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace AccordionItem {
+  export type Props = AccordionItemProps;
+  export type State = BaseAccordion.Item.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace AccordionTrigger {
+  export type Props = AccordionTriggerProps;
+  export type State = BaseAccordion.Trigger.State;
+}
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace AccordionContent {
+  export type Props = AccordionContentProps;
+  export type State = BaseAccordion.Panel.State;
+}
 
 export {Accordion, AccordionContent, AccordionItem, AccordionTrigger};

package/src/components/ui/alert-dialog.module.css

@@ -0,0 +1,87 @@
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  min-height: 100dvh;
+  background-color: rgb(0 0 0 / 0.55);
+  transition: opacity var(--ac-transition-normal);
+  touch-action: none;
+
+  @supports (-webkit-touch-callout: none) {
+    position: absolute;
+  }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+  }
+}
+
+.popup {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 51;
+  display: grid;
+  width: min(32rem, calc(100vw - 2rem));
+  gap: var(--ac-space-4);
+  padding: var(--ac-space-6);
+  border: 1px solid var(--ac-border);
+  border-radius: var(--ac-radius-lg);
+  background-color: var(--ac-background);
+  color: var(--ac-foreground);
+  box-shadow: 0 20px 40px -12px rgb(0 0 0 / 0.25);
+  transform: translate(-50%, -50%);
+  transition: opacity var(--ac-transition-normal), transform var(--ac-transition-normal);
+}
+
+.popup[data-starting-style],
+.popup[data-ending-style] {
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0.96);
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ac-space-2);
+  text-align: center;
+}
+
+.footer {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--ac-space-2);
+}
+
+@media (min-width: 640px) {
+  .header {
+    text-align: left;
+  }
+
+  .footer {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}
+
+.title {
+  font-size: var(--ac-text-lg);
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.description {
+  color: var(--ac-muted-foreground);
+  font-size: var(--ac-text-sm);
+}
+
+.cancel {
+  margin-top: var(--ac-space-2);
+}
+
+@media (min-width: 640px) {
+  .cancel {
+    margin-top: 0;
+  }
+}