@kushagradhawan/kookie-ui 0.1.0

package/src/components/card.css

@@ -0,0 +1,213 @@
+@import './_internal/base-card.css';
+
+/* stylelint-disable selector-max-type */
+/* Disable selector-max-type rule to target `button` and `a` tags. */
+/* Make sure these tags are wrapped in `:where()` for 0 specificity. */
+
+.rt-Card {
+  --base-card-padding-top: var(--card-padding);
+  --base-card-padding-right: var(--card-padding);
+  --base-card-padding-bottom: var(--card-padding);
+  --base-card-padding-left: var(--card-padding);
+  --base-card-border-radius: var(--card-border-radius);
+  --base-card-border-width: var(--card-border-width);
+
+  &:where(:focus-visible) {
+    outline: 2px solid var(--focus-8);
+    outline-offset: -1px;
+
+    &::after {
+      outline: inherit;
+    }
+    &:where(:active:not([data-state='open'])) {
+      &::before {
+        background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
+      }
+    }
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*                Sizes                */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+@breakpoints {
+  .rt-Card {
+    &:where(.rt-r-size-1) {
+      --card-padding: var(--space-3);
+      --card-border-radius: var(--radius-4);
+    }
+    &:where(.rt-r-size-2) {
+      --card-padding: var(--space-4);
+      --card-border-radius: var(--radius-4);
+    }
+    &:where(.rt-r-size-3) {
+      --card-padding: var(--space-5);
+      --card-border-radius: var(--radius-5);
+    }
+    &:where(.rt-r-size-4) {
+      --card-padding: var(--space-6);
+      --card-border-radius: var(--radius-5);
+    }
+    &:where(.rt-r-size-5) {
+      --card-padding: var(--space-8);
+      --card-border-radius: var(--radius-6);
+    }
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*         Variants / Surface          */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+.rt-Card:where(.rt-variant-surface) {
+  --card-border-width: 1px;
+  --card-background-color: var(--color-panel);
+
+  &::before {
+    background-color: var(--card-background-color);
+    backdrop-filter: var(--backdrop-filter-panel);
+  }
+  &::after {
+    box-shadow: var(--base-card-surface-box-shadow);
+  }
+  &:where(:any-link, button, label) {
+    @media (hover: hover) {
+      &:where(:hover) {
+        &::after {
+          box-shadow: var(--base-card-surface-hover-box-shadow);
+        }
+      }
+    }
+    &:where([data-state='open']) {
+      &::after {
+        box-shadow: var(--base-card-surface-hover-box-shadow);
+      }
+    }
+    &:where(:active:not([data-state='open'])) {
+      &::after {
+        box-shadow: var(--base-card-surface-active-box-shadow);
+      }
+    }
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*         Variants / Classic          */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+.rt-Card:where(.rt-variant-classic) {
+  --card-border-width: 1px;
+  --card-background-color: var(--color-panel);
+
+  transition: box-shadow 120ms;
+  box-shadow: var(--base-card-classic-box-shadow-outer);
+
+  &::before {
+    background-color: var(--card-background-color);
+    backdrop-filter: var(--backdrop-filter-panel);
+  }
+  &::after {
+    box-shadow: var(--base-card-classic-box-shadow-inner);
+  }
+  &:where(:any-link, button, label) {
+    @media (hover: hover) {
+      &:where(: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);
+        }
+      }
+    }
+    &:where([data-state='open']) {
+      transition-duration: 40ms;
+      box-shadow: var(--base-card-classic-hover-box-shadow-outer);
+      &::after {
+        box-shadow: var(--base-card-classic-hover-box-shadow-inner);
+      }
+    }
+    &:where(:active:not([data-state='open'])) {
+      transition-duration: 40ms;
+      box-shadow: var(--base-card-classic-active-box-shadow-outer);
+      &::after {
+        box-shadow: var(--base-card-classic-active-box-shadow-inner);
+      }
+    }
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*          Variants / Ghost           */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+.rt-Card:where(.rt-variant-ghost) {
+  --card-border-width: 0px;
+
+  /* We reset the defined margin variables to avoid inheriting them from a higher component */
+  /* If a margin IS defined on the component itself, the utility class will win and reset it */
+  --margin-top: 0px;
+  --margin-right: 0px;
+  --margin-bottom: 0px;
+  --margin-left: 0px;
+
+  /* Define the overrides to incorporate the negative margins */
+  --margin-top-override: calc(var(--margin-top) - var(--card-padding));
+  --margin-right-override: calc(var(--margin-right) - var(--card-padding));
+  --margin-bottom-override: calc(var(--margin-bottom) - var(--card-padding));
+  --margin-left-override: calc(var(--margin-left) - var(--card-padding));
+
+  margin-top: var(--margin-top-override);
+  margin-right: var(--margin-right-override);
+  margin-bottom: var(--margin-bottom-override);
+  margin-left: var(--margin-left-override);
+
+  /* Reset the overrides on direct children */
+  :where(&) > * {
+    --margin-top-override: initial;
+    --margin-right-override: initial;
+    --margin-bottom-override: initial;
+    --margin-left-override: initial;
+  }
+  &:where(:any-link, button, label) {
+    @media (hover: hover) {
+      &:where(:hover) {
+        background-color: var(--gray-a3);
+        &:where(:focus-visible) {
+          background-color: var(--focus-a2);
+        }
+      }
+    }
+    &:where([data-state='open']) {
+      background-color: var(--gray-a3);
+      &:where(:focus-visible) {
+        background-color: var(--focus-a2);
+      }
+    }
+    &:where(:active:not([data-state='open'])) {
+      background-color: var(--gray-a4);
+      &:where(:focus-visible) {
+        background-color: var(--focus-a2);
+      }
+    }
+  }
+}
+
+/* Better -webkit-tap-highlight-color */
+.rt-Card:where(:any-link, button, label) {
+  @media (pointer: coarse) {
+    &:where(:active:not(:focus-visible, [data-state='open'])) {
+      &::before {
+        background-image: linear-gradient(var(--gray-a4), var(--gray-a4));
+      }
+    }
+  }
+}

package/src/components/card.props.tsx

@@ -0,0 +1,17 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+
+import type { PropDef } from '../props/prop-def.js';
+
+const sizes = ['1', '2', '3', '4', '5'] as const;
+const variants = ['surface', 'classic', 'ghost'] as const;
+
+const cardPropDefs = {
+  ...asChildPropDef,
+  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  variant: PropDef<(typeof variants)[number]>;
+};
+
+export { cardPropDefs };

package/src/components/card.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Slot } from 'radix-ui';
+
+import { cardPropDefs } from './card.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 CardElement = React.ElementRef<'div'>;
+type CardOwnProps = GetPropDefTypes<typeof cardPropDefs>;
+interface CardProps extends ComponentPropsWithout<'div', RemovedProps>, MarginProps, CardOwnProps {}
+const Card = React.forwardRef<CardElement, CardProps>((props, forwardedRef) => {
+  const { asChild, className, ...cardProps } = extractProps(props, cardPropDefs, marginPropDefs);
+  const Comp = asChild ? Slot.Root : 'div';
+  return (
+    <Comp
+      ref={forwardedRef}
+      {...cardProps}
+      className={classNames('rt-reset', 'rt-BaseCard', 'rt-Card', className)}
+    />
+  );
+});
+Card.displayName = 'Card';
+
+export { Card };
+export type { CardProps };

package/src/components/checkbox-cards.css

@@ -0,0 +1,194 @@
+@import './_internal/base-card.css';
+@import './_internal/base-checkbox.css';
+
+.rt-CheckboxCardsRoot {
+  line-height: var(--line-height);
+  letter-spacing: var(--letter-spacing);
+  cursor: default;
+}
+
+.rt-CheckboxCardsItem {
+  --base-card-padding-top: var(--checkbox-cards-item-padding-top);
+  --base-card-padding-right: var(--checkbox-cards-item-padding-right);
+  --base-card-padding-bottom: var(--checkbox-cards-item-padding-bottom);
+  --base-card-padding-left: var(--checkbox-cards-item-padding-left);
+  --base-card-border-radius: var(--checkbox-cards-item-border-radius);
+  --base-card-border-width: var(--checkbox-cards-item-border-width);
+
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  cursor: var(--cursor-button);
+  -webkit-tap-highlight-color: transparent;
+
+  &:where(:has(:focus-visible)) {
+    outline: 2px solid var(--focus-8);
+    outline-offset: -1px;
+
+    &::after {
+      outline: inherit;
+    }
+  }
+
+  & > * {
+    /* 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;
+  }
+}
+
+.rt-CheckboxCardCheckbox {
+  position: absolute;
+  right: var(--checkbox-cards-item-padding-left);
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*                Sizes                */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+.rt-CheckboxCardsItem {
+  --checkbox-cards-item-padding-right: calc(
+    var(--checkbox-cards-item-padding-left) * 2 + var(--checkbox-cards-item-checkbox-size)
+  );
+}
+
+@breakpoints {
+  .rt-CheckboxCardsRoot {
+    /* 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);
+      --checkbox-cards-item-padding-top: calc(var(--space-3) / 1.2);
+      --checkbox-cards-item-padding-bottom: calc(var(--space-3) / 1.2);
+      --checkbox-cards-item-padding-left: var(--space-3);
+      --checkbox-cards-item-border-radius: var(--radius-3);
+      /* keep in sync with checkbox */
+      --checkbox-cards-item-checkbox-size: calc(var(--space-4) * 0.875);
+    }
+    /* 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);
+      --checkbox-cards-item-padding-top: calc(var(--space-4) * 0.875);
+      --checkbox-cards-item-padding-bottom: calc(var(--space-4) * 0.875);
+      --checkbox-cards-item-padding-left: var(--space-4);
+      --checkbox-cards-item-border-radius: var(--radius-3);
+      /* keep in sync with checkbox */
+      --checkbox-cards-item-checkbox-size: var(--space-4);
+    }
+    /* 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);
+      --checkbox-cards-item-padding-top: calc(var(--space-5) / 1.2);
+      --checkbox-cards-item-padding-bottom: calc(var(--space-5) / 1.2);
+      --checkbox-cards-item-padding-left: var(--space-5);
+      --checkbox-cards-item-border-radius: var(--radius-4);
+      /* keep in sync with checkbox */
+      --checkbox-cards-item-checkbox-size: calc(var(--space-4) * 1.25);
+    }
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*         Variants / Surface          */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+:where(.rt-CheckboxCardsRoot.rt-variant-surface) {
+  .rt-CheckboxCardsItem {
+    --checkbox-cards-item-border-width: 1px;
+    --checkbox-cards-item-background-color: var(--color-surface);
+
+    &::before {
+      background-color: var(--checkbox-cards-item-background-color);
+    }
+    &::after {
+      box-shadow: var(--base-card-surface-box-shadow);
+    }
+    @media (hover: hover) {
+      &:where(:not(:has(:disabled)):hover) {
+        &::after {
+          box-shadow: var(--base-card-surface-hover-box-shadow);
+        }
+      }
+    }
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*         Variants / Classic          */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+:where(.rt-CheckboxCardsRoot.rt-variant-classic) {
+  .rt-CheckboxCardsItem {
+    --checkbox-cards-item-border-width: 1px;
+    --checkbox-cards-item-background-color: var(--color-surface);
+
+    transition: box-shadow 120ms;
+    box-shadow: var(--base-card-classic-box-shadow-outer);
+
+    &::before {
+      background-color: var(--checkbox-cards-item-background-color);
+    }
+    &::after {
+      box-shadow: var(--base-card-classic-box-shadow-inner);
+    }
+    @media (hover: hover) {
+      &:where(:not(:has(:disabled)):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 tap highlights          */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+/* Better -webkit-tap-highlight-color */
+.rt-CheckboxCardsItem {
+  @media (pointer: coarse) {
+    &:where(:active:not(:focus-visible)) {
+      &::before {
+        background-image: linear-gradient(var(--gray-a4), var(--gray-a4));
+      }
+    }
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*            All disabled             */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+.rt-CheckboxCardsItem:where(:has(:disabled)) {
+  cursor: var(--cursor-disabled);
+  color: var(--gray-a9);
+
+  &::before {
+    background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
+  }
+  &::selection {
+    background-color: var(--gray-a5);
+  }
+}

package/src/components/checkbox-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 checkboxCardsRootPropDefs = {
+  ...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(200px, 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 { checkboxCardsRootPropDefs };

package/src/components/checkbox-cards.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import * as React from 'react';
+import classNames from 'classnames';
+import { Context } from 'radix-ui/internal';
+
+import * as CheckboxGroupPrimitive from './checkbox-group.primitive.js';
+import { createCheckboxGroupScope } from './checkbox-group.primitive.js';
+import { checkboxCardsRootPropDefs } from './checkbox-cards.props.js';
+import { baseCheckboxPropDefs } from './_internal/base-checkbox.props.js';
+import { Grid } from './grid.js';
+import { ThickCheckIcon } from './icons.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 { Responsive, GetPropDefTypes } from '../props/prop-def.js';
+
+const CHECKBOX_CARD_GROUP_NAME = 'CheckboxCards';
+
+type ScopedProps<P> = P & { __scopeCheckboxCards?: Context.Scope };
+const [createCheckboxCardsContext] = Context.createContextScope(CHECKBOX_CARD_GROUP_NAME, [
+  createCheckboxGroupScope,
+]);
+const useCheckboxGroupScope = createCheckboxGroupScope();
+
+type CheckboxCardsContextValue = {
+  size?: Responsive<(typeof checkboxCardsRootPropDefs.size.values)[number]>;
+  highContrast?: boolean;
+};
+
+const [CheckboxCardsProvider, useCheckboxCardsContext] =
+  createCheckboxCardsContext<CheckboxCardsContextValue>(CHECKBOX_CARD_GROUP_NAME);
+
+type CheckboxCardsRootElement = React.ElementRef<typeof CheckboxGroupPrimitive.Root>;
+type CheckboxCardsRootOwnProps = GetPropDefTypes<typeof checkboxCardsRootPropDefs>;
+interface CheckboxCardsRootProps
+  extends ComponentPropsWithout<
+      typeof CheckboxGroupPrimitive.Root,
+      'asChild' | 'color' | 'defaultChecked'
+    >,
+    MarginProps,
+    CheckboxCardsRootOwnProps {}
+const CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCardsRootProps>(
+  (props: ScopedProps<CheckboxCardsRootProps>, forwardedRef) => {
+    const { __scopeCheckboxCards, className, color, ...rootProps } = extractProps(
+      props,
+      checkboxCardsRootPropDefs,
+      marginPropDefs
+    );
+    const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxCards);
+    return (
+      <CheckboxCardsProvider
+        scope={__scopeCheckboxCards}
+        size={props.size}
+        highContrast={props.highContrast}
+      >
+        <Grid asChild>
+          <CheckboxGroupPrimitive.Root
+            {...checkboxGroupScope}
+            data-accent-color={color}
+            {...rootProps}
+            ref={forwardedRef}
+            className={classNames('rt-CheckboxCardsRoot', className)}
+          />
+        </Grid>
+      </CheckboxCardsProvider>
+    );
+  }
+);
+CheckboxCardsRoot.displayName = 'CheckboxCards.Root';
+
+type CheckboxCardsItemElement = React.ElementRef<typeof CheckboxGroupPrimitive.Item>;
+interface CheckboxCardsItemProps
+  extends ComponentPropsWithout<typeof CheckboxGroupPrimitive.Item, RemovedProps>,
+    MarginProps {}
+const CheckboxCardsItem = React.forwardRef<
+  CheckboxCardsItemElement,
+  ScopedProps<CheckboxCardsItemProps>
+>(({ __scopeCheckboxCards, children, className, style, ...props }, forwardedRef) => {
+  const context = useCheckboxCardsContext('CheckboxCardsItem', __scopeCheckboxCards);
+  const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxCards);
+  const { className: checkboxClassName } = extractProps(
+    // Pass size / highContrast values from the context and static variant to generate styles
+    { size: context?.size, variant: 'surface', highContrast: context?.highContrast },
+    // Pass size & variant prop defs to allow it to be extracted
+    baseCheckboxPropDefs
+  );
+  return (
+    <label className={classNames('rt-BaseCard', 'rt-CheckboxCardsItem', className)} style={style}>
+      {children}
+      <CheckboxGroupPrimitive.Item
+        {...checkboxGroupScope}
+        {...props}
+        ref={forwardedRef}
+        className={classNames(
+          'rt-reset',
+          'rt-BaseCheckboxRoot',
+          'rt-CheckboxCardCheckbox',
+          checkboxClassName
+        )}
+      >
+        <CheckboxGroupPrimitive.Indicator
+          {...checkboxGroupScope}
+          asChild
+          className="rt-BaseCheckboxIndicator"
+        >
+          <ThickCheckIcon />
+        </CheckboxGroupPrimitive.Indicator>
+      </CheckboxGroupPrimitive.Item>
+    </label>
+  );
+});
+CheckboxCardsItem.displayName = 'CheckboxCards.Item';
+
+export { CheckboxCardsRoot as Root, CheckboxCardsItem as Item };
+export type { CheckboxCardsRootProps as RootProps, CheckboxCardsItemProps as ItemProps };

package/src/components/checkbox-group.css

@@ -0,0 +1,35 @@
+.rt-CheckboxGroupRoot {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.rt-CheckboxGroupItem {
+  display: flex;
+  gap: 0.5em;
+
+  /* Make sure whitespace to the right of the text is not clickable */
+  width: fit-content;
+}
+
+.rt-CheckboxGroupItemCheckbox {
+  &:where(:focus-visible) {
+    &::before {
+      outline: 2px solid var(--focus-8);
+      outline-offset: 2px;
+    }
+  }
+
+  &:where(:disabled) {
+    cursor: var(--cursor-disabled);
+
+    &::before {
+      background-color: var(--gray-a3);
+    }
+  }
+}
+
+.rt-CheckboxGroupItemInner {
+  /* Make layouts with text truncation possible */
+  min-width: 0;
+}