@nuxt/ui 3.0.0-alpha.1 → 3.0.0-alpha.11

package/.nuxt/ui/chip.ts

@@ -0,0 +1,96 @@
+const color = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+const size = [
+  "3xs",
+  "2xs",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl"
+] as const
+
+const position = [
+  "top-right",
+  "bottom-right",
+  "top-left",
+  "bottom-left"
+] as const
+
+export default {
+  "slots": {
+    "root": "relative inline-flex items-center justify-center shrink-0",
+    "base": "rounded-full ring ring-[var(--ui-bg)] flex items-center justify-center text-[var(--ui-bg)] font-medium whitespace-nowrap"
+  },
+  "variants": {
+    "color": {
+      "primary": "bg-[var(--ui-primary)]",
+      "secondary": "bg-[var(--ui-secondary)]",
+      "success": "bg-[var(--ui-success)]",
+      "info": "bg-[var(--ui-info)]",
+      "warning": "bg-[var(--ui-warning)]",
+      "error": "bg-[var(--ui-error)]",
+      "neutral": "bg-[var(--ui-text-muted)]"
+    },
+    "size": {
+      "3xs": "h-[4px] min-w-[4px] text-[4px]",
+      "2xs": "h-[5px] min-w-[5px] text-[5px]",
+      "xs": "h-[6px] min-w-[6px] text-[6px]",
+      "sm": "h-[7px] min-w-[7px] text-[7px]",
+      "md": "h-[8px] min-w-[8px] text-[8px]",
+      "lg": "h-[9px] min-w-[9px] text-[9px]",
+      "xl": "h-[10px] min-w-[10px] text-[10px]",
+      "2xl": "h-[11px] min-w-[11px] text-[11px]",
+      "3xl": "h-[12px] min-w-[12px] text-[12px]"
+    },
+    "position": {
+      "top-right": "top-0 right-0",
+      "bottom-right": "bottom-0 right-0",
+      "top-left": "top-0 left-0",
+      "bottom-left": "bottom-0 left-0"
+    },
+    "inset": {
+      "false": ""
+    },
+    "standalone": {
+      "false": "absolute"
+    }
+  },
+  "compoundVariants": [
+    {
+      "position": "top-right" as typeof position[number],
+      "inset": false,
+      "class": "-translate-y-1/2 translate-x-1/2 transform"
+    },
+    {
+      "position": "bottom-right" as typeof position[number],
+      "inset": false,
+      "class": "translate-y-1/2 translate-x-1/2 transform"
+    },
+    {
+      "position": "top-left" as typeof position[number],
+      "inset": false,
+      "class": "-translate-y-1/2 -translate-x-1/2 transform"
+    },
+    {
+      "position": "bottom-left" as typeof position[number],
+      "inset": false,
+      "class": "translate-y-1/2 -translate-x-1/2 transform"
+    }
+  ],
+  "defaultVariants": {
+    "size": "md" as typeof size[number],
+    "color": "primary" as typeof color[number],
+    "position": "top-right" as typeof position[number]
+  }
+}

package/.nuxt/ui/collapsible.ts

@@ -0,0 +1,6 @@
+export default {
+  "slots": {
+    "root": "",
+    "content": "data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden"
+  }
+}

package/.nuxt/ui/color-picker.ts

@@ -0,0 +1,47 @@
+const size = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl"
+] as const
+
+export default {
+  "slots": {
+    "root": "data-[disabled]:opacity-75",
+    "picker": "flex gap-4",
+    "selector": "rounded-[calc(var(--ui-radius)*1.5)]",
+    "selectorBackground": "w-full h-full relative rounded-[calc(var(--ui-radius)*1.2)]",
+    "selectorThumb": "-translate-y-1/2 -translate-x-1/2 absolute size-4 ring-2 ring-[var(--color-white)] rounded-full cursor-pointer data-[disabled]:cursor-not-allowed",
+    "track": "w-[8px] relative rounded-[calc(var(--ui-radius)*1.5)]",
+    "trackThumb": "absolute transform -translate-y-1/2 -translate-x-[4px] rtl:translate-x-[4px] size-4 rounded-full ring-2 ring-[var(--color-white)] cursor-pointer data-[disabled]:cursor-not-allowed"
+  },
+  "variants": {
+    "size": {
+      "xs": {
+        "selector": "w-38 h-38",
+        "track": "h-38"
+      },
+      "sm": {
+        "selector": "w-40 h-40",
+        "track": "h-40"
+      },
+      "md": {
+        "selector": "w-42 h-42",
+        "track": "h-42"
+      },
+      "lg": {
+        "selector": "w-44 h-44",
+        "track": "h-44"
+      },
+      "xl": {
+        "selector": "w-46 h-46",
+        "track": "h-46"
+      }
+    }
+  },
+  "compoundVariants": [],
+  "defaultVariants": {
+    "size": "md" as typeof size[number]
+  }
+}

