@kushagradhawan/kookie-ui 0.1.0

package/src/components/blockquote.css

@@ -0,0 +1,5 @@
+.rt-Blockquote {
+  box-sizing: border-box;
+  border-left: max(var(--space-1), 0.25em) solid var(--accent-a6);
+  padding-left: min(var(--space-5), max(var(--space-3), 0.5em));
+}

package/src/components/blockquote.props.tsx

@@ -0,0 +1,29 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+import { colorPropDef } from '../props/color.prop.js';
+import { highContrastPropDef } from '../props/high-contrast.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 blockquotePropDefs = {
+  ...asChildPropDef,
+  size: {
+    type: 'enum',
+    className: 'rt-r-size',
+    values: sizes,
+    responsive: true,
+  },
+  ...weightPropDef,
+  ...colorPropDef,
+  ...highContrastPropDef,
+  ...truncatePropDef,
+  ...textWrapPropDef,
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+};
+
+export { blockquotePropDefs };

package/src/components/blockquote.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Slot } from 'radix-ui';
+
+import { Text } from './text.js';
+
+import type { blockquotePropDefs } from './blockquote.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 BlockquoteElement = React.ElementRef<'blockquote'>;
+type BlockQuoteOwnProps = GetPropDefTypes<typeof blockquotePropDefs>;
+interface BlockquoteProps
+  extends ComponentPropsWithout<'blockquote', RemovedProps>,
+    MarginProps,
+    BlockQuoteOwnProps {}
+const Blockquote = React.forwardRef<BlockquoteElement, BlockquoteProps>((props, forwardedRef) => {
+  const { asChild, children, className, ...blockquoteProps } = props;
+  const Comp = asChild ? Slot.Root : 'blockquote';
+  return (
+    <Text
+      asChild
+      {...blockquoteProps}
+      ref={forwardedRef}
+      className={classNames('rt-Blockquote', className)}
+    >
+      <Comp>{children}</Comp>
+    </Text>
+  );
+});
+Blockquote.displayName = 'Blockquote';
+
+export { Blockquote };
+export type { BlockquoteProps };

package/src/components/box.css

@@ -0,0 +1,4 @@
+.rt-Box {
+  box-sizing: border-box;
+  display: block;
+}

package/src/components/box.props.tsx

@@ -0,0 +1,44 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+
+import type { PropDef, GetPropDefTypes } from '../props/prop-def.js';
+
+const as = ['div', 'span'] as const;
+const displayValues = ['none', 'inline', 'inline-block', 'block', 'contents'] as const;
+
+const boxPropDefs = {
+  /**
+   * Controls whether to render **div** or **span**
+   *
+   * @example
+   * as="div"
+   * as="span"
+   */
+  as: { type: 'enum', values: as, default: 'div' },
+  ...asChildPropDef,
+  /**
+   * Sets the CSS **display** property.
+   * Supports a subset of the corresponding CSS values and responsive objects.
+   *
+   * @example
+   * display="inline-block"
+   * display={{ sm: 'none', lg: 'block' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/display
+   */
+  display: {
+    type: 'enum',
+    className: 'rt-r-display',
+    values: displayValues,
+    responsive: true,
+  },
+} satisfies {
+  as: PropDef<(typeof as)[number]>;
+  display: PropDef<(typeof displayValues)[number]>;
+};
+
+// Use all of the imported prop defs to ensure that JSDoc works
+type BoxOwnProps = GetPropDefTypes<typeof boxPropDefs & typeof asChildPropDef>;
+
+export { boxPropDefs };
+export type { BoxOwnProps };

