devnonla-ui 0.2.0 → 0.4.0

package/src/styles.css

@@ -232,6 +232,8 @@
   --color-ink-active: var(--ink-active);
   --color-ink-line: var(--ink-line);
   --color-chat: var(--nonla-chat-bg);
+  --color-well: color-mix(in oklab, var(--foreground) 5.5%, var(--card));
+  --color-well-strong: color-mix(in oklab, var(--foreground) 10%, var(--card));
 
   --shadow-card: none;
   --shadow-whisper: none;
@@ -402,7 +404,7 @@
   }
 }
 
-/* ── Spin: agent / subAgent (3×3 random snake — color only) ─────────────── */
+/* ── Spin: agent (3×3 random snake) ────────────────────────────────────── */
 .nonla-spin-matrix {
   align-content: center;
   justify-content: center;
@@ -413,12 +415,12 @@
   width: 100%;
   height: 100%;
   border-radius: 999px;
-  background: var(--nonla-chip-hover);
+  background: color-mix(in oklab, var(--brand) 10%, transparent);
   transition: background 120ms linear;
 }
 
 .nonla-spin-matrix-cell.is-on {
-  background: var(--nonla-ink);
+  background: var(--brand);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -864,6 +866,14 @@
   animation: nonla-pop-out 100ms var(--nonla-ease-in);
 }
 
