@kushagradhawan/kookie-ui 0.1.0

package/src/components/text-field.css

@@ -0,0 +1,430 @@
+.rt-TextFieldRoot {
+  display: flex;
+  align-items: stretch;
+
+  font-family: var(--default-font-family);
+  font-weight: var(--font-weight-regular);
+  font-style: normal;
+  text-align: start;
+
+  @supports selector(:has(*)) {
+    &:where(:has(.rt-TextFieldInput:focus)) {
+      outline: 2px solid var(--text-field-focus-color);
+      outline-offset: -1px;
+    }
+  }
+  @supports not selector(:has(*)) {
+    &:where(:focus-within) {
+      outline: 2px solid var(--text-field-focus-color);
+      outline-offset: -1px;
+    }
+  }
+
+  &::selection {
+    background-color: var(--text-field-selection-color);
+  }
+}
+
+.rt-TextFieldInput {
+  /*
+   * Flex layout edge case: when the parent container of TextFieldRoot
+   * is smaller than the intrinsic width of TextFieldInput with all the slots,
+   * this actually causes the input to shrink the available width.
+   */
+  width: 100%;
+
+  /* Fix date inputs alignment in Chrome and Safari */
+  display: flex;
+  align-items: center;
+
+  /* Inherit alignment from root in case it's overriden */
+  text-align: inherit;
+
+  /*
+   * Hide type="number" input stepper because it's small, ugly, hard to use, and if
+   * needed, a nicer one can be easily implemented with own buttons in the Slot part.
+   */
+  &:where([type='number']) {
+    -moz-appearance: textfield;
+  }
+  &::-webkit-inner-spin-button {
+    appearance: none;
+  }
+
+  /* Remove the native cancel button */
+  &::-webkit-search-cancel-button {
+    appearance: none;
+  }
+
+  &::selection {
+    background-color: var(--text-field-selection-color);
+  }
+
+  /*
+   * Style the date inputs:
+   * https://codepen.io/andresdamelio/pen/KKbvdYb
+   */
+
+  /* Chrome's calendar and time icons */
+  &::-webkit-calendar-picker-indicator {
+    box-sizing: content-box;
+    width: var(--text-field-native-icon-size);
+    height: var(--text-field-native-icon-size);
+    padding: var(--space-1);
+    margin-left: 0;
+    margin-right: calc(var(--space-1) * -1);
+    border-radius: calc(var(--text-field-border-radius) - 2px);
+  }
+  /* Chrome's calendar icon */
+  &:where(:not([type='time']))::-webkit-calendar-picker-indicator {
+    margin-left: var(--space-1);
+  }
+  &::-webkit-calendar-picker-indicator:where(:hover) {
+    background-color: var(--gray-a3);
+  }
+  &::-webkit-calendar-picker-indicator:where(:focus-visible) {
+    outline: 2px solid var(--text-field-focus-color);
+  }
+
+  /* Remove focus ring from date fields and use the selection color */
+  &::-webkit-datetime-edit-ampm-field,
+  &::-webkit-datetime-edit-day-field,
+  &::-webkit-datetime-edit-hour-field,
+  &::-webkit-datetime-edit-millisecond-field,
+  &::-webkit-datetime-edit-minute-field,
+  &::-webkit-datetime-edit-month-field,
+  &::-webkit-datetime-edit-second-field,
+  &::-webkit-datetime-edit-week-field,
+  &::-webkit-datetime-edit-year-field {
+    &:where(:focus) {
+      background-color: var(--text-field-selection-color);
+      color: inherit;
+      outline: none;
+    }
+  }
+
+  @supports selector(:has(*)) {
+    &:where(:autofill, [data-com-onepassword-filled]) {
+      /* Reliably removes native autofill colors */
+      background-clip: text;
+      -webkit-text-fill-color: var(--gray-12);
+    }
+  }
+}
+
+.rt-TextFieldSlot {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  cursor: text;
+
+  /* A slot that is not a right-side slot goes on the left */
+  &:where(:not([data-side='right'])) {
+    order: -1;
+    margin-left: calc(var(--text-field-border-width) * -1);
+    margin-right: 0;
+  }
+
+  &:where([data-side='right']),
+  /*
+   * A slot followed by a left-side slot that is not a left-side slot itself goes on the right.
+   * In simple terms, this makes it so that two slots without an explicit side work automatically.
+   */
+  :where(&:not([data-side='right'])) ~ &:where(:not([data-side='left'])) {
+    order: 0;
+    margin-left: 0;
+    margin-right: calc(var(--text-field-border-width) * -1);
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * SIZES                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.rt-TextFieldRoot {
+  box-sizing: border-box;
+  height: var(--text-field-height);
+  padding: var(--text-field-border-width);
+  border-radius: var(--text-field-border-radius);
+}
+.rt-TextFieldInput {
+  /* Clip text to the border radius of the Root */
+  border-radius: calc(var(--text-field-border-radius) - var(--text-field-border-width));
+
+  /* Equivalent to padding-left, but doesn't cut off long values when cursor is at the end. */
+  text-indent: var(--text-field-padding);
+
+  &:where([type='date'], [type='datetime-local'], [type='time'], [type='week'], [type='month']) {
+    /* Safari is buggy with text-indent for these input types */
+    text-indent: 0;
+    padding-left: var(--text-field-padding);
+    padding-right: var(--text-field-padding);
+  }
+
+  /* Remove border-radius and text-indent/padding on the left if there's a left-side slot */
+  &:where(:has(~ .rt-TextFieldSlot:not([data-side='right']))) {
+    text-indent: 0;
+    padding-left: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  /* Remove border-radius and padding on the right if there's a right-side slot */
+  /* prettier-ignore */
+  &:where(:has(
+    ~ .rt-TextFieldSlot[data-side='right'],
+    ~ .rt-TextFieldSlot:not([data-side='right']) ~ .rt-TextFieldSlot:not([data-side='left'])
+  )) {
+    padding-right: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+@breakpoints {
+  .rt-TextFieldRoot {
+    &:where(.rt-r-size-1) {
+      --text-field-height: var(--space-5);
+      --text-field-padding: calc(var(--space-1) * 1.5 - var(--text-field-border-width));
+      --text-field-border-radius: max(var(--radius-2), var(--radius-full));
+      --text-field-native-icon-size: var(--space-3);
+      font-size: var(--font-size-1);
+      letter-spacing: var(--letter-spacing-1);
+
+      & :where(.rt-TextFieldSlot) {
+        gap: var(--space-2);
+        padding-left: var(--space-1);
+        padding-right: var(--space-1);
+      }
+
+      & :where(.rt-TextFieldInput) {
+        /* Reset size 2 padding bottom */
+        padding-bottom: 0px;
+
+        /* Safari credentials autofill icon */
+        &::-webkit-textfield-decoration-container {
+          padding-right: 0px;
+          margin-right: -2px;
+        }
+      }
+    }
+
+    &:where(.rt-r-size-2) {
+      --text-field-height: var(--space-6);
+      --text-field-padding: calc(var(--space-2) - var(--text-field-border-width));
+      --text-field-border-radius: max(var(--radius-2), var(--radius-full));
+      --text-field-native-icon-size: var(--space-4);
+      font-size: var(--font-size-2);
+      letter-spacing: var(--letter-spacing-2);
+
+      & :where(.rt-TextFieldInput) {
+        /* Avoid 1px baseline jitter when layout around the text field is subpixel-sized (e.g. vh units). */
+        /* Works because as of Nov 2023, Chrome computes input text bounding box height as 16.5px on @2x screens. */
+        padding-bottom: 0.5px;
+
+        /* Safari credentials autofill icon */
+        &::-webkit-textfield-decoration-container {
+          padding-right: 2px;
+          margin-right: 0px;
+        }
+      }
+
+      & :where(.rt-TextFieldSlot) {
+        gap: var(--space-2);
+        padding-left: var(--space-2);
+        padding-right: var(--space-2);
+      }
+    }
+
+    &:where(.rt-r-size-3) {
+      --text-field-height: var(--space-7);
+      --text-field-padding: calc(var(--space-3) - var(--text-field-border-width));
+      --text-field-border-radius: max(var(--radius-3), var(--radius-full));
+      --text-field-native-icon-size: var(--space-4);
+      font-size: var(--font-size-3);
+      letter-spacing: var(--letter-spacing-3);
+
+      & :where(.rt-TextFieldInput) {
+        /* Reset size 2 padding bottom */
+        padding-bottom: 0px;
+
+        /* Safari credentials autofill icon */
+        &::-webkit-textfield-decoration-container {
+          padding-right: 5px;
+          margin-right: 0px;
+        }
+      }
+
+      & :where(.rt-TextFieldSlot) {
+        gap: var(--space-3);
+        padding-left: var(--space-3);
+        padding-right: var(--space-3);
+      }
+    }
+  }
+}
+
+/***************************************************************************************************
+	*                                                                                                 *
+	* VARIANTS                                                                                        *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+/* surface */
+
+.rt-TextFieldRoot:where(.rt-variant-surface) {
+  --text-field-selection-color: var(--focus-a5);
+  --text-field-focus-color: var(--focus-8);
+  --text-field-border-width: 1px;
+
+  /* Blend inner shadow with page background */
+  background-clip: content-box;
+  background-color: var(--color-surface);
+  box-shadow: inset 0 0 0 var(--text-field-border-width) var(--gray-a7);
+  color: var(--gray-12);
+
+  & :where(.rt-TextFieldInput) {
+    &::placeholder {
+      color: var(--gray-a10);
+    }
+  }
+
+  & :where(.rt-TextFieldSlot) {
+    color: var(--gray-a11);
+
+    &:where([data-accent-color]) {
+      color: var(--accent-a11);
+    }
+  }
+
+  /* prettier-ignore */
+  &:where(:has(.rt-TextFieldInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
+    /* Blend with focus color */
+    background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
+    box-shadow: inset 0 0 0 1px var(--focus-a5), inset 0 0 0 1px var(--gray-a5);
+  }
+
+  &:where(:has(.rt-TextFieldInput:where(:disabled, :read-only))) {
+    /* Blend with grey */
+    background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
+    box-shadow: inset 0 0 0 var(--text-field-border-width) var(--gray-a6);
+  }
+}
+
+/* classic */
+
+.rt-TextFieldRoot:where(.rt-variant-classic) {
+  --text-field-selection-color: var(--focus-a5);
+  --text-field-focus-color: var(--focus-8);
+  --text-field-border-width: 1px;
+
+  background: linear-gradient(to bottom, var(--color-surface), var(--gray-1));
+  box-shadow: var(--shadow-2);
+  color: var(--gray-12);
+
+  @media (hover: hover) {
+    &:where(:hover) {
+      background: linear-gradient(to bottom, var(--gray-1), var(--gray-2));
+      box-shadow: var(--shadow-2);
+    }
+  }
+
+  &:where(:has(.rt-TextFieldInput:focus)) {
+    box-shadow:
+      inset 0 0 0 1px var(--focus-8),
+      var(--shadow-1);
+  }
+
+  & :where(.rt-TextFieldInput) {
+    &::placeholder {
+      color: var(--gray-a10);
+    }
+  }
+
+  & :where(.rt-TextFieldSlot) {
+    color: var(--gray-a11);
+
+    &:where([data-accent-color]) {
+      color: var(--accent-a11);
+    }
+  }
+
+  /* prettier-ignore */
+  &:where(:has(.rt-TextFieldInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
+    /* Blend with focus color */
+    background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
+    box-shadow: inset 0 0 0 1px var(--focus-a5), inset 0 0 0 1px var(--gray-a5);
+  }
+
+  &:where(:has(.rt-TextFieldInput:where(:disabled, :read-only))) {
+    /* Blend with grey */
+    background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
+    box-shadow: none;
+  }
+}
+
+/* soft */
+
+.rt-TextFieldRoot:where(.rt-variant-soft) {
+  --text-field-selection-color: var(--accent-a5);
+  --text-field-focus-color: var(--accent-8);
+  --text-field-border-width: 0px;
+
+  background-color: var(--accent-a3);
+  color: var(--accent-12);
+
+  & :where(.rt-TextFieldInput) {
+    &::placeholder {
+      color: var(--accent-12);
+      opacity: 0.6;
+    }
+  }
+
+  & :where(.rt-TextFieldSlot) {
+    color: var(--accent-12);
+
+    &:where([data-accent-color]) {
+      color: var(--accent-a11);
+    }
+  }
+
+  /* prettier-ignore */
+  &:where(:has(.rt-TextFieldInput:where(:autofill, [data-com-onepassword-filled]):not(:disabled, :read-only))) {
+    /* Use gray autofill color when component color is gray */
+    box-shadow: inset 0 0 0 1px var(--accent-a5), inset 0 0 0 1px var(--gray-a4);
+  }
+
+  &:where(:has(.rt-TextFieldInput:where(:disabled, :read-only))) {
+    background-color: var(--gray-a3);
+  }
+}
+
+/* all disabled and read-only text fields */
+
+.rt-TextFieldInput {
+  &:where(:disabled, :read-only) {
+    cursor: text;
+    color: var(--gray-a11);
+    /* Safari */
+    -webkit-text-fill-color: var(--gray-a11);
+
+    &::placeholder {
+      opacity: 0.5;
+    }
+    &:where(:placeholder-shown) {
+      cursor: var(--cursor-disabled);
+
+      & ~ :where(.rt-TextFieldSlot) {
+        cursor: var(--cursor-disabled);
+      }
+    }
+
+    .rt-TextFieldRoot:where(:has(&)) {
+      --text-field-selection-color: var(--gray-a5);
+      --text-field-focus-color: var(--gray-8);
+    }
+  }
+}

package/src/components/text-field.props.tsx

@@ -0,0 +1,38 @@
+import { colorPropDef } from '../props/color.prop.js';
+import { paddingPropDefs } from '../props/padding.props.js';
+import { radiusPropDef } from '../props/radius.prop.js';
+import { flexPropDefs } from './flex.props.js';
+
+import type { PropDef } from '../props/prop-def.js';
+
+const sizes = ['1', '2', '3'] as const;
+const variants = ['classic', 'surface', 'soft'] as const;
+
+const textFieldRootPropDefs = {
+  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
+  ...colorPropDef,
+  ...radiusPropDef,
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  variant: PropDef<(typeof variants)[number]>;
+};
+
+const sides = ['left', 'right'] as const;
+
+const textFieldSlotPropDefs = {
+  side: { type: 'enum', values: sides },
+  ...colorPropDef,
+  gap: flexPropDefs.gap,
+  px: paddingPropDefs.px,
+  pl: paddingPropDefs.pl,
+  pr: paddingPropDefs.pr,
+} satisfies {
+  side: PropDef<(typeof sides)[number]>;
+  gap: typeof flexPropDefs.gap;
+  px: typeof paddingPropDefs.px;
+  pl: typeof paddingPropDefs.pl;
+  pr: typeof paddingPropDefs.pr;
+};
+
+export { textFieldRootPropDefs, textFieldSlotPropDefs };

package/src/components/text-field.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import * as React from 'react';
+import classNames from 'classnames';
+import { composeRefs } from 'radix-ui/internal';
+
+import { textFieldRootPropDefs, textFieldSlotPropDefs } from './text-field.props.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 { NotInputTextualAttributes } from '../helpers/input-attributes.js';
+import type { MarginProps } from '../props/margin.props.js';
+import type { GetPropDefTypes } from '../props/prop-def.js';
+
+type TextFieldRootElement = React.ElementRef<'input'>;
+type TextFieldRootOwnProps = GetPropDefTypes<typeof textFieldRootPropDefs> & {
+  defaultValue?: string | number;
+  value?: string | number;
+  type?:
+    | 'date'
+    | 'datetime-local'
+    | 'email'
+    | 'hidden'
+    | 'month'
+    | 'number'
+    | 'password'
+    | 'search'
+    | 'tel'
+    | 'text'
+    | 'time'
+    | 'url'
+    | 'week';
+};
+type TextFieldInputProps = ComponentPropsWithout<
+  'input',
+  NotInputTextualAttributes | 'color' | 'defaultValue' | 'size' | 'type' | 'value'
+>;
+interface TextFieldRootProps extends TextFieldInputProps, MarginProps, TextFieldRootOwnProps {}
+const TextFieldRoot = React.forwardRef<TextFieldRootElement, TextFieldRootProps>(
+  (props, forwardedRef) => {
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    const { children, className, color, radius, style, ...inputProps } = extractProps(
+      props,
+      textFieldRootPropDefs,
+      marginPropDefs
+    );
+    return (
+      <div
+        data-accent-color={color}
+        data-radius={radius}
+        style={style}
+        className={classNames('rt-TextFieldRoot', className)}
+        onPointerDown={(event) => {
+          const target = event.target as HTMLElement;
+          if (target.closest('input, button, a')) return;
+
+          const input = inputRef.current;
+          if (!input) return;
+
+          // Same selector as in the CSS to find the right slot
+          const isRightSlot = target.closest(`
+            .rt-TextFieldSlot[data-side='right'],
+            .rt-TextFieldSlot:not([data-side='right']) ~ .rt-TextFieldSlot:not([data-side='left'])
+          `);
+
+          const cursorPosition = isRightSlot ? input.value.length : 0;
+
+          requestAnimationFrame(() => {
+            // Only some input types support this, browsers will throw an error if not supported
+            // See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange#:~:text=Note%20that%20according,not%20support%20selection%22.
+            try {
+              input.setSelectionRange(cursorPosition, cursorPosition);
+            } catch {}
+            input.focus();
+          });
+        }}
+      >
+        <input
+          spellCheck="false"
+          {...inputProps}
+          ref={composeRefs(inputRef, forwardedRef)}
+          className="rt-reset rt-TextFieldInput"
+        />
+        {children}
+      </div>
+    );
+  }
+);
+TextFieldRoot.displayName = 'TextField.Root';
+
+type TextFieldSlotElement = React.ElementRef<'div'>;
+type TextFieldSlotOwnProps = GetPropDefTypes<typeof textFieldSlotPropDefs>;
+interface TextFieldSlotProps
+  extends ComponentPropsWithout<'div', RemovedProps>,
+    TextFieldSlotOwnProps {}
+const TextFieldSlot = React.forwardRef<TextFieldSlotElement, TextFieldSlotProps>(
+  (props, forwardedRef) => {
+    const { className, color, side, ...slotProps } = extractProps(props, textFieldSlotPropDefs);
+    return (
+      <div
+        data-accent-color={color}
+        data-side={side}
+        {...slotProps}
+        ref={forwardedRef}
+        className={classNames('rt-TextFieldSlot', className)}
+      />
+    );
+  }
+);
+TextFieldSlot.displayName = 'TextField.Slot';
+
+export { TextFieldRoot as Root, TextFieldSlot as Slot };
+export type { TextFieldRootProps as RootProps, TextFieldSlotProps as SlotProps };

package/src/components/text.css

@@ -0,0 +1,90 @@
+.rt-Text {
+  line-height: var(--line-height, var(--default-line-height));
+  letter-spacing: var(--letter-spacing, inherit);
+
+  :where(&) {
+    margin: 0;
+  }
+
+  &:where([data-accent-color]) {
+    color: var(--accent-a11);
+  }
+
+  &:where([data-accent-color].rt-high-contrast),
+  :where([data-accent-color]:not(.radix-themes)) &:where(.rt-high-contrast) {
+    color: var(--accent-12);
+  }
+
+  /* stylelint-disable selector-max-type */
+  &:where(label) {
+    /* Better -webkit-tap-highlight-color */
+    @media (pointer: coarse) {
+      -webkit-tap-highlight-color: transparent;
+      &:where(:active) {
+        outline: 0.75em solid var(--gray-a4);
+        outline-offset: -0.6em;
+      }
+    }
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * SIZES                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+@breakpoints {
+  .rt-Text {
+    &:where(.rt-r-size-0) {
+      font-size: var(--font-size-0);
+      --line-height: var(--line-height-0);
+      --letter-spacing: var(--letter-spacing-0);
+    }
+    &:where(.rt-r-size-1) {
+      font-size: var(--font-size-1);
+      --line-height: var(--line-height-1);
+      --letter-spacing: var(--letter-spacing-1);
+    }
+    &:where(.rt-r-size-2) {
+      font-size: var(--font-size-2);
+      --line-height: var(--line-height-2);
+      --letter-spacing: var(--letter-spacing-2);
+    }
+    &:where(.rt-r-size-3) {
+      font-size: var(--font-size-3);
+      --line-height: var(--line-height-3);
+      --letter-spacing: var(--letter-spacing-3);
+    }
+    &:where(.rt-r-size-4) {
+      font-size: var(--font-size-4);
+      --line-height: var(--line-height-4);
+      --letter-spacing: var(--letter-spacing-4);
+    }
+    &:where(.rt-r-size-5) {
+      font-size: var(--font-size-5);
+      --line-height: var(--line-height-5);
+      --letter-spacing: var(--letter-spacing-5);
+    }
+    &:where(.rt-r-size-6) {
+      font-size: var(--font-size-6);
+      --line-height: var(--line-height-6);
+      --letter-spacing: var(--letter-spacing-6);
+    }
+    &:where(.rt-r-size-7) {
+      font-size: var(--font-size-7);
+      --line-height: var(--line-height-7);
+      --letter-spacing: var(--letter-spacing-7);
+    }
+    &:where(.rt-r-size-8) {
+      font-size: var(--font-size-8);
+      --line-height: var(--line-height-8);
+      --letter-spacing: var(--letter-spacing-8);
+    }
+    &:where(.rt-r-size-9) {
+      font-size: var(--font-size-9);
+      --line-height: var(--line-height-9);
+      --letter-spacing: var(--letter-spacing-9);
+    }
+  }
+}

package/src/components/text.props.tsx

@@ -0,0 +1,36 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+import { colorPropDef } from '../props/color.prop.js';
+import { highContrastPropDef } from '../props/high-contrast.prop.js';
+import { leadingTrimPropDef } from '../props/leading-trim.prop.js';
+import { textAlignPropDef } from '../props/text-align.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 as = ['span', 'div', 'label', 'p'] as const;
+const sizes = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
+
+const textPropDefs = {
+  as: { type: 'enum', values: as, default: 'span' },
+  ...asChildPropDef,
+  size: {
+    type: 'enum',
+    className: 'rt-r-size',
+    values: sizes,
+    responsive: true,
+  },
+  ...weightPropDef,
+  ...textAlignPropDef,
+  ...leadingTrimPropDef,
+  ...truncatePropDef,
+  ...textWrapPropDef,
+  ...colorPropDef,
+  ...highContrastPropDef,
+} satisfies {
+  as: PropDef<(typeof as)[number]>;
+  size: PropDef<(typeof sizes)[number]>;
+};
+
+export { textPropDefs };