@kushagradhawan/kookie-ui 0.1.0

package/src/components/link.css

@@ -0,0 +1,94 @@
+.rt-Link {
+  /* Override the cursor on the HTML element even if rendering a <button> */
+  /* stylelint-disable selector-max-type */
+  &:where(:any-link, button) {
+    cursor: var(--cursor-link);
+  }
+
+  &:where(:disabled, [data-disabled]) {
+    cursor: var(--cursor-disabled);
+  }
+
+  &:where(:focus-visible) {
+    border-radius: calc(0.07em * var(--radius-factor));
+    outline-color: var(--focus-8);
+    outline-width: 2px;
+    outline-style: solid;
+    outline-offset: 2px;
+  }
+
+  :where([data-accent-color]:not(.radix-themes, .rt-high-contrast)) &:where([data-accent-color='']) {
+    color: var(--accent-12);
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * UNDERLINE                                                                                       *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.rt-Link {
+  &:where(:any-link, button) {
+    text-decoration-line: none;
+    text-decoration-style: solid;
+    text-decoration-thickness: min(2px, max(1px, 0.05em));
+    text-underline-offset: calc(0.025em + 2px);
+    text-decoration-color: var(--accent-a5);
+
+    /* Enhancement for bright colors */
+    @supports (color: color-mix(in oklab, white, black)) {
+      text-decoration-color: color-mix(in oklab, var(--accent-a5), var(--gray-a6));
+    }
+
+    @media (pointer: coarse) {
+      /* Better -webkit-tap-highlight-color */
+      &:where(:active:not(:focus-visible, [data-state='open'])) {
+        outline: 0.75em solid var(--accent-a4);
+        outline-offset: -0.6em;
+      }
+    }
+
+    &:where(.rt-underline-auto) {
+      @media (hover: hover) {
+        &:where(:hover) {
+          text-decoration-line: underline;
+        }
+      }
+
+      &:where(.rt-high-contrast),
+      :where([data-accent-color]:not(.radix-themes, .rt-high-contrast)) &:where([data-accent-color='']) {
+        text-decoration-line: underline;
+        text-decoration-color: var(--accent-a6);
+
+        /* Enhancement for bright colors */
+        @supports (color: color-mix(in oklab, white, black)) {
+          text-decoration-color: color-mix(in oklab, var(--accent-a6), var(--gray-a6));
+        }
+      }
+    }
+
+    &:where(.rt-underline-hover) {
+      @media (hover: hover) {
+        &:where(:hover) {
+          text-decoration-line: underline;
+        }
+      }
+    }
+
+    &:where(.rt-underline-always) {
+      text-decoration-line: underline;
+    }
+  }
+}
+
+/* all focused states underline */
+
+.rt-Link:where(:focus-visible) {
+  text-decoration-line: none;
+}
+
+/* Enhancement – hide underline for when Link's only child is a Code where underline is hard to see */
+.rt-Link:where(:has(.rt-Code:not(.rt-variant-ghost):only-child)) {
+  text-decoration-color: transparent;
+}

package/src/components/link.props.tsx

@@ -0,0 +1,34 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+import { accentColorPropDef } from '../props/color.prop.js';
+import { highContrastPropDef } from '../props/high-contrast.prop.js';
+import { leadingTrimPropDef } from '../props/leading-trim.prop.js';
+import { textWrapPropDef } from '../props/text-wrap.prop.js';
+import { truncatePropDef } from '../props/truncate.prop.js';
+import { weightPropDef } from '../props/weight.prop.js';
+
+import type { PropDef } from '../props/prop-def.js';
+
+const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
+const underline = ['auto', 'always', 'hover', 'none'] as const;
+
+const linkPropDefs = {
+  ...asChildPropDef,
+  size: {
+    type: 'enum',
+    className: 'rt-r-size',
+    values: sizes,
+    responsive: true,
+  },
+  ...weightPropDef,
+  ...leadingTrimPropDef,
+  ...truncatePropDef,
+  ...textWrapPropDef,
+  underline: { type: 'enum', className: 'rt-underline', values: underline, default: 'auto' },
+  ...accentColorPropDef,
+  ...highContrastPropDef,
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  underline: PropDef<(typeof underline)[number]>;
+};
+
+export { linkPropDefs };

package/src/components/link.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+import { Text } from './text.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { linkPropDefs } from './link.props.js';
+
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+import type { MarginProps } from '../props/margin.props.js';
+import type { GetPropDefTypes } from '../props/prop-def.js';
+
+type LinkElement = React.ElementRef<'a'>;
+type LinkOwnProps = GetPropDefTypes<typeof linkPropDefs>;
+interface LinkProps extends ComponentPropsWithout<'a', RemovedProps>, MarginProps, LinkOwnProps {}
+const Link = React.forwardRef<LinkElement, LinkProps>((props, forwardedRef) => {
+  const { children, className, color, asChild, ...linkProps } = extractProps(props, linkPropDefs);
+  return (
+    <Text
+      {...linkProps}
+      data-accent-color={color}
+      ref={forwardedRef}
+      asChild
+      className={classNames('rt-reset', 'rt-Link', className)}
+    >
+      {asChild ? (
+        children
+      ) : (
+        // eslint-disable-next-line jsx-a11y/anchor-is-valid
+        <a>{children}</a>
+      )}
+    </Text>
+  );
+});
+Link.displayName = 'Link';
+
+export { Link };
+export type { LinkProps };

package/src/components/popover.css

@@ -0,0 +1,44 @@
+.rt-PopoverContent {
+  background-color: var(--color-panel-solid);
+  box-shadow: var(--shadow-5);
+  min-width: var(--radix-popover-trigger-width);
+  outline: 0;
+  overflow: auto;
+  position: relative;
+
+  --inset-padding-top: var(--popover-content-padding);
+  --inset-padding-right: var(--popover-content-padding);
+  --inset-padding-bottom: var(--popover-content-padding);
+  --inset-padding-left: var(--popover-content-padding);
+  padding: var(--popover-content-padding);
+  box-sizing: border-box;
+
+  transform-origin: var(--radix-popover-content-transform-origin);
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * SIZES                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+@breakpoints {
+  .rt-PopoverContent {
+    &:where(.rt-r-size-1) {
+      --popover-content-padding: var(--space-3);
+      border-radius: var(--radius-4);
+    }
+    &:where(.rt-r-size-2) {
+      --popover-content-padding: var(--space-4);
+      border-radius: var(--radius-4);
+    }
+    &:where(.rt-r-size-3) {
+      --popover-content-padding: var(--space-5);
+      border-radius: var(--radius-5);
+    }
+    &:where(.rt-r-size-4) {
+      --popover-content-padding: var(--space-6);
+      border-radius: var(--radius-5);
+    }
+  }
+}

package/src/components/popover.props.tsx

@@ -0,0 +1,37 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+import { heightPropDefs } from '../props/height.props.js';
+import { widthPropDefs } from '../props/width.props.js';
+
+import type { PropDef, GetPropDefTypes } from '../props/prop-def.js';
+
+const contentSizes = ['1', '2', '3', '4'] as const;
+
+const popoverContentPropDefs = {
+  ...asChildPropDef,
+  size: {
+    type: 'enum',
+    className: 'rt-r-size',
+    values: contentSizes,
+    default: '2',
+    responsive: true,
+  },
+  width: widthPropDefs.width,
+  minWidth: widthPropDefs.minWidth,
+  maxWidth: { ...widthPropDefs.maxWidth, default: '480px' },
+  ...heightPropDefs,
+} satisfies {
+  width: PropDef<string>;
+  minWidth: PropDef<string>;
+  maxWidth: PropDef<string>;
+  size: PropDef<(typeof contentSizes)[number]>;
+};
+
+type PopoverContentOwnProps = GetPropDefTypes<
+  typeof popoverContentPropDefs &
+    typeof asChildPropDef &
+    typeof widthPropDefs &
+    typeof heightPropDefs
+>;
+
+export { popoverContentPropDefs };
+export type { PopoverContentOwnProps };

package/src/components/popover.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Popover as PopoverPrimitive } from 'radix-ui';
+
+import { extractProps } from '../helpers/extract-props.js';
+import { requireReactElement } from '../helpers/require-react-element.js';
+import { popoverContentPropDefs } from './popover.props.js';
+import { Theme } from './theme.js';
+
+import type { PopoverContentOwnProps } from './popover.props.js';
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+
+interface PopoverRootProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> {}
+const PopoverRoot: React.FC<PopoverRootProps> = (props: PopoverRootProps) => (
+  <PopoverPrimitive.Root {...props} />
+);
+PopoverRoot.displayName = 'Popover.Root';
+
+type PopoverTriggerElement = React.ElementRef<typeof PopoverPrimitive.Trigger>;
+interface PopoverTriggerProps
+  extends ComponentPropsWithout<typeof PopoverPrimitive.Trigger, RemovedProps> {}
+const PopoverTrigger = React.forwardRef<PopoverTriggerElement, PopoverTriggerProps>(
+  ({ children, ...props }, forwardedRef) => (
+    <PopoverPrimitive.Trigger {...props} ref={forwardedRef} asChild>
+      {requireReactElement(children)}
+    </PopoverPrimitive.Trigger>
+  )
+);
+PopoverTrigger.displayName = 'Popover.Trigger';
+
+type PopoverContentElement = React.ElementRef<typeof PopoverPrimitive.Content>;
+interface PopoverContentProps
+  extends ComponentPropsWithout<typeof PopoverPrimitive.Content, RemovedProps>,
+    PopoverContentOwnProps {
+  container?: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Portal>['container'];
+}
+const PopoverContent = React.forwardRef<PopoverContentElement, PopoverContentProps>(
+  (props, forwardedRef) => {
+    const { className, forceMount, container, ...contentProps } = extractProps(
+      props,
+      popoverContentPropDefs
+    );
+    return (
+      <PopoverPrimitive.Portal container={container} forceMount={forceMount}>
+        <Theme asChild>
+          <PopoverPrimitive.Content
+            align="start"
+            sideOffset={8}
+            collisionPadding={10}
+            {...contentProps}
+            ref={forwardedRef}
+            className={classNames('rt-PopperContent', 'rt-PopoverContent', className)}
+          />
+        </Theme>
+      </PopoverPrimitive.Portal>
+    );
+  }
+);
+PopoverContent.displayName = 'Popover.Content';
+
+type PopoverCloseElement = React.ElementRef<typeof PopoverPrimitive.Close>;
+interface PopoverCloseProps
+  extends ComponentPropsWithout<typeof PopoverPrimitive.Close, RemovedProps> {}
+const PopoverClose = React.forwardRef<PopoverCloseElement, PopoverCloseProps>(
+  ({ children, ...props }, forwardedRef) => (
+    <PopoverPrimitive.Close {...props} ref={forwardedRef} asChild>
+      {requireReactElement(children)}
+    </PopoverPrimitive.Close>
+  )
+);
+PopoverClose.displayName = 'Popover.Close';
+
+type PopoverAnchorElement = React.ElementRef<typeof PopoverPrimitive.Anchor>;
+interface PopoverAnchorProps
+  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor> {}
+const PopoverAnchor = React.forwardRef<PopoverAnchorElement, PopoverAnchorProps>(
+  ({ children, ...props }, forwardedRef) => (
+    <PopoverPrimitive.Anchor {...props} ref={forwardedRef} />
+  )
+);
+
+PopoverAnchor.displayName = 'Popover.Anchor';
+
+export {
+  PopoverRoot as Root,
+  PopoverContent as Content,
+  PopoverTrigger as Trigger,
+  PopoverClose as Close,
+  PopoverAnchor as Anchor,
+};
+export type {
+  PopoverRootProps as RootProps,
+  PopoverContentProps as ContentProps,
+  PopoverTriggerProps as TriggerProps,
+  PopoverCloseProps as CloseProps,
+  PopoverAnchorProps as AnchorProps,
+};

package/src/components/portal.tsx

@@ -0,0 +1,4 @@
+import { Portal as PortalPrimitive } from 'radix-ui';
+export const Portal = PortalPrimitive.Root;
+export const Root = PortalPrimitive.Root;
+export type PortalProps = PortalPrimitive.PortalProps;

package/src/components/progress.css

@@ -0,0 +1,249 @@
+.rt-ProgressRoot {
+  --progress-value: 0;
+  --progress-max: 100;
+  --progress-duration: 5s;
+  pointer-events: none;
+  position: relative;
+  overflow: hidden;
+  flex-grow: 1;
+  height: var(--progress-height);
+  border-radius: max(
+    calc(var(--radius-factor) * var(--progress-height) / 3),
+    calc(var(--radius-factor) * var(--radius-thumb))
+  );
+
+  /* A pseudo-element for shadows */
+  &::after {
+    position: absolute;
+    inset: 0;
+    content: '';
+    border-radius: inherit;
+  }
+}
+
+:where(.radix-themes) {
+  --progress-indicator-after-linear-gradient: var(--white-a5), var(--white-a9), var(--white-a5);
+}
+:is(.dark, .dark-theme),
+:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
+  --progress-indicator-after-linear-gradient: var(--white-a3), var(--white-a6), var(--white-a3);
+}
+.rt-ProgressIndicator {
+  display: block;
+  height: 100%;
+  width: 100%;
+
+  transform: scaleX(calc(var(--progress-value) / var(--progress-max)));
+  transform-origin: left center;
+  transition: transform 120ms;
+
+  &:where([data-state='indeterminate']) {
+    animation-name: rt-progress-indicator-indeterminate-grow, var(--progress-indicator-indeterminate-animation-start),
+      var(--progress-indicator-indeterminate-animation-repeat);
+    animation-delay: 0s, calc(var(--progress-duration) + 5s), calc(var(--progress-duration) + 7.5s);
+    animation-duration: var(--progress-duration), 2.5s, 5s;
+    animation-iteration-count: 1, 1, infinite;
+    animation-fill-mode: both, none, none;
+    animation-direction: normal, normal, alternate;
+
+    /* A pseudo-element for a shine animation */
+    &::after {
+      position: absolute;
+      inset: 0;
+      content: '';
+      width: 400%;
+
+      animation-name: rt-progress-indicator-indeterminate-shine-from-left;
+      animation-delay: calc(var(--progress-duration) + 5s);
+      animation-duration: 5s;
+      animation-fill-mode: backwards;
+      animation-iteration-count: infinite;
+
+      background-image: linear-gradient(
+        to right,
+        transparent 25%,
+        var(--progress-indicator-after-linear-gradient),
+        transparent 75%
+      );
+    }
+  }
+}
+
+@keyframes rt-progress-indicator-indeterminate-grow {
+  0% {
+    transform: scaleX(0.01);
+  }
+  20% {
+    transform: scaleX(0.1);
+  }
+  30% {
+    transform: scaleX(0.6);
+  }
+  40%,
+  50% {
+    transform: scaleX(0.9);
+  }
+  100% {
+    transform: scaleX(1);
+  }
+}
+
+@keyframes rt-progress-indicator-indeterminate-shine-from-left {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * SIZES                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+@breakpoints {
+  .rt-ProgressRoot {
+    &:where(.rt-r-size-1) {
+      --progress-height: var(--space-1);
+    }
+    &:where(.rt-r-size-2) {
+      --progress-height: calc(var(--space-2) * 0.75);
+    }
+    &:where(.rt-r-size-3) {
+      --progress-height: var(--space-2);
+    }
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * VARIANTS                                                                                        *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+/* surface */
+
+.rt-ProgressRoot:where(.rt-variant-surface) {
+  --progress-indicator-indeterminate-animation-start: rt-progress-indicator-surface-indeterminate-fade;
+  --progress-indicator-indeterminate-animation-repeat: rt-progress-indicator-surface-indeterminate-pulse;
+  background-color: var(--gray-a3);
+
+  &::after {
+    box-shadow: inset 0 0 0 1px var(--gray-a4);
+  }
+
+  & :where(.rt-ProgressIndicator) {
+    background-color: var(--accent-track);
+  }
+}
+
+@keyframes rt-progress-indicator-surface-indeterminate-fade {
+  100% {
+    background-color: var(--accent-7);
+  }
+}
+
+@keyframes rt-progress-indicator-surface-indeterminate-pulse {
+  0% {
+    background-color: var(--accent-7);
+  }
+  100% {
+    background-color: var(--accent-track);
+  }
+}
+
+/* classic */
+
+.rt-ProgressRoot:where(.rt-variant-classic) {
+  --progress-indicator-indeterminate-animation-start: rt-progress-indicator-classic-indeterminate-fade;
+  --progress-indicator-indeterminate-animation-repeat: rt-progress-indicator-classic-indeterminate-pulse;
+  background-color: var(--gray-a3);
+
+  &::after {
+    box-shadow: var(--shadow-1);
+  }
+
+  & :where(.rt-ProgressIndicator) {
+    background-color: var(--accent-track);
+  }
+}
+
+@keyframes rt-progress-indicator-classic-indeterminate-fade {
+  100% {
+    background-color: var(--accent-7);
+  }
+}
+
+@keyframes rt-progress-indicator-classic-indeterminate-pulse {
+  0% {
+    background-color: var(--accent-7);
+  }
+  100% {
+    background-color: var(--accent-track);
+  }
+}
+
+/* soft */
+
+.rt-ProgressRoot:where(.rt-variant-soft) {
+  --progress-indicator-indeterminate-animation-start: rt-progress-indicator-soft-indeterminate-fade;
+  --progress-indicator-indeterminate-animation-repeat: rt-progress-indicator-soft-indeterminate-pulse;
+  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(.rt-ProgressIndicator) {
+    background-image: linear-gradient(var(--accent-a5), var(--accent-a5));
+    background-color: var(--accent-8);
+
+    &::after {
+      opacity: 0.75;
+    }
+  }
+}
+
+@keyframes rt-progress-indicator-soft-indeterminate-fade {
+  100% {
+    background-color: var(--accent-5);
+  }
+}
+
+@keyframes rt-progress-indicator-soft-indeterminate-pulse {
+  0% {
+    background-color: var(--accent-5);
+  }
+  100% {
+    background-color: var(--accent-7);
+  }
+}
+
+/* all high-contrast */
+.rt-ProgressRoot:where(.rt-high-contrast) {
+  --progress-indicator-indeterminate-animation-start: rt-progress-indicator-high-contrast-indeterminate-fade;
+  --progress-indicator-indeterminate-animation-repeat: rt-progress-indicator-high-contrast-indeterminate-pulse;
+
+  & :where(.rt-ProgressIndicator) {
+    background-color: var(--accent-12);
+
+    &::after {
+      opacity: 0.75;
+    }
+  }
+}
+
+@keyframes rt-progress-indicator-high-contrast-indeterminate-fade {
+  100% {
+    opacity: 0.8;
+  }
+}
+
+@keyframes rt-progress-indicator-high-contrast-indeterminate-pulse {
+  0% {
+    opacity: 0.8;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/src/components/progress.props.tsx

@@ -0,0 +1,23 @@
+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 progressPropDefs = {
+  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,
+  duration: { type: 'string' },
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  variant: PropDef<(typeof variants)[number]>;
+  duration: PropDef<string>;
+};
+
+export { progressPropDefs };

package/src/components/progress.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Progress as ProgressPrimitive } from 'radix-ui';
+
+import { progressPropDefs } from './progress.props.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { mergeStyles } from '../helpers/merge-styles.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 ProgressElement = React.ElementRef<typeof ProgressPrimitive.Root>;
+type ProgressOwnProps = GetPropDefTypes<typeof progressPropDefs>;
+interface ProgressProps
+  extends ComponentPropsWithout<typeof ProgressPrimitive.Root, RemovedProps | 'children'>,
+    MarginProps,
+    ProgressOwnProps {
+  duration?: `${number}s` | `${number}ms`;
+}
+const Progress = React.forwardRef<ProgressElement, ProgressProps>((props, forwardedRef) => {
+  const { className, style, color, radius, duration, ...progressProps } = extractProps(
+    props,
+    progressPropDefs,
+    marginPropDefs
+  );
+
+  return (
+    <ProgressPrimitive.Root
+      data-accent-color={color}
+      data-radius={radius}
+      ref={forwardedRef}
+      className={classNames('rt-ProgressRoot', className)}
+      style={mergeStyles(
+        {
+          '--progress-duration': 'value' in progressProps ? undefined : duration,
+          '--progress-value': 'value' in progressProps ? progressProps.value : undefined,
+          '--progress-max': 'max' in progressProps ? progressProps.max : undefined,
+        },
+        style
+      )}
+      {...progressProps}
+      asChild={false}
+    >
+      <ProgressPrimitive.Indicator className="rt-ProgressIndicator" />
+    </ProgressPrimitive.Root>
+  );
+});
+Progress.displayName = 'Progress';
+
+export { Progress };
+export type { ProgressProps };

package/src/components/quote.css

@@ -0,0 +1,16 @@
+.rt-Quote {
+  box-sizing: border-box;
+  font-family: var(--quote-font-family);
+  font-size: calc(var(--quote-font-size-adjust) * 1em);
+  font-style: var(--quote-font-style);
+  font-weight: var(--quote-font-weight);
+  line-height: 1.25;
+  letter-spacing: calc(
+    var(--quote-letter-spacing) + var(--letter-spacing, var(--default-letter-spacing))
+  );
+  color: inherit;
+
+  & :where(&) {
+    font-size: inherit;
+  }
+}