@overmap-ai/blocks 1.0.39 → 1.0.40-alpha.0

package/dist/OneTimePasswordField/HiddenInput.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithRef } from 'react';
+import * as RadixOneTimePasswordField from "@radix-ui/react-one-time-password-field";
+export interface OneTimePasswordFieldHiddenInputProps extends ComponentPropsWithRef<typeof RadixOneTimePasswordField.HiddenInput> {
+}
+export declare const OneTimePasswordFieldHiddenInput: import('react').NamedExoticComponent<OneTimePasswordFieldHiddenInputProps>;

package/dist/OneTimePasswordField/Input.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithRef } from 'react';
+import * as RadixOneTimePasswordField from "@radix-ui/react-one-time-password-field";
+export interface OneTimePasswordFieldInputProps extends ComponentPropsWithRef<typeof RadixOneTimePasswordField.Input> {
+}
+export declare const OneTimePasswordFieldInput: import('react').NamedExoticComponent<OneTimePasswordFieldInputProps>;

package/dist/OneTimePasswordField/Root.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithRef } from 'react';
+import { OneTimePasswordFieldVariantProps } from './typings';
+import * as RadixOneTimePasswordField from "@radix-ui/react-one-time-password-field";
+export interface OneTimePasswordFieldRootProps extends ComponentPropsWithRef<typeof RadixOneTimePasswordField.Root>, OneTimePasswordFieldVariantProps {
+}
+export declare const OneTimePasswordFieldRoot: import('react').NamedExoticComponent<OneTimePasswordFieldRootProps>;

package/dist/OneTimePasswordField/context.d.ts

@@ -0,0 +1,9 @@
+import { ComponentRadius } from '../Provider';
+import { OneTimePasswordFieldSize, OneTimePasswordFieldVariant } from './typings';
+export interface IOneTimePasswordFieldContext {
+    variant: OneTimePasswordFieldVariant;
+    size: OneTimePasswordFieldSize;
+    radius: ComponentRadius;
+    accentColor: string;
+}
+export declare const OneTimePasswordFieldContext: import('react').Context<IOneTimePasswordFieldContext>;

package/dist/OneTimePasswordField/cva.d.ts

