@plexui/ui 0.2.0

package/dist/es/components/SelectControl/SelectControl.module.css

@@ -0,0 +1,556 @@
+@layer components {.SelectControl {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--select-control-gap);
+  flex-shrink: 0;
+  height: var(--select-control-size);
+  padding: 0 var(--select-control-gutter);
+  border-radius: var(--select-control-radius);
+  cursor: pointer;
+  font-size: var(--select-control-font-size);
+  font-weight: var(--select-control-font-weight);
+  line-height: var(--font-text-md-line-height);
+  text-align: left;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: color;
+  transition-timing-function: var(--transition-ease-basic);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  white-space: nowrap;
+}
+
+  .SelectControl:where([data-optically-align="start"]) {
+    margin-inline-start: calc(var(--select-control-gutter) * -1);
+  }
+
+    .SelectControl:where([data-optically-align="start"])[data-pill] {
+      margin-inline-start: calc(
+        var(--select-control-gutter) * var(--control-gutter-pill-scaling) * -1
+      );
+    }
+
+  .SelectControl:where([data-optically-align="end"]) {
+    margin-inline-end: calc(var(--select-control-gutter) * -1);
+  }
+
+    .SelectControl:where([data-optically-align="end"])[data-pill] {
+      margin-inline-end: calc(
+        var(--select-control-gutter) * var(--control-gutter-pill-scaling) * -1
+      );
+    }
+
+  /* Background / shape of the button */
+  .SelectControl::before {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border-radius: inherit;
+    content: "";
+    transition-duration: var(--transition-duration-basic);
+    transition-property: opacity, background-color, transform, box-shadow, border-color;
+    transition-timing-function: var(--transition-ease-basic);
+    /* Composite layer seems required in some cases to avoid visual artifacts. */
+    will-change: transform;
+  }
+
+  /* Focus ring */
+  .SelectControl::after {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border-radius: inherit;
+    content: "";
+    pointer-events: none;
+    transition-duration: var(--transition-duration-basic);
+    transition-property: transform;
+    transition-timing-function: var(--transition-ease-basic);
+    /* Composite layer seems required in some cases to avoid visual artifacts. */
+    will-change: transform;
+  }
+
+  .SelectControl:focus {
+    outline: none;
+  }
+    .SelectControl:focus-visible::after {
+      outline: 2px solid var(--button-ring-color, var(--color-ring));
+      outline-offset: var(--select-control-ring-offset, 2px);
+    }
+
+  /* =============================================
+    Sizes
+  ============================================= */
+  .SelectControl:where([data-size="3xs"]) {
+    --select-control-size: var(--control-size-3xs);
+    --select-control-gutter: var(--control-gutter-2xs);
+    --select-control-font-size: var(--control-font-size-sm);
+    --select-control-gap: 4px;
+    --select-control-radius: var(--control-radius-sm);
+    --start-icon-size: var(--control-icon-size-xs);
+    --start-icon-offset: 0;
+    --start-icon-pill-offset: 0;
+    --clear-size: 14px;
+    --clear-icon-size: 13px;
+    --clear-iso-size: 12px;
+    --clear-iso-icon-size: 10px;
+    --clear-iso-offset: -1px;
+    --clear-iso-pill-offset: -2px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: 0;
+    --dropdown-icon-width: 6px;
+    --dropdown-icon-height: 9px;
+    --dropdown-chevron-icon-width: 8px;
+    --dropdown-chevron-icon-height: 5px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1);
+    --indicator-wrapper-gutter: 0;
+  }
+
+  .SelectControl:where([data-size="2xs"]) {
+    --select-control-size: var(--control-size-2xs);
+    --select-control-gutter: var(--control-gutter-xs);
+    --select-control-font-size: var(--control-font-size-sm);
+    --select-control-gap: 6px;
+    --select-control-radius: var(--control-radius-sm);
+    --start-icon-size: var(--control-icon-size-sm);
+    --start-icon-offset: 0;
+    --start-icon-pill-offset: -1px;
+    --clear-size: 16px;
+    --clear-icon-size: 13px;
+    --clear-iso-size: 14px;
+    --clear-iso-icon-size: 12px;
+    --clear-iso-offset: -2px;
+    --clear-iso-pill-offset: -4px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: 0;
+    --dropdown-icon-width: 6px;
+    --dropdown-icon-height: 9px;
+    --dropdown-chevron-icon-width: 8px;
+    --dropdown-chevron-icon-height: 5px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1);
+    --indicator-wrapper-gutter: 0;
+  }
+
+  .SelectControl:where([data-size="xs"]) {
+    --select-control-size: var(--control-size-xs);
+    --select-control-gutter: var(--control-gutter-xs);
+    --select-control-font-size: var(--control-font-size-md);
+    --select-control-gap: 6px;
+    --select-control-radius: var(--control-radius-sm);
+    --start-icon-size: var(--control-icon-size-sm);
+    --start-icon-offset: -1px;
+    --start-icon-pill-offset: -1px;
+    --clear-size: 18px;
+    --clear-icon-size: 14px;
+    --clear-iso-size: 16px;
+    --clear-iso-icon-size: 12px;
+    --clear-iso-offset: -2px;
+    --clear-iso-pill-offset: -4px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: 0;
+    --dropdown-icon-width: 7px;
+    --dropdown-icon-height: 11px;
+    --dropdown-chevron-icon-width: 9px;
+    --dropdown-chevron-icon-height: 5px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1);
+    --indicator-wrapper-gutter: 0;
+  }
+
+  .SelectControl:where([data-size="sm"]) {
+    --select-control-size: var(--control-size-sm);
+    --select-control-gutter: var(--control-gutter-sm);
+    --select-control-font-size: var(--control-font-size-md);
+    --select-control-gap: 8px;
+    --select-control-radius: var(--control-radius-sm);
+    --start-icon-size: var(--control-icon-size-sm);
+    --start-icon-offset: -1px;
+    --start-icon-pill-offset: -2px;
+    --clear-size: 18px;
+    --clear-icon-size: 14px;
+    --clear-iso-size: 16px;
+    --clear-iso-icon-size: 12px;
+    --clear-iso-offset: -3px;
+    --clear-iso-pill-offset: -6px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: -2px;
+    --dropdown-icon-width: 7px;
+    --dropdown-icon-height: 11px;
+    --dropdown-chevron-icon-width: 9px;
+    --dropdown-chevron-icon-height: 5px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1);
+    --indicator-wrapper-gutter: 0;
+  }
+
+  .SelectControl:where([data-size="md"]) {
+    --select-control-size: var(--control-size-md);
+    --select-control-gutter: var(--control-gutter-md);
+    --select-control-font-size: var(--control-font-size-md);
+    --select-control-gap: 8px;
+    --select-control-radius: var(--control-radius-md);
+    --start-icon-size: var(--control-icon-size-md);
+    --start-icon-offset: -1px;
+    --start-icon-pill-offset: -4px;
+    --clear-size: 22px;
+    --clear-icon-size: 15px;
+    --clear-iso-size: 18px;
+    --clear-iso-icon-size: 14px;
+    --clear-iso-offset: -4px;
+    --clear-iso-pill-offset: -7px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: -2px;
+    --dropdown-icon-width: 8px;
+    --dropdown-icon-height: 12px;
+    --dropdown-chevron-icon-width: 11px;
+    --dropdown-chevron-icon-height: 6px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1);
+    --indicator-wrapper-gutter: calc(var(--spacing) * 0);
+  }
+
+  .SelectControl:where([data-size="lg"]) {
+    --select-control-size: var(--control-size-lg);
+    --select-control-gutter: var(--control-gutter-md);
+    --select-control-font-size: var(--control-font-size-md);
+    --select-control-gap: 8px;
+    --select-control-radius: var(--control-radius-md);
+    --start-icon-size: var(--control-icon-size-md);
+    --start-icon-offset: -2px;
+    --start-icon-pill-offset: -4px;
+    --clear-size: 22px;
+    --clear-icon-size: 15px;
+    --clear-iso-size: 18px;
+    --clear-iso-icon-size: 14px;
+    --clear-iso-offset: -2px;
+    --clear-iso-pill-offset: -6px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: -2px;
+    --dropdown-icon-width: 8px;
+    --dropdown-icon-height: 12px;
+    --dropdown-chevron-icon-width: 11px;
+    --dropdown-chevron-icon-height: 6px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1.5);
+    --indicator-wrapper-gutter: calc(var(--spacing) * 0);
+  }
+
+  .SelectControl:where([data-size="xl"]) {
+    --select-control-size: var(--control-size-xl);
+    --select-control-gutter: var(--control-gutter-lg);
+    --select-control-font-size: var(--control-font-size-md);
+    --select-control-gap: 8px;
+    --select-control-radius: var(--control-radius-lg);
+    --start-icon-size: var(--control-icon-size-md);
+    --start-icon-offset: -2px;
+    --start-icon-pill-offset: -4px;
+    --clear-size: 24px;
+    --clear-icon-size: 16px;
+    --clear-iso-size: 18px;
+    --clear-iso-icon-size: 14px;
+    --clear-iso-offset: -2px;
+    --clear-iso-pill-offset: -7px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: -2px;
+    --dropdown-icon-width: 8px;
+    --dropdown-icon-height: 12px;
+    --dropdown-chevron-icon-width: 11px;
+    --dropdown-chevron-icon-height: 6px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1);
+    --indicator-wrapper-gutter: calc(var(--spacing) * 0.5);
+  }
+
+  .SelectControl:where([data-size="2xl"]) {
+    --select-control-size: var(--control-size-2xl);
+    --select-control-gutter: var(--control-gutter-lg);
+    --select-control-font-size: var(--control-font-size-lg);
+    --select-control-gap: 10px;
+    --select-control-radius: var(--control-radius-xl);
+    --start-icon-size: var(--control-icon-size-lg);
+    --start-icon-offset: -2px;
+    --start-icon-pill-offset: -4px;
+    --clear-size: 24px;
+    --clear-icon-size: 16px;
+    --clear-iso-size: 20px;
+    --clear-iso-icon-size: 15px;
+    --clear-iso-offset: -2px;
+    --clear-iso-pill-offset: -7px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: -2px;
+    --dropdown-icon-width: 8px;
+    --dropdown-icon-height: 12px;
+    --dropdown-chevron-icon-width: 11px;
+    --dropdown-chevron-icon-height: 6px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1.5);
+    --indicator-wrapper-gutter: calc(var(--spacing) * 1);
+  }
+
+  .SelectControl:where([data-size="3xl"]) {
+    --select-control-size: var(--control-size-3xl);
+    --select-control-gutter: var(--control-gutter-xl);
+    --select-control-font-size: var(--control-font-size-lg);
+    --select-control-gap: 10px;
+    --select-control-radius: var(--control-radius-xl);
+    --start-icon-size: var(--control-icon-size-lg);
+    --start-icon-offset: -2px;
+    --start-icon-pill-offset: -4px;
+    --clear-size: 24px;
+    --clear-icon-size: 16px;
+    --clear-iso-size: 20px;
+    --clear-iso-icon-size: 15px;
+    --clear-iso-offset: -2px;
+    --clear-iso-pill-offset: -7px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: -3px;
+    --dropdown-icon-width: 9px;
+    --dropdown-icon-height: 13px;
+    --dropdown-chevron-icon-width: 12px;
+    --dropdown-chevron-icon-height: 7px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1.5);
+    --indicator-wrapper-gutter: calc(var(--spacing) * 1);
+  }
+
+  /* =============================================
+    Pill
+  ============================================= */
+  .SelectControl:where([data-pill]) {
+    --select-control-radius: var(--radius-full);
+
+    padding: 0 calc(var(--select-control-gutter) * var(--control-gutter-pill-scaling));
+  }
+
+  /* =============================================
+    Block
+  ============================================= */
+  .SelectControl:where([data-block]) {
+    width: 100%;
+  }
+
+  /* =============================================
+    Ghost variant
+  ============================================= */
+  .SelectControl[data-variant="ghost"] {
+    --select-control-background-color: var(--color-background-primary-ghost-hover);
+    --select-control-ring-offset: -1px;
+  }
+
+    .SelectControl[data-variant="ghost"]::before {
+      background-color: var(--select-control-background-color);
+      opacity: 0;
+      transform: scale(var(--scale));
+    }
+      .SelectControl[data-variant="ghost"][aria-expanded="true"]::before, .SelectControl[data-variant="ghost"][data-state="open"]::before {
+        opacity: 0.6;
+        transform: scale(1);
+      }
+      @media (hover: hover) and (pointer: fine) {
+        .SelectControl[data-variant="ghost"]:where(:not([data-disabled])):hover::before {
+          opacity: 1;
+          transform: scale(1);
+        }
+}
+          .SelectControl[data-variant="ghost"]:where(:not([data-disabled])):not(:has(button:active)):active::before {
+            --select-control-background-color: var(--color-background-primary-ghost-active);
+
+            opacity: 1;
+            transform: scale(var(--scale));
+          }
+
+          .SelectControl[data-variant="ghost"]:where(:not([data-disabled])):not(:has(button:active)):active::after {
+            transform: scale(var(--scale));
+          }
+        .SelectControl[data-variant="ghost"]:where(:not([data-disabled]))[data-invalid]::before {
+          --select-control-background-color: transparent;
+
+          box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
+          opacity: 1;
+          transform: scale(1);
+        }
+
+        @media (hover: hover) and (pointer: fine) {
+          .SelectControl[data-variant="ghost"]:where(:not([data-disabled]))[data-invalid]:hover::before {
+            --select-control-background-color: var(--color-background-primary-ghost-hover);
+          }
+}
+
+  /* =============================================
+    Soft variant
+  ============================================= */
+  .SelectControl[data-variant="soft"] {
+    --select-control-background-color: var(--color-background-primary-soft-alpha);
+  }
+
+    .SelectControl[data-variant="soft"]::before {
+      background-color: var(--select-control-background-color);
+    }
+      .SelectControl[data-variant="soft"][aria-expanded="true"]::before, .SelectControl[data-variant="soft"][data-state="open"]::before {
+        --select-control-background-color: var(--color-background-primary-soft-alpha-hover);
+      }
+      @media (hover: hover) and (pointer: fine) {
+        .SelectControl[data-variant="soft"]:where(:not([data-disabled])):hover::before {
+          --select-control-background-color: var(--color-background-primary-soft-alpha-hover);
+        }
+}
+          .SelectControl[data-variant="soft"]:where(:not([data-disabled])):not(:has(button:active)):active::before {
+            --select-control-background-color: var(--color-background-primary-soft-alpha-active);
+          }
+
+          .SelectControl[data-variant="soft"]:where(:not([data-disabled])):not(:has(button:active)):active::before,
+          .SelectControl[data-variant="soft"]:where(:not([data-disabled])):not(:has(button:active)):active::after {
+            transform: scale(var(--scale));
+          }
+
+      .SelectControl[data-variant="soft"]:where(:not([data-disabled]))[data-invalid]::before {
+        box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
+      }
+
+  /* =============================================
+    Outline variant
+  ============================================= */
+  .SelectControl[data-variant="outline"] {
+    --select-control-border-color: var(--input-outline-border-color);
+    --select-control-ring-offset: -1px;
+  }
+
+    .SelectControl[data-variant="outline"]::before {
+      background-color: transparent;
+      box-shadow: 0 0 0 1px var(--select-control-border-color) inset;
+    }
+
+    .SelectControl[data-variant="outline"][aria-expanded="true"],
+    .SelectControl[data-variant="outline"][data-state="open"] {
+      --select-control-border-color: var(--input-outline-border-color-hover);
+    }
+      @media (hover: hover) and (pointer: fine) {.SelectControl[data-variant="outline"]:where(:not([data-disabled])):hover {
+        --select-control-border-color: var(--input-outline-border-color-hover);
+}
+}
+          .SelectControl[data-variant="outline"]:where(:not([data-disabled])):not(:has(button:active)):active::before {
+            transform: scale(var(--scale));
+          }
+
+          .SelectControl[data-variant="outline"]:where(:not([data-disabled])):not(:has(button:active)):active::after {
+            transform: scale(var(--scale));
+          }
+
+      .SelectControl[data-variant="outline"]:where(:not([data-disabled]))[data-invalid]::before {
+        --select-control-border-color: var(--input-border-color-invalid);
+      }
+
+  /* =============================================
+    Invalid
+  ============================================= */
+  .SelectControl:where([data-invalid]) {
+    --button-ring-color: var(--color-ring-danger);
+  }
+
+  /* =============================================
+    Hover
+  ============================================= */
+    @media (hover: hover) and (pointer: fine) {
+      .SelectControl:not([data-disabled]):hover .Clear,
+      .SelectControl:not([data-disabled]):hover .DropdownIcon {
+        opacity: 1;
+      }
+}
+
+  /* =============================================
+    Placeholder (e.g., "not `selected`")
+  ============================================= */
+  .SelectControl[data-selected="false"] {
+    color: var(--input-placeholder-text-color);
+  }
+
+  /* =============================================
+    Disabled
+  ============================================= */
+  .SelectControl[data-disabled][data-variant] {
+    /* Matches disabled styling of Buttons, which is nice. */
+    --select-control-background-color: var(--color-background-disabled);
+    --select-control-border-color: var(--color-border-disabled);
+
+    color: var(--color-text-disabled);
+    cursor: not-allowed;
+  }
+
+    .SelectControl[data-disabled][data-variant] .DropdownIcon {
+      color: var(--color-text-disabled);
+    }
+
+    /* Don't press while disabled */
+    .SelectControl[data-disabled][data-variant]:active::before {
+      transform: scale(1);
+    }.TriggerText {
+  position: relative;
+  overflow: hidden;
+  flex: 1;
+  max-width: 100%;
+  color: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}.IndicatorWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--indicator-wrapper-gap);
+  padding-left: var(--indicator-wrapper-gutter);
+}.StartIcon {
+  position: relative;
+  width: var(--start-icon-size);
+  height: var(--start-icon-size);
+  margin-left: var(--start-icon-offset);
+}
+
+  :where(.SelectControl[data-pill]) .StartIcon {
+    margin-left: var(--start-icon-pill-offset);
+  }.Clear {
+  --button-size: var(--clear-size);
+  --button-icon-size: var(--clear-icon-size);
+
+  position: relative;
+  opacity: 0.75;
+}
+
+  .Clear[data-variant="solid"] {
+    --button-size: var(--clear-iso-size);
+    --button-icon-size: var(--clear-iso-icon-size);
+  }
+
+  [data-state="open"] .Clear,
+  .Clear:focus-visible {
+    opacity: 1;
+  }
+
+  .Clear[data-only-child] {
+    margin-right: var(--clear-iso-offset);
+  }
+
+    :where(.SelectControl[data-pill]) .Clear[data-only-child] {
+      margin-right: var(--clear-iso-pill-offset);
+    }.DropdownIcon {
+  position: relative;
+  width: var(--dropdown-icon-width, 8px);
+  height: var(--dropdown-icon-height, 12px);
+  margin-right: var(--dropdown-icon-offset);
+  color: var(--color-text-secondary);
+  opacity: 0.75;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: opacity;
+  transition-timing-function: var(--transition-ease-basic);
+  will-change: opacity;
+}
+
+  :where(.SelectControl[data-pill]) .DropdownIcon {
+    margin-right: var(--dropdown-icon-pill-offset);
+  }
+
+  [data-state="open"] .DropdownIcon {
+    opacity: 1;
+  }.DropdownIconChevron {
+  width: var(--dropdown-chevron-icon-width, 11px);
+  height: var(--dropdown-chevron-icon-height, 6px);
+}/* Shares margin offset with dropdown indicator */.LoadingIndicator {
+  margin-right: var(--dropdown-icon-offset);
+}
+
+  :where(.SelectControl[data-pill]) .LoadingIndicator {
+    margin-right: var(--dropdown-icon-pill-offset);
+  }
+}

