@firecms/ui 3.0.0-canary.55 → 3.0.0-canary.57

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/ui",
     "type": "module",
-    "version": "3.0.0-canary.55",
+    "version": "3.0.0-canary.57",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -53,6 +53,7 @@
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-label": "^2.0.2",
+        "@radix-ui/react-menubar": "^1.0.4",
         "@radix-ui/react-popover": "^1.0.7",
         "@radix-ui/react-portal": "^1.0.4",
         "@radix-ui/react-radio-group": "^1.1.3",
@@ -116,7 +117,7 @@
         "src",
         "tailwind.config.js"
     ],
-    "gitHead": "504f907bf8ecf1b7ed81fa1f84d3461c06efb39a",
+    "gitHead": "54c0d79d2648c937d055bacab2d7d92fbd294c7b",
     "publishConfig": {
         "access": "public"
     }

package/src/components/Badge.tsx

@@ -27,7 +27,7 @@ export const Badge: React.FC<BadgeProps> = ({
                                                 children
                                             }) => {
     return (
-        <div className="relative inline-block">
+        <div className="relative inline-block w-fit">
             {children}
             <span
                 className={`absolute top-0.5 right-0.5 transform translate-x-1/2 -translate-y-1/2 rounded-full

package/src/components/Menubar.tsx

@@ -0,0 +1,284 @@
+import * as MenubarPrimitive from "@radix-ui/react-Menubar";
+import { cn } from "../util";
+import { CheckIcon, ChevronRightIcon } from "../icons";
+
+export function Menubar({
+                            children,
+                            className
+                        }: { children: React.ReactNode, className?: string }) {
+    return (
+        <MenubarPrimitive.Root className={cn("flex bg-white dark:bg-gray-950 p-[3px] rounded-sm shadow-sm", className)}>
+            {children}
+        </MenubarPrimitive.Root>
+    )
+}
+
+export function MenubarMenu({
+                                children,
+                            }: { children: React.ReactNode }) {
+    return (
+        <MenubarPrimitive.Menu>
+            {children}
+        </MenubarPrimitive.Menu>
+    )
+}
+
+export function MenubarTrigger({
+                                   children,
+                                   className
+                               }: { children: React.ReactNode, className?: string }) {
+    return (
+        <MenubarPrimitive.Trigger
+            className={cn("py-2 px-3 outline-none select-none font-medium leading-none rounded text-text-primary dark:text-text-primary-dark text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-gray-100 data-[highlighted]:dark:bg-gray-800 data-[state=open]:bg-gray-100 data-[state=open]:dark:bg-gray-800",
+                className)}>
+            {children}
+        </MenubarPrimitive.Trigger>
+    )
+}
+
+export function MenubarPortal({
+                                  children,
+                              }: { children: React.ReactNode }) {
+    return (
+        <MenubarPrimitive.Portal>
+            {children}
+        </MenubarPrimitive.Portal>
+    )
+}
+
+export function MenubarContent({
+                                   children,
+                                   className,
+                                   align,
+                                   sideOffset,
+                                   alignOffset,
+                                   ...rest
+                               }: {
+    children: React.ReactNode,
+    className?: string,
+    align?: "start" | "center" | "end",
+    sideOffset?: number,
+    alignOffset?: number
+}) {
+    return (
+        <MenubarPrimitive.Content
+            className={cn("min-w-[220px] bg-white dark:bg-gray-950 rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]", className)}
+            align={align ?? "start"}
+            sideOffset={sideOffset ?? 5}
+            alignOffset={alignOffset ?? -3}
+            {...rest}
+        >
+            {children}
+        </MenubarPrimitive.Content>
+    )
+}
+
+export function MenubarItem({
+                                children,
+                                leftPadding,
+                                className,
+                                disabled,
+                                ...rest
+                            }: {
+    children: React.ReactNode,
+    leftPadding?: boolean,
+    className?: string,
+    disabled?: boolean
+}) {
+    return (
+        <MenubarPrimitive.Item
+            className={cn("group text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none outline-none data-[state=open]:bg-gray-100 data-[state=open]:dark:bg-gray-800 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-gray-100 data-[highlighted]:dark:bg-gray-800  data-[disabled]:text-text-secondary data-[disabled]:dark:text-text-secondary-dark data-[disabled]:pointer-events-none",
+                leftPadding ? "pl-5" : "",
+                className)}
+            disabled={disabled}
+            {...rest}
+        >
+            {children}
+        </MenubarPrimitive.Item>
+    )
+}
+
+export function MenubarSeparator({
+                                     children,
+                                     className,
+                                     ...rest
+                                 }: {
+    children?: React.ReactNode,
+    className?: string,
+}) {
+    return (
+        <MenubarPrimitive.Separator
+            className={cn("h-[1px] bg-gray-100 dark:bg-gray-800 m-[5px]", className)}
+            {...rest}
+        >
+            {children}
+        </MenubarPrimitive.Separator>
+    )
+}
+
+export function MenubarSub({
+                               children,
+                               ...rest
+                           }: {
+    children?: React.ReactNode,
+}) {
+    return (
+        <MenubarPrimitive.Sub
+            {...rest}
+        >
+            {children}
+        </MenubarPrimitive.Sub>
+    )
+}
+
+export function MenubarSubTrigger({
+                                      children,
+                                      className,
+                                      ...rest
+                                  }: {
+    children?: React.ReactNode,
+    className?: string,
+}) {
+    return (
+        <MenubarPrimitive.SubTrigger
+            className={cn("group text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none outline-none data-[state=open]:bg-gray-100 data-[state=open]:dark:bg-gray-800 data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-gray-100 data-[highlighted]:dark:bg-gray-800  data-[disabled]:text-text-secondary data-[disabled]:dark:text-text-secondary-dark data-[disabled]:pointer-events-none",
+                className)}
+            {...rest}
+        >
+            {children}
+        </MenubarPrimitive.SubTrigger>
+    )
+}
+
+export function MenubarSubContent({
+                                      children,
+                                      alignOffset,
+                                      className,
+                                      ...rest
+                                  }: {
+    children?: React.ReactNode,
+    alignOffset?: number,
+    className?: string,
+}) {
+    return (
+        <MenubarPrimitive.SubContent
+            alignOffset={alignOffset ?? -5}
+            className={cn("min-w-[220px] bg-white dark:bg-gray-950 rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]",
+                className)}
+            {...rest}
+        >
+            {children}
+        </MenubarPrimitive.SubContent>
+    )
+}
+
+export function MenubarCheckboxItem({
+                                        children,
+                                        checked,
+                                        onCheckedChange,
+                                        className,
+                                        ...rest
+                                    }: {
+    children?: React.ReactNode,
+    checked?: boolean,
+    onCheckedChange?: () => void,
+    className?: string,
+}) {
+    return (
+        <MenubarPrimitive.CheckboxItem
+            className={cn("text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none pl-5 outline-none data-[highlighted]:bg-gray-100 data-[highlighted]:dark:bg-gray-800 data-[disabled]:text-text-secondary data-[disabled]:dark:text-text-secondary-dark data-[disabled]:pointer-events-none",
+                className)}
+            checked={checked}
+            onCheckedChange={onCheckedChange}
+            {...rest}
+        >
+            {children}
+        </MenubarPrimitive.CheckboxItem>
+    )
+}
+
+export function MenubarItemIndicator({
+                                         children,
+                                         className,
+                                         ...rest
+                                     }: {
+    children?: React.ReactNode,
+    className?: string,
+}) {
+    return (
+        <MenubarPrimitive.ItemIndicator
+            className={cn("absolute left-0 w-4 inline-flex items-center justify-center", className)}
+            {...rest}>
+            {children ?? <CheckIcon size={"smallest"}/>}
+        </MenubarPrimitive.ItemIndicator>
+    )
+}
+
+export function MenubarRadioGroup({
+                                      children,
+                                      className,
+                                      value,
+                                      onValueChange,
+                                      ...rest
+                                  }: {
+    children?: React.ReactNode,
+    value?: string,
+    onValueChange?: (value: string) => void,
+    className?: string,
+}) {
+    return (
+        <MenubarPrimitive.RadioGroup
+            className={cn(className)}
+            value={value}
+            onValueChange={onValueChange}
+            {...rest}>
+            {children ?? <CheckIcon size={"small"}/>}
+        </MenubarPrimitive.RadioGroup>
+    )
+}
+
+export function MenubarRadioItem({
+                                     children,
+                                     className,
+                                     value,
+                                     ...rest
+                                 }: {
+    children?: React.ReactNode,
+    value: string,
+    className?: string,
+}) {
+    return (
+        <MenubarPrimitive.RadioItem
+            className={cn("text-[13px] leading-none text-text-primary dark:text-text-primary-dark rounded flex items-center h-[32px] px-[10px] py-[2px] relative select-none pl-5 outline-none data-[highlighted]:bg-gray-100 data-[highlighted]:dark:bg-gray-800 data-[disabled]:text-text-secondary data-[disabled]:dark:text-text-secondary-dark data-[disabled]:pointer-events-none",
+                className)}
+            value={value}
+            {...rest}>
+            {children ?? <CheckIcon size={"small"}/>}
+        </MenubarPrimitive.RadioItem>
+    )
+}
+
+export function MenubarShortcut({
+                                    children,
+                                    className,
+                                    ...rest
+                                }: {
+    children?: React.ReactNode,
+    className?: string,
+}) {
+    return (
+        <div
+            className={cn("ml-auto pl-5 group-data-[highlighted]:text-white group-data-[disabled]:text-text-secondary data-[disabled]:dark:text-text-secondary-dark",
+                className)}>
+            {children}
+        </div>
+    )
+}
+
+export function MenubarSubTriggerIndicator() {
+    return (
+        <div className="ml-auto pl-5 ">
+            <ChevronRightIcon size={"small"}/>
+        </div>
+    )
+}

package/src/components/Skeleton.tsx

@@ -12,13 +12,16 @@ export function Skeleton({
                              height,
                              className
                          }: SkeletonProps) {
-    return <span className={
+    return <span
+        style={{
+            width: width ? `${width}px` : "100%",
+            height: height ? `${height}px` : "12px"
+        }}
+        className={
         cn(
             "block",
             "bg-slate-200 dark:bg-slate-800 rounded",
             "animate-pulse",
-            width ? `w-[${width}px]` : "w-full",
-            height ? `h-[${height}px]` : "h-3",
             "max-w-full max-h-full",
             className)
     }/>;

package/src/components/index.tsx

@@ -24,6 +24,7 @@ export * from "./Label";
 export * from "./LoadingButton";
 export * from "./Markdown";
 export * from "./Menu";
+export * from "./Menubar";
 export * from "./MultiSelect";
 export * from "./Paper";
 export * from "./RadioGroup";