@womp/kookie-ui 0.3.22

package/src/components/skeleton.css

@@ -0,0 +1,55 @@
+.rt-Skeleton {
+  --skeleton-radius: var(--skeleton-radius-override);
+  --skeleton-height: var(--skeleton-height-override);
+  border-radius: var(--radius-1);
+  animation: rt-skeleton-pulse 1000ms infinite alternate-reverse !important;
+  background-image: none !important;
+  background-clip: border-box !important;
+  border: none !important;
+  box-shadow: none !important;
+  box-decoration-break: clone !important;
+  color: transparent !important;
+  outline: none !important;
+  pointer-events: none !important;
+  user-select: none !important;
+  cursor: default !important;
+}
+
+/*
+ * Take font differences out of equation for inline Skeletons that just wrap text.
+ * This makes the dimensions consistent between the following non-Skeleton and Skeleton text:
+ * ```
+ * <Text>Example text</Text>
+ *
+ * <Text>
+ *   <Skeleton>Example text</Skeleton>
+ * </Text>
+ * ```
+ *
+ * Will NOT collapse Skeletons as the browsers use line-height on inline elements just for alignment.
+ */
+.rt-Skeleton:where([data-inline-skeleton]) {
+  line-height: 0;
+  /* Font metrics on Arial yield much nicer height for the text background bounding box */
+  font-family: Arial, sans-serif !important;
+}
+
+:where(.rt-Skeleton:empty) {
+  display: block;
+  height: var(--space-3);
+}
+
+.rt-Skeleton > *,
+.rt-Skeleton::after,
+.rt-Skeleton::before {
+  visibility: hidden !important;
+}
+
+@keyframes rt-skeleton-pulse {
+  from {
+    background-color: var(--gray-a3);
+  }
+  to {
+    background-color: var(--gray-a4);
+  }
+}

package/src/components/skeleton.props.tsx

@@ -0,0 +1,14 @@
+import { heightPropDefs } from '../props/height.props.js';
+import { widthPropDefs } from '../props/width.props.js';
+
+import type { PropDef } from '../props/prop-def.js';
+
+const skeletonPropDefs = {
+  loading: { type: 'boolean', default: true },
+  ...widthPropDefs,
+  ...heightPropDefs,
+} satisfies {
+  loading: PropDef<boolean>;
+};
+
+export { skeletonPropDefs };

package/src/components/skeleton.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Slot } from 'radix-ui';
+
+import { inert } from '../helpers/inert.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { marginPropDefs } from '../props/margin.props.js';
+import { skeletonPropDefs } from './skeleton.props.js';
+
+import type { MarginProps } from '../props/margin.props.js';
+import type { GetPropDefTypes } from '../props/prop-def.js';
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+
+type SkeletonElement = React.ElementRef<'span'>;
+type SkeletonOwnProps = GetPropDefTypes<typeof skeletonPropDefs>;
+interface SkeletonProps
+  extends ComponentPropsWithout<'span', RemovedProps>,
+    MarginProps,
+    SkeletonOwnProps {}
+const Skeleton = React.forwardRef<SkeletonElement, SkeletonProps>((props, forwardedRef) => {
+  const { children, className, loading, ...skeletonProps } = extractProps(
+    props,
+    skeletonPropDefs,
+    marginPropDefs,
+  );
+
+  if (!loading) return children;
+
+  const Tag = React.isValidElement(children) ? Slot.Root : 'span';
+
+  return (
+    <Tag
+      ref={forwardedRef}
+      aria-hidden
+      className={classNames('rt-Skeleton', className)}
+      data-inline-skeleton={React.isValidElement(children) ? undefined : true}
+      tabIndex={-1}
+      inert={inert}
+      {...skeletonProps}
+    >
+      {children}
+    </Tag>
+  );
+});
+Skeleton.displayName = 'Skeleton';
+
+export { Skeleton };
+export type { SkeletonProps };

package/src/components/slider.css