package/dist/es/components/SelectControl/index.js

@@ -0,0 +1,2 @@
+export { SelectControl } from "./SelectControl";
+//# sourceMappingURL=index.js.map

package/dist/es/components/SelectControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/SelectControl/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAkD,MAAM,iBAAiB,CAAA","sourcesContent":["export { SelectControl, type DropdownIconType, type SelectControlProps } from \"./SelectControl\"\n"]}

package/dist/es/components/ShimmerText/ShimmerText.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import clsx from "clsx";
+import s from "./ShimmerText.module.css";
+// If text will always shimmer, use the simpler interface
+export const ShimmerText = ({ as: Tag = "div", children, className, }) => {
+    return _jsx(Tag, { className: clsx(s.Shimmer, className), children: children });
+};
+// If text may end shimmering after playing for a time, or resume, use shimmerable text
+export const ShimmerableText = ({ as: Tag = "div", children, className, shimmer = false, ...restProps }) => {
+    const [paused, setPaused] = useState(!shimmer);
+    // Pauses the animation at the start of (what would be) the next iteration.
+    const handleAnimationIteration = () => {
+        setPaused(true);
+    };
+    useEffect(() => {
+        if (shimmer) {
+            // Ensure pause is cleared if shimmer is re-enabled
+            setPaused(false);
+        }
+    }, [shimmer]);
+    return (_jsx(Tag, { ...restProps, className: clsx(s.Shimmer, className), onAnimationIteration: shimmer ? undefined : handleAnimationIteration, "data-idle": paused ? "" : undefined, children: children }));
+};
+//# sourceMappingURL=ShimmerText.js.map