package/.nuxt/ui/command-palette.ts

@@ -0,0 +1,50 @@
+export default {
+  "slots": {
+    "root": "flex flex-col min-h-0 min-w-0 divide-y divide-[var(--ui-border)]",
+    "input": "[&>input]:h-12",
+    "close": "",
+    "content": "relative overflow-hidden flex flex-col",
+    "viewport": "relative divide-y divide-[var(--ui-border)] scroll-py-1 overflow-y-auto flex-1 focus:outline-none",
+    "group": "p-1 isolate",
+    "empty": "py-6 text-center text-sm text-[var(--ui-text-muted)]",
+    "label": "px-2 py-1.5 text-xs font-semibold text-[var(--ui-text-highlighted)]",
+    "item": "group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75",
+    "itemLeadingIcon": "shrink-0 size-5",
+    "itemLeadingAvatar": "shrink-0",
+    "itemLeadingAvatarSize": "2xs",
+    "itemLeadingChip": "shrink-0 size-5",
+    "itemLeadingChipSize": "md",
+    "itemTrailing": "ms-auto inline-flex gap-1.5 items-center",
+    "itemTrailingIcon": "shrink-0 size-5",
+    "itemTrailingHighlightedIcon": "shrink-0 size-5 text-[var(--ui-text-dimmed)] hidden group-data-highlighted:inline-flex",
+    "itemTrailingKbds": "hidden lg:inline-flex items-center shrink-0 gap-0.5",
+    "itemTrailingKbdsSize": "md",
+    "itemLabel": "truncate space-x-1 rtl:space-x-reverse",
+    "itemLabelBase": "text-[var(--ui-text-highlighted)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]",
+    "itemLabelPrefix": "text-[var(--ui-text)]",
+    "itemLabelSuffix": "text-[var(--ui-text-dimmed)] [&>mark]:text-[var(--ui-bg)] [&>mark]:bg-[var(--ui-primary)]"
+  },
+  "variants": {
+    "active": {
+      "true": {
+        "item": "text-[var(--ui-text-highlighted)] before:bg-[var(--ui-bg-elevated)]",
+        "itemLeadingIcon": "text-[var(--ui-text)]"
+      },
+      "false": {
+        "item": [
+          "text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50",
+          "transition-colors before:transition-colors"
+        ],
+        "itemLeadingIcon": [
+          "text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)]",
+          "transition-colors"
+        ]
+      }
+    },
+    "loading": {
+      "true": {
+        "itemLeadingIcon": "animate-spin"
+      }
+    }
+  }
+}

package/.nuxt/ui/container.ts

@@ -0,0 +1,3 @@
+export default {
+  "base": "max-w-[var(--ui-container)] mx-auto px-4 sm:px-6 lg:px-8"
+}

package/.nuxt/ui/context-menu.ts

