@warmio/ui 1.4.0 → 2.0.0

package/dist/entries/text.css

@@ -0,0 +1,97 @@
+/* ../ui/src/warmio/text/text.css */
+[data-text-variant=heading] {
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body);
+  font-weight: 500;
+  line-height: 1.25;
+}
+[data-text-variant=heading][data-text-element=h1] {
+  display: block;
+  font-size: var(--type-size-display);
+}
+[data-text-variant=heading][data-text-element=h2] {
+  font-size: var(--type-size-display);
+}
+[data-text-variant=metric] {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: var(--type-size-display);
+  line-height: 1.25;
+}
+[data-text-variant=body] {
+  font-size: var(--type-size-body);
+  line-height: 1.25;
+}
+[data-text-variant=body][data-text-size=large] {
+  font-size: var(--type-size-large);
+}
+[data-text-variant][data-text-size=display] {
+  font-size: var(--type-size-display);
+}
+[data-text-variant=caption] {
+  font-size: var(--type-size-caption);
+  line-height: 1.25;
+}
+[data-mono] {
+  font-family: var(--font-mono);
+  letter-spacing: normal;
+}
+[data-text-tone=muted] {
+  color: var(--muted-foreground);
+}
+[data-text-tone=foreground] {
+  color: var(--foreground);
+}
+[data-text-tone=primary] {
+  color: var(--primary);
+}
+[data-text-tone=success] {
+  color: var(--success);
+}
+[data-text-tone=warning] {
+  color: var(--warning);
+}
+[data-text-tone=financeCash] {
+  color: var(--finance-cash);
+}
+[data-text-tone=financeDebt] {
+  color: var(--finance-debt);
+}
+[data-text-tone=financeInvestment] {
+  color: var(--finance-investment);
+}
+[data-text-align=start] {
+  text-align: left;
+}
+[data-text-align=center] {
+  text-align: center;
+}
+[data-text-align=end] {
+  text-align: right;
+}
+:where([data-numeric=true]) {
+  font-family: var(--font-mono);
+  letter-spacing: normal;
+}
+[data-text-variant][data-text-numeric],
+[data-numeric=true] {
+  font-variant-numeric: tabular-nums;
+}
+[data-text-variant][data-text-truncate],
+[data-truncate=true] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+[data-text-line] {
+  display: block;
+}
+[data-presentation=dashboard][data-text-line=first],
+[data-presentation=welcome][data-text-line=second] {
+  color: var(--foreground);
+}
+[data-presentation=welcome][data-text-line=first],
+[data-presentation=dashboard][data-text-line=second] {
+  color: var(--muted-foreground);
+}

package/dist/index.js