package/dist/es/components/ShimmerText/ShimmerText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShimmerText.js","sourceRoot":"","sources":["../../../../src/components/ShimmerText/ShimmerText.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAA;AAE3D,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,CAAC,MAAM,0BAA0B,CAAA;AAExC,yDAAyD;AACzD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,EAAE,EAAE,GAAG,GAAG,KAAK,EACf,QAAQ,EACR,SAAS,GAKV,EAAE,EAAE;IACH,OAAO,KAAC,GAAG,IAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,EAAE,SAAS,CAAC,YAAG,QAAQ,GAAO,CAAA;AACrE,CAAC,CAAA;AAED,uFAAuF;AACvF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,EAAE,EAAE,GAAG,GAAG,KAAK,EACf,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,KAAK,EACf,GAAG,SAAS,EAMb,EAAE,EAAE;IACH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAA;IAE9C,2EAA2E;IAC3E,MAAM,wBAAwB,GAAG,GAAG,EAAE;QACpC,SAAS,CAAC,IAAI,CAAC,CAAA;IACjB,CAAC,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,EAAE,CAAC;YACZ,mDAAmD;YACnD,SAAS,CAAC,KAAK,CAAC,CAAA;QAClB,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,OAAO,CACL,KAAC,GAAG,OACE,SAAS,EACb,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,EAAE,SAAS,CAAC,EACrC,oBAAoB,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,wBAAwB,eACzD,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,YAEjC,QAAQ,GACL,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { useEffect, useState, type ReactNode } from \"react\"\n\nimport clsx from \"clsx\"\nimport s from \"./ShimmerText.module.css\"\n\n// If text will always shimmer, use the simpler interface\nexport const ShimmerText = ({\n  as: Tag = \"div\",\n  children,\n  className,\n}: {\n  as?: \"p\" | \"span\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"div\"\n  children: ReactNode\n  className?: string\n}) => {\n  return <Tag className={clsx(s.Shimmer, className)}>{children}</Tag>\n}\n\n// If text may end shimmering after playing for a time, or resume, use shimmerable text\nexport const ShimmerableText = ({\n  as: Tag = \"div\",\n  children,\n  className,\n  shimmer = false,\n  ...restProps\n}: {\n  as?: \"p\" | \"span\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"div\"\n  children: ReactNode\n  className?: string\n  shimmer?: boolean\n}) => {\n  const [paused, setPaused] = useState(!shimmer)\n\n  // Pauses the animation at the start of (what would be) the next iteration.\n  const handleAnimationIteration = () => {\n    setPaused(true)\n  }\n\n  useEffect(() => {\n    if (shimmer) {\n      // Ensure pause is cleared if shimmer is re-enabled\n      setPaused(false)\n    }\n  }, [shimmer])\n\n  return (\n    <Tag\n      {...restProps}\n      className={clsx(s.Shimmer, className)}\n      onAnimationIteration={shimmer ? undefined : handleAnimationIteration}\n      data-idle={paused ? \"\" : undefined}\n    >\n      {children}\n    </Tag>\n  )\n}\n"]}

