@tenphi/renderer 0.21.1 → 0.21.2

package/dist/components/TableOfContentsLayout.styles.js

@@ -0,0 +1,38 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const TableOfContentsLayoutRoot = defineComponent(
+  "TableOfContentsLayout",
+  {
+    as: "aside",
+    "data-element": "TableOfContentsLayout",
+    styles: {
+      display: { "": "", ":has(cookbook-mobile-toc)": "block" },
+      hide: {
+        "": false,
+        "@narrow-layout": true,
+        ":has(cookbook-mobile-toc)": false,
+      },
+      order: { "": "2", "@narrow-layout": "0" },
+      position: "relative",
+      inlineSize: {
+        "": "max($sidebar-width, calc($sidebar-width + (100% - $content-width - $sidebar-width) / 2))",
+        "@narrow-layout": "100%",
+      },
+      Content: {
+        $: ".right-sidebar",
+        position: { "": "sticky", "@narrow-layout": "static" },
+        blockInset: "$docs-nav-height start",
+        inlineSize: "100%",
+        blockSize: {
+          "": "(100vh - $docs-nav-height)",
+          "@narrow-layout": "auto",
+        },
+        overflowY: { "": "auto", "@narrow-layout": "visible" },
+        scrollbar: "none",
+      },
+    },
+  },
+);

package/dist/components/Tabs.astro

@@ -1,5 +1,5 @@
 ---
-import { TabsRoot } from "./TastyComponents.js";
+import { TabsRoot } from "./Tabs.styles.js";
 import type { TabsProps as Props } from "./props.js";
 const { label = "Examples" } = Astro.props;
 ---

package/dist/components/Tabs.styles.js

@@ -0,0 +1,60 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const TabsRoot = defineComponent("Tabs", {
+  as: "div",
+  "data-element": "Tabs",
+  styles: {
+    "$margin-block-start": "2x",
+    "$margin-block-end": "2x",
+    blockMargin: "$margin-block-start $margin-block-end",
+    inlineMargin: "0",
+    border: true,
+    radius: "1cr",
+    overflow: "clip",
+    fill: "#surface",
+    List: {
+      padding: "1x",
+      display: "flex",
+      gap: "1x",
+      overflow: "auto",
+      fill: "#surface-2",
+    },
+    Button: {
+      $: "> List > button",
+      "$margin-block-start": "0",
+      "$margin-block-end": "0",
+      blockMargin: "$margin-block-start $margin-block-end",
+      inlineMargin: "0",
+      preset: "navigation",
+      padding: "1x 2x",
+      border: "0",
+      radius: "1r",
+      color: "#text",
+      fill: "#clear",
+      cursor: "pointer",
+      whiteSpace: "nowrap",
+    },
+    SelectedButton: {
+      $: "> List > button",
+      color: {
+        "": null,
+        '@own([aria-selected="true"])': "#accent-surface-text",
+      },
+      fill: {
+        "": null,
+        '@own([aria-selected="true"])': "#accent-surface",
+      },
+    },
+    FocusedButton: {
+      $: "> List > button",
+      outline: {
+        "": null,
+        "@own(:focus-visible)": "2px #focus / -2px",
+      },
+    },
+  },
+  elements: { List: "div" },
+});

package/dist/components/ThemeSelect.styles.js