@@ -0,0 +1,216 @@
+const color = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+const size = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl"
+] as const
+
+export default {
+  "slots": {
+    "content": "min-w-32 bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] overflow-y-auto scroll-py-1 data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] pointer-events-auto",
+    "group": "p-1 isolate",
+    "label": "w-full flex items-center font-semibold text-[var(--ui-text-highlighted)]",
+    "separator": "-mx-1 my-1 h-px bg-[var(--ui-border)]",
+    "item": "group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-[calc(var(--ui-radius)*1.5)] data-disabled:cursor-not-allowed data-disabled:opacity-75",
+    "itemLeadingIcon": "shrink-0",
+    "itemLeadingAvatar": "shrink-0",
+    "itemLeadingAvatarSize": "",
+    "itemTrailing": "ms-auto inline-flex gap-1.5 items-center",
+    "itemTrailingIcon": "shrink-0",
+    "itemTrailingKbds": "hidden lg:inline-flex items-center shrink-0",
+    "itemTrailingKbdsSize": "",
+    "itemLabel": "truncate",
+    "itemLabelExternalIcon": "inline-block size-3 align-top text-[var(--ui-text-dimmed)]"
+  },
+  "variants": {
+    "color": {
+      "primary": "",
+      "secondary": "",
+      "success": "",
+      "info": "",
+      "warning": "",
+      "error": "",
+      "neutral": ""
+    },
+    "active": {
+      "true": {
+        "item": "text-[var(--ui-text-highlighted)] before:bg-[var(--ui-bg-elevated)]",
+        "itemLeadingIcon": "text-[var(--ui-text)]"
+      },
+      "false": {
+        "item": [
+          "text-[var(--ui-text)] data-highlighted:text-[var(--ui-text-highlighted)] data-[state=open]:text-[var(--ui-text-highlighted)] data-highlighted:before:bg-[var(--ui-bg-elevated)]/50 data-[state=open]:before:bg-[var(--ui-bg-elevated)]/50",
+          "transition-colors before:transition-colors"
+        ],
+        "itemLeadingIcon": [
+          "text-[var(--ui-text-dimmed)] group-data-highlighted:text-[var(--ui-text)] group-data-[state=open]:text-[var(--ui-text)]",
+          "transition-colors"
+        ]
+      }
+    },
+    "loading": {
+      "true": {
+        "itemLeadingIcon": "animate-spin"
+      }
+    },
+    "size": {
+      "xs": {
+        "label": "p-1 text-xs gap-1",
+        "item": "p-1 text-xs gap-1",
+        "itemLeadingIcon": "size-4",
+        "itemLeadingAvatarSize": "3xs",
+        "itemTrailingIcon": "size-4",
+        "itemTrailingKbds": "gap-0.5",
+        "itemTrailingKbdsSize": "sm"
+      },
+      "sm": {
+        "label": "p-1.5 text-xs gap-1.5",
+        "item": "p-1.5 text-xs gap-1.5",
+        "itemLeadingIcon": "size-4",
+        "itemLeadingAvatarSize": "3xs",
+        "itemTrailingIcon": "size-4",
+        "itemTrailingKbds": "gap-0.5",
+        "itemTrailingKbdsSize": "sm"
+      },
+      "md": {
+        "label": "p-1.5 text-sm gap-1.5",
+        "item": "p-1.5 text-sm gap-1.5",
+        "itemLeadingIcon": "size-5",
+        "itemLeadingAvatarSize": "2xs",
+        "itemTrailingIcon": "size-5",
+        "itemTrailingKbds": "gap-0.5",
+        "itemTrailingKbdsSize": "md"
+      },
+      "lg": {
+        "label": "p-2 text-sm gap-2",
+        "item": "p-2 text-sm gap-2",
+        "itemLeadingIcon": "size-5",
+        "itemLeadingAvatarSize": "2xs",
+        "itemTrailingIcon": "size-5",
+        "itemTrailingKbds": "gap-1",
+        "itemTrailingKbdsSize": "md"
+      },
+      "xl": {
+        "label": "p-2 text-base gap-2",
+        "item": "p-2 text-base gap-2",
+        "itemLeadingIcon": "size-6",
+        "itemLeadingAvatarSize": "xs",
+        "itemTrailingIcon": "size-6",
+        "itemTrailingKbds": "gap-1",
+        "itemTrailingKbdsSize": "lg"
+      }
+    }
+  },
+  "compoundVariants": [
+    {
+      "color": "primary" as typeof color[number],
+      "active": false,
+      "class": {
+        "item": "text-[var(--ui-primary)] data-highlighted:text-[var(--ui-primary)] data-highlighted:before:bg-[var(--ui-primary)]/10 data-[state=open]:before:bg-[var(--ui-primary)]/10",
+        "itemLeadingIcon": "text-[var(--ui-primary)]/75 group-data-highlighted:text-[var(--ui-primary)] group-data-[state=open]:text-[var(--ui-primary)]"
+      }
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "active": false,
+      "class": {
+        "item": "text-[var(--ui-secondary)] data-highlighted:text-[var(--ui-secondary)] data-highlighted:before:bg-[var(--ui-secondary)]/10 data-[state=open]:before:bg-[var(--ui-secondary)]/10",
+        "itemLeadingIcon": "text-[var(--ui-secondary)]/75 group-data-highlighted:text-[var(--ui-secondary)] group-data-[state=open]:text-[var(--ui-secondary)]"
+      }
+    },
+    {
+      "color": "success" as typeof color[number],
+      "active": false,
+      "class": {
+        "item": "text-[var(--ui-success)] data-highlighted:text-[var(--ui-success)] data-highlighted:before:bg-[var(--ui-success)]/10 data-[state=open]:before:bg-[var(--ui-success)]/10",
+        "itemLeadingIcon": "text-[var(--ui-success)]/75 group-data-highlighted:text-[var(--ui-success)] group-data-[state=open]:text-[var(--ui-success)]"
+      }
+    },
+    {
+      "color": "info" as typeof color[number],
+      "active": false,
+      "class": {
+        "item": "text-[var(--ui-info)] data-highlighted:text-[var(--ui-info)] data-highlighted:before:bg-[var(--ui-info)]/10 data-[state=open]:before:bg-[var(--ui-info)]/10",
+        "itemLeadingIcon": "text-[var(--ui-info)]/75 group-data-highlighted:text-[var(--ui-info)] group-data-[state=open]:text-[var(--ui-info)]"
+      }
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "active": false,
+      "class": {
+        "item": "text-[var(--ui-warning)] data-highlighted:text-[var(--ui-warning)] data-highlighted:before:bg-[var(--ui-warning)]/10 data-[state=open]:before:bg-[var(--ui-warning)]/10",
+        "itemLeadingIcon": "text-[var(--ui-warning)]/75 group-data-highlighted:text-[var(--ui-warning)] group-data-[state=open]:text-[var(--ui-warning)]"
+      }
+    },
+    {
+      "color": "error" as typeof color[number],
+      "active": false,
+      "class": {
+        "item": "text-[var(--ui-error)] data-highlighted:text-[var(--ui-error)] data-highlighted:before:bg-[var(--ui-error)]/10 data-[state=open]:before:bg-[var(--ui-error)]/10",
+        "itemLeadingIcon": "text-[var(--ui-error)]/75 group-data-highlighted:text-[var(--ui-error)] group-data-[state=open]:text-[var(--ui-error)]"
+      }
+    },
+    {
+      "color": "primary" as typeof color[number],
+      "active": true,
+      "class": {
+        "item": "text-[var(--ui-primary)] before:bg-[var(--ui-primary)]/10",
+        "itemLeadingIcon": "text-[var(--ui-primary)]"
+      }
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "active": true,
+      "class": {
+        "item": "text-[var(--ui-secondary)] before:bg-[var(--ui-secondary)]/10",
+        "itemLeadingIcon": "text-[var(--ui-secondary)]"
+      }
+    },
+    {
+      "color": "success" as typeof color[number],
+      "active": true,
+      "class": {
+        "item": "text-[var(--ui-success)] before:bg-[var(--ui-success)]/10",
+        "itemLeadingIcon": "text-[var(--ui-success)]"
+      }
+    },
+    {
+      "color": "info" as typeof color[number],
+      "active": true,
+      "class": {
+        "item": "text-[var(--ui-info)] before:bg-[var(--ui-info)]/10",
+        "itemLeadingIcon": "text-[var(--ui-info)]"
+      }
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "active": true,
+      "class": {
+        "item": "text-[var(--ui-warning)] before:bg-[var(--ui-warning)]/10",
+        "itemLeadingIcon": "text-[var(--ui-warning)]"
+      }
+    },
+    {
+      "color": "error" as typeof color[number],
+      "active": true,
+      "class": {
+        "item": "text-[var(--ui-error)] before:bg-[var(--ui-error)]/10",
+        "itemLeadingIcon": "text-[var(--ui-error)]"
+      }
+    }
+  ],
+  "defaultVariants": {
+    "size": "md" as typeof size[number]
+  }
+}