package/src/components/box.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+import { Slot } from './slot.js';
+import { boxPropDefs } from './box.props.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { layoutPropDefs } from '../props/layout.props.js';
+import { marginPropDefs } from '../props/margin.props.js';
+
+import type { LayoutProps } from '../props/layout.props.js';
+import type { MarginProps } from '../props/margin.props.js';
+import type { BoxOwnProps } from './box.props.js';
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+
+type BoxElement = React.ElementRef<'div'>;
+interface CommonBoxProps extends MarginProps, LayoutProps, BoxOwnProps {}
+type BoxDivProps = { as?: 'div' } & ComponentPropsWithout<'div', RemovedProps>;
+type BoxSpanProps = { as: 'span' } & ComponentPropsWithout<'span', RemovedProps>;
+type BoxProps = CommonBoxProps & (BoxSpanProps | BoxDivProps);
+
+const Box = React.forwardRef<BoxElement, BoxProps>((props, forwardedRef) => {
+  const {
+    className,
+    asChild,
+    as: Tag = 'div',
+    ...boxProps
+  } = extractProps(props, boxPropDefs, layoutPropDefs, marginPropDefs);
+  const Comp = asChild ? Slot : Tag;
+  return <Comp {...boxProps} ref={forwardedRef} className={classNames('rt-Box', className)} />;
+});
+Box.displayName = 'Box';
+
+export { Box };
+export type { BoxProps };

package/src/components/button.css

