@pathscale/ui 1.2.10 → 1.3.0

package/dist/components/tooltip/Tooltip.css

@@ -1,153 +1,153 @@
-@layer components {
-  /* -------------------------------------------------------------------------------------------------
-   * Root
-   * -----------------------------------------------------------------------------------------------*/
-  .tooltip {
-    display: inline-flex;
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Trigger
-   * -----------------------------------------------------------------------------------------------*/
-  .tooltip__trigger {
-    display: inline-flex;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  .tooltip__trigger:focus-visible,
-  .tooltip__trigger[data-focus-visible="true"] {
-    outline: 2px solid var(--color-accent);
-    outline-offset: 2px;
-    border-radius: var(--radius-field, 0.375rem);
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Content
-   * -----------------------------------------------------------------------------------------------*/
-  .tooltip__content {
-    position: fixed;
-    z-index: 9999;
-    max-width: 20rem;
-    border-radius: var(--radius-field, 0.5rem);
-    padding: 0.25rem 0.5rem;
-    font-size: 0.75rem;
-    line-height: 1rem;
-    white-space: normal;
-    word-break: break-word;
-    text-align: center;
-    width: max-content;
-    pointer-events: none;
-    background-color: var(--color-neutral);
-    color: var(--color-neutral-content);
-    box-shadow: 0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -2px
-      oklch(0% 0 0 / 0.1);
-
-    opacity: 0;
-    overflow: visible;
-    transition: opacity 150ms ease, transform 150ms ease;
-  }
-
-  /* Visible state */
-  .tooltip__content[data-open="true"] {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  /* ----- Placement: top (default) ----- */
-  .tooltip__content[data-placement="top"] {
-    transform: translateY(0.25rem);
-    transform-origin: bottom;
-  }
-
-  .tooltip__content[data-placement="top"][data-open="true"] {
-    transform: translateY(0);
-  }
-
-  /* ----- Placement: bottom ----- */
-  .tooltip__content[data-placement="bottom"] {
-    transform: translateY(-0.25rem);
-    transform-origin: top;
-  }
-
-  .tooltip__content[data-placement="bottom"][data-open="true"] {
-    transform: translateY(0);
-  }
-
-  /* ----- Placement: left ----- */
-  .tooltip__content[data-placement="left"] {
-    transform: translateX(0.25rem);
-    transform-origin: right;
-  }
-
-  .tooltip__content[data-placement="left"][data-open="true"] {
-    transform: translateX(0);
-  }
-
-  /* ----- Placement: right ----- */
-  .tooltip__content[data-placement="right"] {
-    transform: translateX(-0.25rem);
-    transform-origin: left;
-  }
-
-  .tooltip__content[data-placement="right"][data-open="true"] {
-    transform: translateX(0);
-  }
-
-  /* ----- Reduced motion ----- */
-  @media (prefers-reduced-motion: reduce) {
-    .tooltip__content {
-      transition: none;
-    }
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Arrow
-   * Arrow lives inside .tooltip__content, so it positions relative to the content bubble.
-   * The default SVG (viewBox 0 0 12 12, path "M0 0C5.48483 8 6.5 8 12 0Z") points downward.
-   * -----------------------------------------------------------------------------------------------*/
-  .tooltip__arrow {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-    color: var(--color-neutral);
-  }
-
-  /* Arrow placement: top → content is above trigger, arrow hangs below content pointing down */
-  .tooltip__arrow[data-placement="top"] {
-    top: calc(100% - 1px);
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  /* Arrow placement: bottom → content is below trigger, arrow sits above content pointing up */
-  .tooltip__arrow[data-placement="bottom"] {
-    bottom: calc(100% - 1px);
-    left: 50%;
-    transform: translateX(-50%) rotate(180deg);
-  }
-
-  /* Arrow placement: left → content is left of trigger, arrow at right edge pointing right */
-  .tooltip__arrow[data-placement="left"] {
-    left: calc(100% - 1px);
-    top: 50%;
-    transform: translateY(-50%) rotate(-90deg);
-  }
-
-  /* Arrow placement: right → content is right of trigger, arrow at left edge pointing left */
-  .tooltip__arrow[data-placement="right"] {
-    right: calc(100% - 1px);
-    top: 50%;
-    transform: translateY(-50%) rotate(90deg);
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Disabled state
-   * -----------------------------------------------------------------------------------------------*/
-  .tooltip[data-disabled="true"] .tooltip__trigger {
-    cursor: not-allowed;
-    opacity: 0.55;
-  }
-}
+@layer components {
+  /* -------------------------------------------------------------------------------------------------
+   * Root
+   * -----------------------------------------------------------------------------------------------*/
+  .tooltip {
+    display: inline-flex;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Trigger
+   * -----------------------------------------------------------------------------------------------*/
+  .tooltip__trigger {
+    display: inline-flex;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .tooltip__trigger:focus-visible,
+  .tooltip__trigger[data-focus-visible="true"] {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+    border-radius: var(--radius-field, 0.375rem);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Content
+   * -----------------------------------------------------------------------------------------------*/
+  .tooltip__content {
+    position: fixed;
+    z-index: 9999;
+    max-width: 20rem;
+    border-radius: var(--radius-field, 0.5rem);
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    white-space: normal;
+    word-break: break-word;
+    text-align: center;
+    width: max-content;
+    pointer-events: none;
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
+    box-shadow: 0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -2px
+      oklch(0% 0 0 / 0.1);
+
+    opacity: 0;
+    overflow: visible;
+    transition: opacity 150ms ease, transform 150ms ease;
+  }
+
+  /* Visible state */
+  .tooltip__content[data-open="true"] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* ----- Placement: top (default) ----- */
+  .tooltip__content[data-placement="top"] {
+    transform: translateY(0.25rem);
+    transform-origin: bottom;
+  }
+
+  .tooltip__content[data-placement="top"][data-open="true"] {
+    transform: translateY(0);
+  }
+
+  /* ----- Placement: bottom ----- */
+  .tooltip__content[data-placement="bottom"] {
+    transform: translateY(-0.25rem);
+    transform-origin: top;
+  }
+
+  .tooltip__content[data-placement="bottom"][data-open="true"] {
+    transform: translateY(0);
+  }
+
+  /* ----- Placement: left ----- */
+  .tooltip__content[data-placement="left"] {
+    transform: translateX(0.25rem);
+    transform-origin: right;
+  }
+
+  .tooltip__content[data-placement="left"][data-open="true"] {
+    transform: translateX(0);
+  }
+
+  /* ----- Placement: right ----- */
+  .tooltip__content[data-placement="right"] {
+    transform: translateX(-0.25rem);
+    transform-origin: left;
+  }
+
+  .tooltip__content[data-placement="right"][data-open="true"] {
+    transform: translateX(0);
+  }
+
+  /* ----- Reduced motion ----- */
+  @media (prefers-reduced-motion: reduce) {
+    .tooltip__content {
+      transition: none;
+    }
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Arrow
+   * Arrow lives inside .tooltip__content, so it positions relative to the content bubble.
+   * The default SVG (viewBox 0 0 12 12, path "M0 0C5.48483 8 6.5 8 12 0Z") points downward.
+   * -----------------------------------------------------------------------------------------------*/
+  .tooltip__arrow {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    color: var(--color-neutral);
+  }
+
+  /* Arrow placement: top → content is above trigger, arrow hangs below content pointing down */
+  .tooltip__arrow[data-placement="top"] {
+    top: calc(100% - 1px);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  /* Arrow placement: bottom → content is below trigger, arrow sits above content pointing up */
+  .tooltip__arrow[data-placement="bottom"] {
+    bottom: calc(100% - 1px);
+    left: 50%;
+    transform: translateX(-50%) rotate(180deg);
+  }
+
+  /* Arrow placement: left → content is left of trigger, arrow at right edge pointing right */
+  .tooltip__arrow[data-placement="left"] {
+    left: calc(100% - 1px);
+    top: 50%;
+    transform: translateY(-50%) rotate(-90deg);
+  }
+
+  /* Arrow placement: right → content is right of trigger, arrow at left edge pointing left */
+  .tooltip__arrow[data-placement="right"] {
+    right: calc(100% - 1px);
+    top: 50%;
+    transform: translateY(-50%) rotate(90deg);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Disabled state
+   * -----------------------------------------------------------------------------------------------*/
+  .tooltip[data-disabled="true"] .tooltip__trigger {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+}

package/dist/index.css

@@ -1,74 +1,74 @@
-@import "./styles/base/index.css";
-@import "./styles/themes/dark.css";
-@import "./styles/themes/light.css";
-@import "./styles/icons/generated-icons.css";
-
-@theme {
-  --color-light: var(--color-zinc-100);
-  --color-dark: var(--color-zinc-900);
-
-  /* Base colors */
-  --color-primary: var(--color-primary);
-  --color-primary-content: var(--color-primary-content);
-  --color-secondary: var(--color-secondary);
-  --color-secondary-content: var(--color-secondary-content);
-  --color-accent: var(--color-accent);
-  --color-accent-content: var(--color-accent-content);
-  --color-accent-foreground: var(--color-accent-foreground);
-  --color-accent-soft: var(--color-accent-soft);
-  --color-accent-soft-foreground: var(--color-accent-soft-foreground);
-  --color-accent-soft-hover: var(--color-accent-soft-hover);
-  --color-accent-hover: var(--color-accent-hover);
-  --color-neutral: var(--color-neutral);
-  --color-neutral-content: var(--color-neutral-content);
-
-  /* Semantic colors */
-  --color-info: var(--color-info);
-  --color-info-content: var(--color-info-content);
-  --color-success: var(--color-success);
-  --color-success-content: var(--color-success-content);
-  --color-success-foreground: var(--color-success-foreground);
-  --color-success-soft: var(--color-success-soft);
-  --color-success-soft-foreground: var(--color-success-soft-foreground);
-  --color-warning: var(--color-warning);
-  --color-warning-content: var(--color-warning-content);
-  --color-warning-foreground: var(--color-warning-foreground);
-  --color-warning-soft: var(--color-warning-soft);
-  --color-warning-soft-foreground: var(--color-warning-soft-foreground);
-  --color-error: var(--color-error);
-  --color-error-content: var(--color-error-content);
-  --color-danger: var(--color-danger);
-  --color-danger-foreground: var(--color-danger-foreground);
-  --color-danger-soft: var(--color-danger-soft);
-  --color-danger-soft-foreground: var(--color-danger-soft-foreground);
-
-  /* HeroUI generic tokens */
-  --color-default: var(--color-default);
-  --color-default-foreground: var(--color-default-foreground);
-  --color-default-hover: var(--color-default-hover);
-  --color-background: var(--color-background);
-  --color-foreground: var(--color-foreground);
-
-  /* Base background colors */
-  --color-base-100: var(--color-base-100);
-  --color-base-200: var(--color-base-200);
-  --color-base-300: var(--color-base-300);
-  --color-base-content: var(--color-base-content);
-
-  /* Legacy support */
-  --color-bg-body: var(--color-base-100);
-  --color-bg-primary: var(--color-base-200);
-  --color-bg-secondary: var(--color-base-300);
-  --color-bg-tertiary: var(--color-neutral);
-  --color-bg-accent: var(--color-accent);
-  --color-bg-positive: var(--color-success);
-  --color-bg-destructive: var(--color-error);
-
-  --color-fg-body: var(--color-base-content);
-  --color-fg-primary: var(--color-base-content);
-  --color-fg-secondary: var(--color-neutral-content);
-  --color-fg-tertiary: var(--color-neutral-content);
-  --color-fg-accent: var(--color-accent-content);
-  --color-fg-positive: var(--color-success-content);
-  --color-fg-destructive: var(--color-error-content);
-}
+@import "./styles/base/index.css";
+@import "./styles/themes/dark.css";
+@import "./styles/themes/light.css";
+@import "./styles/icons/generated-icons.css";
+
+@theme {
+  --color-light: var(--color-zinc-100);
+  --color-dark: var(--color-zinc-900);
+
+  /* Base colors */
+  --color-primary: var(--color-primary);
+  --color-primary-content: var(--color-primary-content);
+  --color-secondary: var(--color-secondary);
+  --color-secondary-content: var(--color-secondary-content);
+  --color-accent: var(--color-accent);
+  --color-accent-content: var(--color-accent-content);
+  --color-accent-foreground: var(--color-accent-foreground);
+  --color-accent-soft: var(--color-accent-soft);
+  --color-accent-soft-foreground: var(--color-accent-soft-foreground);
+  --color-accent-soft-hover: var(--color-accent-soft-hover);
+  --color-accent-hover: var(--color-accent-hover);
+  --color-neutral: var(--color-neutral);
+  --color-neutral-content: var(--color-neutral-content);
+
+  /* Semantic colors */
+  --color-info: var(--color-info);
+  --color-info-content: var(--color-info-content);
+  --color-success: var(--color-success);
+  --color-success-content: var(--color-success-content);
+  --color-success-foreground: var(--color-success-foreground);
+  --color-success-soft: var(--color-success-soft);
+  --color-success-soft-foreground: var(--color-success-soft-foreground);
+  --color-warning: var(--color-warning);
+  --color-warning-content: var(--color-warning-content);
+  --color-warning-foreground: var(--color-warning-foreground);
+  --color-warning-soft: var(--color-warning-soft);
+  --color-warning-soft-foreground: var(--color-warning-soft-foreground);
+  --color-error: var(--color-error);
+  --color-error-content: var(--color-error-content);
+  --color-danger: var(--color-danger);
+  --color-danger-foreground: var(--color-danger-foreground);
+  --color-danger-soft: var(--color-danger-soft);
+  --color-danger-soft-foreground: var(--color-danger-soft-foreground);
+
+  /* HeroUI generic tokens */
+  --color-default: var(--color-default);
+  --color-default-foreground: var(--color-default-foreground);
+  --color-default-hover: var(--color-default-hover);
+  --color-background: var(--color-background);
+  --color-foreground: var(--color-foreground);
+
+  /* Base background colors */
+  --color-base-100: var(--color-base-100);
+  --color-base-200: var(--color-base-200);
+  --color-base-300: var(--color-base-300);
+  --color-base-content: var(--color-base-content);
+
+  /* Legacy support */
+  --color-bg-body: var(--color-base-100);
+  --color-bg-primary: var(--color-base-200);
+  --color-bg-secondary: var(--color-base-300);
+  --color-bg-tertiary: var(--color-neutral);
+  --color-bg-accent: var(--color-accent);
+  --color-bg-positive: var(--color-success);
+  --color-bg-destructive: var(--color-error);
+
+  --color-fg-body: var(--color-base-content);
+  --color-fg-primary: var(--color-base-content);
+  --color-fg-secondary: var(--color-neutral-content);
+  --color-fg-tertiary: var(--color-neutral-content);
+  --color-fg-accent: var(--color-accent-content);
+  --color-fg-positive: var(--color-success-content);
+  --color-fg-destructive: var(--color-error-content);
+}

package/dist/index.d.ts

@@ -62,6 +62,8 @@ export { default as Flex } from "./components/flex";
 export { default as GlassPanel } from "./components/glass-panel";
 export { GlowCard, type GlowCardProps } from "./components/glow-card";
 export type { GlassPanelProps } from "./components/glass-panel";
+export { MetalBorder, type MetalBorderProps } from "./components/metal-border";
+export type { MetalBorderKind, MetalBorderPreset, MetalBorderResolvedTheme, MetalBorderTheme, } from "./components/metal-border";
 export { default as Footer } from "./components/footer";
 export type { FooterProps, FooterTitleProps } from "./components/footer";
 export { default as Fieldset, FieldsetRoot, FieldsetLegend, FieldGroup, FieldsetActions, } from "./components/fieldset";

package/dist/index.js

@@ -38,6 +38,7 @@ export { default as FloatingDock } from "./components/floating-dock/index.js";
 export { default as Flex } from "./components/flex/index.js";
 export { default as GlassPanel } from "./components/glass-panel/index.js";
 export { GlowCard } from "./components/glow-card/index.js";
+export { MetalBorder } from "./components/metal-border/index.js";
 export { default as Footer } from "./components/footer/index.js";
 export { FieldGroup, FieldsetActions, FieldsetLegend, FieldsetRoot, default as Fieldset } from "./components/fieldset/index.js";
 export { FieldErrorMessage, FormField, FormRoot, FormSubmitButton, FormWithContext, default as Form } from "./components/form/index.js";