@@ -0,0 +1,4 @@
+export declare const onetimePasswordFieldInput: (props?: ({
+    variant?: "soft" | "outline" | "surface" | "ghost" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/OneTimePasswordField/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export * from './HiddenInput';
+export * from './Input';
+export * from './Root';
+export * from './typings';
+export declare const OneTimePasswordField: {
+    HiddenInput: import('react').NamedExoticComponent<import('./HiddenInput').OneTimePasswordFieldHiddenInputProps>;
+    Input: import('react').NamedExoticComponent<import('./Input').OneTimePasswordFieldInputProps>;
+    Root: import('react').NamedExoticComponent<import('./Root').OneTimePasswordFieldRootProps>;
+};

package/dist/OneTimePasswordField/typings.d.ts

@@ -0,0 +1,9 @@
+import { ComponentRadius } from '../Provider';
+import { AccentColorProps } from '../typings';
+export type OneTimePasswordFieldSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type OneTimePasswordFieldVariant = "surface" | "soft" | "outline" | "ghost";
+export interface OneTimePasswordFieldVariantProps extends AccentColorProps {
+    variant?: OneTimePasswordFieldVariant;
+    size?: OneTimePasswordFieldSize;
+    radius?: ComponentRadius;
+}

package/dist/RiIcon/LuIcon.d.ts

@@ -0,0 +1,7 @@
+import { DynamicIcon } from 'lucide-react/dynamic';
+import { ComponentProps, ComponentPropsWithRef } from 'react';
+interface LuIconProps extends Omit<ComponentPropsWithRef<typeof DynamicIcon>, "name"> {
+    icon: ComponentProps<typeof DynamicIcon>["name"];
+}
+export declare const LuIcon: import('react').NamedExoticComponent<LuIconProps>;
+export {};

package/dist/RiIcon/index.d.ts

@@ -1 +1 @@
-export * from './RiIcon';
+export * from './LuIcon';

package/dist/blocks.js

@@ -11,14 +11,14 @@ import { CommandItem, CommandRoot, CommandEmpty, CommandGroup, CommandInput, use
 import * as RadixDialog from "@radix-ui/react-dialog";
 import { DialogPortal, DialogContent as DialogContent$1, DialogTitle, DialogDescription, DialogOverlay as DialogOverlay$1, DialogTrigger } from "@radix-ui/react-dialog";
 import { DayPicker as DayPicker$1 } from "react-day-picker";
-import * as RiIcons from "react-icons/ri";
-import { RiArrowRightSLine, RiArrowLeftSLine, RiArrowDownSLine, RiArrowUpSLine, RiQuestionMark } from "react-icons/ri";
+import { DynamicIcon } from "lucide-react/dynamic";
 import * as RadixHoverCard from "@radix-ui/react-hover-card";
 import { CSSTransition } from "react-transition-group";
 import ReactDOM from "react-dom";
 import { Slot } from "@radix-ui/react-slot";
 import { useFloatingNodeId, useFloating, offset, size, flip, shift, hide, autoUpdate, useRole, useDismiss, useClick, useListNavigation, useInteractions, FloatingTree, FloatingNode, FloatingPortal, FloatingOverlay, FloatingFocusManager, FloatingList, useHover, safePolygon, useListItem, useMergeRefs } from "@floating-ui/react";
 import * as RadixSeparator from "@radix-ui/react-separator";
+import * as RadixOneTimePasswordField from "@radix-ui/react-one-time-password-field";
 import { useErrorBoundary, ErrorBoundary } from "react-error-boundary";
 import * as RadixPopover from "@radix-ui/react-popover";
 import * as RadixProgress from "@radix-ui/react-progress";
@@ -29,7 +29,6 @@ import * as RadixSlider from "@radix-ui/react-slider";
 import * as RadixSwitch from "@radix-ui/react-switch";
 import * as RadixToast from "@radix-ui/react-toast";
 import { ToastProvider as ToastProvider$1, ToastViewport } from "@radix-ui/react-toast";
-import { HiX } from "react-icons/hi";
 import * as Toggle from "@radix-ui/react-toggle";
 import * as RadixTooltip from "@radix-ui/react-tooltip";
 const floating = cva(
@@ -1817,17 +1816,22 @@ const CommandMenu = {
   Page: CommandMenuPage,
   PageTriggerItem: CommandMenuPageTriggerItem
 };
+const LuIcon = memo((props) => {
+  const { ref, icon, className, size: size2 = "1em", ...rest } = props;
+  return /* @__PURE__ */ jsx(DynamicIcon, { ref, className: cx("shrink-0", className), size: size2, name: icon, ...rest });
+});
+LuIcon.displayName = "RiIcon";
 const Chevron = (props) => {
   const { orientation, ...rest } = props;
   switch (orientation) {
     case "up":
-      return /* @__PURE__ */ jsx(RiArrowUpSLine, { ...rest });
+      return /* @__PURE__ */ jsx(LuIcon, { icon: "chevron-up", ...rest });
     case "down":
-      return /* @__PURE__ */ jsx(RiArrowDownSLine, { ...rest });
+      return /* @__PURE__ */ jsx(LuIcon, { icon: "chevron-down", ...rest });
     case "left":
-      return /* @__PURE__ */ jsx(RiArrowLeftSLine, { ...rest });
+      return /* @__PURE__ */ jsx(LuIcon, { icon: "chevron-left", ...rest });
     default:
-      return /* @__PURE__ */ jsx(RiArrowRightSLine, { ...rest });
+      return /* @__PURE__ */ jsx(LuIcon, { icon: "chevron-right", ...rest });
   }
 };
 const rootCva = cva(["relative", "size-max"], {
@@ -2881,6 +2885,7 @@ const CheckedIndicator = (props) => {
     {
       ref,
       className: cx(
+        "flex size-max items-center",
         {
           invisible: checked === false
         },
@@ -2901,16 +2906,17 @@ const menuItem = cva(
     "rounded",
     "outline-none",
     "data-[disabled=true]:text-(--base-a8)",
-    "shrink-0"
+    "shrink-0",
+    "py-1"
   ],
   {
     variants: {
       size: {
-        xs: ["h-6", "gap-1.5", "px-3"],
-        sm: ["h-7", "gap-1.75", "px-3.5"],
-        md: ["h-8", "gap-2", "px-4"],
-        lg: ["h-9", "gap-2.25", "px-4.5"],
-        xl: ["h-10", "gap-2.5", "px-5"]
+        xs: ["gap-1.5", "px-3"],
+        sm: ["gap-1.75", "px-3.5"],
+        md: ["gap-2", "px-4"],
+        lg: ["gap-2.25", "px-4.5"],
+        xl: ["gap-2.5", "px-5"]
       },
       variant: {
         solid: [
@@ -2932,14 +2938,14 @@ const menuItem = cva(
     }
   }
 );
-const menuLabelCva = cva(["text-(--base-a10)", "flex", "items-center", "select-none"], {
+const menuLabelCva = cva(["text-(--base-a10)", "flex", "items-center", "select-none", "py-1"], {
   variants: {
     size: {
-      xs: ["h-6", "gap-1.5", "px-3", "text-xs"],
-      sm: ["h-7", "gap-1.75", "px-3.5", "text-xs"],
-      md: ["h-8", "gap-2", "px-4", "text-sm"],
-      lg: ["h-9", "gap-2.25", "px-4.5", "text-base"],
-      xl: ["h-10", "gap-2.5", "px-5", "text-lg"]
+      xs: ["gap-1.5", "px-3", "text-xs"],
+      sm: ["gap-1.75", "px-3.5", "text-xs"],
+      md: ["gap-2", "px-4", "text-sm"],
+      lg: ["gap-2.25", "px-4.5", "text-base"],
+      xl: ["gap-2.5", "px-5", "text-lg"]
     }
   },
   defaultVariants: {
@@ -3552,6 +3558,7 @@ const MenuSelectedIndicator = memo((props) => {
     {
       ref,
       className: cx(
+        "flex size-max items-center",
         {
           invisible: !isSelected
         },
@@ -3848,27 +3855,105 @@ const Menu = {
   Separator: MenuSeparator,
   Scroll: MenuScroll
 };
-const RiIcon = memo((props) => {
-  const { ref, icon, size: size2, title, color, className, ...rest } = props;
-  const Icon = RiIcons[icon];
-  if (!Icon) console.error(`Icon ${icon} not found`);
-  return Icon ? (
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    /* @__PURE__ */ jsx(Icon, { className: cx("shrink-0", className), ref, title, size: size2, color, ...rest })
-  ) : /* @__PURE__ */ jsx(
-    RiQuestionMark,
+const OneTimePasswordFieldHiddenInput = memo((props) => {
+  return /* @__PURE__ */ jsx(RadixOneTimePasswordField.HiddenInput, { ...props });
+});
+OneTimePasswordFieldHiddenInput.displayName = "OneTimePasswordFieldHiddenInput";
+const OneTimePasswordFieldContext = createContext({});
+const onetimePasswordFieldInput = cva(
+  [
+    "flex",
+    "items-center",
+    "justify-center",
+    "text-center",
+    "focus-visible:outline-2",
+    "focus-visible:outline-(--accent-8)",
+    "focus-visible:-outline-offset-1",
+    "disabled:opacity-50",
+    "disabled:pointer-events-none",
+    "transition-[background,color,box-shadow]"
+  ],
+  {
+    variants: {
+      variant: {
+        surface: [
+          "inset-ring",
+          "inset-ring-(--accent-a7)",
+          "bg-(--accent-surface)",
+          "text-(--accent-a12)",
+          "placeholder-(--accent-12)",
+          "placeholder:opacity-60",
+          "selection:bg-(--accent-a5)"
+        ],
+        soft: [
+          "bg-(--accent-a3)",
+          "text-(--accent-12)",
+          "placeholder-(--accent-12)",
+          "placeholder:opacity-60",
+          "selection:bg-(--accent-a5)"
+        ],
+        outline: [
+          "inset-ring",
+          "inset-ring-(--base-a7)",
+          "bg-transparent",
+          "text-(--base-12)",
+          "placeholder-(--base-a9)",
+          "selection:bg-(--accent-a5)"
+        ],
+        ghost: ["bg-transparent", "text-(--base-12)", 'placeholder-(--base-a9)", "selection:bg-(--accent-a5)']
+      },
+      size: {
+        xs: ["size-6 w-6", "text-xs"],
+        sm: ["size-7 w-7", "text-sm"],
+        md: ["size-8 w-8", "text-base"],
+        lg: ["size-9 w-9", "text-lg"],
+        xl: ["size-10 w-10", "text-xl"]
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "surface"
+    }
+  }
+);
+const OneTimePasswordFieldInput = memo((props) => {
+  const { ref, className, ...rest } = props;
+  const { variant, size: size2, radius, accentColor } = use(OneTimePasswordFieldContext);
+  return /* @__PURE__ */ jsx(
+    RadixOneTimePasswordField.Input,
     {
-      className: cx("shrink-0", className),
       ref,
-      title,
-      size: size2,
-      color,
+      className: cx(
+        onetimePasswordFieldInput({ variant, size: size2 }),
+        radiusCva({ radius, maxLarge: true }),
+        className
+      ),
+      "data-accent-color": accentColor,
       ...rest
     }
   );
 });
-RiIcon.displayName = "RiIcon";
+OneTimePasswordFieldInput.displayName = "OneTimePasswordFieldInput";
+const OneTimePasswordFieldRoot = memo((props) => {
+  const providerContext = useProvider();
+  const {
+    ref,
+    children,
+    variant = "surface",
+    size: size2 = "md",
+    radius = providerContext.radius,
+    accentColor = providerContext.accentColor,
+    ...rest
+  } = props;
+  const contextValue = useMemo(() => ({ variant, size: size2, radius, accentColor }), [accentColor, radius, size2, variant]);
+  return /* @__PURE__ */ jsx(RadixOneTimePasswordField.Root, { ref, "data-accent-color": accentColor, ...rest, children: /* @__PURE__ */ jsx(OneTimePasswordFieldContext, { value: contextValue, children }) });
+});
+OneTimePasswordFieldRoot.displayName = "OneTimePasswordFieldRoot";
+const OneTimePasswordField = {
+  HiddenInput: OneTimePasswordFieldHiddenInput,
+  Input: OneTimePasswordFieldInput,
+  Root: OneTimePasswordFieldRoot
+};
 const centerStyles = { placeSelf: "center" };
 const ErrorFallback = memo((props) => {
   const { absoluteCentering, message = "Something went wrong", onRetry } = props;
@@ -3881,9 +3966,9 @@ const ErrorFallback = memo((props) => {
   }, [onRetry, resetBoundary]);
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full gap-2", style: outerFlexStyles, children: [
     /* @__PURE__ */ jsx("div", { style: { flexGrow: 1 } }),
-    /* @__PURE__ */ jsx(RiIcon, { icon: "RiAlertLine", size: height, style: centerStyles }),
+    /* @__PURE__ */ jsx(LuIcon, { icon: "alert-triangle", size: height, style: centerStyles }),
     /* @__PURE__ */ jsx("span", { style: { lineHeight: height, ...centerStyles }, children: message }),
-    /* @__PURE__ */ jsx(IconButton, { "aria-label": "Try again", variant: "soft", onClick: handleRetry, style: centerStyles, children: /* @__PURE__ */ jsx(RiIcon, { icon: "RiLoopLeftLine", size: height }) }),
+    /* @__PURE__ */ jsx(IconButton, { "aria-label": "Try again", variant: "soft", onClick: handleRetry, style: centerStyles, children: /* @__PURE__ */ jsx(LuIcon, { icon: "rotate-ccw", size: height }) }),
     /* @__PURE__ */ jsx("div", { style: { flexGrow: 1 } })
   ] });
 });
@@ -5500,7 +5585,7 @@ const _Toast = function Toast2(props) {
             action && /* @__PURE__ */ jsx(RadixToast.Action, { className: "w-max", altText: action.altText, asChild: true, children: action.content })
           ] })
         ] }),
-        /* @__PURE__ */ jsx(RadixToast.Close, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { size: size2, "aria-label": "Close", variant: "ghost", accentColor, children: /* @__PURE__ */ jsx(HiX, {}) }) })
+        /* @__PURE__ */ jsx(RadixToast.Close, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { size: size2, "aria-label": "Close", variant: "ghost", accentColor, children: /* @__PURE__ */ jsx(LuIcon, { icon: "x" }) }) })
       ]
     }
   );
@@ -6056,6 +6141,7 @@ export {
   LayoutSlideOutOverlay,
   LayoutSlideOutTrigger,
   Link,
+  LuIcon,
   Menu,
   MenuCheckboxItem,
   MenuCheckboxItemIndicator,
@@ -6084,6 +6170,10 @@ export {
   MenuSubContent,
   MenuSubTrigger,
   MenuVirtualTrigger,
+  OneTimePasswordField,
+  OneTimePasswordFieldHiddenInput,
+  OneTimePasswordFieldInput,
+  OneTimePasswordFieldRoot,
   OvermapErrorBoundary,
   Popover,
   PopoverArrow,
@@ -6097,7 +6187,6 @@ export {
   RadioGroupIndicator,
   RadioGroupItem,
   RadioGroupRoot,
-  RiIcon,
   SegmentedControl,
   SegmentedControlItem,
   SegmentedControlRoot,