package/dist/es/components/ShimmerText/ShimmerText.module.css

@@ -0,0 +1,43 @@
+@layer components {.Shimmer {
+
+  display: inline-block;
+  animation-delay: 0.6s;
+  animation-duration: 3s;
+  animation-iteration-count: infinite;
+  animation-name: shimmer;
+  background: currentcolor
+    linear-gradient(to left, currentcolor, var(--shimmer-highlight) 50%, currentcolor);
+  -webkit-background-clip: text;
+          background-clip: text;
+  background-position: -100% top;
+  background-repeat: no-repeat;
+  background-size: 50% 200%;
+  -webkit-text-fill-color: transparent;
+}.Shimmer, :where([data-theme="light"]) .Shimmer {
+
+--shimmer-highlight: var(--gray-200);
+}:where([data-theme="dark"]) .Shimmer {
+
+--shimmer-highlight: var(--gray-900);
+}
+
+  /* Preference: disable animations entirely, rather than leaving potentially *many* animations paused in the DOM. */
+  .Shimmer[data-idle] {
+    animation: none;
+    background: none;
+    background-clip: unset;
+    -webkit-text-fill-color: unset;
+  }@keyframes shimmer {
+  0% {
+    background-position: -100% top;
+  }
+
+  70% {
+    background-position: 250% top;
+  }
+
+  100% {
+    background-position: 250% top;
+  }
+}
+}

package/dist/es/components/ShimmerText/index.js

@@ -0,0 +1,2 @@
+export { ShimmerText, ShimmerableText } from "./ShimmerText";
+//# sourceMappingURL=index.js.map

package/dist/es/components/ShimmerText/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ShimmerText/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA","sourcesContent":["export { ShimmerText, ShimmerableText } from \"./ShimmerText\"\n"]}