@@ -0,0 +1,149 @@
+@import './_internal/base-button.css';
+
+.rt-Button {
+  &:where(:not(.rt-variant-ghost)) {
+    /* stylelint-disable-next-line selector-max-type */
+    & :where(svg) {
+      opacity: 0.9;
+    }
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * SIZES                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.rt-Button {
+  &:where(.rt-variant-ghost) {
+    padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
+
+    /* 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(--button-ghost-padding-y));
+    --margin-right-override: calc(var(--margin-right) - var(--button-ghost-padding-x));
+    --margin-bottom-override: calc(var(--margin-bottom) - var(--button-ghost-padding-y));
+    --margin-left-override: calc(var(--margin-left) - var(--button-ghost-padding-x));
+
+    /* Reset the overrides on direct children */
+    :where(&) > * {
+      --margin-top-override: initial;
+      --margin-right-override: initial;
+      --margin-bottom-override: initial;
+      --margin-left-override: initial;
+    }
+
+    margin: var(--margin-top-override) var(--margin-right-override) var(--margin-bottom-override)
+      var(--margin-left-override);
+  }
+}
+
+@breakpoints {
+  .rt-Button {
+    &:where(.rt-r-size-1) {
+      gap: var(--space-1);
+      font-size: var(--font-size-1);
+      line-height: var(--line-height-1);
+      letter-spacing: var(--letter-spacing-1);
+
+      /* stylelint-disable-next-line selector-max-type */
+      & :where(svg) {
+        width: 13px;
+        height: 13px;
+      }
+
+      &:where(:not(.rt-variant-ghost)) {
+        padding-left: var(--space-2);
+        padding-right: var(--space-2);
+      }
+      &:where(.rt-variant-ghost) {
+        gap: var(--space-1);
+        --button-ghost-padding-x: var(--space-2);
+        --button-ghost-padding-y: var(--space-1);
+      }
+    }
+    &:where(.rt-r-size-2) {
+      gap: var(--space-2);
+      font-size: var(--font-size-2);
+      line-height: var(--line-height-2);
+      letter-spacing: var(--letter-spacing-2);
+
+      /* stylelint-disable-next-line selector-max-type */
+      & :where(svg) {
+        width: 15px;
+        height: 15px;
+      }
+
+      &:where(:not(.rt-variant-ghost)) {
+        padding-left: var(--space-3);
+        padding-right: var(--space-3);
+      }
+      &:where(.rt-variant-ghost) {
+        gap: var(--space-1);
+        --button-ghost-padding-x: var(--space-2);
+        --button-ghost-padding-y: var(--space-1);
+      }
+    }
+    &:where(.rt-r-size-3) {
+      gap: var(--space-3);
+      font-size: var(--font-size-3);
+      line-height: var(--line-height-3);
+      letter-spacing: var(--letter-spacing-3);
+
+      /* stylelint-disable-next-line selector-max-type */
+      & :where(svg) {
+        width: 17px;
+        height: 17px;
+      }
+
+      &:where(:not(.rt-variant-ghost)) {
+        padding-left: var(--space-4);
+        padding-right: var(--space-4);
+      }
+      &:where(.rt-variant-ghost) {
+        gap: var(--space-2);
+        --button-ghost-padding-x: var(--space-3);
+        --button-ghost-padding-y: calc(var(--space-1) * 1.5);
+      }
+    }
+    &:where(.rt-r-size-4) {
+      gap: var(--space-3);
+      font-size: var(--font-size-4);
+      line-height: var(--line-height-4);
+      letter-spacing: var(--letter-spacing-4);
+
+      /* stylelint-disable-next-line selector-max-type */
+      & :where(svg) {
+        width: 19px;
+        height: 19px;
+      }
+
+      &:where(:not(.rt-variant-ghost)) {
+        padding-left: var(--space-5);
+        padding-right: var(--space-5);
+      }
+      &:where(.rt-variant-ghost) {
+        gap: var(--space-2);
+        --button-ghost-padding-x: var(--space-4);
+        --button-ghost-padding-y: var(--space-2);
+      }
+    }
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * VARIANTS                                                                                        *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.rt-Button:where(:not(.rt-variant-ghost)) {
+  font-weight: var(--font-weight-medium);
+}

package/src/components/button.props.tsx

@@ -0,0 +1 @@
+export { baseButtonPropDefs as buttonPropDefs } from './_internal/base-button.props.js';

package/src/components/button.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+import { BaseButton } from './_internal/base-button.js';
+
+type ButtonElement = React.ElementRef<typeof BaseButton>;
+interface ButtonProps extends React.ComponentPropsWithoutRef<typeof BaseButton> {}
+const Button = React.forwardRef<ButtonElement, ButtonProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <BaseButton {...props} ref={forwardedRef} className={classNames('rt-Button', className)} />
+  )
+);
+Button.displayName = 'Button';
+
+export { Button };
+export type { ButtonProps };

package/src/components/callout.css

@@ -0,0 +1,81 @@
+.rt-CalloutRoot {
+  box-sizing: border-box;
+  display: grid;
+  align-items: flex-start;
+  justify-content: flex-start;
+  text-align: left;
+  color: var(--accent-a11);
+
+  &:where(.rt-high-contrast) {
+    color: var(--accent-12);
+  }
+}
+
+.rt-CalloutIcon {
+  display: flex;
+  align-items: center;
+  grid-column-start: -2;
+  height: var(--callout-icon-height);
+}
+
+/* Anything that’s not an icon goes to the right of the icon */
+.rt-CalloutRoot > :where(:not(.rt-CalloutIcon)) {
+  grid-column-start: -1;
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * SIZES                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+@breakpoints {
+  .rt-CalloutRoot {
+    &:where(.rt-r-size-1) {
+      row-gap: var(--space-2);
+      column-gap: var(--space-2);
+      padding: var(--space-3);
+      border-radius: var(--radius-3);
+      --callout-icon-height: var(--line-height-2);
+    }
+    &:where(.rt-r-size-2) {
+      row-gap: var(--space-2);
+      column-gap: var(--space-3);
+      padding: var(--space-4);
+      border-radius: var(--radius-4);
+      --callout-icon-height: var(--line-height-2);
+    }
+    &:where(.rt-r-size-3) {
+      row-gap: var(--space-3);
+      column-gap: var(--space-4);
+      padding: var(--space-5);
+      border-radius: var(--radius-5);
+      --callout-icon-height: var(--line-height-3);
+    }
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * VARIANTS                                                                                        *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+/* soft */
+
+.rt-CalloutRoot:where(.rt-variant-soft) {
+  background-color: var(--accent-a3);
+}
+
+/* surface */
+
+.rt-CalloutRoot:where(.rt-variant-surface) {
+  box-shadow: inset 0 0 0 1px var(--accent-a6);
+  background-color: var(--accent-a2);
+}
+
+/* outline */
+
+.rt-CalloutRoot:where(.rt-variant-outline) {
+  box-shadow: inset 0 0 0 1px var(--accent-a7);
+}

package/src/components/callout.props.tsx

@@ -0,0 +1,21 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+import { accentColorPropDef } 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 = ['soft', 'surface', 'outline'] as const;
+
+const calloutRootPropDefs = {
+  ...asChildPropDef,
+  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'soft' },
+  ...accentColorPropDef,
+  ...highContrastPropDef,
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  variant: PropDef<(typeof variants)[number]>;
+};
+
+export { calloutRootPropDefs };

package/src/components/callout.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import * as React from 'react';
+import classNames from 'classnames';
+import { Slot } from 'radix-ui';
+
+import { Text } from './text.js';
+import { calloutRootPropDefs } from './callout.props.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { mapResponsiveProp, mapCalloutSizeToTextSize } from '../helpers/map-prop-values.js';
+import { marginPropDefs } from '../props/margin.props.js';
+
+import type { MarginProps } from '../props/margin.props.js';
+import type {
+  ComponentPropsWithout,
+  RemovedProps,
+  ComponentPropsAs,
+} from '../helpers/component-props.js';
+import type { GetPropDefTypes } from '../props/prop-def.js';
+
+type CalloutRootOwnProps = GetPropDefTypes<typeof calloutRootPropDefs>;
+
+type CalloutContextValue = { size?: CalloutRootOwnProps['size'] };
+const CalloutContext = React.createContext<CalloutContextValue>({});
+
+type CalloutRootElement = React.ElementRef<'div'>;
+interface CalloutRootProps
+  extends ComponentPropsWithout<'div', RemovedProps>,
+    MarginProps,
+    CalloutRootOwnProps {}
+const CalloutRoot = React.forwardRef<CalloutRootElement, CalloutRootProps>(
+  (props, forwardedRef) => {
+    const { size = calloutRootPropDefs.size.default } = props;
+    const { asChild, children, className, color, ...rootProps } = extractProps(
+      props,
+      calloutRootPropDefs,
+      marginPropDefs
+    );
+    const Comp = asChild ? Slot.Root : 'div';
+    return (
+      <Comp
+        data-accent-color={color}
+        {...rootProps}
+        className={classNames('rt-CalloutRoot', className)}
+        ref={forwardedRef}
+      >
+        <CalloutContext.Provider value={React.useMemo(() => ({ size }), [size])}>
+          {children}
+        </CalloutContext.Provider>
+      </Comp>
+    );
+  }
+);
+CalloutRoot.displayName = 'Callout.Root';
+
+type CalloutIconElement = React.ElementRef<'div'>;
+interface CalloutIconProps extends ComponentPropsWithout<'div', RemovedProps> {}
+const CalloutIcon = React.forwardRef<CalloutIconElement, CalloutIconProps>(
+  ({ className, ...props }, forwardedRef) => {
+    return (
+      <div {...props} className={classNames('rt-CalloutIcon', className)} ref={forwardedRef} />
+    );
+  }
+);
+CalloutIcon.displayName = 'Callout.Icon';
+
+type CalloutTextElement = React.ElementRef<'p'>;
+type CalloutTextProps = ComponentPropsAs<typeof Text, 'p'>;
+const CalloutText = React.forwardRef<CalloutTextElement, CalloutTextProps>(
+  ({ className, ...props }, forwardedRef) => {
+    const { size } = React.useContext(CalloutContext);
+    return (
+      <Text
+        as="p"
+        size={mapResponsiveProp(size, mapCalloutSizeToTextSize)}
+        {...props}
+        asChild={false}
+        ref={forwardedRef}
+        className={classNames('rt-CalloutText', className)}
+      />
+    );
+  }
+);
+CalloutText.displayName = 'Callout.Text';
+
+export { CalloutRoot as Root, CalloutIcon as Icon, CalloutText as Text };
+export type {
+  CalloutRootProps as RootProps,
+  CalloutIconProps as IconProps,
+  CalloutTextProps as TextProps,
+};