@labpane/ui 1.0.0 → 1.2.0

package/README.md

@@ -1,9 +1,9 @@
 # @labpane/ui
 
-Page layouts, forms, dialogs, menus, tables, and an optional terminal for React, built on Radix. It pairs with [`@labpane/os`](../os) but works on its own.
+Pages, forms, dialogs, menus, tables, navigation, charts, and an optional terminal for React, built on Radix. It pairs with [`@labpane/os`](../os) but works on its own.
 
 ```sh
-npm install @labpane/ui @radix-ui/react-alert-dialog @radix-ui/react-checkbox @radix-ui/react-context-menu @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-popover @radix-ui/react-select @radix-ui/react-slot
+npm install @labpane/ui @radix-ui/react-alert-dialog @radix-ui/react-avatar @radix-ui/react-checkbox @radix-ui/react-context-menu @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-popover @radix-ui/react-select @radix-ui/react-slot @radix-ui/react-switch @radix-ui/react-tabs @radix-ui/react-toggle @radix-ui/react-toggle-group @radix-ui/react-tooltip
 ```
 
 ```tsx
@@ -23,15 +23,18 @@ Radix and React are peer dependencies, so your app keeps one copy of each. The s
 
 ## Components
 
-|           |                                                                                                              |
-| --------- | ------------------------------------------------------------------------------------------------------------ |
-| Pages     | `Page`, `PageHeader`, `PageActions`, `Back`                                                                  |
-| Controls  | `Button`, `Badge`, `Input`, `Checkbox`, `Select` and its parts, `Spinner`, `Skeleton`, `CopyButton`, `Alert` |
-| Forms     | `Field`, `FieldLabel`, `FieldError`, `TextField`, `SelectField`, `AddButton`                                 |
-| Dialogs   | `Dialog` and its parts, `ConfirmDialog`, `DiscardDialog`                                                     |
-| Menus     | `OptionMenu`, `ActionMenu`, `MenuContent`                                                                    |
-| Tables    | `Table`, `column`, `mono`, `num`                                                                             |
-| Workspace | `AppMenu`: logo menu with theme, size, and full-screen controls                                              |
+|            |                                                                                                                                                                                                                |
+| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Pages      | `Page`, `PageHeader` and its parts, `PageActions`, `Back`, `Topbar`, `Breadcrumb` and its parts, `TableScreen`, `BrowserLayout` and its parts, `SidePanel`, `SettingsSection`, `SettingsRow`, `SettingsFooter` |
+| Navigation | `Sidebar` and its parts, `Rail`, `RailItem`, `NavTabs`, `NavTab`, `Tabs` and its parts, `Steps`, `Step`, `Command` and its parts                                                                               |
+| Controls   | `Button`, `Badge`, `Input`, `Textarea`, `Checkbox`, `Switch`, `Toggle`, `ToggleGroup`, `Select` and its parts, `NativeSelect`, `SearchInput`, `FileInput`, `InputGroup` and its parts, `CopyButton`, `Kbd`     |
+| Forms      | `Field`, `FieldLabel`, `FieldDescription`, `FieldError`, `FieldSet`, `FieldGroup`, `Label`, `TextField`, `SelectField`, `AddButton`                                                                            |
+| Display    | `Alert`, `Card` and its parts, `Avatar` and its parts, `Stats`, `Stat`, `Empty` and its parts, `Separator`, `Skeleton`, `Spinner`, `Tooltip`, `EmailThread`, `EmailMessage`                                    |
+| Dialogs    | `Dialog` and its parts, `Sheet` and its parts, `ConfirmDialog`, `DiscardDialog`                                                                                                                                |
+| Menus      | `DropdownMenu` and its parts, `OptionMenu`, `ActionMenu`, `MenuContent`                                                                                                                                        |
+| Tables     | `Table`, `TableStack`, `column`, `mono`, `num`                                                                                                                                                                 |
+| Charts     | `TimeSeriesChart`, `HistogramChart`, `HistogramSparkline`, `FlameGraph`, `TimingTracks`, `ChartFrame`                                                                                                          |
+| Workspace  | `AppMenu` with `AppMenuSection`; `useTabActive` and `useTabVisible` read the tab state that `@labpane/os` provides                                                                                             |
 
 `cn()` merges class names and lets your own Tailwind classes override the `labui:` defaults they conflict with.
 
@@ -109,7 +112,19 @@ Set these on `:root`, or on any ancestor. Add a `dark` class to an ancestor for
 }
 ```
 
