tinywidgets 1.6.0 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinywidgets",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "author": "jamesgpearce",
   "repository": "github:tinyplex/tinywidgets",
   "license": "MIT",
@@ -19,30 +19,30 @@
     "prePublishPackage": "prettier --check . && eslint . && cspell --quiet . && tsc && cp ../README.md ./README.md"
   },
   "devDependencies": {
-    "@eslint/js": "^9.30.1",
-    "@types/react": "^19.2.14",
+    "@eslint/js": "^10.0.1",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "cspell": "^10.0.0",
-    "eslint": "^9.30.1",
+    "cspell": "^10.0.1",
+    "eslint": "^10.6.0",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "globals": "^17.5.0",
-    "prettier": "^3.8.3",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "globals": "^17.7.0",
+    "prettier": "^3.9.4",
     "prettier-plugin-organize-imports": "^4.3.0",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.58.2"
+    "typescript-eslint": "^8.62.1"
   },
   "exports": {
     ".": "./src/index.ts",
     "./css": "./src/index.css.ts"
   },
   "dependencies": {
-    "@vanilla-extract/css": "^1.20.1",
-    "lucide-react": "^1.8.0",
-    "tinybase": "^8.2.0"
+    "@vanilla-extract/css": "^1.21.1",
+    "lucide-react": "^1.23.0",
+    "tinybase": "^9.0.0"
   },
   "peerDependencies": {
     "react": "^19.2.4",

package/src/components/Card/index.css.ts

@@ -1,6 +1,12 @@
-import {style} from '@vanilla-extract/css';
+import {style, styleVariants} from '@vanilla-extract/css';
 import {colors} from '../../css/colors.css';
 import {dimensions} from '../../css/dimensions.css';
+import {
+  buttonOpen,
+  collapsible,
+  collapsibleOpen,
+  content,
+} from '../Collapsible/index.css';
 
 export const card = style({
   border: colors.border,
@@ -10,3 +16,63 @@ export const card = style({
   overflow: 'auto',
   padding: dimensions.padding,
 });
+
+export const titledCard = style([collapsible, collapsibleOpen]);
+
+const titleButtonBase = style([
+  buttonOpen,
+  {
+    alignItems: 'center',
+    alignSelf: 'center',
+    backgroundColor: colors.backgroundHover,
+    border: colors.border,
+    borderRadius: dimensions.radius,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    boxShadow: 'none',
+    color: colors.foregroundBright,
+    display: 'inline-flex',
+    flexShrink: 0,
+    fontFamily: 'inherit',
+    fontWeight: 'inherit',
+    gap: dimensions.padding,
+    justifyContent: 'space-between',
+    lineHeight: 'normal',
+    margin: '-1px',
+    outlineOffset: '-2px',
+    overflow: 'hidden',
+    padding: '0.5rem 1rem',
+    textAlign: 'left',
+    transition: 'background-color 0.1s,border-color 0.1s',
+    whiteSpace: 'nowrap',
+  },
+]);
+
+export const titleButton = styleVariants({
+  closable: [
+    titleButtonBase,
+    {
+      cursor: 'pointer',
+      selectors: {
+        '&:hover': {
+          backgroundColor: colors.backgroundHover,
+          color: colors.foregroundBright,
+        },
+      },
+    },
+  ],
+  static: [titleButtonBase],
+});
+
+export const title = style({
+  flex: '1 1 auto',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});
+
+export const titleRight = style({
+  flex: '0 0 auto',
+  overflow: 'hidden',
+});
+
+export const titledCardContent = style([content]);

package/src/components/Card/index.tsx

@@ -1,9 +1,20 @@
-import type {ReactNode} from 'react';
-import {classNames} from '../../common/functions';
-import {card} from './index.css';
+import {X} from 'lucide-react';
+import type {ComponentType, ReactNode} from 'react';
+import {classNames, renderComponentOrNode} from '../../common/functions';
+import {iconSize} from '../../css/dimensions.css';
+import {
+  card,
+  titleButton,
+  titledCard,
+  titledCardContent,
+  title as titleStyle,
+  titleRight as titleStyleRight,
+} from './index.css';
 
 /**
- * The `Card` component displays a simple rectangular container.
+ * The `Card` component displays a simple rectangular container. If a `title `
+ * prop is provided, it is displayed in the same style as a `Collapsible`
+ * component, but without the collapsible behavior.
  *
  * @param props The props for the component.
  * @returns The Card component.
@@ -16,12 +27,55 @@ import {card} from './index.css';
  * </Card>
  * ```
  * This example shows a simple card.
+ * @example
+ * ```tsx
+ * <Card
+ *   title="TinyWidgets"
+ *   icon={Lucide.Grid3x3}
+ * >
+ *   <p>Always open</p>
+ * </Card>
+ * ```
+ * This example shows a titled card.
+ * @example
+ * ```tsx
+ * <Card
+ *   title="TinyWidgets"
+ *   onClose={() => console.log('Closed')}
+ * >
+ *   <p>Close me</p>
+ * </Card>
+ * ```
+ * This example shows a card with a close button.
  * @icon Lucide.Square
  */
 export const Card = ({
+  icon: Icon,
+  title,
+  titleRight,
+  onClose,
   className,
   children,
 }: {
+  /**
+   * An optional component which renders an icon for the top of the card, and
+   * which must accept a className prop.
+   */
+  readonly icon?: ComponentType<{className?: string}>;
+  /**
+   * An optional component, element, or string which renders the title of
+   * the top of the card.
+   */
+  readonly title?: ComponentType | ReactNode;
+  /**
+   * An optional component, element, or string which renders a second title
+   * on the right side of the top of the card.
+   */
+  readonly titleRight?: ComponentType | ReactNode;
+  /**
+   * A handler called when the user clicks on the close button.
+   */
+  readonly onClose?: () => void;
   /**
    * An extra CSS class name for the component.
    */
@@ -30,4 +84,31 @@ export const Card = ({
    * The children of the component that go inside the card.
    */
   readonly children: ReactNode;
-}) => <div className={classNames(card, className)}>{children}</div>;
+}) => {
+  const hasHeader =
+    Icon != null || title != null || titleRight != null || onClose != null;
+
+  return hasHeader ? (
+    <div className={classNames(titledCard, className)}>
+      <div
+        className={titleButton[onClose ? 'closable' : 'static']}
+        onClick={onClose}
+        {...(onClose ? {title: 'Close'} : {})}
+      >
+        {Icon ? <Icon className={iconSize} /> : null}
+        {title ? (
+          <span className={titleStyle}>{renderComponentOrNode(title)}</span>
+        ) : null}
+        {titleRight ? (
+          <span className={titleStyleRight}>
+            {renderComponentOrNode(titleRight)}
+          </span>
+        ) : null}
+        {onClose ? <X className={iconSize} /> : null}
+      </div>
+      <div className={titledCardContent}>{children}</div>
+    </div>
+  ) : (
+    <div className={classNames(card, className)}>{children}</div>
+  );
+};