@@ -0,0 +1,177 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const ThemeSelectRoot = defineComponent("ThemeSelect", {
+  as: "cookbook-appearance-menu",
+  "data-element": "ThemeSelect",
+  styles: {
+    display: "flex",
+    flexShrink: "0",
+    "$popover-transition": "120ms",
+    Trigger: {
+      $: "> button",
+      display: "grid",
+      placeItems: "center",
+      inlineSize: {
+        "": "$control-height",
+        "@mobile": "$docs-menu-button-size",
+      },
+      blockSize: {
+        "": "$control-height",
+        "@mobile": "$docs-menu-button-size",
+      },
+      padding: "0",
+      color: "#text-soft",
+      fill: "#clear",
+      border: "0",
+      radius: "$header-control-radius",
+      transition: "color $transition, fill $transition",
+    },
+    HoverTrigger: {
+      $: "> button",
+      color: {
+        "": null,
+        "@own(:hover) | :has([popover]:popover-open)": "#text",
+      },
+      fill: {
+        "": null,
+        "@own(:hover) | :has([popover]:popover-open)": "#surface-2-hover",
+      },
+    },
+    ActiveTrigger: {
+      $: "> button",
+      color: { "": null, "@own(:active)": "#text" },
+      fill: { "": null, "@own(:active)": "#surface-2-pressed" },
+    },
+    Icon: {
+      $: "> button svg",
+      display: "block",
+      inlineSize: { "": "1.25rem", "@mobile": "1.125rem" },
+      blockSize: { "": "1.25rem", "@mobile": "1.125rem" },
+    },
+    Panel: {
+      $: "Panel",
+      position: "fixed",
+      inset: "auto",
+      blockInset: { "": "4rem start", "@mobile": "3.5rem start" },
+      inlineInset:
+        "max($docs-nav-pad-x, ((100vw - $layout-width) / 2 + $docs-sidebar-pad-x)) end",
+      inlineSize: "min(15rem, calc(100vw - 2 * $docs-nav-pad-x))",
+      blockSize: "max (100dvh - $docs-nav-height - $gap)",
+      overflowY: "auto",
+      margin: "0",
+      padding: "$gap",
+      color: "#text",
+      fill: "#surface-2",
+      border: true,
+      radius: "$card-radius",
+      shadow: "0 0.75rem 2rem #shadow",
+      opacity: "0",
+      scale: "1 0.96",
+      transformOrigin: "top",
+      transition: {
+        "": "none",
+        "!@reduced-motion":
+          "opacity $popover-transition ease-out, scale $popover-transition ease-out, display $popover-transition allow-discrete, overlay $popover-transition allow-discrete",
+      },
+    },
+    OpenPanel: {
+      $: '[data-element="Panel"]',
+      opacity: {
+        "": null,
+        "@own(@popover-open & [data-open])": "1",
+      },
+      scale: { "": null, "@own(@popover-open & [data-open])": "1" },
+    },
+    Section: {
+      $: "fieldset",
+      inlineSize: "min 0",
+      margin: "0",
+      padding: "0",
+      border: "0",
+    },
+    SectionSpacing: {
+      $: "fieldset + fieldset",
+      blockMargin: "$gap start",
+      blockPadding: "$gap start",
+      blockBorder: "$border-width solid #border start",
+    },
+    SectionLabel: {
+      $: "legend",
+      float: "inline-start",
+      inlineSize: "100%",
+      padding: "($gap * 0.75) $gap",
+      color: "#text-muted",
+      preset: "small / strong",
+    },
+    Option: {
+      $: "label",
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      gap: "$gap",
+      inlineSize: "100%",
+      blockSize: "min 2.25rem",
+      padding: "($gap * 0.75) $gap",
+      color: "#text-soft",
+      preset: "small",
+      radius: "$radius",
+      cursor: "pointer",
+    },
+    HoverOption: {
+      $: "label",
+      color: { "": null, "@own(:hover)": "#text" },
+      fill: { "": null, "@own(:hover)": "#surface-2-hover" },
+    },
+    CheckedOption: {
+      $: "label",
+      color: { "": null, "@own(:has(input:checked))": "#accent-text" },
+      fill: {
+        "": null,
+        "@own(:has(input:checked))": "#accent-surface-2-subtle",
+      },
+    },
+    FocusedOption: {
+      $: "label",
+      outline: {
+        "": null,
+        "@own(:has(input:focus-visible))": "$outline-width solid #focus / -2px",
+      },
+    },
+    Input: {
+      $: "input",
+      position: "absolute",
+      inlineSize: "1px",
+      blockSize: "0 1px",
+      padding: "0",
+      margin: "0",
+      overflow: "hidden",
+      clipPath: "inset(50%)",
+      whiteSpace: "nowrap",
+    },
+    OptionIcon: {
+      $: "label > svg",
+      display: "block",
+      flexShrink: "0",
+      inlineSize: "1rem",
+      blockSize: "1rem",
+    },
+    Checkmark: {
+      $: "label > svg",
+      inlineMargin: {
+        "": null,
+        "@own(:is(label > svg:last-child))": "auto start",
+      },
+      visibility: { "": null, "@own(:is(label > svg:last-child))": "hidden" },
+    },
+    SelectedCheckmark: {
+      $: "label > svg",
+      visibility: {
+        "": null,
+        "@own(:is(label:has(input:checked) > svg:last-child))": "visible",
+      },
+    },
+  },
+});

package/dist/components/TopNavigation.styles.js

