@kushagradhawan/kookie-ui 0.1.0

package/src/components/data-list.css

@@ -0,0 +1,249 @@
+.rt-DataListRoot {
+  overflow-wrap: anywhere;
+  font-family: var(--default-font-family);
+  font-weight: var(--font-weight-normal);
+  font-style: normal;
+  text-align: start;
+}
+
+.rt-DataListLabel {
+  display: flex;
+  color: var(--gray-a11);
+
+  &:where(.rt-high-contrast) {
+    color: var(--gray-12);
+  }
+
+  &:where([data-accent-color]) {
+    color: var(--accent-a11);
+
+    &:where(.rt-high-contrast) {
+      color: var(--accent-12);
+    }
+  }
+}
+
+.rt-DataListValue {
+  display: flex;
+  margin: 0;
+
+  /* Ensure value can be truncated */
+  min-width: 0px;
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * ORIENTATION                                                                                     *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.rt-DataListItem {
+  /* The actual margins that value part gets. These are re-assigned to other vars depending on the orientation */
+  --data-list-value-margin-top: 0px;
+  --data-list-value-margin-bottom: 0px;
+  --data-list-first-item-value-margin-top: 0px;
+  --data-list-last-item-value-margin-bottom: 0px;
+
+  /* How much the value part can poke outside of the row when in a horizontal data list */
+  --data-list-value-trim-start: -0.25em;
+  --data-list-value-trim-end: -0.25em;
+  --data-list-first-item-value-trim-start: 0px;
+  --data-list-last-item-value-trim-end: 0px;
+}
+
+.rt-DataListValue {
+  margin-top: var(--data-list-value-margin-top);
+  margin-bottom: var(--data-list-value-margin-bottom);
+
+  /*
+   * The first/last item should not poke out of the Root boundaries –
+   * unless it has "align-items: center", but that’s handled later.
+   */
+  :where(.rt-DataListItem:first-child) & {
+    margin-top: var(--data-list-first-item-value-margin-top);
+  }
+  :where(.rt-DataListItem:last-child) & {
+    margin-bottom: var(--data-list-last-item-value-margin-bottom);
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*                Sizes                */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+@breakpoints {
+  .rt-DataListRoot {
+    &:where(.rt-r-size-1) {
+      gap: var(--space-3);
+    }
+    &:where(.rt-r-size-2) {
+      gap: var(--space-4);
+    }
+    &:where(.rt-r-size-3) {
+      gap: calc(var(--space-4) * 1.25);
+    }
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*             Orientation             */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+@breakpoints {
+  .rt-DataListRoot {
+    &:where(.rt-r-orientation-vertical) {
+      display: flex;
+      flex-direction: column;
+
+      & :where(.rt-DataListItem) {
+        /* No poking out of the row when orientation is vertical */
+        --data-list-value-margin-top: 0px;
+        --data-list-value-margin-bottom: 0px;
+        --data-list-first-item-value-margin-top: 0px;
+        --data-list-last-item-value-margin-bottom: 0px;
+
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-1);
+      }
+
+      & :where(.rt-DataListLabel) {
+        /* Ensure label can be truncated */
+        min-width: 0px;
+      }
+    }
+
+    &:where(.rt-r-orientation-horizontal) {
+      display: grid;
+      grid-template-columns: auto 1fr;
+
+      & :where(.rt-DataListItem) {
+        /* Allow the value to poke out of the row when orientation is horizontal */
+        --data-list-value-margin-top: var(--data-list-value-trim-start);
+        --data-list-value-margin-bottom: var(--data-list-value-trim-end);
+        --data-list-first-item-value-margin-top: var(--data-list-first-item-value-trim-start);
+        --data-list-last-item-value-margin-bottom: var(--data-list-last-item-value-trim-end);
+
+        display: grid;
+        /* Use subgrid so all the label columns remain aligned */
+        grid-template-columns: inherit; /* Fallback */
+        grid-template-columns: subgrid;
+        gap: inherit;
+        grid-column: span 2;
+        align-items: baseline;
+      }
+
+      & :where(.rt-DataListLabel) {
+        /* Set an implicit min. width when orientation is horizontal */
+        min-width: 120px;
+      }
+    }
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*              Alignment              */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+.rt-DataListLabel,
+.rt-DataListValue {
+  &::before {
+    /*
+     * Zero-width joiner to establish a baseline.
+     * Allows Flex children with text to align automatically.
+     */
+    content: '‍';
+  }
+}
+
+@breakpoints {
+  /*
+   * Make sure that the margin adjustments cooperate with "align-items".
+   * To do that, we need to remove the corresponding margin adjustment depending on the "align-items" value.
+   * We can't set `--data-list-value-margin-top` directly because at breakpoints it would lose the orientation value.
+   */
+  .rt-DataListItem {
+    /* Match the default: poke out at the top and bottom, but not when it’s the first or last item */
+    &:where(.rt-r-ai-baseline) {
+      --data-list-value-trim-start: -0.25em;
+      --data-list-value-trim-end: -0.25em;
+      --data-list-first-item-value-trim-start: 0px;
+      --data-list-last-item-value-trim-end: 0px;
+    }
+    /* No poking out at the top; and not at the bottom when it’s the first or last item */
+    &:where(.rt-r-ai-start) {
+      --data-list-value-trim-start: 0px;
+      --data-list-value-trim-end: -0.25em;
+      --data-list-first-item-value-trim-start: 0px;
+      --data-list-last-item-value-trim-end: 0px;
+    }
+    /* Allow to poke out from any side, as for centering to work the top and bottom margins have to be always equal */
+    &:where(.rt-r-ai-center) {
+      --data-list-value-trim-start: -0.25em;
+      --data-list-value-trim-end: -0.25em;
+      --data-list-first-item-value-trim-start: -0.25em;
+      --data-list-last-item-value-trim-end: -0.25em;
+    }
+    /* No poking out at the bottom; and not at the top when it’s the first or last item */
+    &:where(.rt-r-ai-end) {
+      --data-list-value-trim-start: -0.25em;
+      --data-list-value-trim-end: 0px;
+      --data-list-first-item-value-trim-start: 0px;
+      --data-list-last-item-value-trim-end: 0px;
+    }
+    /* No poking out when stretched */
+    &:where(.rt-r-ai-stretch) {
+      --data-list-value-trim-start: 0px;
+      --data-list-value-trim-end: 0px;
+      --data-list-first-item-value-trim-start: 0px;
+      --data-list-last-item-value-trim-end: 0px;
+    }
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*                Trim                 */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+.rt-DataListRoot {
+  --data-list-leading-trim-start: calc(var(--default-leading-trim-start) - var(--line-height) / 2);
+  --data-list-leading-trim-end: calc(var(--default-leading-trim-end) - var(--line-height) / 2);
+}
+
+.rt-DataListItem {
+  &:where(:first-child) {
+    margin-top: var(--leading-trim-start);
+  }
+  &:where(:last-child) {
+    margin-bottom: var(--leading-trim-end);
+  }
+}
+
+@breakpoints {
+  .rt-DataListRoot {
+    &:where(.rt-r-trim-normal) {
+      --leading-trim-start: initial;
+      --leading-trim-end: initial;
+    }
+    &:where(.rt-r-trim-start) {
+      --leading-trim-start: var(--data-list-leading-trim-start);
+      --leading-trim-end: initial;
+    }
+    &:where(.rt-r-trim-end) {
+      --leading-trim-start: initial;
+      --leading-trim-end: var(--data-list-leading-trim-end);
+    }
+    &:where(.rt-r-trim-both) {
+      --leading-trim-start: var(--data-list-leading-trim-start);
+      --leading-trim-end: var(--data-list-leading-trim-end);
+    }
+  }
+}

package/src/components/data-list.props.tsx

@@ -0,0 +1,54 @@
+import { colorPropDef } from '../props/color.prop.js';
+import { highContrastPropDef } from '../props/high-contrast.prop.js';
+import { leadingTrimPropDef } from '../props/leading-trim.prop.js';
+import { widthPropDefs } from '../props/width.props.js';
+
+import type { PropDef } from '../props/prop-def.js';
+
+const alignValues = ['start', 'center', 'end', 'baseline', 'stretch'] as const;
+const orientationValues = ['horizontal', 'vertical'] as const;
+const sizes = ['1', '2', '3'] as const;
+
+const dataListRootPropDefs = {
+  orientation: {
+    type: 'enum',
+    className: 'rt-r-orientation',
+    values: orientationValues,
+    default: 'horizontal',
+    responsive: true,
+  },
+  size: {
+    type: 'enum',
+    className: 'rt-r-size',
+    values: sizes,
+    default: '2',
+    responsive: true,
+  },
+  trim: {
+    ...leadingTrimPropDef.trim,
+    className: 'rt-r-trim', // Custom trim styles due to grid layout
+  },
+} satisfies {
+  orientation: PropDef<(typeof orientationValues)[number]>;
+  size: PropDef<(typeof sizes)[number]>;
+  trim: typeof leadingTrimPropDef.trim;
+};
+
+const dataListItemPropDefs = {
+  align: {
+    type: 'enum',
+    className: 'rt-r-ai',
+    values: alignValues,
+    responsive: true,
+  },
+} satisfies {
+  align: PropDef<(typeof alignValues)[number]>;
+};
+
+const dataListLabelPropDefs = {
+  ...widthPropDefs,
+  ...colorPropDef,
+  ...highContrastPropDef,
+};
+
+export { dataListRootPropDefs, dataListItemPropDefs, dataListLabelPropDefs };

package/src/components/data-list.tsx

@@ -0,0 +1,100 @@
+import classNames from 'classnames';
+import * as React from 'react';
+
+import { Text } from './text.js';
+import {
+  dataListRootPropDefs,
+  dataListItemPropDefs,
+  dataListLabelPropDefs,
+} from './data-list.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 DataListRootElement = HTMLDListElement;
+type DataListRootOwnProps = GetPropDefTypes<typeof dataListRootPropDefs>;
+interface DataListRootProps
+  extends ComponentPropsWithout<'dl', RemovedProps>,
+    MarginProps,
+    DataListRootOwnProps {}
+const DataListRoot = React.forwardRef<DataListRootElement, DataListRootProps>(
+  (props, forwardedRef) => {
+    const { className, ...dataListProps } = extractProps(
+      props,
+      dataListRootPropDefs,
+      marginPropDefs
+    );
+    return (
+      <Text asChild>
+        <dl
+          {...dataListProps}
+          ref={forwardedRef}
+          className={classNames('rt-DataListRoot', className)}
+        />
+      </Text>
+    );
+  }
+);
+DataListRoot.displayName = 'DataList.Root';
+
+type DataListItemElement = HTMLDivElement;
+type DataListItemOwnProps = GetPropDefTypes<typeof dataListItemPropDefs>;
+interface DataListItemProps
+  extends ComponentPropsWithout<'div', RemovedProps>,
+    DataListItemOwnProps {}
+const DataListItem = React.forwardRef<DataListItemElement, DataListItemProps>(
+  (props, forwardedRef) => {
+    const { className, ...itemProps } = extractProps(props, dataListItemPropDefs);
+    return (
+      <div {...itemProps} ref={forwardedRef} className={classNames('rt-DataListItem', className)} />
+    );
+  }
+);
+DataListItem.displayName = 'DataList.Item';
+
+type DataListLabelElement = React.ElementRef<'dt'>;
+type DataListLabelOwnProps = GetPropDefTypes<typeof dataListLabelPropDefs>;
+interface DataListLabelProps
+  extends ComponentPropsWithout<'dt', RemovedProps>,
+    DataListLabelOwnProps {}
+const DataListLabel = React.forwardRef<DataListLabelElement, DataListLabelProps>(
+  (props, forwardedRef) => {
+    const { className, color, ...labelProps } = extractProps(props, dataListLabelPropDefs);
+    return (
+      <dt
+        {...labelProps}
+        data-accent-color={color}
+        ref={forwardedRef}
+        className={classNames('rt-DataListLabel', className)}
+      />
+    );
+  }
+);
+DataListLabel.displayName = 'DataList.Label';
+
+type DataListValueElement = React.ElementRef<'dd'>;
+interface DataListValueProps extends ComponentPropsWithout<'dd', RemovedProps> {}
+const DataListValue = React.forwardRef<DataListValueElement, DataListValueProps>(
+  ({ children, className, ...props }, forwardedRef) => (
+    <dd {...props} ref={forwardedRef} className={classNames(className, 'rt-DataListValue')}>
+      {children}
+    </dd>
+  )
+);
+DataListValue.displayName = 'DataList.Value';
+
+export {
+  DataListRoot as Root,
+  DataListItem as Item,
+  DataListLabel as Label,
+  DataListValue as Value,
+};
+export type {
+  DataListRootProps as RootProps,
+  DataListItemProps as ItemProps,
+  DataListLabelProps as LabelProps,
+  DataListValueProps as ValueProps,
+};

package/src/components/dialog.css

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

package/src/components/dialog.props.tsx

@@ -0,0 +1,43 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+import { widthPropDefs } from '../props/width.props.js';
+import { heightPropDefs } from '../props/height.props.js';
+
+import type { PropDef, GetPropDefTypes } from '../props/prop-def.js';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const alignValues = ['start', 'center'] as const;
+const contentSizes = ['1', '2', '3', '4'] as const;
+
+const dialogContentPropDefs = {
+  ...asChildPropDef,
+  align: {
+    type: 'enum',
+    className: 'rt-r-align',
+    values: ['start', 'center'],
+    default: 'center',
+  },
+  size: {
+    type: 'enum',
+    className: 'rt-r-size',
+    values: contentSizes,
+    default: '3',
+    responsive: true,
+  },
+  width: widthPropDefs.width,
+  minWidth: widthPropDefs.minWidth,
+  maxWidth: { ...widthPropDefs.maxWidth, default: '600px' },
+  ...heightPropDefs,
+} satisfies {
+  align: PropDef<(typeof alignValues)[number]>;
+  size: PropDef<(typeof contentSizes)[number]>;
+  width: PropDef<string>;
+  minWidth: PropDef<string>;
+  maxWidth: PropDef<string>;
+};
+
+type DialogContentOwnProps = GetPropDefTypes<
+  typeof dialogContentPropDefs & typeof asChildPropDef & typeof widthPropDefs
+>;
+
+export { dialogContentPropDefs };
+export type { DialogContentOwnProps };

package/src/components/dialog.tsx

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Dialog as DialogPrimitive } from 'radix-ui';
+
+import { dialogContentPropDefs } from './dialog.props.js';
+import { Heading } from './heading.js';
+import { Text } from './text.js';
+import { Theme } from './theme.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { requireReactElement } from '../helpers/require-react-element.js';
+
+import type { DialogContentOwnProps } from './dialog.props.js';
+import type {
+  ComponentPropsWithout,
+  RemovedProps,
+  ComponentPropsAs,
+} from '../helpers/component-props.js';
+
+interface DialogRootProps extends ComponentPropsWithout<typeof DialogPrimitive.Root, 'modal'> {}
+const DialogRoot: React.FC<DialogRootProps> = (props) => <DialogPrimitive.Root {...props} modal />;
+DialogRoot.displayName = 'Dialog.Root';
+
+type DialogTriggerElement = React.ElementRef<typeof DialogPrimitive.Trigger>;
+interface DialogTriggerProps
+  extends ComponentPropsWithout<typeof DialogPrimitive.Trigger, RemovedProps> {}
+const DialogTrigger = React.forwardRef<DialogTriggerElement, DialogTriggerProps>(
+  ({ children, ...props }, forwardedRef) => (
+    <DialogPrimitive.Trigger {...props} ref={forwardedRef} asChild>
+      {requireReactElement(children)}
+    </DialogPrimitive.Trigger>
+  )
+);
+DialogTrigger.displayName = 'Dialog.Trigger';
+
+type DialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
+interface DialogContentProps
+  extends ComponentPropsWithout<typeof DialogPrimitive.Content, RemovedProps>,
+    DialogContentOwnProps {
+  container?: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>['container'];
+}
+const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>(
+  ({ align, ...props }, forwardedRef) => {
+    const { align: alignPropDef, ...propDefs } = dialogContentPropDefs;
+    const { className: alignClassName } = extractProps({ align }, { align: alignPropDef });
+    const { className, forceMount, container, ...contentProps } = extractProps(props, propDefs);
+    return (
+      <DialogPrimitive.Portal container={container} forceMount={forceMount}>
+        <Theme asChild>
+          <DialogPrimitive.Overlay className="rt-BaseDialogOverlay rt-DialogOverlay">
+            <div className="rt-BaseDialogScroll rt-DialogScroll">
+              <div
+                className={`rt-BaseDialogScrollPadding rt-DialogScrollPadding ${alignClassName}`}
+              >
+                <DialogPrimitive.Content
+                  {...contentProps}
+                  ref={forwardedRef}
+                  className={classNames('rt-BaseDialogContent', 'rt-DialogContent', className)}
+                />
+              </div>
+            </div>
+          </DialogPrimitive.Overlay>
+        </Theme>
+      </DialogPrimitive.Portal>
+    );
+  }
+);
+DialogContent.displayName = 'Dialog.Content';
+
+type DialogTitleElement = React.ElementRef<typeof Heading>;
+type DialogTitleProps = ComponentPropsWithout<typeof Heading, 'asChild'>;
+const DialogTitle = React.forwardRef<DialogTitleElement, DialogTitleProps>(
+  (props, forwardedRef) => (
+    <DialogPrimitive.Title asChild>
+      <Heading size="5" mb="3" trim="start" {...props} asChild={false} ref={forwardedRef} />
+    </DialogPrimitive.Title>
+  )
+);
+DialogTitle.displayName = 'Dialog.Title';
+
+type DialogDescriptionElement = HTMLParagraphElement;
+type DialogDescriptionProps = ComponentPropsAs<typeof Text, 'p'>;
+const DialogDescription = React.forwardRef<DialogDescriptionElement, DialogDescriptionProps>(
+  (props, forwardedRef) => (
+    <DialogPrimitive.Description asChild>
+      <Text as="p" size="3" {...props} asChild={false} ref={forwardedRef} />
+    </DialogPrimitive.Description>
+  )
+);
+DialogDescription.displayName = 'Dialog.Description';
+
+type DialogCloseElement = React.ElementRef<typeof DialogPrimitive.Close>;
+interface DialogCloseProps
+  extends ComponentPropsWithout<typeof DialogPrimitive.Close, RemovedProps> {}
+const DialogClose = React.forwardRef<DialogCloseElement, DialogCloseProps>(
+  ({ children, ...props }, forwardedRef) => (
+    <DialogPrimitive.Close {...props} ref={forwardedRef} asChild>
+      {requireReactElement(children)}
+    </DialogPrimitive.Close>
+  )
+);
+DialogClose.displayName = 'Dialog.Close';
+
+export {
+  DialogRoot as Root,
+  DialogTrigger as Trigger,
+  DialogContent as Content,
+  DialogTitle as Title,
+  DialogDescription as Description,
+  DialogClose as Close,
+};
+
+export type {
+  DialogRootProps as RootProps,
+  DialogTriggerProps as TriggerProps,
+  DialogContentProps as ContentProps,
+  DialogTitleProps as TitleProps,
+  DialogDescriptionProps as DescriptionProps,
+  DialogCloseProps as CloseProps,
+};

package/src/components/dropdown-menu.css

@@ -0,0 +1,46 @@
+@import './_internal/base-menu.css';
+
+.rt-DropdownMenuContent {
+  max-height: var(--radix-dropdown-menu-content-available-height);
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+}
+
+.rt-DropdownMenuTriggerIcon {
+  flex-shrink: 0;
+
+  /* Default size for when not in a sized button */
+  width: 9px;
+  height: 9px;
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * TRIGGER ICON RESPONSIVE SIZING                                                                  *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+@breakpoints {
+  /* Size 1 Button */
+  .rt-Button:where(.rt-r-size-1) :where(.rt-DropdownMenuTriggerIcon) {
+    width: 10px;
+    height: 10px;
+  }
+
+  /* Size 2 Button */
+  .rt-Button:where(.rt-r-size-2) :where(.rt-DropdownMenuTriggerIcon) {
+    width: 11px;
+    height: 11px;
+  }
+
+  /* Size 3 Button */
+  .rt-Button:where(.rt-r-size-3) :where(.rt-DropdownMenuTriggerIcon) {
+    width: 11px;
+    height: 11px;
+  }
+
+  /* Size 4 Button */
+  .rt-Button:where(.rt-r-size-4) :where(.rt-DropdownMenuTriggerIcon) {
+    width: 12px;
+    height: 12px;
+  }
+}

package/src/components/dropdown-menu.props.tsx

@@ -0,0 +1,6 @@
+export {
+  baseMenuContentPropDefs as dropdownMenuContentPropDefs,
+  baseMenuItemPropDefs as dropdownMenuItemPropDefs,
+  baseMenuCheckboxItemPropDefs as dropdownMenuCheckboxItemPropDefs,
+  baseMenuRadioItemPropDefs as dropdownMenuRadioItemPropDefs,
+} from './_internal/base-menu.props.js';