+.nonla-chat-tool-result-ok {
+  background-image: linear-gradient(
+    165deg,
+    color-mix(in oklab, var(--success) 14%, var(--card)) 0%,
+    color-mix(in oklab, var(--success) 5%, var(--card)) 100%
+  );
+}
+
 .nonla-codeblock-pre code,
 .nonla-codeblock-pre .hljs {
   color: var(--foreground);
@@ -949,3 +959,18 @@
 .group\/scroll:hover .nonla-overlay-thumb {
   background: var(--nonla-scrollbar-thumb-hover);
 }
+
+.nonla-color-checkered {
+  background-color: #fff;
+  background-image: conic-gradient(#d9d9d9 0.25turn, #fff 0.25turn 0.5turn, #d9d9d9 0.5turn 0.75turn, #fff 0.75turn);
+  background-size: 8px 8px;
+}
+
+.nonla-color-cleared {
+  background: linear-gradient(
+    to bottom left,
+    transparent calc(50% - 1px),
+    var(--destructive) calc(50% - 1px) calc(50% + 1px),
+    transparent calc(50% + 1px)
+  );
+}

package/src/switch/Switch.tsx

@@ -1,5 +1,5 @@
 import * as SwitchPrimitive from "@radix-ui/react-switch";
-import { type CSSProperties, type ComponentPropsWithoutRef, forwardRef } from "react";
+import { type ComponentPropsWithoutRef, type CSSProperties, forwardRef } from "react";
 import { cn } from "../lib/cn";
 import { type ControlSize, controlRadiusVar, useControlSize } from "../lib/sizes";
 

package/src/table/Table.tsx

@@ -3,7 +3,7 @@ import { Checkbox } from "../checkbox/Checkbox";
 import { Empty } from "../empty/Empty";
 import { cn } from "../lib/cn";
 import { type CanonicalSize, type ControlSize, useControlSize } from "../lib/sizes";
-import { Pagination } from "../pagination/Pagination";
+import { Pagination, type PaginationProps } from "../pagination/Pagination";
 import { Spin } from "../spin/Spin";
 
 export type SortOrder = "ascend" | "descend" | null;
@@ -29,14 +29,29 @@ export type ColumnType<T> = {
 
 export type ColumnsType<T> = ColumnType<T>[];
 
-export type TablePaginationConfig = {
-  current?: number;
-  pageSize?: number;
-  total?: number;
-  onChange?: (page: number, pageSize: number) => void;
-  hideOnSinglePage?: boolean;
-  className?: string;
-};
+export type TablePaginationConfig = Pick<
+  PaginationProps,
+  | "align"
+  | "current"
+  | "defaultCurrent"
+  | "pageSize"
+  | "defaultPageSize"
+  | "total"
+  | "onChange"
+  | "onShowSizeChange"
+  | "hideOnSinglePage"
+  | "className"
+  | "showSizeChanger"
+  | "showQuickJumper"
+  | "showTotal"
+  | "simple"
+  | "disabled"
+  | "size"
+  | "pageSizeOptions"
+  | "showLessItems"
+  | "showTitle"
+  | "itemRender"
+>;
 
 export type TableRowSelection<T> = {
   selectedRowKeys?: Key[];
@@ -157,8 +172,8 @@ export function Table<T extends object = Record<string, unknown>>({ columns = []
   const [innerSelected, setInnerSelected] = useState<Key[]>(() => rowSelection?.defaultSelectedRowKeys ?? []);
   const selectedKeys = selectionControlled ? (rowSelection?.selectedRowKeys ?? []) : innerSelected;
 
-  const [innerPage, setInnerPage] = useState(1);
-  const [innerPageSize, setInnerPageSize] = useState(10);
+  const [innerPage, setInnerPage] = useState(() => (typeof pagination === "object" && pagination?.defaultCurrent) || 1);
+  const [innerPageSize, setInnerPageSize] = useState(() => (typeof pagination === "object" && pagination?.defaultPageSize) || 10);
 
   const initialSort = useMemo(() => {
     const col = columns.find((c) => c.defaultSortOrder);
@@ -179,8 +194,9 @@ export function Table<T extends object = Record<string, unknown>>({ columns = []
   const paginationOff = pagination === false;
   const pageConfig: TablePaginationConfig = paginationOff ? {} : (pagination ?? {});
   const pageControlled = pageConfig.current !== undefined;
+  const pageSizeControlled = pageConfig.pageSize !== undefined;
   const current = pageControlled ? (pageConfig.current ?? 1) : innerPage;
-  const pageSize = pageConfig.pageSize ?? (pageControlled ? 10 : innerPageSize);
+  const pageSize = pageSizeControlled ? (pageConfig.pageSize ?? 10) : innerPageSize;
   const serverSide = pageConfig.total !== undefined;
 
   const sortedData = useMemo(() => {
@@ -227,10 +243,8 @@ export function Table<T extends object = Record<string, unknown>>({ columns = []
   };
 
   const handlePageChange = (page: number, nextSize: number) => {
-    if (!pageControlled) {
-      setInnerPage(page);
-      setInnerPageSize(nextSize);
-    }
+    if (!pageControlled) setInnerPage(page);
+    if (!pageSizeControlled) setInnerPageSize(nextSize);
     pageConfig.onChange?.(page, nextSize);
     onChange?.({ current: page, pageSize: nextSize, total }, {}, { columnKey: sortState.key ?? undefined, order: sortState.order });
   };
@@ -377,8 +391,19 @@ export function Table<T extends object = Record<string, unknown>>({ columns = []
       </Spin>
 
       {showPagination ? (
-        <div className={cn("mt-4 flex justify-end", pageConfig.className)}>
-          <Pagination current={current} pageSize={pageSize} total={total} size={size} onChange={handlePageChange} />
+        <div className={cn("mt-4", pageConfig.className)}>
+          <Pagination
+            {...pageConfig}
+            className={undefined}
+            hideOnSinglePage={false}
+            align={pageConfig.align ?? "end"}
+            current={current}
+            pageSize={pageSize}
+            total={total}
+            size={pageConfig.size ?? "small"}
+            showSizeChanger={pageConfig.showSizeChanger ?? false}
+            onChange={handlePageChange}
+          />
         </div>
       ) : null}
     </div>

package/src/timepicker/TimePicker.tsx

@@ -2,11 +2,11 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 import {
   type CSSProperties,
   type FocusEvent,
+  Fragment,
+  forwardRef,
   type KeyboardEvent,
   type MouseEvent,
   type PointerEvent,
-  Fragment,
-  forwardRef,
   useCallback,
   useEffect,
   useRef,