@surflane/ui 0.3.0 → 0.4.0

package/dist/toast.js

@@ -5,21 +5,21 @@ import { useComponentSize } from './sizing.js';
 import { Toast as BaseToast } from '@base-ui/react/toast';
 import { part, skin } from './parts.js';
 import { StatusIcon } from './status.js';
-const ToneContext = React.createContext('neutral');
-const Root = React.forwardRef(function Root({ tone = 'neutral', className, ...props }, ref) {
+const ToneContext = /* @__PURE__ */ React.createContext('neutral');
+const Root = /* @__PURE__ */ React.forwardRef(function Root({ tone = 'neutral', className, ...props }, ref) {
     return (_jsx(ToneContext.Provider, { value: tone, children: _jsx(BaseToast.Root, { ...props, ref: ref, "data-tone": tone, className: skin('pui-toast', className) }) }));
 });
-const Icon = React.forwardRef(function Icon({ tone, children, className, ...props }, ref) {
+const Icon = /* @__PURE__ */ React.forwardRef(function Icon({ tone, children, className, ...props }, ref) {
     const inherited = React.useContext(ToneContext);
     return (_jsx("span", { ...props, ref: ref, "aria-hidden": 'true', className: ['pui-toast-icon', className].filter(Boolean).join(' '), children: children ?? _jsx(StatusIcon, { tone: tone ?? inherited }) }));
 });
-const Close = React.forwardRef(function Close({ className, children, ...props }, ref) {
-    return (_jsx(BaseToast.Close, { "aria-label": 'Dismiss notification', "aria-hidden": false, "data-variant": 'ghost', "data-size": 'icon', ...props, ref: ref, className: skin('pui-button pui-toast-close', className), children: children ?? (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: 'm6 6 12 12M18 6 6 18' }) })) }));
+const Close = /* @__PURE__ */ React.forwardRef(function Close({ className, children, ...props }, ref) {
+    return (_jsx(BaseToast.Close, { "aria-label": 'Dismiss notification', "aria-hidden": false, "data-variant": 'ghost', "data-size": 'icon-sm', "data-ui-size": 'small', ...props, ref: ref, className: skin('pui-button pui-toast-close', className), children: children ?? (_jsx("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.6', "aria-hidden": 'true', children: _jsx("path", { d: 'm6 6 12 12M18 6 6 18' }) })) }));
 });
-const Action = React.forwardRef(function Action({ className, ...props }, ref) {
-    return (_jsx(BaseToast.Action, { "data-variant": 'outline', "data-size": 'sm', ...props, ref: ref, className: skin('pui-button pui-toast-action', className) }));
+const Action = /* @__PURE__ */ React.forwardRef(function Action({ className, ...props }, ref) {
+    return (_jsx(BaseToast.Action, { "data-variant": 'outline', "data-size": 'small', "data-ui-size": 'small', ...props, ref: ref, className: skin('pui-button pui-toast-action', className) }));
 });
-const Viewport = React.forwardRef(function Viewport({ layout = 'stack', className, ...props }, ref) {
+const Viewport = /* @__PURE__ */ React.forwardRef(function Viewport({ layout = 'stack', className, ...props }, ref) {
     const viewportRef = React.useRef(null);
     React.useLayoutEffect(() => {
         const viewport = viewportRef.current;
@@ -31,7 +31,7 @@ const Viewport = React.forwardRef(function Viewport({ layout = 'stack', classNam
             const gap = parseFloat(getComputedStyle(viewport).rowGap) || 0;
             const height = cards.reduce((sum, card) => {
                 const natural = parseFloat(getComputedStyle(card).getPropertyValue('--toast-height'));
-                return (sum + (Number.isFinite(natural) ? natural : card.offsetHeight));
+                return sum + (Number.isFinite(natural) ? natural : card.offsetHeight);
             }, 0) +
                 Math.max(0, cards.length - 1) * gap;
             const wasOverflow = viewport.hasAttribute('data-stack-overflow');
@@ -89,11 +89,11 @@ export const Toast = {
     Close,
     Action,
     Viewport,
-    Content: part(BaseToast.Content, 'pui-toast-content'),
-    Title: part(BaseToast.Title, 'pui-toast-title'),
-    Description: part(BaseToast.Description, 'pui-toast-description'),
-    Text: part('div', 'pui-toast-text'),
-    Positioner: part(BaseToast.Positioner, 'pui-positioner'),
+    Content: /* @__PURE__ */ part(BaseToast.Content, 'pui-toast-content'),
+    Title: /* @__PURE__ */ part(BaseToast.Title, 'pui-toast-title'),
+    Description: /* @__PURE__ */ part(BaseToast.Description, 'pui-toast-description'),
+    Text: /* @__PURE__ */ part('div', 'pui-toast-text'),
+    Positioner: /* @__PURE__ */ part(BaseToast.Positioner, 'pui-positioner'),
 };
 // Flat names for React Server Components, which cannot dot into client exports.
 export const { Action: ToastAction, Arrow: ToastArrow, Close: ToastClose, Content: ToastContent, Description: ToastDescription, Portal: ToastPortal, Positioner: ToastPositioner, Provider: ToastProvider, Root: ToastRoot, Title: ToastTitle, Viewport: ToastViewport, Icon: ToastIcon, Text: ToastText, } = Toast;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surflane/ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Surflane React components built on Base UI, with data, chart, code and Markdown components.",
   "keywords": [
     "design-system",
@@ -29,6 +29,7 @@
   "files": [
     "dist",
     "src/styles.css",
+    "src/all.css",
     "LICENSE-MIT",
     "LICENSE-APACHE"
   ],
@@ -38,6 +39,7 @@
       "import": "./dist/index.js"
     },
     "./styles.css": "./src/styles.css",
+    "./all.css": "./src/all.css",
     "./button": {
       "types": "./dist/button.d.ts",
       "import": "./dist/button.js"
@@ -74,6 +76,14 @@
       "types": "./dist/chart.d.ts",
       "import": "./dist/chart.js"
     },
+    "./date-picker": {
+      "types": "./dist/date-picker.d.ts",
+      "import": "./dist/date-picker.js"
+    },
+    "./tree": {
+      "types": "./dist/tree.d.ts",
+      "import": "./dist/tree.js"
+    },
     "./markdown": {
       "types": "./dist/markdown.d.ts",
       "import": "./dist/markdown.js"
@@ -82,6 +92,10 @@
       "types": "./dist/syntax-highlighter.d.ts",
       "import": "./dist/syntax-highlighter.js"
     },
+    "./syntax-highlighting": {
+      "types": "./dist/syntax-highlighting.d.ts",
+      "import": "./dist/syntax-highlighting.js"
+    },
     "./package.json": "./package.json"
   },
   "scripts": {
@@ -89,10 +103,50 @@
     "prepack": "npm run build"
   },
   "dependencies": {
-    "@base-ui/react": "1.9.0",
+    "@base-ui/react": "1.9.0"
+  },
+  "peerDependencies": {
+    "@headless-tree/core": "^1.8.0",
+    "@headless-tree/react": "^1.8.0",
+    "@surflane/design-tokens": "^0.4.0",
+    "@tanstack/react-virtual": "^3.14.21",
+    "react": "^19.0.0",
+    "react-aria-components": "^1.22.1",
+    "react-dom": "^19.0.0",
+    "react-markdown": "^10.1.0",
+    "recharts": "^3.10.1",
+    "remark-gfm": "^4.0.1",
+    "shiki": "^4.5.0"
+  },
+  "peerDependenciesMeta": {
+    "@headless-tree/core": {
+      "optional": true
+    },
+    "@headless-tree/react": {
+      "optional": true
+    },
+    "@tanstack/react-virtual": {
+      "optional": true
+    },
+    "react-aria-components": {
+      "optional": true
+    },
+    "react-markdown": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    },
+    "remark-gfm": {
+      "optional": true
+    },
+    "shiki": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
     "@headless-tree/core": "1.8.0",
     "@headless-tree/react": "1.8.0",
-    "@internationalized/date": "3.12.4",
     "@tanstack/react-virtual": "3.14.21",
     "react-aria-components": "1.22.1",
     "react-markdown": "10.1.0",
@@ -100,11 +154,6 @@
     "remark-gfm": "4.0.1",
     "shiki": "4.5.0"
   },
-  "peerDependencies": {
-    "@surflane/design-tokens": "^0.3.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  },
   "publishConfig": {
     "access": "public"
   }

package/src/all.css

@@ -0,0 +1,8 @@
+/* Every Surflane stylesheet in one import, in the recommended order: tokens, controls,
+ * composition, document typography and components. Each file keeps its cascade layer. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/design-tokens/controls.css';
+@import '@surflane/design-tokens/foundations.css';
+@import '@surflane/design-tokens/typography.css';
+@import './styles.css';