@oneplatformdev/ui 0.0.1-beta.99 → 0.1.0-8

package/src_old/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,257 @@
+import {
+  Children,
+  cloneElement,
+  FC,
+  Key,
+  PropsWithChildren,
+  ReactElement,
+  useId,
+} from 'react';
+import {
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogRoot,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from './AlertDialogRoot';
+import {
+  AlertDialogContentProps,
+  AlertDialogDescriptionProps,
+  AlertDialogFooterProps,
+  AlertDialogHeaderProps,
+  AlertDialogProps,
+  AlertDialogTitleProps,
+  AlertDialogTriggerProps,
+} from './AlertDialog.types';
+
+import { isValidReactElement } from '@oneplatformdev/utils';
+
+const RenderAlertDialogTrigger: FC<PropsWithChildren<AlertDialogProps>> = (
+  props
+) => {
+  const { slotProps = {}, children } = props;
+
+  const triggerProps = slotProps.trigger ?? {};
+
+  if (isValidReactElement(children, AlertDialogTrigger)) {
+    return cloneElement<AlertDialogTriggerProps>(
+      children as ReactElement<AlertDialogTriggerProps>,
+      {
+        ...((children as ReactElement<AlertDialogTriggerProps>).props || {}),
+        ...triggerProps,
+      }
+    );
+  }
+
+  return <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>;
+};
+
+const RenderAlertDialogHeader: FC<PropsWithChildren<AlertDialogProps>> = (props) => {
+  const {
+    title = '',
+    description = '',
+    slotProps = {},
+    children,
+  } = props;
+
+  const headerProps = slotProps.header ?? {};
+  const titleProps = slotProps.title ?? {};
+  const descriptionProps = slotProps.description ?? {};
+
+  if(children) {
+    return isValidReactElement(children, AlertDialogHeader)
+      ? cloneElement<AlertDialogHeaderProps>(
+        children as ReactElement<AlertDialogHeaderProps>,
+        { ...((children as ReactElement<AlertDialogHeaderProps>).props || {}), ...headerProps }
+      )
+      : <AlertDialogHeader {...headerProps}>{children}</AlertDialogHeader>
+  }
+
+  return (
+    <AlertDialogHeader>
+      {Boolean(title) && isValidReactElement(title, AlertDialogTitle)
+        ? cloneElement<AlertDialogTitleProps>(
+          title as ReactElement<AlertDialogTitleProps>,
+          { ...((title as ReactElement<AlertDialogTitleProps>).props || {}), ...titleProps }
+        )
+        : <AlertDialogTitle {...titleProps}>{title}</AlertDialogTitle>}
+
+      {Boolean(description) && isValidReactElement(description, AlertDialogDescription)
+        ? cloneElement<AlertDialogDescriptionProps>(
+          description as ReactElement<AlertDialogDescriptionProps>,
+          { ...((description as ReactElement<AlertDialogDescriptionProps>).props || {}), ...descriptionProps }
+        )
+        : <AlertDialogDescription {...descriptionProps}>{description}</AlertDialogDescription>
+      }
+    </AlertDialogHeader>
+  )
+}
+
+const RenderAlertDialogFooter: FC<PropsWithChildren<AlertDialogProps>> = (props) => {
+  const {
+    slotProps = {},
+    children,
+    onCancel,
+    onConfirm,
+    cancelLabel = 'Cancel',
+    actionLabel = 'Continue',
+    variant = 'confirm',
+  } = props;
+  const footerId = useId();
+
+  const footerProps = slotProps.footer ?? {};
+  const cancelButtonProps = slotProps.cancelButton ?? {};
+  const actionButtonProps = slotProps.actionButton ?? {};
+
+  if(children) {
+    return isValidReactElement(children, AlertDialogFooter)
+      ? cloneElement<AlertDialogFooterProps>(
+        children as ReactElement<AlertDialogFooterProps>,
+        { ...((children as ReactElement<AlertDialogFooterProps>).props || {}), ...footerProps }
+      )
+      : (
+        <AlertDialogFooter {...footerProps}>
+          {Children.map(children, (child, i) => {
+            if(!child || !isValidReactElement(child)) return;
+
+            const reactChild = child as ReactElement;
+            const clonedChild = cloneElement(reactChild, {...(reactChild.props || {}), key: (reactChild.key || `footer-${footerId}-action-${i}` as unknown as Key)});
+
+            if(isValidReactElement(child, AlertDialogAction) || isValidReactElement(child, AlertDialogCancel)) {
+              return clonedChild;
+            }
+
+            return (
+              <AlertDialogAction asChild>
+                {clonedChild}
+              </AlertDialogAction>
+            )
+          })}
+        </AlertDialogFooter>
+      )
+  }
+
+  return (
+    <AlertDialogFooter>
+      {variant !== 'alert' && (
+        <AlertDialogCancel
+          variant='ghost'
+          onClick={onCancel}
+          {...cancelButtonProps}
+        >
+          {cancelLabel}
+        </AlertDialogCancel>
+      )}
+      <AlertDialogAction
+        onClick={onConfirm}
+        {...actionButtonProps}
+        variant={
+          actionButtonProps.variant || variant === 'destructive' ? 'destructive' : 'default'
+        }
+      >
+        {actionLabel}
+      </AlertDialogAction>
+    </AlertDialogFooter>
+  )
+}
+
+/**
+ * Component for show Alert Dialog.
+ * @public
+ * @see [Documentation](#)
+ * @example
+ * > Import:
+ * ```tsx
+ *    import { AlertDialog } from '@oneplatformdev/ui/AlertDialog';
+ * ```
+ * > Simple example:
+ * ```tsx
+ *    <AlertDialog
+ *         trigger={'Trigger text'} // may be any ReactNode | Button | string
+ *         variant='alert' // 'confirm' (default) | 'alert' | 'destructive'
+ *         title='Dialog title'
+ *         description='Description text...'
+ *       />
+ * ```
+ * > Base example:
+ * ```tsx
+ *   <AlertDialog
+ *         trigger={<Button variant="outline">Simple Trigger</Button>}
+ *         title='Dialog title'
+ *         description='Description text...'
+ *         onCancel={(event) => console.log(event, 'Cancel')}
+ *         onConfirm={(event) => console.log(event, 'Confirm')}
+ *       />
+ * ```
+ * > Trigger example: Button with icon children
+ * ```tsx
+ *      <AlertDialog
+ *         trigger={<Button variant="outline" size="icon"><PencilLine /></Button>}
+ *         title="Dialog title with icon trigger"
+ *         description="Description text..."
+ *         onCancel={(event) => console.log(event, 'Cancel')}
+ *         onConfirm={(event) => console.log(event, 'Confirm')}
+ *       />
+ * ```
+ *
+ * > Full content example:
+ * ```tsx
+ *    <AlertDialog trigger={<Button variant="outline">Full Content Trigger</Button>}>
+ *      Full Content...
+ *     </AlertDialog>
+ * ```
+ *
+ * > Full control example:
+ * ```tsx
+ *       <AlertDialog
+ *         open={true}
+ *         onOpenChange={(nextState) => console.log(nextState)}
+ *         trigger={<Button variant="outline">Control Trigger</Button>}
+ *         header={<div>Custom Header</div>}
+ *         footer={[
+ *           <Button key='cancel' variant="outline" onClick={() => {}}>On Action</Button>,
+ *           <Button key='action' variant="outline" onClick={() => {}}>On Action</Button>,
+ *         ]}
+ *       />
+ * ```
+ */
+export const AlertDialog: FC<PropsWithChildren<AlertDialogProps>> = (props) => {
+  const {
+    trigger,
+    header,
+    footer,
+    slotProps = {},
+    children,
+    ...rest
+  } = props;
+
+  const contentProps = slotProps.content ?? {};
+
+  return (
+    <AlertDialogRoot {...rest}>
+      <RenderAlertDialogTrigger {...props}>{trigger}</RenderAlertDialogTrigger>
+      {children
+        ? isValidReactElement(children, AlertDialogContent)
+          ? cloneElement<AlertDialogContentProps>(
+            children as ReactElement<AlertDialogContentProps>,
+            {
+              ...((children as ReactElement<AlertDialogContentProps>).props || {}),
+              ...contentProps
+            })
+          : <AlertDialogContent {...contentProps}>{children}</AlertDialogContent>
+        : (
+          <AlertDialogContent {...contentProps}>
+            <RenderAlertDialogHeader {...props}>{header}</RenderAlertDialogHeader>
+            <RenderAlertDialogFooter {...props}>{footer}</RenderAlertDialogFooter>
+          </AlertDialogContent>
+        )
+      }
+    </AlertDialogRoot>
+  )
+}
+
+export default AlertDialog;

package/src_old/AlertDialog/AlertDialog.types.tsx

@@ -0,0 +1,66 @@
+import { ComponentPropsWithoutRef, ReactNode, MouseEvent } from 'react';
+import {
+  AlertDialogTrigger,
+  AlertDialogTitle,
+  AlertDialogRoot,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+  AlertDialogContent,
+} from './AlertDialogRoot';
+
+export type AlertDialogRootProps = ComponentPropsWithoutRef<typeof AlertDialogRoot>
+export type AlertDialogTriggerProps = ComponentPropsWithoutRef<typeof AlertDialogTrigger>
+export type AlertDialogContentProps = ComponentPropsWithoutRef<typeof AlertDialogContent>
+
+export type AlertDialogHeaderProps = ComponentPropsWithoutRef<typeof AlertDialogHeader>
+export type AlertDialogTitleProps = ComponentPropsWithoutRef<typeof AlertDialogTitle>
+export type AlertDialogDescriptionProps = ComponentPropsWithoutRef<typeof AlertDialogDescription>
+
+export type AlertDialogFooterProps = ComponentPropsWithoutRef<typeof AlertDialogFooter>
+export type AlertDialogCancelProps = ComponentPropsWithoutRef<typeof AlertDialogCancel>
+export type AlertDialogActionProps = ComponentPropsWithoutRef<typeof AlertDialogAction>
+
+export interface AlertDialogProps extends Partial<AlertDialogRootProps> {
+  /** Alert Dialog Type. */
+  variant?: 'confirm' | 'alert' | 'destructive';
+  /** CancelButton label. */
+  cancelLabel?: ReactNode;
+  /** ActionButton label. */
+  actionLabel?: ReactNode;
+  /** CancelButton onClick event. */
+  onCancel?: (event: MouseEvent<HTMLButtonElement>) => void;
+  /** ActionButton onClick event. */
+  onConfirm?: (event: MouseEvent<HTMLButtonElement>) => void;
+  /** The trigger to open alert dialog. */
+  trigger?: ReactNode;
+  /** Alert Dialog Header. */
+  header?: ReactNode;
+  /** Alert Dialog Header Title. */
+  title?: ReactNode;
+  /** Alert Dialog Header Description. */
+  description?: ReactNode;
+  /** Alert Dialog Footer. */
+  footer?: ReactNode;
+  /** Alert Dialog Slots props. */
+  slotProps?: {
+    /** Alert Dialog Slot props for AlertDialogTrigger. */
+    trigger?: AlertDialogTriggerProps;
+    /** Alert Dialog Slot props for AlertDialogContentProps. */
+    content?: AlertDialogContentProps;
+    /** Alert Dialog Slot props for AlertDialogTrigger. */
+    header?: AlertDialogHeaderProps;
+    /** Alert Dialog Slot props for AlertDialogFooter. */
+    footer?: AlertDialogFooterProps;
+    /** Alert Dialog Slot props for AlertDialogTitle. */
+    title?: AlertDialogTitleProps;
+    /** Alert Dialog Slot props for AlertDialogDescriptionProps. */
+    description?: AlertDialogDescriptionProps;
+    /** Alert Dialog Slot props for AlertDialogCancelProps. */
+    cancelButton?: AlertDialogCancelProps;
+    /** Alert Dialog Slot props for AlertDialogActionProps. */
+    actionButton?: AlertDialogActionProps;
+  };
+}

package/src_old/AlertDialog/AlertDialogRoot.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+
+import { cn } from '@oneplatformdev/utils';
+import { ButtonProps, buttonVariants } from '../Button';
+
+const AlertDialogRoot = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "w-full min-w-0 flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & ButtonProps
+>(({ className, variant, size, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants({variant, size}), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> & ButtonProps
+>(({ className, variant = 'outline-solid', size, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant, size }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialogRoot,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/src_old/AlertDialog/index.ts

@@ -0,0 +1,15 @@
+export {
+  AlertDialogRoot,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}  from './AlertDialogRoot';
+export * from './AlertDialog';
+export type * from './AlertDialog.types';

package/src_old/AreaChart/AreaChart.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { FC } from "react";
+import { Area, AreaChart as RechartAreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "../Chart";
+
+import { AreaChartProps } from './AreaChart.types';
+
+export const AreaChart: FC<AreaChartProps> = ({ data, config }) => {
+    return (
+        <ChartContainer config={config} className="h-[350px] w-full">
+            <RechartAreaChart data={data} width={808} height={350} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
+                <defs>
+                    {Object.entries(config).map(([key, { color }]) => (
+                        <linearGradient id={`${key}Gradient`} x1="0" y1="0" x2="0" y2="1" key={key}>
+                            <stop offset="5%" stopColor={color} stopOpacity={0.8} />
+                            <stop offset="95%" stopColor={color} stopOpacity={0.1} />
+                        </linearGradient>
+                    ))}
+                </defs>
+                <CartesianGrid strokeDasharray="none" stroke="gray" strokeWidth={0.5} vertical={true} horizontal={true} />
+                <XAxis dataKey="month" axisLine={false} tickLine={false} tick={{ fontSize: 12 }} />
+                <YAxis axisLine={false} tickLine={false} tick={{ fontSize: 12 }} />
+                <ChartTooltip content={<ChartTooltipContent />} />
+                {Object.entries(config).map(([key, { color }]) => (
+                    <Area
+                        key={key}
+                        type="monotone"
+                        dataKey={key}
+                        stroke={color}
+                        fill={`url(#${key}Gradient)`}
+                        strokeWidth={3}
+                    />
+                ))}
+            </RechartAreaChart>
+        </ChartContainer>
+    );
+};

package/src_old/AreaChart/AreaChart.types.ts

@@ -0,0 +1,18 @@
+export interface AreaChartData {
+  month: string;
+  [key: string]: number | string;
+};
+
+export interface AreaChartConfigItem {
+  label: string;
+  color: string;
+};
+
+export interface AreaChartConfig {
+  [key: string]: AreaChartConfigItem;
+};
+
+export interface AreaChartProps {
+  data: AreaChartData[];
+  config: AreaChartConfig;
+};

package/src_old/AreaChart/index.tsx

@@ -0,0 +1,2 @@
+export * from './AreaChart'
+export type * from './AreaChart.types'

package/src_old/Aside/Aside.tsx

@@ -0,0 +1,26 @@
+import { SidebarInset, SidebarProvider } from "../Sidebar";
+import { AsideProps } from "./Aside.types";
+
+export const Aside: React.FC<React.PropsWithChildren<AsideProps>> = (props) => {
+  const {
+    children,
+    header,
+    sidebar
+  } = props;
+  return (
+    <SidebarProvider>
+      {Boolean(sidebar) && sidebar}
+      <SidebarInset>
+        {Boolean(header) && header}
+        <section className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div>
+            test build
+          </div>
+          {children}
+        </section>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
+
+export default Aside;

package/src_old/Aside/Aside.types.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { SidebarHeader, SidebarContent, SidebarFooter, Sidebar } from "../Sidebar";
+
+export interface AsideProps {
+  header?: React.ReactNode;
+  sidebar?: React.ReactElement<typeof Sidebar>;
+}
+
+export interface AsideSidebarProps
+  extends Partial<Omit<React.ComponentPropsWithRef<typeof Sidebar>, 'slot' | 'content'>> {
+  header?: React.ReactNode | React.ReactElement<typeof SidebarHeader>;
+  content?: React.ReactNode | React.ReactElement<typeof SidebarContent>;
+  footer?: React.ReactNode | React.ReactElement<typeof SidebarFooter>;
+  slot?: {
+    sidebar?: React.ComponentProps<typeof Sidebar>["slot"];
+    header?: React.ComponentPropsWithoutRef<typeof SidebarHeader>;
+    content?: React.ComponentPropsWithoutRef<typeof SidebarContent>;
+    footer?: React.ComponentPropsWithoutRef<typeof SidebarFooter>;
+  },
+  hiddenRail?: boolean;
+}

package/src_old/Aside/AsideSidebar.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarRail
+} from "../Sidebar";
+import { AsideSidebarProps } from "./Aside.types";
+
+function isReactElement<T>(
+  element: React.ReactNode,
+  componentType: React.JSXElementConstructor<T>
+): element is React.ReactElement<T> {
+  return React.isValidElement(element) && element.type === componentType;
+}
+
+export const AsideSidebar: React.FC<React.PropsWithChildren<AsideSidebarProps>> = (props) => {
+  const {
+    children,
+    header,
+    content,
+    footer,
+    slot,
+    hiddenRail,
+    ...rest
+  } = props;
+  return (
+    <Sidebar collapsible="icon" {...rest}>
+      {Boolean(children)
+        ? children
+        : (
+          <>
+            {!children && Boolean(header) && isReactElement(header, SidebarHeader)
+              ? React.cloneElement(header, {
+                ...header.props,
+                ...(slot?.header || {})
+              })
+              : (
+                <SidebarHeader {...(slot?.header || {})}>
+                  <div className="grid gap-2 text-center">
+                    {header}
+                  </div>
+                </SidebarHeader>
+              )
+            }
+
+            {!children && Boolean(content) && isReactElement(content, SidebarContent)
+              ? React.cloneElement(content, {
+                ...content.props,
+                ...(slot?.content || {})
+              })
+              : (
+                <SidebarContent {...(slot?.content || {})}>
+                  {content}
+                </SidebarContent>
+              )
+            }
+
+            {!children && Boolean(footer) && isReactElement(footer, SidebarFooter)
+              ? React.cloneElement(footer, {
+                ...footer.props,
+                ...(slot?.footer || {})
+              })
+              : (
+                <SidebarFooter {...(slot?.footer || {})}>
+                  {footer}
+                </SidebarFooter>
+              )
+            }
+          </>
+        )
+      }
+      {!hiddenRail && <SidebarRail />}
+    </Sidebar>
+  )
+}

package/src_old/AspectRatio/AspectRatio.tsx

@@ -0,0 +1,5 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+export const AspectRatio = AspectRatioPrimitive.Root

package/src_old/AspectRatio/index.ts

@@ -0,0 +1 @@
+export {AspectRatio as default, AspectRatio} from './AspectRatio';