@kushagradhawan/kookie-ui 0.1.0

package/src/components/quote.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 quotePropDefs = {
+  ...asChildPropDef,
+  ...truncatePropDef,
+  ...textWrapPropDef,
+};
+
+export { quotePropDefs };

package/src/components/quote.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Slot } from 'radix-ui';
+
+import { quotePropDefs } from './quote.props.js';
+import { extractProps } from '../helpers/extract-props.js';
+
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+import type { GetPropDefTypes } from '../props/prop-def.js';
+
+type QuoteElement = React.ElementRef<'q'>;
+type QuoteOwnProps = GetPropDefTypes<typeof quotePropDefs>;
+interface QuoteProps extends ComponentPropsWithout<'q', RemovedProps>, QuoteOwnProps {}
+const Quote = React.forwardRef<QuoteElement, QuoteProps>((props, forwardedRef) => {
+  const { asChild, className, ...quoteProps } = extractProps(props, quotePropDefs);
+  const Comp = asChild ? Slot.Root : 'q';
+  return <Comp {...quoteProps} ref={forwardedRef} className={classNames('rt-Quote', className)} />;
+});
+Quote.displayName = 'Quote';
+
+export { Quote };
+export type { QuoteProps };

package/src/components/radio-cards.css

@@ -0,0 +1,189 @@
+@import './_internal/base-card.css';
+
+.rt-RadioCardsRoot {
+  line-height: var(--line-height);
+  letter-spacing: var(--letter-spacing);
+  cursor: default;
+}
+
+.rt-RadioCardsItem {
+  --base-card-padding-top: var(--radio-cards-item-padding-y);
+  --base-card-padding-right: var(--radio-cards-item-padding-x);
+  --base-card-padding-bottom: var(--radio-cards-item-padding-y);
+  --base-card-padding-left: var(--radio-cards-item-padding-x);
+  --base-card-border-radius: var(--radio-cards-item-border-radius);
+  --base-card-border-width: var(--radio-cards-item-border-width);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+
+  & > * {
+    /* Avoid unintentional drag interactions (e.g. on images) */
+    pointer-events: none;
+  }
+  /* stylelint-disable-next-line selector-max-type */
+  & > :where(svg) {
+    /* Don’t squish icons */
+    flex-shrink: 0;
+  }
+  &::after {
+    outline-offset: -1px;
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*                Sizes                */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+@breakpoints {
+  .rt-RadioCardsRoot {
+    /* 40px height for the card with one line of text */
+    &:where(.rt-r-size-1) {
+      font-size: var(--font-size-2);
+      --line-height: var(--line-height-2);
+      --letter-spacing: var(--letter-spacing-2);
+      --radio-cards-item-padding-x: var(--space-3);
+      --radio-cards-item-padding-y: calc(var(--space-3) / 1.2);
+      --radio-cards-item-border-radius: var(--radius-3);
+    }
+    /* 48px height for the card with one line of text */
+    &:where(.rt-r-size-2) {
+      font-size: var(--font-size-2);
+      --line-height: var(--line-height-2);
+      --letter-spacing: var(--letter-spacing-2);
+      --radio-cards-item-padding-x: var(--space-4);
+      --radio-cards-item-padding-y: calc(var(--space-4) * 0.875);
+      --radio-cards-item-border-radius: var(--radius-3);
+    }
+    /* 64px height for the card with one line of text */
+    &:where(.rt-r-size-3) {
+      font-size: var(--font-size-3);
+      --line-height: var(--line-height-3);
+      --letter-spacing: var(--letter-spacing-3);
+      --radio-cards-item-padding-x: var(--space-5);
+      --radio-cards-item-padding-y: calc(var(--space-5) / 1.2);
+      --radio-cards-item-border-radius: var(--radius-4);
+    }
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*         Variants / Surface          */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+:where(.rt-RadioCardsRoot.rt-variant-surface) {
+  .rt-RadioCardsItem {
+    --radio-cards-item-border-width: 1px;
+    --radio-cards-item-background-color: var(--color-surface);
+
+    &::before {
+      background-color: var(--radio-cards-item-background-color);
+    }
+    &::after {
+      box-shadow: var(--base-card-surface-box-shadow);
+    }
+    @media (hover: hover) {
+      &:where(:not(:disabled):not([data-state='checked']):hover) {
+        &::after {
+          box-shadow: var(--base-card-surface-hover-box-shadow);
+        }
+      }
+    }
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*         Variants / Classic          */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+:where(.rt-RadioCardsRoot.rt-variant-classic) {
+  .rt-RadioCardsItem {
+    --radio-cards-item-border-width: 1px;
+    --radio-cards-item-background-color: var(--color-surface);
+
+    transition: box-shadow 120ms;
+    box-shadow: var(--base-card-classic-box-shadow-outer);
+
+    &::before {
+      background-color: var(--radio-cards-item-background-color);
+    }
+    &::after {
+      box-shadow: var(--base-card-classic-box-shadow-inner);
+    }
+    @media (hover: hover) {
+      &:where(:not(:disabled):not([data-state='checked']):hover) {
+        transition-duration: 40ms;
+        box-shadow: var(--base-card-classic-hover-box-shadow-outer);
+        &::after {
+          box-shadow: var(--base-card-classic-hover-box-shadow-inner);
+        }
+      }
+    }
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*             All checked             */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+.rt-RadioCardsItem:where([data-state='checked']) {
+  &::after {
+    outline: 2px solid var(--accent-indicator);
+  }
+  :where(.rt-RadioCardsRoot.rt-high-contrast) & {
+    &::after {
+      outline-color: var(--accent-12);
+    }
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*              All focus              */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+.rt-RadioCardsItem:where(:focus-visible) {
+  &::after {
+    outline: 2px solid var(--focus-8);
+  }
+  &:where([data-state='checked']) {
+    &::before {
+      background-image: linear-gradient(var(--focus-a3), var(--focus-a3));
+    }
+    &::after {
+      outline-color: var(--focus-10);
+    }
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*            All disabled             */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+.rt-RadioCardsItem:where(:disabled) {
+  cursor: var(--cursor-disabled);
+  color: var(--gray-a9);
+
+  &::selection {
+    background-color: var(--gray-a5);
+  }
+  &::before {
+    background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
+  }
+  &::after {
+    outline-color: var(--gray-8);
+  }
+}

package/src/components/radio-cards.props.tsx

@@ -0,0 +1,26 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+import { colorPropDef } from '../props/color.prop.js';
+import { highContrastPropDef } from '../props/high-contrast.prop.js';
+import { gridPropDefs } from './grid.props.js';
+
+import type { PropDef } from '../props/prop-def.js';
+
+const sizes = ['1', '2', '3'] as const;
+const variants = ['surface', 'classic'] as const;
+
+const radioCardsRootPropDefs = {
+  ...asChildPropDef,
+  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,
+  columns: { ...gridPropDefs.columns, default: 'repeat(auto-fit, minmax(160px, 1fr))' },
+  gap: { ...gridPropDefs.gap, default: '4' },
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  variant: PropDef<(typeof variants)[number]>;
+  columns: PropDef<(typeof gridPropDefs.columns.values)[number]>;
+  gap: PropDef<(typeof gridPropDefs.gap.values)[number]>;
+};
+
+export { radioCardsRootPropDefs };

package/src/components/radio-cards.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
+
+import { radioCardsRootPropDefs } from './radio-cards.props.js';
+import { Grid } from './grid.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 RadioCardsRootElement = React.ElementRef<typeof RadioGroupPrimitive.Root>;
+type RadioCardsRootOwnProps = GetPropDefTypes<typeof radioCardsRootPropDefs>;
+interface RadioCardsRootProps
+  extends ComponentPropsWithout<
+      typeof RadioGroupPrimitive.Root,
+      'asChild' | 'color' | 'defaultChecked'
+    >,
+    MarginProps,
+    RadioCardsRootOwnProps {}
+const RadioCardsRoot = React.forwardRef<RadioCardsRootElement, RadioCardsRootProps>(
+  (props, forwardedRef) => {
+    const { className, color, ...rootProps } = extractProps(
+      props,
+      radioCardsRootPropDefs,
+      marginPropDefs
+    );
+    return (
+      <Grid asChild>
+        <RadioGroupPrimitive.Root
+          data-accent-color={color}
+          {...rootProps}
+          ref={forwardedRef}
+          className={classNames('rt-RadioCardsRoot', className)}
+        />
+      </Grid>
+    );
+  }
+);
+RadioCardsRoot.displayName = 'RadioCards.Root';
+
+type RadioCardsItemElement = React.ElementRef<typeof RadioGroupPrimitive.Item>;
+interface RadioCardsItemProps
+  extends ComponentPropsWithout<typeof RadioGroupPrimitive.Item, RemovedProps>,
+    MarginProps {}
+const RadioCardsItem = React.forwardRef<RadioCardsItemElement, RadioCardsItemProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <RadioGroupPrimitive.Item
+      {...props}
+      asChild={false}
+      ref={forwardedRef}
+      className={classNames('rt-reset', 'rt-BaseCard', 'rt-RadioCardsItem', className)}
+    />
+  )
+);
+RadioCardsItem.displayName = 'RadioCards.Item';
+
+export { RadioCardsRoot as Root, RadioCardsItem as Item };
+export type { RadioCardsRootProps as RootProps, RadioCardsItemProps as ItemProps };

package/src/components/radio-group.css

@@ -0,0 +1,18 @@
+.rt-RadioGroupRoot {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.rt-RadioGroupItem {
+  display: flex;
+  gap: 0.5em;
+
+  /* Make sure whitespace to the right of the text is not clickable */
+  width: fit-content;
+}
+
+.rt-RadioGroupItemInner {
+  /* Make layouts with text truncation possible */
+  min-width: 0;
+}

package/src/components/radio-group.props.tsx

@@ -0,0 +1,21 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+import { colorPropDef } from '../props/color.prop.js';
+import { highContrastPropDef } from '../props/high-contrast.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 radioGroupRootPropDefs = {
+  ...asChildPropDef,
+  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,
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  variant: PropDef<(typeof variants)[number]>;
+};
+
+export { radioGroupRootPropDefs };

package/src/components/radio-group.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import * as React from 'react';
+import classNames from 'classnames';
+import { Context } from 'radix-ui/internal';
+import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
+
+import { radioGroupRootPropDefs } from './radio-group.props.js';
+import { Text } from './text.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { marginPropDefs } from '../props/margin.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';
+
+const RADIO_GROUP_NAME = 'RadioGroup';
+
+type ScopedProps<P> = P & { __scopeRadioGroup?: Context.Scope };
+const [createRadioGroupContext] = Context.createContextScope(RADIO_GROUP_NAME, [
+  RadioGroupPrimitive.createRadioGroupScope,
+]);
+const useRadioGroupScope = RadioGroupPrimitive.createRadioGroupScope();
+
+type RadioGroupRootOwnProps = GetPropDefTypes<typeof radioGroupRootPropDefs>;
+type RadioGroupContextValue = RadioGroupRootOwnProps;
+
+const [RadioGroupProvider, useRadioGroupContext] =
+  createRadioGroupContext<RadioGroupContextValue>(RADIO_GROUP_NAME);
+
+type RadioGroupRootElement = React.ElementRef<typeof RadioGroupPrimitive.Root>;
+interface RadioGroupRootProps
+  extends ComponentPropsWithout<
+      typeof RadioGroupPrimitive.Root,
+      'asChild' | 'color' | 'defaultChecked'
+    >,
+    MarginProps,
+    RadioGroupRootOwnProps {}
+const RadioGroupRoot = React.forwardRef<RadioGroupRootElement, RadioGroupRootProps>(
+  (
+    {
+      color = radioGroupRootPropDefs.color.default,
+      highContrast = radioGroupRootPropDefs.highContrast.default,
+      size = radioGroupRootPropDefs.size.default,
+      variant = radioGroupRootPropDefs.variant.default,
+      ...props
+    }: ScopedProps<RadioGroupRootProps>,
+    forwardedRef
+  ) => {
+    const { __scopeRadioGroup, className, ...rootProps } = extractProps(props, marginPropDefs);
+    const radioGroupScope = useRadioGroupScope(__scopeRadioGroup);
+    return (
+      <RadioGroupProvider
+        scope={__scopeRadioGroup}
+        color={color}
+        highContrast={highContrast}
+        size={size}
+        variant={variant}
+      >
+        <RadioGroupPrimitive.Root
+          {...radioGroupScope}
+          {...rootProps}
+          ref={forwardedRef}
+          className={classNames('rt-RadioGroupRoot', className)}
+        />
+      </RadioGroupProvider>
+    );
+  }
+);
+RadioGroupRoot.displayName = 'RadioGroup.Root';
+
+type RadioGroupItemElement = React.ElementRef<typeof RadioGroupItemRadio>;
+interface RadioGroupItemProps
+  extends ComponentPropsWithout<typeof RadioGroupItemRadio, RemovedProps>,
+    MarginProps {}
+const RadioGroupItem = React.forwardRef<RadioGroupItemElement, RadioGroupItemProps>(
+  (_props: ScopedProps<RadioGroupItemProps>, forwardedRef) => {
+    const { __scopeRadioGroup, children, className, style, ...props } = _props;
+    const { size } = useRadioGroupContext('RadioGroupItem', __scopeRadioGroup);
+
+    // Render `<Text as="label">` if children are provided, otherwise render
+    // the solo radio button to allow building out your custom layouts with it.
+    if (children) {
+      return (
+        <Text
+          as="label"
+          size={size}
+          className={classNames('rt-RadioGroupItem', className)}
+          style={style}
+        >
+          <RadioGroupItemRadio
+            __scopeRadioGroup={__scopeRadioGroup}
+            {...props}
+            ref={forwardedRef}
+          />
+          {children && <span className="rt-RadioGroupItemInner">{children}</span>}
+        </Text>
+      );
+    }
+
+    return (
+      <RadioGroupItemRadio
+        __scopeRadioGroup={__scopeRadioGroup}
+        {...props}
+        ref={forwardedRef}
+        className={className}
+        style={style}
+      />
+    );
+  }
+);
+RadioGroupItem.displayName = 'RadioGroup.Item';
+
+type RadioGroupItemRadioElement = React.ElementRef<typeof RadioGroupPrimitive.Item>;
+interface RadioGroupItemRadioProps
+  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {}
+const RadioGroupItemRadio = React.forwardRef<
+  RadioGroupItemRadioElement,
+  ScopedProps<RadioGroupItemRadioProps>
+>(({ __scopeRadioGroup, ...props }, forwardedRef) => {
+  const context = useRadioGroupContext('RadioGroupItemRadio', __scopeRadioGroup);
+  const radioGroupScope = useRadioGroupScope(__scopeRadioGroup);
+  const { color, className } = extractProps(
+    { ...props, ...context },
+    radioGroupRootPropDefs,
+    marginPropDefs
+  );
+  return (
+    <RadioGroupPrimitive.Item
+      {...radioGroupScope}
+      data-accent-color={color}
+      {...props}
+      asChild={false}
+      ref={forwardedRef}
+      className={classNames('rt-reset', 'rt-BaseRadioRoot', className)}
+    />
+  );
+});
+RadioGroupItemRadio.displayName = 'RadioGroup.ItemRadio';
+
+export { RadioGroupRoot as Root, RadioGroupItem as Item };
+export type { RadioGroupRootProps as RootProps, RadioGroupItemProps as ItemProps };

package/src/components/radio.css

@@ -0,0 +1 @@
+@import './_internal/base-radio.css';

package/src/components/radio.props.tsx

@@ -0,0 +1 @@
+export { baseRadioPropDefs as radioPropDefs } from './_internal/base-radio.props.js';

package/src/components/radio.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+import classNames from 'classnames';
+import { composeEventHandlers, composeRefs } from 'radix-ui/internal';
+
+import { radioPropDefs } from './radio.props.js';
+import { marginPropDefs } from '../props/margin.props.js';
+import { extractProps } from '../helpers/extract-props.js';
+
+import type { MarginProps } from '../props/margin.props.js';
+import type { ComponentPropsWithout } from '../helpers/component-props.js';
+import type { NotInputRadioAttributes } from '../helpers/input-attributes.js';
+import type { GetPropDefTypes } from '../props/prop-def.js';
+
+type RadioElement = React.ElementRef<'input'>;
+type RadioOwnProps = GetPropDefTypes<typeof radioPropDefs> & {
+  value: string;
+  onValueChange?: (value: string) => void;
+};
+type RadioInputProps = ComponentPropsWithout<
+  'input',
+  NotInputRadioAttributes | 'color' | 'defaultValue' | 'value'
+>;
+interface RadioProps extends RadioInputProps, MarginProps, RadioOwnProps {}
+
+const Radio = React.forwardRef<RadioElement, RadioProps>((props, forwardedRef) => {
+  const ref = React.useRef<RadioElement>(null);
+  const { className, color, onChange, onValueChange, ...radioProps } = extractProps(
+    props,
+    radioPropDefs,
+    marginPropDefs
+  );
+  return (
+    <input
+      type="radio"
+      data-accent-color={color}
+      {...radioProps}
+      onChange={composeEventHandlers(onChange, (event) =>
+        onValueChange?.(event.currentTarget.value)
+      )}
+      ref={composeRefs(ref, forwardedRef)}
+      className={classNames('rt-reset', 'rt-BaseRadioRoot', 'rt-RadioRoot', className)}
+    />
+  );
+});
+Radio.displayName = 'Radio';
+
+export { Radio };
+export type { RadioProps };