@@ -1,14 +1,12 @@
+import "./entries/index.css";
 import {
   StackedDisplay,
   Text
-} from "./chunks/chunk-4RQCHKAW.js";
+} from "./chunks/chunk-W24JGQWM.js";
 import {
   Badge
-} from "./chunks/chunk-ICC7GQXS.js";
-import {
-  Button,
-  ButtonLink
-} from "./chunks/chunk-GKEYV2XW.js";
+} from "./chunks/chunk-A2PN77YE.js";
+import "./chunks/chunk-U7D32UN3.js";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -21,18 +19,18 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger
-} from "./chunks/chunk-KN6WVLCR.js";
+} from "./chunks/chunk-MGX6ZL6Q.js";
 import {
   Logo,
   WarmBrandedLogoLink,
   WarmBrandedLogoMark,
   WarmBrandedLogoMarkStatic,
   WarmLogoIcon
-} from "./chunks/chunk-HDCV4ACN.js";
+} from "./chunks/chunk-MVUHHKBL.js";
 import {
   ProductHeader,
   ProductHeaderBreadcrumb
-} from "./chunks/chunk-PBWF6BDE.js";
+} from "./chunks/chunk-DOOSH3V6.js";
 import {
   SheetClose,
   SheetContent,
@@ -41,7 +39,7 @@ import {
   SheetHeader,
   SheetTitle,
   SheetTrigger
-} from "./chunks/chunk-MIMC4M6W.js";
+} from "./chunks/chunk-PJUNSOJK.js";
 import {
   Sidebar,
   SidebarAccountTrigger,
@@ -60,11 +58,17 @@ import {
   SidebarProvider,
   SidebarTrigger,
   useSidebar
-} from "./chunks/chunk-FW2EHGRK.js";
+} from "./chunks/chunk-FKGHMPVW.js";
+import {
+  Button,
+  ButtonLink
+} from "./chunks/chunk-L6L3GVGM.js";
+import "./chunks/chunk-DHV2A22F.js";
 import {
   Sheet
-} from "./chunks/chunk-YTDMREDR.js";
-import "./chunks/chunk-VIB7OX7D.js";
+} from "./chunks/chunk-EIEA5RJJ.js";
+import "./chunks/chunk-RVVHR7RY.js";
+import "./chunks/chunk-K36HD5J5.js";
 export {
   Badge,
   Button,

package/dist/logo.js

@@ -1,11 +1,11 @@
+import "./entries/logo.css";
 import {
   Logo,
   WarmBrandedLogoLink,
   WarmBrandedLogoMark,
   WarmBrandedLogoMarkStatic,
   WarmLogoIcon
-} from "./chunks/chunk-HDCV4ACN.js";
-import "./chunks/chunk-VIB7OX7D.js";
+} from "./chunks/chunk-MVUHHKBL.js";
 export {
   Logo,
   WarmBrandedLogoLink,

package/dist/product-header.js

@@ -1,8 +1,8 @@
+import "./entries/product-header.css";
 import {
   ProductHeader,
   ProductHeaderBreadcrumb
-} from "./chunks/chunk-PBWF6BDE.js";
-import "./chunks/chunk-VIB7OX7D.js";
+} from "./chunks/chunk-DOOSH3V6.js";
 export {
   ProductHeader,
   ProductHeaderBreadcrumb

package/dist/product-header.types.d.ts

@@ -1,10 +1,11 @@
-import type { ReactNode, Ref } from 'react';
+import type { ReactNode, Ref } from "react";
 
-export type ProductHeaderVisibility = 'always' | 'container' | 'desktop';
+export type ProductHeaderVisibility = "always" | "container" | "desktop";
 
 export interface ProductHeaderBreadcrumbProps {
   pageTitle?: string | undefined;
   productName?: string | undefined;
+  homeHref?: string | undefined;
 }
 
 export interface ProductHeaderProps extends ProductHeaderBreadcrumbProps {

package/dist/sheet.js

@@ -1,3 +1,4 @@
+import "./entries/sheet.css";
 import {
   SheetClose,
   SheetContent,
@@ -6,11 +7,12 @@ import {
   SheetHeader,
   SheetTitle,
   SheetTrigger
-} from "./chunks/chunk-MIMC4M6W.js";
+} from "./chunks/chunk-PJUNSOJK.js";
 import {
   Sheet
-} from "./chunks/chunk-YTDMREDR.js";
-import "./chunks/chunk-VIB7OX7D.js";
+} from "./chunks/chunk-EIEA5RJJ.js";
+import "./chunks/chunk-RVVHR7RY.js";
+import "./chunks/chunk-K36HD5J5.js";
 export {
   Sheet,
   SheetClose,

package/dist/sidebar.css

@@ -0,0 +1,129 @@
+[data-sidebar-navigation-collapsed] {
+  display: none;
+}
+
+@media (width >= 48rem) and (width < 80rem) {
+  [data-force-icon-at-tablet='true'] [data-sidebar-navigation-expanded] {
+    display: none;
+  }
+
+  [data-force-icon-at-tablet='true'] [data-sidebar-navigation-collapsed] {
+    display: block;
+  }
+
+  [data-force-icon-at-tablet='true']
+    [data-slot='sidebar'][data-variant='floating']
+    [data-slot='sidebar-gap'],
+  [data-force-icon-at-tablet='true']
+    [data-slot='sidebar'][data-variant='inset']
+    [data-slot='sidebar-gap'] {
+    width: calc(var(--sidebar-width-icon) + (var(--spacing) * 8) + 2px);
+    transition: width var(--motion-duration-slow) linear;
+  }
+
+  [data-force-icon-at-tablet='true']
+    [data-slot='sidebar'][data-variant='floating']
+    [data-slot='sidebar-container'],
+  [data-force-icon-at-tablet='true']
+    [data-slot='sidebar'][data-variant='inset']
+    [data-slot='sidebar-container'] {
+    width: calc(var(--sidebar-width-icon) + (var(--spacing) * 8) + 2px);
+    padding: calc(var(--spacing) * 4);
+    transition: width var(--motion-duration-slow) linear;
+  }
+
+  [data-force-icon-at-tablet='true'] [data-slot='sidebar-content'] {
+    overflow: hidden;
+  }
+
+  [data-force-icon-at-tablet='true'] [data-slot='sidebar-group'] {
+    align-items: center;
+    padding-inline: calc(var(--spacing) * 2);
+  }
+
+  [data-force-icon-at-tablet='true'] [data-slot='sidebar-group-label'] {
+    display: none;
+  }
+
+  [data-force-icon-at-tablet='true'] [data-slot='sidebar-menu'] {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  [data-force-icon-at-tablet='true'] [data-slot='sidebar-menu-item'] {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+  }
+
+  [data-force-icon-at-tablet='true']
+    [data-slot='sidebar-menu-button']:not([data-presentation='sidebarIcon']) {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+    margin-inline: auto;
+    justify-content: center;
+    gap: 0;
+    padding: calc(var(--spacing) * 2);
+  }
+
+  [data-force-icon-at-tablet='true']
+    [data-slot='sidebar-menu-button']
+    > span:not([aria-hidden='true']),
+  [data-force-icon-at-tablet='true']
+    [data-slot='sidebar-menu-button']
+    [data-slot='sidebar-account-label'],
+  [data-force-icon-at-tablet='true']
+    [data-slot='sidebar-menu-button']
+    [data-slot='sidebar-account-email'],
+  [data-force-icon-at-tablet='true'] [data-sidebar-account-chevron],
+  [data-force-icon-at-tablet='true'] [data-slot='sidebar-menu-badge'] {
+    display: none;
+  }
+
+  [data-force-icon-at-tablet='true'] [data-slot='sidebar-brand'] {
+    justify-content: center;
+    padding-inline: 0;
+  }
+
+  [data-force-icon-at-tablet='true'] [data-sidebar-brand-mark] {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
+
+  [data-force-icon-at-tablet='true'] [data-sidebar-brand-mark] > :first-child {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+    opacity: 0;
+  }
+
+  [data-force-icon-at-tablet='true'] [data-sidebar-brand-collapsed] {
+    display: flex;
+  }
+
+  [data-force-icon-at-tablet='true'] [data-sidebar-utility-controls] {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing) * 2);
+  }
+
+  [data-force-icon-at-tablet='true'] [data-sidebar-account-collapsed] {
+    display: flex;
+    justify-content: center;
+  }
+
+  [data-force-icon-at-tablet='true'] [data-sidebar-account-expanded] {
+    display: none;
+  }
+}
+
+[data-visually-hidden] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+}

package/dist/sidebar.js

@@ -1,3 +1,4 @@
+import "./entries/sidebar.css";
 import {
   Sidebar,
   SidebarAccountTrigger,
@@ -16,9 +17,12 @@ import {
   SidebarProvider,
   SidebarTrigger,
   useSidebar
-} from "./chunks/chunk-FW2EHGRK.js";
-import "./chunks/chunk-YTDMREDR.js";
-import "./chunks/chunk-VIB7OX7D.js";
+} from "./chunks/chunk-FKGHMPVW.js";
+import "./chunks/chunk-L6L3GVGM.js";
+import "./chunks/chunk-DHV2A22F.js";
+import "./chunks/chunk-EIEA5RJJ.js";
+import "./chunks/chunk-RVVHR7RY.js";
+import "./chunks/chunk-K36HD5J5.js";
 export {
   Sidebar,
   SidebarAccountTrigger,

package/dist/text.css

@@ -0,0 +1,121 @@
+[data-text-variant='heading'] {
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body);
+  font-weight: 500;
+  line-height: 1.25;
+}
+
+[data-text-variant='heading'][data-text-element='h1'] {
+  display: block;
+  font-size: var(--type-size-display);
+}
+
+[data-text-variant='heading'][data-text-element='h2'] {
+  font-size: var(--type-size-display);
+}
+
+[data-text-variant='metric'] {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: var(--type-size-display);
+  line-height: 1.25;
+}
+
+[data-text-variant='body'] {
+  font-size: var(--type-size-body);
+  line-height: 1.25;
+}
+
+[data-text-variant='body'][data-text-size='large'] {
+  font-size: var(--type-size-large);
+}
+
+[data-text-variant][data-text-size='display'] {
+  font-size: var(--type-size-display);
+}
+
+[data-text-variant='caption'] {
+  font-size: var(--type-size-caption);
+  line-height: 1.25;
+}
+
+[data-mono] {
+  font-family: var(--font-mono);
+  letter-spacing: normal;
+}
+
+[data-text-tone='muted'] {
+  color: var(--muted-foreground);
+}
+
+[data-text-tone='foreground'] {
+  color: var(--foreground);
+}
+
+[data-text-tone='primary'] {
+  color: var(--primary);
+}
+
+[data-text-tone='success'] {
+  color: var(--success);
+}
+
+[data-text-tone='warning'] {
+  color: var(--warning);
+}
+
+[data-text-tone='financeCash'] {
+  color: var(--finance-cash);
+}
+
+[data-text-tone='financeDebt'] {
+  color: var(--finance-debt);
+}
+
+[data-text-tone='financeInvestment'] {
+  color: var(--finance-investment);
+}
+
+[data-text-align='start'] {
+  text-align: left;
+}
+
+[data-text-align='center'] {
+  text-align: center;
+}
+
+[data-text-align='end'] {
+  text-align: right;
+}
+
+:where([data-numeric='true']) {
+  font-family: var(--font-mono);
+  letter-spacing: normal;
+}
+
+[data-text-variant][data-text-numeric],
+[data-numeric='true'] {
+  font-variant-numeric: tabular-nums;
+}
+
+[data-text-variant][data-text-truncate],
+[data-truncate='true'] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+[data-text-line] {
+  display: block;
+}
+
+[data-presentation='dashboard'][data-text-line='first'],
+[data-presentation='welcome'][data-text-line='second'] {
+  color: var(--foreground);
+}
+
+[data-presentation='welcome'][data-text-line='first'],
+[data-presentation='dashboard'][data-text-line='second'] {
+  color: var(--muted-foreground);
+}

package/dist/text.js

@@ -1,8 +1,8 @@
+import "./entries/text.css";
 import {
   StackedDisplay,
   Text
-} from "./chunks/chunk-4RQCHKAW.js";
-import "./chunks/chunk-VIB7OX7D.js";
+} from "./chunks/chunk-W24JGQWM.js";
 export {
   StackedDisplay,
   Text

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@warmio/ui",
-  "version": "1.4.0",
+  "version": "2.0.0",
   "description": "Portable, sealed React components for Warm products.",
   "license": "MIT",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "./dist/*.css",
+    "./dist/*.js",
+    "./dist/entries/*.css",
+    "./dist/chunks/*.css"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/jasonstockman/warm-app.git",
@@ -17,7 +22,8 @@
   "files": [
     "dist",
     "types",
-    "README.md"
+    "README.md",
+    "LICENSES"
   ],
   "exports": {
     ".": {
@@ -55,6 +61,8 @@
       "import": "./dist/sidebar.js",
       "default": "./dist/sidebar.js"
     },
+    "./sidebar.css": "./dist/sidebar.css",
+    "./entries/*": "./dist/entries/*",
     "./sheet": {
       "types": "./types/sheet.d.ts",
       "import": "./dist/sheet.js",
@@ -64,15 +72,17 @@
       "types": "./types/text.d.ts",
       "import": "./dist/text.js",
       "default": "./dist/text.js"
-    }
+    },
+    "./text.css": "./dist/text.css"
   },
   "peerDependencies": {
     "@base-ui/react": ">=1.6.0 <2.0.0",
-    "@warmio/design": "1.6.0",
+    "@warmio/design": "2.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cuelume": "0.1.0",
     "lucide-react": ">=0.562.0 <2.0.0",
+    "motion": "^12.42.2",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "tailwind-merge": ">=3.6.0 <4.0.0"

package/types/badge.d.ts

@@ -4,19 +4,27 @@ import type { AriaAttributes, ReactNode } from 'react';
 export type FeedbackTone = 'default' | 'info' | 'success' | 'warning' | 'destructive';
 export type FeedbackSize = 'sm' | 'default';
 
-export type BadgeProps = {
+export type BadgeToneProps = {
   tone?: FeedbackTone;
   size?: FeedbackSize;
   shape?: 'pill' | 'circle';
+  emphasis?: 'subtle' | 'solid';
+};
+
+export type BadgeLayoutProps = {
   surface?: 'default' | 'floating';
   placement?: 'inline' | 'top-end';
-  emphasis?: 'subtle' | 'solid';
   width?: 'auto' | 'metric' | 'compact';
   truncate?: boolean;
+};
+
+export type BadgeContentProps = {
   children?: ReactNode;
   numeric?: boolean;
   id?: string;
   'aria-label'?: AriaAttributes['aria-label'];
 };
 
+export type BadgeProps = BadgeToneProps & BadgeLayoutProps & BadgeContentProps;
+
 export declare function Badge(props: BadgeProps): ReactNode;

package/types/button.d.ts

@@ -1,9 +1,65 @@
-export {
-  Button,
-  ButtonLink,
-  type ButtonLinkProps,
-  type ButtonPresentation,
-  type ButtonProps,
-  type ButtonSize,
-  type ButtonVariant,
-} from '@warmio/design/button';
+import type {
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  ForwardRefExoticComponent,
+  RefAttributes,
+} from 'react';
+
+export type ButtonPresentation =
+  | 'assistantIcon'
+  | 'assistantRoundIcon'
+  | 'composerIcon'
+  | 'default'
+  | 'headerAction'
+  | 'compact'
+  | 'controlPeer'
+  | 'editPill'
+  | 'hero'
+  | 'menuOption'
+  | 'promptCategory'
+  | 'promptOption'
+  | 'sidebarIcon'
+  | 'tableHeader'
+  | 'tableHeaderLink'
+  | 'threadMore'
+  | 'threadNew'
+  | 'touch';
+
+export type ButtonVariant = 'default' | 'outline' | 'ghost' | 'destructive' | 'apple' | 'arrow';
+
+export type ButtonSize = 'compact' | 'default' | 'jumbo' | 'icon';
+
+export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style'> & {
+  asChild?: never;
+  className?: never;
+  presentation?: ButtonPresentation;
+  render?: never;
+  size?: ButtonSize;
+  style?: never;
+  variant?: ButtonVariant;
+  width?: 'full';
+};
+
+export type ButtonLinkProps = Omit<
+  AnchorHTMLAttributes<HTMLAnchorElement>,
+  'className' | 'disabled' | 'style'
+> & {
+  href: string;
+  presentation?: ButtonPresentation;
+  size?: ButtonSize;
+  variant?: ButtonVariant;
+  width?: 'full';
+  asChild?: never;
+  className?: never;
+  disabled?: never;
+  render?: never;
+  style?: never;
+};
+
+export declare const Button: ForwardRefExoticComponent<
+  ButtonProps & RefAttributes<HTMLButtonElement>
+>;
+
+export declare const ButtonLink: ForwardRefExoticComponent<
+  ButtonLinkProps & RefAttributes<HTMLAnchorElement>
+>;