@kushagradhawan/kookie-ui 0.1.0

package/src/components/select.css

@@ -0,0 +1,461 @@
+.rt-SelectTrigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  user-select: none;
+  vertical-align: top;
+  line-height: var(--height);
+
+  font-family: var(--default-font-family);
+  font-weight: var(--font-weight-regular);
+  font-style: normal;
+  text-align: start;
+
+  &:where(:focus-visible) {
+    outline: 2px solid var(--focus-8);
+    outline-offset: -1px;
+  }
+}
+
+.rt-SelectTriggerInner {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rt-SelectIcon {
+  flex-shrink: 0;
+
+  :where(.rt-SelectTrigger:not(.rt-variant-ghost)) & {
+    opacity: 0.9;
+  }
+}
+
+.rt-SelectContent {
+  --scrollarea-scrollbar-vertical-margin-top: var(--select-content-padding);
+  --scrollarea-scrollbar-vertical-margin-bottom: var(--select-content-padding);
+  --scrollarea-scrollbar-horizontal-margin-left: var(--select-content-padding);
+  --scrollarea-scrollbar-horizontal-margin-right: var(--select-content-padding);
+
+  overflow: hidden;
+  background-color: var(--color-panel-solid);
+
+  &:where([data-side]) {
+    min-width: var(--radix-select-trigger-width);
+    max-height: var(--radix-select-content-available-height);
+    transform-origin: var(--radix-select-content-transform-origin);
+  }
+}
+
+.rt-SelectViewport {
+  box-sizing: border-box;
+  padding: var(--select-content-padding);
+
+  :where(.rt-SelectContent:has(.rt-ScrollAreaScrollbar[data-orientation='vertical'])) & {
+    padding-right: var(--space-3);
+  }
+}
+
+.rt-SelectItem {
+  display: flex;
+  align-items: center;
+  height: var(--select-item-height);
+  padding-left: var(--select-item-indicator-width);
+  padding-right: var(--select-item-indicator-width);
+  position: relative;
+  box-sizing: border-box;
+  outline: none;
+  scroll-margin: var(--select-content-padding) 0;
+
+  /* Fix sticky text highlighting after selection in Firefox */
+  user-select: none;
+
+  /* Cursors */
+  cursor: var(--cursor-menu-item);
+  &:where([data-disabled]) {
+    cursor: default;
+  }
+}
+
+.rt-SelectItemIndicator {
+  position: absolute;
+  left: 0;
+  width: var(--select-item-indicator-width);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rt-SelectSeparator {
+  height: 1px;
+  margin-top: var(--space-2);
+  margin-bottom: var(--space-2);
+  margin-left: var(--select-item-indicator-width);
+  margin-right: var(--select-separator-margin-right);
+}
+
+.rt-SelectLabel {
+  display: flex;
+  align-items: center;
+  height: var(--select-item-height);
+  padding-left: var(--select-item-indicator-width);
+  padding-right: var(--select-item-indicator-width);
+  color: var(--gray-a10);
+  user-select: none;
+  cursor: default;
+
+  :where(.rt-SelectItem) + & {
+    margin-top: var(--space-2);
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * TRIGGER SIZES                                                                                   *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.rt-SelectTrigger {
+  color: var(--gray-12);
+
+  &:where(:not(.rt-variant-ghost)) {
+    box-sizing: border-box;
+    height: var(--select-trigger-height);
+  }
+  &:where(.rt-variant-ghost) {
+    box-sizing: content-box;
+    height: fit-content;
+    padding: var(--select-trigger-ghost-padding-y) var(--select-trigger-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(--select-trigger-ghost-padding-y));
+    --margin-right-override: calc(var(--margin-right) - var(--select-trigger-ghost-padding-x));
+    --margin-bottom-override: calc(var(--margin-bottom) - var(--select-trigger-ghost-padding-y));
+    --margin-left-override: calc(var(--margin-left) - var(--select-trigger-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-SelectTrigger {
+    &:where(.rt-r-size-1) {
+      --select-trigger-height: var(--space-5);
+      gap: var(--space-1);
+      font-size: var(--font-size-1);
+      line-height: var(--line-height-1);
+      letter-spacing: var(--letter-spacing-1);
+      border-radius: max(var(--radius-1), var(--radius-full));
+
+      &:where(:not(.rt-variant-ghost)) {
+        padding-left: var(--space-2);
+        padding-right: var(--space-2);
+      }
+      &:where(.rt-variant-ghost) {
+        --select-trigger-ghost-padding-x: var(--space-2);
+        --select-trigger-ghost-padding-y: var(--space-1);
+      }
+    }
+    &:where(.rt-r-size-2) {
+      --select-trigger-height: var(--space-6);
+      gap: calc(var(--space-1) * 1.5);
+      font-size: var(--font-size-2);
+      line-height: var(--line-height-2);
+      letter-spacing: var(--letter-spacing-2);
+      border-radius: max(var(--radius-2), var(--radius-full));
+
+      &:where(:not(.rt-variant-ghost)) {
+        padding-left: var(--space-3);
+        padding-right: var(--space-3);
+      }
+      &:where(.rt-variant-ghost) {
+        --select-trigger-ghost-padding-x: var(--space-2);
+        --select-trigger-ghost-padding-y: var(--space-1);
+      }
+    }
+    &:where(.rt-r-size-3) {
+      --select-trigger-height: var(--space-7);
+      gap: var(--space-2);
+      font-size: var(--font-size-3);
+      line-height: var(--line-height-3);
+      letter-spacing: var(--letter-spacing-3);
+      border-radius: max(var(--radius-3), var(--radius-full));
+
+      &:where(:not(.rt-variant-ghost)) {
+        padding-left: var(--space-4);
+        padding-right: var(--space-4);
+      }
+      &:where(.rt-variant-ghost) {
+        --select-trigger-ghost-padding-x: var(--space-3);
+        --select-trigger-ghost-padding-y: calc(var(--space-1) * 1.5);
+      }
+      & :where(.rt-SelectIcon) {
+        width: 11px;
+        height: 11px;
+      }
+    }
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * CONTENT SIZES                                                                                   *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+@breakpoints {
+  .rt-SelectContent {
+    &:where(.rt-r-size-1) {
+      --select-content-padding: var(--space-1);
+      --select-item-height: var(--space-5);
+      --select-item-indicator-width: calc(var(--space-5) / 1.2);
+      --select-separator-margin-right: var(--space-2);
+      border-radius: var(--radius-3);
+
+      & :where(.rt-SelectLabel) {
+        font-size: var(--font-size-1);
+        letter-spacing: var(--letter-spacing-1);
+        line-height: var(--line-height-1);
+      }
+      & :where(.rt-SelectItem) {
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+        border-radius: var(--radius-1);
+      }
+      & :where(.rt-SelectItemIndicatorIcon) {
+        width: calc(8px * var(--scaling));
+        height: calc(8px * var(--scaling));
+      }
+    }
+    &:where(.rt-r-size-2, .rt-r-size-3) {
+      --select-content-padding: var(--space-2);
+      --select-item-height: var(--space-6);
+      --select-item-indicator-width: var(--space-5);
+      --select-separator-margin-right: var(--space-3);
+      border-radius: var(--radius-4);
+
+      & :where(.rt-SelectLabel) {
+        font-size: var(--font-size-2);
+        letter-spacing: var(--letter-spacing-2);
+        line-height: var(--line-height-2);
+      }
+      & :where(.rt-SelectItem) {
+        line-height: var(--line-height-2);
+        border-radius: var(--radius-2);
+      }
+    }
+    &:where(.rt-r-size-2) {
+      & :where(.rt-SelectItem) {
+        font-size: var(--font-size-2);
+        letter-spacing: var(--letter-spacing-2);
+      }
+      & :where(.rt-SelectItemIndicatorIcon) {
+        width: calc(10px * var(--scaling));
+        height: calc(10px * var(--scaling));
+      }
+    }
+    &:where(.rt-r-size-3) {
+      & :where(.rt-SelectItem) {
+        font-size: var(--font-size-3);
+        letter-spacing: var(--letter-spacing-3);
+      }
+      & :where(.rt-SelectItemIndicatorIcon) {
+        width: calc(10px * var(--scaling));
+        height: calc(10px * var(--scaling));
+      }
+    }
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * TRIGGER VARIANTS                                                                                *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+/* surface */
+
+.rt-SelectTrigger:where(.rt-variant-surface) {
+  color: var(--gray-12);
+  background-color: var(--color-surface);
+  box-shadow: inset 0 0 0 1px var(--gray-a7);
+
+  @media (hover: hover) {
+    &:where(:hover) {
+      box-shadow: inset 0 0 0 1px var(--gray-a8);
+    }
+  }
+  &:where([data-state='open']) {
+    box-shadow: inset 0 0 0 1px var(--gray-a8);
+  }
+  &:where(:disabled) {
+    color: var(--gray-a11);
+    background-color: var(--gray-a2);
+    box-shadow: inset 0 0 0 1px var(--gray-a6);
+  }
+  &:where([data-placeholder]) {
+    & :where(.rt-SelectTriggerInner) {
+      color: var(--gray-a10);
+    }
+  }
+}
+
+/* classic */
+
+/* prettier-ignore */
+:where(.radix-themes) {
+  --select-trigger-classic-shadow: var(--shadow-2);
+  --select-trigger-classic-hover-shadow: var(--shadow-2);
+  --select-trigger-classic-disabled-shadow: none;
+}
+
+/* prettier-ignore */
+:is(.dark, .dark-theme),
+:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
+  --select-trigger-classic-shadow: var(--shadow-2);
+  --select-trigger-classic-hover-shadow: var(--shadow-2);
+  --select-trigger-classic-disabled-shadow: none;
+}
+
+.rt-SelectTrigger:where(.rt-variant-classic) {
+  color: var(--gray-12);
+  background: linear-gradient(to bottom, var(--color-surface), var(--gray-1));
+  box-shadow: var(--select-trigger-classic-shadow);
+
+  @media (hover: hover) {
+    &:where(:hover) {
+      background: linear-gradient(to bottom, var(--gray-1), var(--gray-2));
+      box-shadow: var(--select-trigger-classic-hover-shadow);
+    }
+  }
+  &:where([data-state='open']) {
+    background: linear-gradient(to bottom, var(--gray-1), var(--gray-2));
+    box-shadow: var(--select-trigger-classic-hover-shadow);
+  }
+  &:where(:disabled) {
+    color: var(--gray-a11);
+    background: var(--gray-a2);
+    box-shadow: var(--select-trigger-classic-disabled-shadow);
+  }
+  &:where([data-placeholder]) {
+    & :where(.rt-SelectTriggerInner) {
+      color: var(--gray-a10);
+    }
+  }
+}
+
+/* soft / ghost */
+
+.rt-SelectTrigger:where(.rt-variant-soft),
+.rt-SelectTrigger:where(.rt-variant-ghost) {
+  color: var(--accent-12);
+
+  &:where([data-placeholder]) {
+    & :where(.rt-SelectTriggerInner) {
+      color: var(--accent-12);
+      opacity: 0.6;
+    }
+  }
+}
+
+.rt-SelectTrigger:where(.rt-variant-soft) {
+  background-color: var(--accent-a3);
+
+  @media (hover: hover) {
+    &:where(:hover) {
+      background-color: var(--accent-a4);
+    }
+  }
+  &:where([data-state='open']) {
+    background-color: var(--accent-a4);
+  }
+  &:where(:focus-visible) {
+    /* Use gray outline when component color is gray */
+    outline-color: var(--accent-8);
+  }
+  &:where(:disabled) {
+    color: var(--gray-a11);
+    background-color: var(--gray-a3);
+  }
+}
+
+.rt-SelectTrigger:where(.rt-variant-ghost) {
+  @media (hover: hover) {
+    &:where(:hover) {
+      background-color: var(--accent-a3);
+    }
+  }
+  &:where([data-state='open']) {
+    background-color: var(--accent-a3);
+  }
+  &:where(:disabled) {
+    color: var(--gray-a11);
+    background-color: transparent;
+  }
+}
+
+/* all disabled */
+.rt-SelectTrigger {
+  &:where(:disabled) {
+    & :where(.rt-SelectIcon) {
+      color: var(--gray-a9);
+    }
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * MENU VARIANTS                                                                                   *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.rt-SelectContent {
+  box-shadow: var(--shadow-5);
+}
+
+.rt-SelectItem:where([data-disabled]) {
+  color: var(--gray-a8);
+}
+
+.rt-SelectSeparator {
+  background-color: var(--gray-a6);
+}
+
+/* solid */
+
+.rt-SelectContent:where(.rt-variant-solid) {
+  & :where(.rt-SelectItem[data-highlighted]) {
+    background-color: var(--accent-9);
+    color: var(--accent-contrast);
+  }
+  &:where(.rt-high-contrast) :where(.rt-SelectItem[data-highlighted]) {
+    background-color: var(--accent-12);
+    color: var(--accent-1);
+  }
+}
+
+/* soft */
+
+.rt-SelectContent:where(.rt-variant-soft) {
+  & :where(.rt-SelectItem[data-highlighted]) {
+    background-color: var(--accent-a4);
+  }
+}

package/src/components/select.props.tsx

@@ -0,0 +1,37 @@
+import { colorPropDef } from '../props/color.prop.js';
+import { highContrastPropDef } from '../props/high-contrast.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 selectRootPropDefs = {
+  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+};
+
+const triggerVariants = ['classic', 'surface', 'soft', 'ghost'] as const;
+
+const selectTriggerPropDefs = {
+  variant: { type: 'enum', className: 'rt-variant', values: triggerVariants, default: 'surface' },
+  ...colorPropDef,
+  ...radiusPropDef,
+  placeholder: { type: 'string' },
+} satisfies {
+  variant: PropDef<(typeof triggerVariants)[number]>;
+  placeholder: PropDef<string>;
+};
+
+const contentVariants = ['solid', 'soft'] as const;
+
+const selectContentPropDefs = {
+  variant: { type: 'enum', className: 'rt-variant', values: contentVariants, default: 'solid' },
+  ...colorPropDef,
+  ...highContrastPropDef,
+} satisfies {
+  variant: PropDef<(typeof contentVariants)[number]>;
+};
+
+export { selectRootPropDefs, selectTriggerPropDefs, selectContentPropDefs };