-Colours: `background`, `foreground`, `card`, `popover`, `primary`, `secondary`, `muted`, `accent`, `destructive`, `success`, and `warning`, each with a `-foreground` pair where it applies, plus `link`, `border`, `input`, `input-background`, `ring`, `overlay`, and `destructive-muted`. Fonts: `font-sans`, `font-mono`, and `font-display`. Sizes: `radius`, `radius-dialog`, `control-height`, `control-height-sm`, `control-px`, and `row-py`. Each is a `--labui-` variable.
+A theme can also be an object. `themeCss(theme)` returns the CSS for both packages' tokens and `<ThemeStyle theme={theme} />` renders it; keys left out keep the defaults.
+
+```tsx
+<ThemeStyle
+  theme={{
+    light: { primary: "#a3242f" },
+    dark: { primary: "#f0808c" },
+    radius: "0.5rem",
+  }}
+/>
+```
+
+Colors: `background`, `foreground`, `card`, `popover`, `primary`, `secondary`, `muted`, `accent`, `destructive`, `success`, and `warning`, each with a `-foreground` pair where it applies, plus `link`, `border`, `input`, `input-background`, `ring`, `overlay`, and `destructive-muted`. Fonts: `font-sans`, `font-mono`, and `font-display`. Sizes: `radius`, `radius-dialog`, `control-height`, `control-height-sm`, `control-px`, and `row-py`. Each is a `--labui-` variable.
 
 ## License
 

package/dist/chunk-NR3PLNO7.js