@@ -0,0 +1,403 @@
+.rt-SliderRoot {
+  --slider-thumb-width: var(--space-3);
+  --slider-thumb-height: var(--space-2);
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+
+  border-radius: var(--slider-radius);
+
+  /* ensures no selection */
+  user-select: none;
+  /* disable browser handling of all panning and zooming gestures on touch devices */
+  touch-action: none;
+
+  /* 
+   * Theme-level translucent override
+   * Applies backdrop filter for elevated visual effects
+   */
+  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+  }
+
+  /* Prevent backdrop-filter stacking with parent elements */
+  isolation: isolate;
+
+  /* 
+   * Component-level material overrides
+   * These ensure proper rendering based on material setting
+   */
+  &:where([data-panel-background='solid'], [data-material='solid']) {
+    backdrop-filter: none;
+    --backdrop-filter-components: none;
+  }
+  
+  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+  }
+
+  &:where([data-orientation='horizontal']) {
+    width: stretch;
+    height: var(--slider-track-size);
+  }
+  &:where([data-orientation='vertical']) {
+    height: stretch;
+    flex-direction: column;
+    width: var(--slider-track-size);
+  }
+}
+
+.rt-SliderTrack {
+  overflow: hidden;
+  position: relative;
+  flex-grow: 1;
+
+  border-radius: inherit;
+
+  &:where([data-orientation='horizontal']) {
+    height: var(--slider-track-size);
+  }
+  &:where([data-orientation='vertical']) {
+    width: var(--slider-track-size);
+  }
+}
+
+.rt-SliderRange {
+  position: absolute;
+  border-radius: inherit;
+
+  &:where([data-orientation='horizontal']) {
+    height: var(--position-full);
+  }
+
+  &:where([data-orientation='vertical']) {
+    width: var(--position-full);
+  }
+}
+
+.rt-SliderThumb {
+  display: block;
+  width: var(--slider-thumb-width);
+  height: var(--slider-thumb-height);
+
+  /* Safari */
+  outline: 0;
+
+  &::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    width: calc(var(--slider-thumb-width) * var(--slider-thumb-hit-area-multiplier));
+    height: calc(var(--slider-thumb-height) * var(--slider-thumb-hit-area-multiplier));
+    top: var(--position-center);
+    left: var(--position-center);
+    transform: translate(-50%, -50%);
+  }
+
+  /* Larger visible thumb so that it slightly overshoots the range */
+  &::after {
+    content: '';
+    position: absolute;
+    inset: calc(var(--slider-thumb-inset-factor) * var(--slider-track-size) * -1);
+    background-color: white;
+    border-radius: var(--slider-thumb-radius);
+    box-shadow: var(--shadow-2);
+    cursor: pointer;
+  }
+
+  &:where(:focus-visible)::after {
+    box-shadow: var(--shadow-3), 0 0 0 var(--slider-focus-ring-inner) var(--accent-3), 0 0 0 var(--slider-focus-ring-outer) var(--focus-8);
+  }
+
+  &:where(:active) {
+    cursor: var(--cursor-slider-thumb-active);
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * SIZES                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+@breakpoints {
+  .rt-SliderRoot {
+    &:where(.rt-r-size-1) {
+      --slider-track-size: var(--progress-slider-height-1);
+      --slider-radius: var(--progress-slider-radius-1);
+      --slider-thumb-width: var(--space-3);
+      --slider-thumb-height: var(--space-2);
+      --slider-thumb-radius: calc(var(--radius-1) * 0.75);
+    }
+    &:where(.rt-r-size-2) {
+      --slider-track-size: var(--progress-slider-height-2);
+      --slider-radius: var(--progress-slider-radius-2);
+      --slider-thumb-width: var(--space-4);
+      --slider-thumb-height: calc(var(--space-2) + var(--space-1));
+      --slider-thumb-radius: calc(var(--radius-2) * 0.75);
+    }
+    &:where(.rt-r-size-3) {
+      --slider-track-size: var(--progress-slider-height-3);
+      --slider-radius: var(--progress-slider-radius-3);
+      --slider-thumb-width: var(--space-4);
+      --slider-thumb-height: var(--space-3);
+      --slider-thumb-radius: calc(var(--radius-3) * 0.75);
+    }
+    &:where(.rt-r-size-4) {
+      --slider-track-size: var(--progress-slider-height-4);
+      --slider-radius: var(--progress-slider-radius-4);
+      --slider-thumb-width: calc(var(--space-4) + var(--space-1));
+      --slider-thumb-height: calc(var(--space-3) + var(--space-1));
+      --slider-thumb-radius: calc(var(--radius-4) * 0.75);
+    }
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * VARIANTS                                                                                        *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+/* surface */
+
+.rt-SliderRoot:where(.rt-variant-surface) {
+  & :where(.rt-SliderTrack) {
+    background-color: var(--gray-2);
+    box-shadow: inset 0 0 0 1px var(--gray-6);
+
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
+      box-shadow: inset 0 0 0 1px var(--gray-a6);
+    }
+
+    /* Component-level overrides */
+    &:where([data-panel-background='solid'], [data-material='solid']) {
+      background-color: var(--gray-2);
+      box-shadow: inset 0 0 0 1px var(--gray-6);
+    }
+
+    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
+      box-shadow: inset 0 0 0 1px var(--gray-a6);
+    }
+
+    &:where([data-disabled]) {
+      box-shadow: inset 0 0 0 1px var(--gray-5);
+    }
+  }
+
+  & :where(.rt-SliderRange) {
+    background-color: var(--accent-9);
+  }
+
+  &:where(.rt-high-contrast) {
+    & :where(.rt-SliderRange) {
+      background-color: var(--accent-12);
+    }
+  }
+
+
+}
+
+/* soft */
+
+.rt-SliderRoot:where(.rt-variant-soft) {
+  & :where(.rt-SliderTrack) {
+    background-color: var(--gray-3);
+
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
+    }
+
+    /* Component-level overrides */
+    &:where([data-panel-background='solid'], [data-material='solid']) {
+      background-color: var(--gray-3);
+    }
+
+    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
+    }
+  }
+
+  & :where(.rt-SliderRange) {
+    background-color: var(--accent-9);
+  }
+
+  &:where(.rt-high-contrast) {
+    & :where(.rt-SliderRange) {
+      background-color: var(--accent-12);
+    }
+  }
+
+  & :where(.rt-SliderThumb) {
+    --slider-thumb-box-shadow: var(--shadow-3);
+  }
+}
+
+/* outline */
+
+.rt-SliderRoot:where(.rt-variant-outline) {
+  & :where(.rt-SliderTrack) {
+    /* Base state: no background, just border */
+    box-shadow: inset 0 0 0 1px var(--gray-6);
+
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      box-shadow: inset 0 0 0 1px var(--gray-a6);
+    }
+
+    /* Component-level overrides */
+    &:where([data-panel-background='solid'], [data-material='solid']) {
+      box-shadow: inset 0 0 0 1px var(--gray-6);
+    }
+
+    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      box-shadow: inset 0 0 0 1px var(--gray-a6);
+    }
+  }
+
+  & :where(.rt-SliderRange) {
+    background-color: var(--accent-9);
+  }
+
+  &:where(.rt-high-contrast) {
+    & :where(.rt-SliderRange) {
+      background-color: var(--accent-12);
+    }
+  }
+
+  & :where(.rt-SliderThumb) {
+    --slider-thumb-box-shadow: var(--shadow-3);
+  }
+}
+
+/* all high-contrast */
+
+:where(.radix-themes) {
+  --slider-range-high-contrast-background-image: linear-gradient(var(--black-a8), var(--black-a8));
+}
+:is(.dark, .dark-theme),
+:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
+  --slider-range-high-contrast-background-image: none;
+}
+.rt-SliderRoot:where(:not(.rt-high-contrast)) {
+  --slider-range-high-contrast-background-image: none;
+}
+
+
+
+/* all disabled Sliders */
+
+[data-disabled] {
+  .rt-SliderRoot:where(&) {
+    cursor: var(--cursor-disabled);
+  }
+  .rt-SliderTrack:where(&) {
+    background-color: var(--gray-a3) !important;
+    box-shadow: none !important;
+  }
+  .rt-SliderRange:where(&) {
+    background-color: var(--accent-a3) !important;
+  }
+  .rt-SliderThumb:where(&) {
+    cursor: var(--cursor-disabled);
+  }
+  .rt-SliderThumb:where(&)::after {
+    background-color: var(--gray-3) !important;
+    box-shadow: none !important;
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * TICKS                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.rt-SliderContainer {
+  position: relative;
+}
+
+.rt-SliderTicks {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: var(--space-2);
+  pointer-events: auto;
+  height: 44px;
+}
+
+.rt-SliderTick {
+  position: absolute;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-1);
+  background: none;
+  border: none;
+  padding: var(--space-2);
+  cursor: pointer;
+  min-height: 44px;
+  min-width: 44px;
+  border-radius: var(--radius-2);
+  transition: background-color var(--transition-standard);
+  z-index: 1;
+  pointer-events: auto;
+}
+
+.rt-SliderTick:where(:hover) {
+  :where(.rt-SliderTickMark) {
+    background-color: var(--gray-12) !important;
+  }
+  
+  :where(.rt-SliderTickLabel) {
+    color: var(--gray-12) !important;
+    font-weight: var(--font-weight-medium);
+  }
+}
+
+.rt-SliderTick:where(:active) {
+  :where(.rt-SliderTickMark) {
+    background-color: var(--gray-12) !important;
+  }
+  
+  :where(.rt-SliderTickLabel) {
+    color: var(--gray-12) !important;
+    font-weight: var(--font-weight-medium);
+  }
+}
+
+.rt-SliderTick:where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: 2px;
+}
+
+.rt-SliderTickMark {
+  width: 1px;
+  height: var(--space-2);
+  background-color: var(--gray-6);
+  border-radius: 1px;
+  transition: background-color var(--transition-standard);
+}
+
+.rt-SliderTickLabel {
+  font-size: var(--font-size-0);
+  line-height: var(--line-height-0);
+  color: var(--gray-11);
+  font-weight: var(--font-weight-regular);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 60px;
+  text-align: center;
+  transition: color var(--transition-standard), font-weight var(--transition-standard);
+}

package/src/components/slider.props.tsx

@@ -0,0 +1,25 @@
+import { colorPropDef } from '../props/color.prop.js';
+import { highContrastPropDef } from '../props/high-contrast.prop.js';
+import { radiusPropDef } from '../props/radius.prop.js';
+
+import type { PropDef } from '../props/prop-def.js';
+
+const sizes = ['1', '2', '3', '4'] as const;
+const variants = ['surface', 'soft', 'outline'] as const;
+
+const sliderPropDefs = {
+  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
+  showTickLabels: { type: 'boolean', className: 'rt-show-tick-labels' },
+  snapToTicks: { type: 'boolean', className: 'rt-snap-to-ticks' },
+  ...colorPropDef,
+  ...highContrastPropDef,
+  ...radiusPropDef,
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  variant: PropDef<(typeof variants)[number]>;
+  showTickLabels: PropDef<boolean>;
+  snapToTicks: PropDef<boolean>;
+};
+
+export { sliderPropDefs };