package/.nuxt/ui/drawer.ts

@@ -0,0 +1,62 @@
+const direction = [
+  "top",
+  "right",
+  "bottom",
+  "left"
+] as const
+
+export default {
+  "slots": {
+    "overlay": "fixed inset-0 bg-[var(--ui-bg-elevated)]/75",
+    "content": "fixed bg-[var(--ui-bg)] ring ring-[var(--ui-border)] flex focus:outline-none",
+    "handle": "shrink-0 rounded-full bg-[var(--ui-bg-accented)]",
+    "container": "w-full flex flex-col gap-4 p-4 overflow-y-auto",
+    "header": "",
+    "title": "text-[var(--ui-text-highlighted)] font-semibold",
+    "description": "mt-1 text-[var(--ui-text-muted)] text-sm",
+    "body": "flex-1",
+    "footer": "flex flex-col gap-1.5"
+  },
+  "variants": {
+    "direction": {
+      "top": {
+        "content": "top-0 mb-24 flex-col-reverse rounded-b-[calc(var(--ui-radius)*2)]",
+        "handle": "mb-4"
+      },
+      "right": {
+        "content": "right-4 flex-row",
+        "handle": "ml-4"
+      },
+      "bottom": {
+        "content": "bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)]",
+        "handle": "mt-4"
+      },
+      "left": {
+        "content": "left-4 flex-row-reverse",
+        "handle": "mr-4"
+      }
+    }
+  },
+  "compoundVariants": [
+    {
+      "direction": [
+        "top" as typeof direction[number],
+        "bottom" as typeof direction[number]
+      ],
+      "class": {
+        "content": "inset-x-0 h-auto max-h-[96%]",
+        "handle": "w-12 h-1.5 mx-auto"
+      }
+    },
+    {
+      "direction": [
+        "right" as typeof direction[number],
+        "left" as typeof direction[number]
+      ],
+      "class": {
+        "content": "inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-[calc(var(--ui-radius)*2)] after:hidden",
+        "handle": "h-12 w-1.5 mt-auto mb-auto"
+      }
+    }
+  ]
+}