@kushagradhawan/kookie-ui 0.1.0

package/src/components/reset.css

@@ -0,0 +1,246 @@
+/* stylelint-disable selector-max-type */
+/* Disable selector-max-type rule to target individual element types. */
+/* Make sure these tags are wrapped in `:where()` for 0 specificity. */
+
+.rt-reset {
+  /* * * * * * * * * * * * * * * * * * * */
+  /*                                     */
+  /*              Margins                */
+  /*                                     */
+  /* * * * * * * * * * * * * * * * * * * */
+
+  &:where(body, blockquote, dl, dd, figure, p) {
+    margin: 0;
+  }
+
+  /* * * * * * * * * * * * * * * * * * * */
+  /*                                     */
+  /*             Typography              */
+  /*                                     */
+  /* * * * * * * * * * * * * * * * * * * */
+
+  &:where(address, b, cite, code, dfn, em, i, kbd, q, samp, small, strong, var) {
+    font: unset;
+  }
+  &:where(h1, h2, h3, h4, h5, h6) {
+    font: unset;
+    margin: 0;
+  }
+
+  /* * * * * * * * * * * * * * * * * * * */
+  /*                                     */
+  /*        Interactive elements         */
+  /*                                     */
+  /* * * * * * * * * * * * * * * * * * * */
+
+  &:where(a) {
+    all: unset;
+    -webkit-tap-highlight-color: transparent;
+  }
+  &:where(
+      button,
+      select,
+
+      /* Buttons */
+      [type='button'],
+      [type='image'],
+      [type='reset'],
+      [type='submit'],
+
+      /* Non-textual inputs */
+      [type='checkbox'],
+      [type='color'],
+      [type='radio'],
+      [type='range']
+    ) {
+    all: unset;
+    display: inline-block;
+    font-weight: normal;
+    font-style: normal;
+    text-indent: initial;
+    -webkit-tap-highlight-color: transparent;
+  }
+  &:where(label) {
+    -webkit-tap-highlight-color: transparent;
+  }
+  &:where(select) {
+    font-weight: normal;
+    font-style: normal;
+    text-align: start;
+  }
+  &:where(
+      textarea,
+      input:not(
+          /* Buttons */
+          [type='button'],
+          [type='image'],
+          [type='reset'],
+          [type='submit'],
+
+          /* Non-textual inputs */
+          [type='checkbox'],
+          [type='color'],
+          [type='radio'],
+          [type='range']
+        )
+    ) {
+    all: unset;
+    display: block;
+    width: stretch;
+    font-weight: normal;
+    font-style: normal;
+    text-align: start;
+    text-indent: initial;
+    -webkit-tap-highlight-color: transparent;
+
+    /* Make sure parent <label> doesn't change the text cursor */
+    cursor: text;
+
+    /* Recover textarea pre-wrap in Firefox */
+    white-space: pre-wrap;
+  }
+  &:where(:focus) {
+    outline: none;
+  }
+  &::placeholder {
+    color: unset;
+    opacity: unset;
+    /* Weird, but placeholders are selectable in Chrome and Safari */
+    user-select: none;
+  }
+
+  /* * * * * * * * * * * * * * * * * * * */
+  /*                                     */
+  /*               Tables                */
+  /*                                     */
+  /* * * * * * * * * * * * * * * * * * * */
+
+  &:where(table) {
+    all: unset;
+    display: table;
+    text-indent: initial;
+  }
+  &:where(caption) {
+    text-align: inherit;
+  }
+  &:where(td) {
+    padding: 0;
+  }
+  &:where(th) {
+    font-weight: unset;
+    text-align: inherit;
+    padding: 0;
+  }
+
+  /* * * * * * * * * * * * * * * * * * * */
+  /*                                     */
+  /*       Individual style tweaks       */
+  /*                                     */
+  /* * * * * * * * * * * * * * * * * * * */
+
+  &:where(abbr, acronym) {
+    text-decoration: none;
+  }
+  &:where(canvas, object, picture, summary) {
+    display: block;
+  }
+  &:where(del, s) {
+    text-decoration: unset;
+  }
+  &:where(fieldset, hr) {
+    all: unset;
+    display: block;
+  }
+  &:where(legend) {
+    padding: 0;
+    border: none;
+    /* Normalize with label */
+    cursor: default;
+  }
+  &:where(li) {
+    display: block;
+    text-align: unset;
+  }
+  &:where(ol, ul) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  &:where(iframe) {
+    display: block;
+    border: none;
+  }
+  &:where(iframe) {
+    width: stretch;
+  }
+  &:where(ins, u) {
+    text-decoration: none;
+  }
+  &:where(img) {
+    display: block;
+    max-width: 100%;
+  }
+  &:where(svg) {
+    display: block;
+    max-width: 100%;
+    flex-shrink: 0;
+  }
+  &:where(mark) {
+    all: unset;
+  }
+  &:where(pre) {
+    font: unset;
+    margin: unset;
+  }
+  &:where(q)::before,
+  &:where(q)::after {
+    content: '';
+  }
+  &:where(sub, sup) {
+    font: unset;
+    vertical-align: unset;
+  }
+  &:where(details) ::marker,
+  &:where(summary)::marker {
+    content: none;
+  }
+  &:where(video) {
+    display: block;
+    width: stretch;
+  }
+
+  /* * * * * * * * * * * * * * * * * * * */
+  /*                                     */
+  /*               Cursors               */
+  /*                                     */
+  /* * * * * * * * * * * * * * * * * * * */
+
+  &:where(:any-link) {
+    cursor: var(--cursor-link);
+  }
+  &:where(button) {
+    cursor: var(--cursor-button);
+  }
+  &:where(:disabled, [data-disabled]) {
+    cursor: var(--cursor-disabled);
+  }
+  &:where(input[type='checkbox']) {
+    cursor: var(--cursor-checkbox);
+  }
+  &:where(input[type='radio']) {
+    cursor: var(--cursor-radio);
+  }
+
+  /* * * * * * * * * * * * * * * * * * * */
+  /*                                     */
+  /*             Box sizing              */
+  /*                                     */
+  /* * * * * * * * * * * * * * * * * * * */
+
+  &,
+  &::before,
+  &::after {
+    /* Don't reorder this rule or remove "&" */
+    box-sizing: border-box;
+  }
+}