@@ -0,0 +1,52 @@
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+export const TopNavigationRoot = defineComponent("TopNavigation", {
+  as: "nav",
+  "data-element": "TopNavigation",
+  styles: {
+    display: "flex",
+    hide: { "": false, "@mobile": true },
+    alignItems: "stretch",
+    gap: "clamp(1.25rem, 2.5vw, 2.5rem)",
+    inlineSize: "100%",
+    blockSize: "min 2.75rem",
+    blockBorder: "1bw solid #border start",
+    overflowX: "auto",
+    scrollbar: "none",
+
+    Scrollbar: { $: "&::-webkit-scrollbar", hide: true },
+    Link: {
+      $: "a",
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      flexGrow: "0",
+      flexShrink: "0",
+      flexBasis: "auto",
+      blockPadding: "($gap * 1.25) start, $gap end",
+      color: "#text-soft",
+      preset: "navigation",
+      textDecoration: "none",
+      whiteSpace: "nowrap",
+    },
+    HoverLink: { $: "a", color: { "": null, "@own(:hover)": "#text" } },
+    CurrentLink: {
+      $: "a",
+      color: { "": null, '@own([aria-current="page"])': "#accent-text" },
+    },
+    ActiveIndicator: {
+      // Tasty 3.9.3 appends @own states after pseudo-elements, producing invalid CSS.
+      // eslint-disable-next-line tasty/no-state-in-selector
+      $: 'a[aria-current="page"]::after',
+      content: '""',
+      position: "absolute",
+      inset: "auto 0 0",
+      blockSize: "2px",
+      radius: "999px",
+      fill: "#accent-surface",
+    },
+  },
+});

package/dist/components/VersionSwitcher.astro

@@ -3,7 +3,7 @@ import { messages } from "../localization.js";
 import { content } from "virtual:cookbook/config";
 import type { DocsRoute, SiteVersion } from "@tenphi/docs";
 import { versionLinks } from "../versioning.js";
-import { VersionSwitcherRoot } from "./LayoutComponents.js";
+import { VersionSwitcherRoot } from "./VersionSwitcher.styles.js";
 import SelectPopover from "./SelectPopover.astro";
 
 interface Props {
@@ -23,7 +23,7 @@ const { current, links } = versionLinks(
 const ui = messages(Astro.locals.cookbookRoute?.lang ?? "en", content);
 ---
 
-<VersionSwitcherRoot data-tasty-anatomy="VersionSwitcher">
+<VersionSwitcherRoot>
   <SelectPopover
     triggerLabel={`${ui.documentationVersion}: ${current?.label ?? ui.versions}`}
     selectedLabel={current?.label ?? ui.versions}

package/dist/components/VersionSwitcher.styles.js

@@ -0,0 +1,45 @@
+import { selectPopoverStyles } from "./select-popover-styles.js";
+import { configureCookbookStates } from "./tasty-states.js";
+import { defineComponent } from "../define-component.js";
+
+configureCookbookStates();
+
+const versionSelectStyles = selectPopoverStyles({
+  option: "Link",
+  hoverOption: "HoverLink",
+  currentOption: "CurrentLink",
+});
+
+export const VersionSwitcherRoot = defineComponent("VersionSwitcher", {
+  as: "div",
+  "data-element": "VersionSwitcher",
+  styles: {
+    // Reuse the shared, server-only popover anatomy.
+    // eslint-disable-next-line tasty/no-style-spread
+    ...versionSelectStyles,
+    display: "inline-flex",
+    flexShrink: "0",
+    Trigger: {
+      // Reuse the shared, server-only popover anatomy.
+      // eslint-disable-next-line tasty/no-style-spread
+      ...versionSelectStyles.Trigger,
+      blockSize: "min $control-height",
+      inlinePadding: "$gap",
+      fill: "#surface-2",
+      border: true,
+      preset: "small / strong",
+      anchorName: "--version-trigger",
+    },
+    Panel: {
+      // Reuse the shared, server-only popover anatomy.
+      // eslint-disable-next-line tasty/no-style-spread
+      ...versionSelectStyles.Panel,
+      positionAnchor: "--version-trigger",
+      blockInset: "(anchor(bottom) + $gap) start, auto end",
+      inlineInset: {
+        "": "anchor(left) start, auto end",
+        "@mobile": "auto start, anchor(right) end",
+      },
+    },
+  },
+});

package/dist/components/component-styles.test.ts

@@ -1,7 +1,6 @@
 import { afterEach, describe, expect, it } from "vitest";
 import {
   configureComponentStyles,
-  resolveComponentStyleOverride,
   resolveComponentStyles,
   unusedCustomStyleNames,
 } from "./component-styles.js";
@@ -27,15 +26,6 @@ describe("component style configuration", () => {
     });
   });
 
