@kushagradhawan/kookie-ui 0.1.0

package/src/components/slider.css

@@ -0,0 +1,263 @@
+.rt-SliderRoot {
+  --slider-thumb-size: calc(var(--slider-track-size) + var(--space-1));
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+
+  border-radius: max(
+    calc(var(--radius-factor) * var(--slider-track-size) / 3),
+    calc(var(--radius-factor) * var(--radius-thumb))
+  );
+
+  /* ensures no selection */
+  user-select: none;
+  /* disable browser handling of all panning and zooming gestures on touch devices */
+  touch-action: none;
+
+  &: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: 100%;
+  }
+
+  &:where([data-orientation='vertical']) {
+    width: 100%;
+  }
+}
+
+.rt-SliderThumb {
+  display: block;
+  width: var(--slider-thumb-size);
+  height: var(--slider-thumb-size);
+
+  /* Safari */
+  outline: 0;
+
+  &::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    width: calc(var(--slider-thumb-size) * 3);
+    height: calc(var(--slider-thumb-size) * 3);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  /* Larger visible thumb so that it slightly overshoots the range */
+  &::after {
+    content: '';
+    position: absolute;
+    inset: calc(-0.25 * var(--slider-track-size));
+    background-color: white;
+    border-radius: max(var(--radius-1), var(--radius-thumb));
+    box-shadow: var(--slider-thumb-box-shadow);
+    cursor: var(--cursor-slider-thumb);
+  }
+
+  &:where(:focus-visible)::after {
+    box-shadow: var(--slider-thumb-box-shadow), 0 0 0 3px var(--accent-3), 0 0 0 5px var(--focus-8);
+  }
+
+  &:where(:active) {
+    cursor: var(--cursor-slider-thumb-active);
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * SIZES                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+@breakpoints {
+  .rt-SliderRoot {
+    &:where(.rt-r-size-1) {
+      --slider-track-size: calc(var(--space-2) * 0.75);
+    }
+    &:where(.rt-r-size-2) {
+      --slider-track-size: var(--space-2);
+    }
+    &:where(.rt-r-size-3) {
+      --slider-track-size: calc(var(--space-2) * 1.25);
+    }
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * VARIANTS                                                                                        *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+/* surface */
+
+.rt-SliderRoot:where(.rt-variant-surface) {
+  & :where(.rt-SliderTrack) {
+    background-color: var(--gray-a3);
+    box-shadow: inset 0 0 0 1px var(--gray-a5);
+
+    &:where([data-disabled]) {
+      box-shadow: inset 0 0 0 1px var(--gray-a4);
+    }
+  }
+
+  & :where(.rt-SliderRange) {
+    background-color: var(--accent-track);
+    background-image: var(--slider-range-high-contrast-background-image);
+    box-shadow: inset 0 0 0 1px var(--gray-a5);
+  }
+
+  & :where(.rt-SliderThumb) {
+    --slider-thumb-box-shadow: 0 0 0 1px var(--black-a4);
+
+    &:where([data-disabled])::after {
+      background-color: var(--gray-1);
+      box-shadow: 0 0 0 1px var(--gray-6);
+    }
+  }
+}
+
+/* classic */
+
+.rt-SliderRoot:where(.rt-variant-classic) {
+  & :where(.rt-SliderTrack) {
+    background-color: var(--gray-a3);
+    position: relative;
+
+    &::before {
+      content: '';
+      inset: 0;
+      position: absolute;
+      border-radius: inherit;
+      box-shadow: var(--shadow-1);
+    }
+    &:where([data-disabled])::before {
+      opacity: 0.5;
+    }
+  }
+
+  & :where(.rt-SliderRange) {
+    background-color: var(--accent-track);
+    background-image: var(--slider-range-high-contrast-background-image);
+    box-shadow: inset 0 0 0 1px var(--gray-a3), inset 0 0 0 1px var(--accent-a4), inset 0 0 0 1px var(--black-a1),
+      inset 0 1.5px 2px 0 var(--black-a2);
+
+    &:where(.rt-high-contrast) {
+      box-shadow: inset 0 0 0 1px var(--gray-a3), inset 0 0 0 1px var(--black-a2), inset 0 1.5px 2px 0 var(--black-a2);
+    }
+  }
+
+  & :where(.rt-SliderThumb) {
+    /* prettier-ignore */
+    --slider-thumb-box-shadow:
+      0 0 0 1px var(--black-a3),
+      0 1px 3px var(--black-a1),
+      0 2px 4px -1px var(--black-a1);
+
+    &:where([data-disabled])::after {
+      background-color: var(--gray-1);
+      box-shadow: 0 0 0 1px var(--gray-6);
+    }
+  }
+}
+
+/* soft */
+
+.rt-SliderRoot:where(.rt-variant-soft) {
+  & :where(.rt-SliderTrack) {
+    background-color: var(--gray-a4);
+    /* Blend with white to increase contrast in dark mode */
+    background-image: linear-gradient(var(--white-a1), var(--white-a1));
+
+    &:where([data-disabled]) {
+      background-color: var(--gray-a4);
+      background-image: none;
+    }
+  }
+
+  & :where(.rt-SliderRange) {
+    background-image: linear-gradient(var(--accent-a5), var(--accent-a5)),
+      var(--slider-range-high-contrast-background-image);
+    background-color: var(--accent-6);
+  }
+
+  & :where(.rt-SliderThumb) {
+    --slider-thumb-box-shadow: 0 0 0 1px var(--black-a3), 0 0 0 1px var(--gray-a2), 0 0 0 1px var(--accent-a2),
+      0 1px 2px var(--gray-a4), 0 1px 3px -0.5px var(--gray-a3);
+
+    &:where([data-disabled])::after {
+      background-color: var(--gray-1);
+      box-shadow: 0 0 0 1px var(--gray-5);
+    }
+  }
+}
+
+/* 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;
+}
+
+:where(.radix-themes) {
+  --slider-disabled-blend-mode: multiply;
+}
+:is(.dark, .dark-theme),
+:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
+  --slider-disabled-blend-mode: screen;
+}
+
+/* all disabled Sliders */
+
+[data-disabled] {
+  .rt-SliderRoot:where(&) {
+    cursor: var(--cursor-disabled);
+    mix-blend-mode: var(--slider-disabled-blend-mode);
+  }
+  .rt-SliderRange:where(&) {
+    background-color: transparent;
+    background-image: none;
+    box-shadow: none;
+  }
+  .rt-SliderThumb:where(&),
+  .rt-SliderThumb:where(&)::after {
+    cursor: var(--cursor-disabled);
+  }
+}

package/src/components/slider.props.tsx

@@ -0,0 +1,21 @@
+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'] as const;
+const variants = ['classic', 'surface', 'soft'] 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' },
+  ...colorPropDef,
+  ...highContrastPropDef,
+  ...radiusPropDef,
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  variant: PropDef<(typeof variants)[number]>;
+};
+
+export { sliderPropDefs };

package/src/components/slider.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Slider as SliderPrimitive } from 'radix-ui';
+
+import { sliderPropDefs } from './slider.props.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { marginPropDefs } from '../props/margin.props.js';
+
+import type { MarginProps } from '../props/margin.props.js';
+import type { ComponentPropsWithout } from '../helpers/component-props.js';
+import type { GetPropDefTypes } from '../props/prop-def.js';
+
+type SliderElement = React.ElementRef<typeof SliderPrimitive.Root>;
+type SliderOwnProps = GetPropDefTypes<typeof sliderPropDefs>;
+interface SliderProps
+  extends ComponentPropsWithout<
+      typeof SliderPrimitive.Root,
+      'asChild' | 'color' | 'children' | 'defaultChecked'
+    >,
+    MarginProps,
+    SliderOwnProps {}
+const Slider = React.forwardRef<SliderElement, SliderProps>((props, forwardedRef) => {
+  const { className, color, radius, tabIndex, ...sliderProps } = extractProps(
+    props,
+    sliderPropDefs,
+    marginPropDefs
+  );
+  return (
+    <SliderPrimitive.Root
+      data-accent-color={color}
+      data-radius={radius}
+      ref={forwardedRef}
+      {...sliderProps}
+      asChild={false}
+      className={classNames('rt-SliderRoot', className)}
+    >
+      <SliderPrimitive.Track className="rt-SliderTrack">
+        <SliderPrimitive.Range
+          className={classNames('rt-SliderRange', { 'rt-high-contrast': props.highContrast })}
+          data-inverted={sliderProps.inverted ? '' : undefined}
+        />
+      </SliderPrimitive.Track>
+      {(sliderProps.value ?? sliderProps.defaultValue ?? []).map((value, index) => (
+        <SliderPrimitive.Thumb
+          key={index}
+          className="rt-SliderThumb"
+          {...(tabIndex !== undefined ? { tabIndex } : undefined)}
+        />
+      ))}
+    </SliderPrimitive.Root>
+  );
+});
+Slider.displayName = 'Slider';
+
+export { Slider };
+export type { SliderProps };

package/src/components/slot.tsx

@@ -0,0 +1,4 @@
+import { Slot as SlotPrimitive } from 'radix-ui';
+export const Root = SlotPrimitive.Root;
+export const Slot = SlotPrimitive.Root;
+export const Slottable = SlotPrimitive.Slottable;

package/src/components/spinner.css

@@ -0,0 +1,93 @@
+.radix-themes {
+  --spinner-animation-duration: 800ms;
+  --spinner-opacity: 0.65;
+}
+
+.rt-Spinner {
+  display: block;
+  position: relative;
+  opacity: var(--spinner-opacity);
+}
+
+.rt-SpinnerLeaf {
+  position: absolute;
+  top: 0;
+  left: calc(50% - 12.5% / 2);
+  width: 12.5%;
+  height: 100%;
+  animation: rt-spinner-leaf-fade var(--spinner-animation-duration) linear infinite;
+
+  &::before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 30%;
+    border-radius: var(--radius-1);
+    background-color: currentColor;
+  }
+
+  &:where(:nth-child(1)) {
+    transform: rotate(0deg);
+    animation-delay: calc(-8 / 8 * var(--spinner-animation-duration));
+  }
+  &:where(:nth-child(2)) {
+    transform: rotate(45deg);
+    animation-delay: calc(-7 / 8 * var(--spinner-animation-duration));
+  }
+  &:where(:nth-child(3)) {
+    transform: rotate(90deg);
+    animation-delay: calc(-6 / 8 * var(--spinner-animation-duration));
+  }
+  &:where(:nth-child(4)) {
+    transform: rotate(135deg);
+    animation-delay: calc(-5 / 8 * var(--spinner-animation-duration));
+  }
+  &:where(:nth-child(5)) {
+    transform: rotate(180deg);
+    animation-delay: calc(-4 / 8 * var(--spinner-animation-duration));
+  }
+  &:where(:nth-child(6)) {
+    transform: rotate(225deg);
+    animation-delay: calc(-3 / 8 * var(--spinner-animation-duration));
+  }
+  &:where(:nth-child(7)) {
+    transform: rotate(270deg);
+    animation-delay: calc(-2 / 8 * var(--spinner-animation-duration));
+  }
+  &:where(:nth-child(8)) {
+    transform: rotate(315deg);
+    animation-delay: calc(-1 / 8 * var(--spinner-animation-duration));
+  }
+}
+
+@keyframes rt-spinner-leaf-fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.25;
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * SIZES                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+@breakpoints {
+  .rt-Spinner {
+    &:where(.rt-r-size-1) {
+      width: var(--space-3);
+      height: var(--space-3);
+    }
+    &:where(.rt-r-size-2) {
+      width: var(--space-4);
+      height: var(--space-4);
+    }
+    &:where(.rt-r-size-3) {
+      width: calc(1.25 * var(--space-4));
+      height: calc(1.25 * var(--space-4));
+    }
+  }
+}

package/src/components/spinner.props.tsx

@@ -0,0 +1,13 @@
+import type { PropDef } from '../props/prop-def.js';
+
+const sizes = ['1', '2', '3'] as const;
+
+const spinnerPropDefs = {
+  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
+  loading: { type: 'boolean', default: true },
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  loading: PropDef<boolean>;
+};
+
+export { spinnerPropDefs };

package/src/components/spinner.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+import { Flex } from './flex.js';
+import { spinnerPropDefs } from './spinner.props.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { marginPropDefs } from '../props/margin.props.js';
+
+import type { MarginProps } from '../props/margin.props.js';
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+import type { GetPropDefTypes } from '../props/prop-def.js';
+
+type SpinnerElement = React.ElementRef<'span'>;
+type SpinnerOwnProps = GetPropDefTypes<typeof spinnerPropDefs>;
+interface SpinnerProps
+  extends ComponentPropsWithout<'span', RemovedProps>,
+    MarginProps,
+    SpinnerOwnProps {}
+const Spinner = React.forwardRef<SpinnerElement, SpinnerProps>((props, forwardedRef) => {
+  const { className, children, loading, ...spinnerProps } = extractProps(
+    props,
+    spinnerPropDefs,
+    marginPropDefs
+  );
+
+  if (!loading) return children;
+
+  const spinner = (
+    <span {...spinnerProps} ref={forwardedRef} className={classNames('rt-Spinner', className)}>
+      <span className="rt-SpinnerLeaf" />
+      <span className="rt-SpinnerLeaf" />
+      <span className="rt-SpinnerLeaf" />
+      <span className="rt-SpinnerLeaf" />
+      <span className="rt-SpinnerLeaf" />
+      <span className="rt-SpinnerLeaf" />
+      <span className="rt-SpinnerLeaf" />
+      <span className="rt-SpinnerLeaf" />
+    </span>
+  );
+
+  if (children === undefined) return spinner;
+
+  return (
+    <Flex asChild position="relative" align="center" justify="center">
+      <span>
+        {/**
+         * `display: contents` removes the content from the accessibility tree in some browsers,
+         * so we force remove it with `aria-hidden`
+         */}
+        <span aria-hidden style={{ display: 'contents', visibility: 'hidden' }} inert={undefined}>
+          {children}
+        </span>
+
+        <Flex asChild align="center" justify="center" position="absolute" inset="0">
+          <span>{spinner}</span>
+        </Flex>
+      </span>
+    </Flex>
+  );
+});
+Spinner.displayName = 'Spinner';
+
+export { Spinner };
+export type { SpinnerProps };

package/src/components/strong.css

@@ -0,0 +1,13 @@
+.rt-Strong {
+  font-family: var(--strong-font-family);
+  font-size: calc(var(--strong-font-size-adjust) * 1em);
+  font-style: var(--strong-font-style);
+  font-weight: var(--strong-font-weight);
+  letter-spacing: calc(
+    var(--strong-letter-spacing) + var(--letter-spacing, var(--default-letter-spacing))
+  );
+
+  & :where(&) {
+    font-size: inherit;
+  }
+}

package/src/components/strong.props.tsx

@@ -0,0 +1,11 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+import { textWrapPropDef } from '../props/text-wrap.prop.js';
+import { truncatePropDef } from '../props/truncate.prop.js';
+
+const strongPropDefs = {
+  ...asChildPropDef,
+  ...truncatePropDef,
+  ...textWrapPropDef,
+};
+
+export { strongPropDefs };

package/src/components/strong.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Slot } from 'radix-ui';
+
+import { extractProps } from '../helpers/extract-props.js';
+import { strongPropDefs } from './strong.props.js';
+
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+import type { GetPropDefTypes } from '../props/prop-def.js';
+
+type StrongElement = React.ElementRef<'strong'>;
+type StrongOwnProps = GetPropDefTypes<typeof strongPropDefs>;
+interface StrongProps extends ComponentPropsWithout<'strong', RemovedProps>, StrongOwnProps {}
+const Strong = React.forwardRef<StrongElement, StrongProps>((props, forwardedRef) => {
+  const { asChild, className, ...strongProps } = extractProps(props, strongPropDefs);
+  const Comp = asChild ? Slot.Root : 'strong';
+  return (
+    <Comp {...strongProps} ref={forwardedRef} className={classNames('rt-Strong', className)} />
+  );
+});
+Strong.displayName = 'Strong';
+
+export { Strong };
+export type { StrongProps };