@@ -0,0 +1,100 @@
+// classes.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  experimentalParseClassName: ({ className, parseClassName }) => parseClassName(className.replace(/^labui:/, ""))
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var focusRing = "labui:focus-visible:border-ring labui:focus-visible:ring-[3px] labui:focus-visible:ring-ring/50";
+var invalidRing = "labui:aria-invalid:border-destructive labui:aria-invalid:ring-destructive/20 labui:dark:aria-invalid:ring-destructive/40";
+var overlay = "labui:fixed labui:inset-0 labui:z-50 labui:bg-overlay labui:data-[state=open]:animate-fade-in labui:data-[state=closed]:animate-fade-out";
+var closeButton = [
+  "labui:absolute labui:top-4 labui:right-4 labui:inline-flex labui:size-8 labui:items-center labui:justify-center labui:rounded-md",
+  "labui:text-muted-foreground labui:transition-colors labui:hover:bg-accent labui:hover:text-foreground",
+  "labui:focus-visible:ring-[3px] labui:focus-visible:ring-ring/50 labui:focus-visible:outline-none labui:disabled:pointer-events-none",
+  "labui:[&_svg]:pointer-events-none labui:[&_svg]:size-4 labui:[&_svg]:shrink-0"
+].join(" ");
+var inputSurface = [
+  "labui:w-full labui:min-w-0 labui:rounded-md labui:border labui:border-input labui:bg-input-background labui:shadow-xs",
+  "labui:text-base labui:md:text-sm labui:placeholder:text-muted-foreground labui:transition-[color,box-shadow] labui:outline-none",
+  "labui:disabled:cursor-not-allowed labui:disabled:opacity-50",
+  focusRing,
+  invalidRing
+].join(" ");
+
+// button.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+var raisedButtonSurface = [
+  "labui:border labui:border-border labui:border-b-input labui:bg-card labui:bg-linear-to-b labui:from-card labui:to-muted labui:text-foreground",
+  "labui:shadow-[inset_0_1px_0_#ffffff,0_1px_1px_#00000014,0_3px_4px_#0000000d]",
+  "labui:hover:to-background labui:hover:shadow-[inset_0_1px_0_#ffffff,0_2px_3px_#0000001a,0_4px_6px_#0000000d]",
+  "labui:active:translate-y-px labui:active:from-muted labui:active:to-card labui:active:shadow-[inset_0_1px_2px_#0000001a,0_1px_0_#ffffff80]",
+  "labui:dark:border-foreground/15 labui:dark:border-b-foreground/10 labui:dark:bg-secondary labui:dark:from-[color-mix(in_srgb,var(--labui-secondary)_88%,var(--labui-foreground))] labui:dark:to-secondary labui:dark:text-popover-foreground",
+  "labui:dark:shadow-[inset_0_1px_0_#ffffff14,0_1px_2px_#00000026]",
+  "labui:dark:hover:border-foreground/25 labui:dark:hover:from-[color-mix(in_srgb,var(--labui-secondary)_82%,var(--labui-foreground))] labui:dark:hover:to-secondary labui:dark:hover:shadow-[inset_0_1px_0_#ffffff1f,0_2px_4px_#00000033]",
+  "labui:dark:active:from-secondary labui:dark:active:to-secondary labui:dark:active:shadow-[inset_0_1px_2px_#00000033,0_1px_0_#ffffff0a]",
+  "labui:disabled:bg-secondary labui:disabled:bg-none labui:disabled:shadow-none labui:dark:disabled:shadow-none"
+].join(" ");
+var buttonVariants = {
+  default: "labui:border labui:border-transparent labui:bg-primary labui:text-primary-foreground labui:shadow-xs labui:hover:bg-primary/90 labui:active:translate-y-px",
+  destructive: "labui:border labui:border-transparent labui:bg-destructive-muted labui:text-destructive labui:hover:border-destructive/20 labui:hover:bg-destructive/15 labui:focus-visible:ring-destructive/20 labui:dark:focus-visible:ring-destructive/40",
+  outline: "labui:border labui:bg-background labui:shadow-xs labui:hover:bg-accent labui:hover:text-accent-foreground labui:dark:border-input labui:dark:bg-input/30 labui:dark:hover:bg-input/50",
+  secondary: raisedButtonSurface,
+  ghost: "labui:hover:bg-accent labui:hover:text-accent-foreground labui:dark:hover:bg-accent/50",
+  link: "labui:text-link labui:underline-offset-4 labui:hover:underline"
+};
+var buttonSizes = {
+  default: "labui:h-(--labui-control-height) labui:px-4 labui:py-2 labui:has-[>svg]:px-3",
+  xs: "labui:h-6 labui:gap-1 labui:rounded-md labui:px-2 labui:text-xs labui:has-[>svg]:px-1.5 labui:[&_svg:not([class*='size-'])]:size-3",
+  sm: "labui:h-(--labui-control-height-sm) labui:gap-1.5 labui:rounded-md labui:px-3 labui:has-[>svg]:px-2.5",
+  lg: "labui:h-11 labui:rounded-md labui:px-6 labui:has-[>svg]:px-4",
+  icon: "labui:size-(--labui-control-height)",
+  "icon-xs": "labui:size-6 labui:rounded-md labui:[&_svg:not([class*='size-'])]:size-3",
+  "icon-sm": "labui:size-(--labui-control-height-sm)",
+  "icon-lg": "labui:size-11"
+};
+var Button = React.forwardRef(function Button2({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}, ref) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(
+        "labui:inline-flex labui:shrink-0 labui:items-center labui:justify-center labui:gap-2 labui:rounded-md",
+        "labui:text-sm labui:font-medium labui:whitespace-nowrap labui:transition-all labui:outline-none",
+        "labui:disabled:pointer-events-none labui:disabled:opacity-50",
+        focusRing,
+        invalidRing,
+        "labui:[&_svg]:pointer-events-none labui:[&_svg]:shrink-0 labui:[&_svg:not([class*='size-'])]:size-4",
+        variant && buttonVariants[variant],
+        size && buttonSizes[size],
+        className
+      ),
+      ...props
+    }
+  );
+});
+
+export {
+  cn,
+  focusRing,
+  invalidRing,
+  overlay,
+  closeButton,
+  inputSurface,
+  Button
+};
+//# sourceMappingURL=chunk-NR3PLNO7.js.map