-  it("returns the user override for Tasty component composition", () => {
-    expect(resolveComponentStyleOverride("Card")).toBeUndefined();
-
-    configureComponentStyles({ Card: { padding: "3x" } });
-    expect(resolveComponentStyleOverride("Card")).toEqual({
-      padding: "3x",
-    });
-  });
-
   it("merges configuration into bridged component style trees", () => {
     configureComponentStyles({
       MarkdownTable: { Table: { radius: "0" } },

package/dist/components/component-styles.ts

@@ -36,10 +36,3 @@ export function unusedCustomStyleNames(
       !sharedConfiguration.__tenphiCookbookUsedComponentStyles?.has(name),
   );
 }
-
-export function resolveComponentStyleOverride(
-  name: string,
-): Styles | undefined {
-  return sharedConfiguration.__tenphiCookbookComponentStyles?.[name] as
-    Styles | undefined;
-}

package/dist/components/inherit-component-parts.d.ts

@@ -0,0 +1 @@
+export function inheritComponentParts<T>(base: object, extended: T): T;

package/dist/components/inherit-component-parts.js

@@ -0,0 +1,7 @@
+/** Tasty wrappers forward styles but do not copy compound component exports. */
+export function inheritComponentParts(base, extended) {
+  for (const [name, part] of Object.entries(base)) {
+    if (/^[A-Z]/.test(name)) extended[name] = part;
+  }
+  return extended;
+}

package/dist/components/select-popover-styles.js

@@ -18,9 +18,15 @@ export function selectPopoverStyles({
       cursor: "pointer",
     },
     HoverTrigger: {
-      $: "> button:hover, &:has([popover]:popover-open) > button",
-      color: "#text",
-      fill: "#surface-2-hover",
+      $: "> button",
+      color: {
+        "": null,
+        "@own(:hover) | :has([popover]:popover-open)": "#text",
+      },
+      fill: {
+        "": null,
+        "@own(:hover) | :has([popover]:popover-open)": "#surface-2-hover",
+      },
     },
     TriggerLabel: {
       $: ".trigger-label",
@@ -35,7 +41,7 @@ export function selectPopoverStyles({
       blockSize: "0.875rem",
     },
     Panel: {
-      $: "> [popover]",
+      $: '> [data-element="Panel"]',
       position: "fixed",
       inset: "auto",
       inlineSize: "min(15rem, calc(100vw - 2 * $docs-nav-pad-x))",
@@ -58,9 +64,12 @@ export function selectPopoverStyles({
       },
     },
     OpenPanel: {
-      $: "> [popover]:popover-open[data-open]",
-      opacity: "1",
-      scale: "1",
+      $: '> [data-element="Panel"]',
+      opacity: {
+        "": null,
+        "@own(@popover-open & [data-open])": "1",
+      },
+      scale: { "": null, "@own(@popover-open & [data-open])": "1" },
     },
     PanelTitle: {
       $: ".panel-title",
@@ -74,7 +83,7 @@ export function selectPopoverStyles({
       display: "flex",
       alignItems: "center",
       gap: "$gap",
-      minBlockSize: "2.25rem",
+      blockSize: "min 2.25rem",
       padding: "($gap * 0.75) $gap",
       color: "#text-soft",
       preset: "small",
@@ -82,14 +91,20 @@ export function selectPopoverStyles({
       radius: "$radius",
     },
     [hoverOption]: {
-      $: "nav a:hover",
-      color: "#text",
-      fill: "#surface-2-hover",
+      $: "nav a",
+      color: { "": null, "@own(:is(nav a:hover))": "#text" },
+      fill: { "": null, "@own(:is(nav a:hover))": "#surface-2-hover" },
     },
     [currentOption]: {
-      $: 'nav a[aria-current="page"]',
-      color: "#accent-text",
-      fill: "#accent-surface-2-subtle",
+      $: "nav a",
+      color: {
+        "": null,
+        '@own(:is(nav a[aria-current="page"]))': "#accent-text",
+      },
+      fill: {
+        "": null,
+        '@own(:is(nav a[aria-current="page"]))': "#accent-surface-2-subtle",
+      },
     },
     Checkmark: {
       $: "nav a > .checkmark",
@@ -100,8 +115,11 @@ export function selectPopoverStyles({
       visibility: "hidden",
     },
     SelectedCheckmark: {
-      $: 'nav a[aria-current="page"] > .checkmark',
-      visibility: "visible",
+      $: "nav a > .checkmark",
+      visibility: {
+        "": null,
+        '@own(:is(nav a[aria-current="page"] > .checkmark))': "visible",
+      },
     },
   };
 }

package/dist/components/tasty-states.js

@@ -1,8 +1,18 @@
 import { configure, getGlobalPredefinedStates } from "@tenphi/tasty";
 import { resolveTypographyPresets } from "../theme/defaults.js";
-import { TASTY_UNITS } from "../theme/tasty-config.js";
+import {
+  TASTY_UNITS,
+  TASTY_SPACING_PROPERTIES,
+} from "../theme/tasty-config.js";
+
+const systemLight = "@media(prefers-color-scheme: light)";
+const systemDark = "@media(prefers-color-scheme: dark)";
 
 export const cookbookStates = {
+  "@system-light": systemLight,
+  "@system-dark": systemDark,
+  "@light": `@root(theme=light) | (!@root(theme) & ${systemLight})`,
+  "@dark": `@root(theme=dark) | (!@root(theme) & ${systemDark})`,
   "@mobile": "@media(w < 50rem)",
   "@desktop": "@media(w >= 50rem)",
   "@small": "@media(w <= 40rem)",
@@ -12,6 +22,7 @@ export const cookbookStates = {
   "@narrow-layout": "@media(w < 72rem)",
   "@medium-layout": "@media(w >= 50rem) & @media(w < 72rem)",
   "@reduced-motion": "@media(prefers-reduced-motion: reduce)",
+  "@popover-open": ":is(:popover-open)",
 };
 
 let configured = false;
@@ -25,6 +36,7 @@ export function configureCookbookStates() {
   if (configured && configuredRuntime === runtime) return;
   configure({
     presets: resolveTypographyPresets(),
+    properties: TASTY_SPACING_PROPERTIES,
     ...runtime,
     units: { ...TASTY_UNITS, ...runtime?.units },
   });

package/dist/define-component-BP4YwMak.js

@@ -0,0 +1,28 @@
+import { n as resolveComponentStyles } from "./component-styles-DstqPFf3.js";
+import { tasty } from "@tenphi/tasty";
+//#region src/components/inherit-component-parts.js
+/** Tasty wrappers forward styles but do not copy compound component exports. */
+function inheritComponentParts(base, extended) {
+	for (const [name, part] of Object.entries(base)) if (/^[A-Z]/.test(name)) extended[name] = part;
+	return extended;
+}
+//#endregion
+//#region src/define-component.ts
+/** Extend a component's styles and defaults, preserving its props and compound parts. */
+function extendComponent(name, base, options) {
+	return inheritComponentParts(base, tasty(base, {
+		...options,
+		styles: resolveComponentStyles(name, options.styles ?? {})
+	}));
+}
+/** Create a named component with its built-in or custom theme styles merged into its defaults. */
+function defineComponent(name, options) {
+	return tasty({
+		...options,
+		styles: resolveComponentStyles(name, options.styles ?? {})
+	});
+}
+//#endregion
+export { extendComponent as n, defineComponent as t };
+
+//# sourceMappingURL=define-component-BP4YwMak.js.map

package/dist/define-component-BP4YwMak.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-component-BP4YwMak.js","names":[],"sources":["../src/components/inherit-component-parts.js","../src/define-component.ts"],"sourcesContent":["/** Tasty wrappers forward styles but do not copy compound component exports. */\nexport function inheritComponentParts(base, extended) {\n  for (const [name, part] of Object.entries(base)) {\n    if (/^[A-Z]/.test(name)) extended[name] = part;\n  }\n  return extended;\n}\n","import {\n  tasty,\n  type ElementsDefinition,\n  type ModPropsInput,\n  type StylesInterface,\n  type Styles,\n  type SubElementProps,\n  type TastyElementOptions,\n  type TastyPolymorphicComponent,\n  type TokenPropsInput,\n  type VariantMap,\n} from \"@tenphi/tasty\";\nimport type {\n  ComponentProps,\n  ComponentType,\n  ElementType,\n  ForwardRefExoticComponent,\n  JSX,\n  PropsWithoutRef,\n  RefAttributes,\n} from \"react\";\nimport { resolveComponentStyles } from \"./components/component-styles.js\";\nimport { inheritComponentParts } from \"./components/inherit-component-parts.js\";\n\ntype InheritedParts<C> = {\n  [\n    Name in keyof C as Name extends string\n      ? Name extends Capitalize<Name>\n        ? C[Name] extends ComponentType<any>\n          ? Name\n          : never\n        : never\n      : never\n  ]: C[Name];\n};\n\ntype SubElementTag<Definition extends ElementsDefinition[string]> =\n  Definition extends string\n    ? Definition\n    : Definition extends { as?: infer Tag }\n      ? Tag extends keyof JSX.IntrinsicElements\n        ? Tag\n        : \"div\"\n      : \"div\";\n\n// Use public Tasty types so declarations do not leak its private sub-element aliases.\ntype SubElements<E extends ElementsDefinition> = {\n  [Name in keyof E]: ForwardRefExoticComponent<\n    PropsWithoutRef<SubElementProps<SubElementTag<E[Name]>>> &\n      RefAttributes<\n        SubElementTag<E[Name]> extends keyof HTMLElementTagNameMap\n          ? HTMLElementTagNameMap[SubElementTag<E[Name]>]\n          : unknown\n      >\n  >;\n};\n\n/** Extend a component's styles and defaults, preserving its props and compound parts. */\nexport function extendComponent<C extends ComponentType<any>>(\n  name: string,\n  base: C,\n  options: Partial<Omit<ComponentProps<C>, \"as\" | \"styles\">> & {\n    styles?: Styles;\n  },\n): ComponentType<ComponentProps<C>> & InheritedParts<C> {\n  const extended = tasty(base, {\n    ...options,\n    styles: resolveComponentStyles(name, options.styles ?? {}),\n  });\n  // Tasty's wrapper type erases compound exports and makes every prop optional.\n  // Restore the copied parts and conservatively keep the base's required props.\n  return inheritComponentParts(base, extended) as unknown as ComponentType<\n    ComponentProps<C>\n  > &\n    InheritedParts<C>;\n}\n\n/** Create a named component with its built-in or custom theme styles merged into its defaults. */\nexport function defineComponent<\n  K extends readonly (keyof StylesInterface)[],\n  V extends VariantMap,\n  E extends ElementsDefinition = Record<string, never>,\n  AsType extends ElementType = \"div\",\n  M extends ModPropsInput = readonly never[],\n  TP extends TokenPropsInput = readonly never[],\n>(\n  name: string,\n  options: TastyElementOptions<K, V, E, AsType, M, TP>,\n): TastyPolymorphicComponent<AsType, K, V, M, TP> & SubElements<E> {\n  return tasty<K, V, E, AsType, M, TP>({\n    ...options,\n    styles: resolveComponentStyles(name, options.styles ?? {}),\n  }) as TastyPolymorphicComponent<AsType, K, V, M, TP> & SubElements<E>;\n}\n"],"mappings":";;;;AACA,SAAgB,sBAAsB,MAAM,UAAU;CACpD,KAAK,MAAM,CAAC,MAAM,SAAS,OAAO,QAAQ,IAAI,GAC5C,IAAI,SAAS,KAAK,IAAI,GAAG,SAAS,QAAQ;CAE5C,OAAO;AACT;;;;ACoDA,SAAgB,gBACd,MACA,MACA,SAGsD;CAOtD,OAAO,sBAAsB,MANZ,MAAM,MAAM;EAC3B,GAAG;EACH,QAAQ,uBAAuB,MAAM,QAAQ,UAAU,CAAC,CAAC;CAC3D,CAGmC,CAAQ;AAI7C;;AAGA,SAAgB,gBAQd,MACA,SACiE;CACjE,OAAO,MAA8B;EACnC,GAAG;EACH,QAAQ,uBAAuB,MAAM,QAAQ,UAAU,CAAC,CAAC;CAC3D,CAAC;AACH"}

package/dist/define-component.d.ts

@@ -0,0 +1,17 @@
+import { ElementsDefinition, ModPropsInput, Styles, StylesInterface, SubElementProps, TastyElementOptions, TastyPolymorphicComponent, TokenPropsInput, VariantMap } from "@tenphi/tasty";
+import { ComponentProps, ComponentType, ElementType, ForwardRefExoticComponent, JSX, PropsWithoutRef, RefAttributes } from "react";
+//#region src/define-component.d.ts
+type InheritedParts<C> = { [Name in keyof C as Name extends string ? Name extends Capitalize<Name> ? C[Name] extends ComponentType<any> ? Name : never : never : never]: C[Name]; };
+type SubElementTag<Definition extends ElementsDefinition[string]> = Definition extends string ? Definition : Definition extends {
+  as?: infer Tag;
+} ? Tag extends keyof JSX.IntrinsicElements ? Tag : "div" : "div";
+type SubElements<E extends ElementsDefinition> = { [Name in keyof E]: ForwardRefExoticComponent<PropsWithoutRef<SubElementProps<SubElementTag<E[Name]>>> & RefAttributes<SubElementTag<E[Name]> extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[SubElementTag<E[Name]>] : unknown>>; };
+/** Extend a component's styles and defaults, preserving its props and compound parts. */
+declare function extendComponent<C extends ComponentType<any>>(name: string, base: C, options: Partial<Omit<ComponentProps<C>, "as" | "styles">> & {
+  styles?: Styles;
+}): ComponentType<ComponentProps<C>> & InheritedParts<C>;
+/** Create a named component with its built-in or custom theme styles merged into its defaults. */
+declare function defineComponent<K extends readonly (keyof StylesInterface)[], V extends VariantMap, E extends ElementsDefinition = Record<string, never>, AsType extends ElementType = "div", M extends ModPropsInput = readonly never[], TP extends TokenPropsInput = readonly never[]>(name: string, options: TastyElementOptions<K, V, E, AsType, M, TP>): TastyPolymorphicComponent<AsType, K, V, M, TP> & SubElements<E>;
+//#endregion
+export { defineComponent, extendComponent };
+//# sourceMappingURL=define-component.d.ts.map

package/dist/define-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-component.d.ts","names":[],"sources":["../src/define-component.ts"],"mappings":";;;KAwBK,eAAe,QAEhB,cAAc,KAAK,sBACf,aAAa,WAAW,QACtB,EAAE,cAAc,qBACd,+BAIP,EAAE;KAGF,cAAc,mBAAmB,8BACpC,4BACI,aACA;EAAqB,WAAW;IAC9B,kBAAkB,IAAI,oBACpB;KAKL,YAAY,UAAU,yBACxB,cAAc,IAAI,0BACjB,gBAAgB,gBAAgB,cAAc,EAAE,WAC9C,cACE,cAAc,EAAE,qBAAqB,wBACjC,sBAAsB,cAAc,EAAE;;iBAOlC,gBAAgB,UAAU,oBACxC,cACA,MAAM,GACN,SAAS,QAAQ,KAAK,eAAe;EACnC,SAAS;IAEV,cAAc,eAAe,MAAM,eAAe;;iBAcrC,gBACd,0BAA0B,oBAC1B,UAAU,YACV,UAAU,qBAAqB,uBAC/B,eAAe,qBACf,UAAU,kCACV,WAAW,oCAEX,cACA,SAAS,oBAAoB,GAAG,GAAG,GAAG,QAAQ,GAAG,MAChD,0BAA0B,QAAQ,GAAG,GAAG,GAAG,MAAM,YAAY"}

package/dist/define-component.js

@@ -0,0 +1,2 @@
+import { n as extendComponent, t as defineComponent } from "./define-component-BP4YwMak.js";
+export { defineComponent, extendComponent };

package/dist/eslint-plugin.d.ts

@@ -8,6 +8,11 @@ declare const _default: {
       argument: number;
       kind: "options";
     };
+    extendComponent: {
+      argument: number;
+      kind: "options";
+      partial: true;
+    };
     resolveComponentStyles: {
       argument: number;
       kind: "styles";

package/dist/eslint-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"eslint-plugin.d.ts","names":[],"sources":["../src/tasty.config.ts","../src/eslint-plugin.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;iBCagB,uBACd,QAAO,cACN"}
+{"version":3,"file":"eslint-plugin.d.ts","names":[],"sources":["../src/tasty.config.ts","../src/eslint-plugin.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBCagB,uBACd,QAAO,cACN"}