tinywidgets 1.3.5 → 1.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinywidgets",
-  "version": "1.3.5",
+  "version": "1.3.7",
   "author": "jamesgpearce",
   "repository": "github:tinyplex/tinywidgets",
   "license": "MIT",

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

@@ -15,7 +15,7 @@ export const flyout = style({
   overflow: 'auto',
   backgroundColor: colors.background,
   position: 'absolute',
-  top: 'calc(2rem+2px)',
+  top: 'calc(2rem + 2px)',
   left: 0,
 });
 

package/src/components/Flyout/index.tsx

@@ -33,11 +33,26 @@ const supportsAnchors = CSS.supports('anchor-name', '--');
  *   <p>We hope you enjoy TinyWidgets</p>
  * </Flyout>
  * ```
- * This example shows a simple card.
+ * This example shows a flyout from a simple button.
+ * @example
+ * ```tsx
+ * <Flyout
+ *   title="Toggle"
+ *   icon={Lucide.LucidePanelTopOpen}
+ *   openIcon={Lucide.LucidePanelTopClose}
+ *   startOpen={true}
+ * >
+ *   <p>We hope you enjoy TinyWidgets</p>
+ * </Flyout>
+ * ```
+ * This example shows a flyout, starting off open, with a title on the button,
+ * and with a different icon for open and closed states.
  * @icon Lucide.LucideArrowDownSquare
  */
 export const Flyout = ({
   icon,
+  openIcon,
+  title,
   variant,
   startOpen,
   id = '',
@@ -49,6 +64,16 @@ export const Flyout = ({
    * className prop.
    */
   readonly icon: ComponentType<{className?: string}>;
+  /**
+   * An optional icon to show when the flyout is open, and which must accept a
+   * className prop.
+   */
+  readonly openIcon?: ComponentType<{className?: string}>;
+  /**
+   * An optional component, element, or string which renders the title of
+   * the button.
+   */
+  readonly title?: ComponentType | ReactNode;
   /**
    * A variant of the button used for the flyout, one of:
    * - `default`
@@ -91,8 +116,9 @@ export const Flyout = ({
   const portal = usePortal();
 
   const buttonProps = {
-    icon: icon,
-    variant: variant,
+    icon: isOpen ? (openIcon ?? icon) : icon,
+    title,
+    variant,
     onClick: handleClick,
   };
   return supportsAnchors ? (

package/src/css/colors.css.ts

@@ -16,6 +16,7 @@ import {
  * - `accentLight`
  * - `accentHover`
  * - `accentContrast`
+ * - `accentBright`
  * - `background`
  * - `background2`
  * - `backgroundHaze`
@@ -71,6 +72,7 @@ export const colors = createThemeContract({
   accentLight: null,
   accentHover: null,
   accentContrast: null,
+  accentBright: null,
   background: null,
   background2: null,
   backgroundHaze: null,
@@ -95,6 +97,7 @@ const common = {
   accent: `oklch(50% .11 ${colors.accentHue})`,
   accentLight: `oklch(71% .16 ${colors.accentHue})`,
   accentHover: `oklch(45% .1 ${colors.accentHue})`,
+  accentBright: `oklch(57.37% 0.2178 ${colors.accentHue})`,
   accentContrast: '#fff',
 };