package/dist/chunk-NR3PLNO7.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../classes.ts", "../button.tsx"],
+  "sourcesContent": ["import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n  experimentalParseClassName: ({ className, parseClassName }) =>\n    parseClassName(className.replace(/^labui:/, \"\")),\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport const focusRing =\n  \"labui:focus-visible:border-ring labui:focus-visible:ring-[3px] labui:focus-visible:ring-ring/50\";\n\nexport const invalidRing =\n  \"labui:aria-invalid:border-destructive labui:aria-invalid:ring-destructive/20 labui:dark:aria-invalid:ring-destructive/40\";\n\nexport const overlay =\n  \"labui:fixed labui:inset-0 labui:z-50 labui:bg-overlay labui:data-[state=open]:animate-fade-in labui:data-[state=closed]:animate-fade-out\";\n\nexport const closeButton = [\n  \"labui:absolute labui:top-4 labui:right-4 labui:inline-flex labui:size-8 labui:items-center labui:justify-center labui:rounded-md\",\n  \"labui:text-muted-foreground labui:transition-colors labui:hover:bg-accent labui:hover:text-foreground\",\n  \"labui:focus-visible:ring-[3px] labui:focus-visible:ring-ring/50 labui:focus-visible:outline-none labui:disabled:pointer-events-none\",\n  \"labui:[&_svg]:pointer-events-none labui:[&_svg]:size-4 labui:[&_svg]:shrink-0\",\n].join(\" \");\n\nexport const inputSurface = [\n  \"labui:w-full labui:min-w-0 labui:rounded-md labui:border labui:border-input labui:bg-input-background labui:shadow-xs\",\n  \"labui:text-base labui:md:text-sm labui:placeholder:text-muted-foreground labui:transition-[color,box-shadow] labui:outline-none\",\n  \"labui:disabled:cursor-not-allowed labui:disabled:opacity-50\",\n  focusRing,\n  invalidRing,\n].join(\" \");\n", "import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cn, focusRing, invalidRing } from \"./classes.js\";\n\nconst raisedButtonSurface = [\n  \"labui:border labui:border-border labui:border-b-input labui:bg-card labui:bg-linear-to-b labui:from-card labui:to-muted labui:text-foreground\",\n  \"labui:shadow-[inset_0_1px_0_#ffffff,0_1px_1px_#00000014,0_3px_4px_#0000000d]\",\n  \"labui:hover:to-background labui:hover:shadow-[inset_0_1px_0_#ffffff,0_2px_3px_#0000001a,0_4px_6px_#0000000d]\",\n  \"labui:active:translate-y-px labui:active:from-muted labui:active:to-card labui:active:shadow-[inset_0_1px_2px_#0000001a,0_1px_0_#ffffff80]\",\n  \"labui:dark:border-foreground/15 labui:dark:border-b-foreground/10 labui:dark:bg-secondary labui:dark:from-[color-mix(in_srgb,var(--labui-secondary)_88%,var(--labui-foreground))] labui:dark:to-secondary labui:dark:text-popover-foreground\",\n  \"labui:dark:shadow-[inset_0_1px_0_#ffffff14,0_1px_2px_#00000026]\",\n  \"labui:dark:hover:border-foreground/25 labui:dark:hover:from-[color-mix(in_srgb,var(--labui-secondary)_82%,var(--labui-foreground))] labui:dark:hover:to-secondary labui:dark:hover:shadow-[inset_0_1px_0_#ffffff1f,0_2px_4px_#00000033]\",\n  \"labui:dark:active:from-secondary labui:dark:active:to-secondary labui:dark:active:shadow-[inset_0_1px_2px_#00000033,0_1px_0_#ffffff0a]\",\n  \"labui:disabled:bg-secondary labui:disabled:bg-none labui:disabled:shadow-none labui:dark:disabled:shadow-none\",\n].join(\" \");\n\nconst buttonVariants = {\n  default:\n    \"labui:border labui:border-transparent labui:bg-primary labui:text-primary-foreground labui:shadow-xs labui:hover:bg-primary/90 labui:active:translate-y-px\",\n  destructive:\n    \"labui:border labui:border-transparent labui:bg-destructive-muted labui:text-destructive labui:hover:border-destructive/20 labui:hover:bg-destructive/15 labui:focus-visible:ring-destructive/20 labui:dark:focus-visible:ring-destructive/40\",\n  outline:\n    \"labui:border labui:bg-background labui:shadow-xs labui:hover:bg-accent labui:hover:text-accent-foreground labui:dark:border-input labui:dark:bg-input/30 labui:dark:hover:bg-input/50\",\n  secondary: raisedButtonSurface,\n  ghost:\n    \"labui:hover:bg-accent labui:hover:text-accent-foreground labui:dark:hover:bg-accent/50\",\n  link: \"labui:text-link labui:underline-offset-4 labui:hover:underline\",\n};\n\nconst buttonSizes = {\n  default:\n    \"labui:h-(--labui-control-height) labui:px-4 labui:py-2 labui:has-[>svg]:px-3\",\n  xs: \"labui:h-6 labui:gap-1 labui:rounded-md labui:px-2 labui:text-xs labui:has-[>svg]:px-1.5 labui:[&_svg:not([class*='size-'])]:size-3\",\n  sm: \"labui:h-(--labui-control-height-sm) labui:gap-1.5 labui:rounded-md labui:px-3 labui:has-[>svg]:px-2.5\",\n  lg: \"labui:h-11 labui:rounded-md labui:px-6 labui:has-[>svg]:px-4\",\n  icon: \"labui:size-(--labui-control-height)\",\n  \"icon-xs\":\n    \"labui:size-6 labui:rounded-md labui:[&_svg:not([class*='size-'])]:size-3\",\n  \"icon-sm\": \"labui:size-(--labui-control-height-sm)\",\n  \"icon-lg\": \"labui:size-11\",\n};\n\nexport type ButtonVariant = keyof typeof buttonVariants;\nexport type ButtonSize = keyof typeof buttonSizes;\n\nconst Button = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentPropsWithoutRef<\"button\"> & {\n    variant?: ButtonVariant | null;\n    size?: ButtonSize | null;\n    asChild?: boolean;\n  }\n>(function Button(\n  {\n    className,\n    variant = \"default\",\n    size = \"default\",\n    asChild = false,\n    ...props\n  },\n  ref,\n) {\n  const Comp = asChild ? Slot : \"button\";\n\n  return (\n    <Comp\n      ref={ref}\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(\n        \"labui:inline-flex labui:shrink-0 labui:items-center labui:justify-center labui:gap-2 labui:rounded-md\",\n        \"labui:text-sm labui:font-medium labui:whitespace-nowrap labui:transition-all labui:outline-none\",\n        \"labui:disabled:pointer-events-none labui:disabled:opacity-50\",\n        focusRing,\n        invalidRing,\n        \"labui:[&_svg]:pointer-events-none labui:[&_svg]:shrink-0 labui:[&_svg:not([class*='size-'])]:size-4\",\n        variant && buttonVariants[variant],\n        size && buttonSizes[size],\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nexport { Button };\n"],
+  "mappings": ";AAAA,SAA0B,YAAY;AACtC,SAAS,2BAA2B;AAEpC,IAAM,UAAU,oBAAoB;AAAA,EAClC,4BAA4B,CAAC,EAAE,WAAW,eAAe,MACvD,eAAe,UAAU,QAAQ,WAAW,EAAE,CAAC;AACnD,CAAC;AAEM,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;AAEO,IAAM,YACX;AAEK,IAAM,cACX;AAEK,IAAM,UACX;AAEK,IAAM,cAAc;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAEH,IAAM,eAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;;;AClCV,YAAY,WAAW;AACvB,SAAS,YAAY;AAgEjB;AA7DJ,IAAM,sBAAsB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAEV,IAAM,iBAAiB;AAAA,EACrB,SACE;AAAA,EACF,aACE;AAAA,EACF,SACE;AAAA,EACF,WAAW;AAAA,EACX,OACE;AAAA,EACF,MAAM;AACR;AAEA,IAAM,cAAc;AAAA,EAClB,SACE;AAAA,EACF,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,WACE;AAAA,EACF,WAAW;AAAA,EACX,WAAW;AACb;AAKA,IAAM,SAAe,iBAOnB,SAASA,QACT;AAAA,EACE;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,UAAU;AAAA,EACV,GAAG;AACL,GACA,KACA;AACA,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,aAAW;AAAA,MACX,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,eAAe,OAAO;AAAA,QACjC,QAAQ,YAAY,IAAI;AAAA,QACxB;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;",
+  "names": ["Button"]
+}