package/src/components/reset.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Slot } from 'radix-ui';
+
+import { requireReactElement } from '../helpers/require-react-element.js';
+
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+
+interface ResetProps extends ComponentPropsWithout<typeof Slot.Root, RemovedProps> {}
+const Reset = React.forwardRef<HTMLElement, ResetProps>(
+  ({ className, children, ...props }, forwardedRef) => {
+    return (
+      <Slot.Root {...props} ref={forwardedRef} className={classNames('rt-reset', className)}>
+        {requireReactElement(children)}
+      </Slot.Root>
+    );
+  }
+);
+Reset.displayName = 'Reset';
+
+export { Reset };
+export type { ResetProps };

package/src/components/scroll-area.css

@@ -0,0 +1,145 @@
+.radix-themes {
+  --scrollarea-scrollbar-horizontal-margin-top: var(--space-1);
+  --scrollarea-scrollbar-horizontal-margin-bottom: var(--space-1);
+  --scrollarea-scrollbar-horizontal-margin-left: var(--space-1);
+  --scrollarea-scrollbar-horizontal-margin-right: var(--space-1);
+  --scrollarea-scrollbar-vertical-margin-top: var(--space-1);
+  --scrollarea-scrollbar-vertical-margin-bottom: var(--space-1);
+  --scrollarea-scrollbar-vertical-margin-left: var(--space-1);
+  --scrollarea-scrollbar-vertical-margin-right: var(--space-1);
+}
+
+.rt-ScrollAreaRoot {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+.rt-ScrollAreaViewport {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+
+  &:where(:focus-visible) + :where(.rt-ScrollAreaViewportFocusRing) {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    outline: 2px solid var(--focus-8);
+    outline-offset: -2px;
+  }
+
+  /* Stop Chrome back/forward two-finger swipe when there is a horizontal scrollbar */
+  &:where(:has(.rt-ScrollAreaScrollbar[data-orientation='horizontal'])) {
+    overscroll-behavior-x: contain;
+  }
+}
+
+.rt-ScrollAreaViewport > * {
+  display: block !important;
+  width: fit-content;
+  flex-grow: 1;
+}
+
+.rt-ScrollAreaScrollbar {
+  display: flex;
+  /* Ensures no selection */
+  user-select: none;
+  /* Disable browser handling of all panning and zooming gestures on touch devices */
+  touch-action: none;
+
+  &:where([data-orientation='vertical']) {
+    flex-direction: column;
+    width: var(--scrollarea-scrollbar-size);
+  }
+  &:where([data-orientation='horizontal']) {
+    flex-direction: row;
+    height: var(--scrollarea-scrollbar-size);
+  }
+}
+
+.rt-ScrollAreaThumb {
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    min-width: var(--space-4);
+    min-height: var(--space-4);
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * SIZES                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+@breakpoints {
+  .rt-ScrollAreaScrollbar {
+    &:where(.rt-r-size-1) {
+      --scrollarea-scrollbar-size: var(--space-1);
+      --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
+    }
+    &:where(.rt-r-size-2) {
+      --scrollarea-scrollbar-size: var(--space-2);
+      --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
+    }
+    &:where(.rt-r-size-3) {
+      --scrollarea-scrollbar-size: var(--space-3);
+      --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
+    }
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * VARIANTS                                                                                        *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.rt-ScrollAreaScrollbar {
+  background-color: var(--gray-a3);
+  border-radius: var(--scrollarea-scrollbar-border-radius);
+
+  animation-duration: 120ms;
+  animation-timing-function: ease-out;
+
+  &:where([data-state='visible']) {
+    animation-name: rt-fade-in;
+  }
+  &:where([data-state='hidden']) {
+    animation-name: rt-fade-out;
+  }
+  &:where([data-orientation='horizontal']) {
+    margin-top: var(--scrollarea-scrollbar-horizontal-margin-top);
+    margin-bottom: var(--scrollarea-scrollbar-horizontal-margin-bottom);
+    margin-left: var(--scrollarea-scrollbar-horizontal-margin-left);
+    margin-right: var(--scrollarea-scrollbar-horizontal-margin-right);
+  }
+  &:where([data-orientation='vertical']) {
+    margin-top: var(--scrollarea-scrollbar-vertical-margin-top);
+    margin-bottom: var(--scrollarea-scrollbar-vertical-margin-bottom);
+    margin-left: var(--scrollarea-scrollbar-vertical-margin-left);
+    margin-right: var(--scrollarea-scrollbar-vertical-margin-right);
+  }
+}
+
+.rt-ScrollAreaThumb {
+  background-color: var(--gray-a8);
+  border-radius: inherit;
+  transition: background-color 100ms;
+
+  @media (hover: hover) {
+    &:where(:hover) {
+      background-color: var(--gray-a9);
+    }
+  }
+}

package/src/components/scroll-area.props.tsx

@@ -0,0 +1,19 @@
+import { asChildPropDef } from '../props/as-child.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 scrollbarsValues = ['vertical', 'horizontal', 'both'] as const;
+
+const scrollAreaPropDefs = {
+  ...asChildPropDef,
+  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },
+  ...radiusPropDef,
+  scrollbars: { type: 'enum', values: scrollbarsValues, default: 'both' },
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  scrollbars: PropDef<(typeof scrollbarsValues)[number]>;
+};
+
+export { scrollAreaPropDefs };

package/src/components/scroll-area.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui';
+
+import { scrollAreaPropDefs } from './scroll-area.props.js';
+import { extractMarginProps } from '../helpers/extract-margin-props.js';
+import { getMarginStyles } from '../helpers/get-margin-styles.js';
+import { getResponsiveClassNames } from '../helpers/get-responsive-styles.js';
+import { getSubtree } from '../helpers/get-subtree.js';
+import { mergeStyles } from '../helpers/merge-styles.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 ScrollAreaElement = React.ElementRef<typeof ScrollAreaPrimitive.Viewport>;
+type ScrollAreaOwnProps = GetPropDefTypes<typeof scrollAreaPropDefs>;
+interface ScrollAreaProps
+  extends ComponentPropsWithout<typeof ScrollAreaPrimitive.Root, RemovedProps>,
+    ComponentPropsWithout<typeof ScrollAreaPrimitive.Viewport, RemovedProps | 'dir'>,
+    MarginProps,
+    ScrollAreaOwnProps {}
+const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>((props, forwardedRef) => {
+  const { rest: marginRest, ...marginProps } = extractMarginProps(props);
+  const [marginClassNames, marginCustomProperties] = getMarginStyles(marginProps);
+
+  const {
+    asChild,
+    children,
+    className,
+    style,
+    type,
+    scrollHideDelay = type !== 'scroll' ? 0 : undefined,
+    dir,
+    size = scrollAreaPropDefs.size.default,
+    radius = scrollAreaPropDefs.radius.default,
+    scrollbars = scrollAreaPropDefs.scrollbars.default,
+    ...viewportProps
+  } = marginRest;
+
+  return (
+    <ScrollAreaPrimitive.Root
+      type={type}
+      scrollHideDelay={scrollHideDelay}
+      className={classNames('rt-ScrollAreaRoot', marginClassNames, className)}
+      style={mergeStyles(marginCustomProperties, style)}
+      asChild={asChild}
+    >
+      {getSubtree({ asChild, children }, (children) => (
+        <>
+          <ScrollAreaPrimitive.Viewport
+            {...viewportProps}
+            ref={forwardedRef}
+            className="rt-ScrollAreaViewport"
+          >
+            {children}
+          </ScrollAreaPrimitive.Viewport>
+
+          <div className="rt-ScrollAreaViewportFocusRing" />
+
+          {scrollbars !== 'vertical' ? (
+            <ScrollAreaPrimitive.Scrollbar
+              data-radius={radius}
+              orientation="horizontal"
+              className={classNames(
+                'rt-ScrollAreaScrollbar',
+                getResponsiveClassNames({
+                  className: 'rt-r-size',
+                  value: size,
+                  propValues: scrollAreaPropDefs.size.values,
+                })
+              )}
+            >
+              <ScrollAreaPrimitive.Thumb className="rt-ScrollAreaThumb" />
+            </ScrollAreaPrimitive.Scrollbar>
+          ) : null}
+
+          {scrollbars !== 'horizontal' ? (
+            <ScrollAreaPrimitive.Scrollbar
+              data-radius={radius}
+              orientation="vertical"
+              className={classNames(
+                'rt-ScrollAreaScrollbar',
+                getResponsiveClassNames({
+                  className: 'rt-r-size',
+                  value: size,
+                  propValues: scrollAreaPropDefs.size.values,
+                })
+              )}
+            >
+              <ScrollAreaPrimitive.Thumb className="rt-ScrollAreaThumb" />
+            </ScrollAreaPrimitive.Scrollbar>
+          ) : null}
+
+          {scrollbars === 'both' ? (
+            <ScrollAreaPrimitive.Corner className="rt-ScrollAreaCorner" />
+          ) : null}
+        </>
+      ))}
+    </ScrollAreaPrimitive.Root>
+  );
+});
+ScrollArea.displayName = 'ScrollArea';
+
+export { ScrollArea };
+export type { ScrollAreaProps };

package/src/components/section.css

@@ -0,0 +1,25 @@
+.rt-Section {
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+@breakpoints {
+  .rt-Section {
+    &:where(.rt-r-size-1) {
+      padding-top: var(--space-5);
+      padding-bottom: var(--space-5);
+    }
+    &:where(.rt-r-size-2) {
+      padding-top: var(--space-7);
+      padding-bottom: var(--space-7);
+    }
+    &:where(.rt-r-size-3) {
+      padding-top: var(--space-9);
+      padding-bottom: var(--space-9);
+    }
+    &:where(.rt-r-size-4) {
+      padding-top: calc(80px * var(--scaling));
+      padding-bottom: calc(80px * var(--scaling));
+    }
+  }
+}

package/src/components/section.props.tsx

@@ -0,0 +1,63 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+
+import type { PropDef, GetPropDefTypes } from '../props/prop-def.js';
+
+const sizes = ['1', '2', '3', '4'] as const;
+const displayValues = ['none', 'initial'] as const;
+
+const sectionPropDefs = {
+  ...asChildPropDef,
+  /**
+   * Controls the vertical padding of the section.
+   *
+   * @values
+   * | Size     | Padding |
+   * | :------- | ------: |
+   * | size="1" | 24px    |
+   * | size="2" | 40px    |
+   * | size="3" | 64px    |
+   * | size="4" | 80px    |
+   *
+   * @example
+   * size="4"
+   * size={{ sm: '3', lg: '4' }}
+   *
+   * @link
+   * https://github.com/radix-ui/themes/blob/main/packages/radix-ui-themes/src/components/section.css
+   */
+  size: {
+    type: 'enum',
+    className: 'rt-r-size',
+    values: sizes,
+    default: '3',
+    responsive: true,
+  },
+  /**
+   * Controls whether the section is visible or hidden.
+   * Supports "none", "initial", and responsive object values.
+   *
+   * @example
+   * display="none"
+   * display={{ sm: 'none', lg: 'initial' }}
+   */
+  display: {
+    type: 'enum',
+    className: 'rt-r-display',
+    values: displayValues,
+    parseValue: parseDisplayValue,
+    responsive: true,
+  },
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  display: PropDef<(typeof displayValues)[number]>;
+};
+
+function parseDisplayValue(value: string) {
+  return value === 'initial' ? 'block' : value;
+}
+
+// Use all of the imported prop defs to ensure that JSDoc works
+type SectionOwnProps = GetPropDefTypes<typeof sectionPropDefs & typeof asChildPropDef>;
+
+export { sectionPropDefs };
+export type { SectionOwnProps };

package/src/components/section.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Slot } from 'radix-ui';
+
+import { sectionPropDefs } from './section.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 { SectionOwnProps } from './section.props.js';
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+
+type SectionElement = React.ElementRef<'div'>;
+interface SectionProps
+  extends ComponentPropsWithout<'div', RemovedProps>,
+    MarginProps,
+    LayoutProps,
+    SectionOwnProps {}
+const Section = React.forwardRef<SectionElement, SectionProps>((props, forwardedRef) => {
+  const { asChild, className, ...sectionProps } = extractProps(
+    props,
+    sectionPropDefs,
+    layoutPropDefs,
+    marginPropDefs
+  );
+  const Comp = asChild ? Slot.Root : 'section';
+  return (
+    <Comp {...sectionProps} ref={forwardedRef} className={classNames('rt-Section', className)} />
+  );
+});
+Section.displayName = 'Section';
+
+export { Section };
+export type { SectionProps };