@kushagradhawan/kookie-ui 0.1.0

package/src/components/switch.css

@@ -0,0 +1,322 @@
+:where(.radix-themes) {
+  --switch-disabled-blend-mode: multiply;
+  --switch-high-contrast-checked-color-overlay: var(--black-a8);
+  --switch-high-contrast-checked-active-before-filter: contrast(0.82) saturate(1.2) brightness(1.16);
+}
+
+:is(.dark, .dark-theme),
+:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
+  --switch-disabled-blend-mode: screen;
+  --switch-high-contrast-checked-color-overlay: transparent;
+  --switch-high-contrast-checked-active-before-filter: brightness(1.08);
+}
+
+.rt-SwitchRoot {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  vertical-align: top;
+  flex-shrink: 0;
+
+  /* Unless in a skeleton, align with text line height when possible and fall back to own height */
+  height: var(--skeleton-height, var(--line-height, var(--switch-height)));
+  --skeleton-height-override: var(--switch-height);
+
+  /* Set root radius when in a skeleton */
+  border-radius: var(--skeleton-radius);
+  --skeleton-radius-override: var(--switch-border-radius);
+
+  --switch-width: calc(var(--switch-height) * 1.75);
+  --switch-thumb-inset: 1px;
+  --switch-thumb-size: calc(var(--switch-height) - var(--switch-thumb-inset) * 2);
+  --switch-thumb-translate-x: calc(var(--switch-width) - var(--switch-height));
+
+  &::before {
+    content: '';
+    display: block;
+    width: var(--switch-width);
+    height: var(--switch-height);
+    border-radius: var(--switch-border-radius);
+    transition: background-position, background-color, box-shadow, filter;
+    transition-timing-function: linear, ease-in-out, ease-in-out, ease-in-out;
+    background-repeat: no-repeat;
+
+    /*
+     * Length of the gradient is: switch width for the checked part, plus switch
+     * height for the thumb part, plus another switch width for the unchecked part
+     */
+    background-size: calc(var(--switch-width) * 2 + var(--switch-height)) 100%;
+  }
+
+  &:where([data-state='unchecked'])::before {
+    transition-duration: 120ms, 140ms, 140ms, 140ms;
+    background-position-x: 100%;
+  }
+  &:where([data-state='checked'])::before {
+    transition-duration: 160ms, 140ms, 140ms, 140ms;
+    background-position: 0%;
+  }
+  &:where(:active)::before {
+    transition-duration: 30ms;
+  }
+  &:where(:focus-visible)::before {
+    outline: 2px solid var(--focus-8);
+    outline-offset: 2px;
+  }
+
+  /* Cursors */
+  &::before {
+    cursor: var(--cursor-switch);
+  }
+  &:where([data-disabled])::before {
+    cursor: var(--cursor-disabled);
+  }
+}
+
+.rt-SwitchThumb {
+  background-color: white;
+  position: absolute;
+  left: var(--switch-thumb-inset);
+  width: var(--switch-thumb-size);
+  height: var(--switch-thumb-size);
+  border-radius: calc(var(--switch-border-radius) - var(--switch-thumb-inset));
+  transition: transform 140ms cubic-bezier(0.45, 0.05, 0.55, 0.95), box-shadow 140ms ease-in-out;
+
+  &:where([data-state='checked']) {
+    transform: translateX(var(--switch-thumb-translate-x));
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * SIZES                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+@breakpoints {
+  .rt-SwitchRoot {
+    &:where(.rt-r-size-1) {
+      --switch-height: var(--space-4);
+      --switch-border-radius: max(var(--radius-1), var(--radius-thumb));
+    }
+    &:where(.rt-r-size-2) {
+      --switch-height: calc(var(--space-5) * 5 / 6);
+      --switch-border-radius: max(var(--radius-2), var(--radius-thumb));
+    }
+    &:where(.rt-r-size-3) {
+      --switch-height: var(--space-5);
+      --switch-border-radius: max(var(--radius-2), var(--radius-thumb));
+    }
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * VARIANTS                                                                                        *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+/* surface */
+
+:where(.radix-themes) {
+  --switch-surface-checked-active-filter: brightness(0.92) saturate(1.1);
+}
+
+:is(.dark, .dark-theme),
+:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
+  --switch-surface-checked-active-filter: brightness(1.08);
+}
+
+.rt-SwitchRoot:where(.rt-variant-surface) {
+  &::before {
+    background-color: var(--gray-a3);
+    background-image: linear-gradient(to right, var(--accent-track) 40%, transparent 60%);
+    box-shadow: inset 0 0 0 1px var(--gray-a5);
+  }
+  &:where(:active)::before {
+    background-color: var(--gray-a4);
+  }
+  &:where([data-state='checked']:active)::before {
+    filter: var(--switch-surface-checked-active-filter);
+  }
+  &:where(.rt-high-contrast) {
+    &::before {
+      /* prettier-ignore */
+      background-image:
+        linear-gradient(to right, var(--switch-high-contrast-checked-color-overlay) 40%, transparent 60%),
+        linear-gradient(to right, var(--accent-track) 40%, transparent 60%);
+    }
+    &:where([data-state='checked']:active)::before {
+      filter: var(--switch-high-contrast-checked-active-before-filter);
+    }
+  }
+  &:where([data-disabled]) {
+    mix-blend-mode: var(--switch-disabled-blend-mode);
+
+    &::before {
+      filter: none;
+      background-image: none;
+      background-color: var(--gray-a3);
+      box-shadow: inset 0 0 0 1px var(--gray-a3);
+    }
+  }
+
+  & :where(.rt-SwitchThumb) {
+    &:where([data-state='unchecked']) {
+      box-shadow: 0 0 1px 1px var(--black-a2), 0 1px 1px var(--black-a1), 0 2px 4px -1px var(--black-a1);
+    }
+    &:where([data-state='checked']) {
+      box-shadow: 0 1px 3px var(--black-a2), 0 2px 4px -1px var(--black-a1), 0 0 0 1px var(--black-a1),
+        0 0 0 1px var(--accent-a4), -1px 0 1px var(--black-a2);
+
+      &:where(.rt-high-contrast) {
+        box-shadow: 0 1px 3px var(--black-a2), 0 2px 4px -1px var(--black-a1), 0 0 0 1px var(--black-a2),
+          -1px 0 1px var(--black-a2);
+      }
+    }
+    &:where([data-disabled]) {
+      background-color: var(--gray-2);
+      box-shadow: 0 0 0 1px var(--gray-a2), 0 1px 3px var(--black-a1);
+      /* Avoid the Chrome P3 bug with transition through red when changing light/dark mode */
+      transition: none;
+    }
+  }
+}
+
+/* classic */
+
+:where(.radix-themes) {
+  --switch-surface-checked-active-filter: brightness(0.92) saturate(1.1);
+}
+:is(.dark, .dark-theme),
+:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
+  --switch-surface-checked-active-filter: brightness(1.08);
+}
+
+.rt-SwitchRoot:where(.rt-variant-classic) {
+  &::before {
+    background-image: linear-gradient(to right, var(--accent-track) 40%, transparent 60%);
+    background-color: var(--gray-a4);
+    box-shadow: var(--shadow-1);
+  }
+  &:where([data-state='unchecked']:active)::before {
+    background-color: var(--gray-a5);
+  }
+  &:where([data-state='checked'])::before {
+    box-shadow: inset 0 0 0 1px var(--gray-a3), inset 0 0 0 1px var(--accent-a4), inset 0 0 0 1px var(--black-a1),
+      inset 0 1.5px 2px 0 var(--black-a2);
+  }
+  &:where([data-state='checked']:active)::before {
+    filter: var(--switch-surface-checked-active-filter);
+  }
+  &:where(.rt-high-contrast) {
+    &::before {
+      box-shadow: inset 0 0 0 1px var(--gray-a3), inset 0 0 0 1px var(--black-a2), inset 0 1.5px 2px 0 var(--black-a2);
+
+      /* prettier-ignore */
+      background-image:
+        linear-gradient(to right, var(--switch-high-contrast-checked-color-overlay) 40%, transparent 60%),
+        linear-gradient(to right, var(--accent-track) 40%, transparent 60%);
+    }
+    &:where([data-state='checked']:active)::before {
+      filter: var(--switch-high-contrast-checked-active-before-filter);
+    }
+  }
+  &:where([data-disabled]) {
+    mix-blend-mode: var(--switch-disabled-blend-mode);
+
+    &::before {
+      filter: none;
+      background-image: none;
+      background-color: var(--gray-a5);
+      box-shadow: var(--shadow-1);
+      opacity: 0.5;
+    }
+  }
+
+  & :where(.rt-SwitchThumb) {
+    &:where([data-state='unchecked']) {
+      box-shadow: 0 1px 3px var(--black-a3), 0 2px 4px -1px var(--black-a1), 0 0 0 1px var(--black-a2);
+    }
+    &:where([data-state='checked']) {
+      box-shadow: 0 1px 3px var(--black-a2), 0 2px 4px -1px var(--black-a1), 0 0 0 1px var(--black-a1),
+        0 0 0 1px var(--accent-a4), -1px 0 1px var(--black-a2);
+
+      &:where(.rt-high-contrast) {
+        box-shadow: 0 1px 3px var(--black-a2), 0 2px 4px -1px var(--black-a1), 0 0 0 1px var(--black-a2),
+          -1px 0 1px var(--black-a2);
+      }
+    }
+    &:where([data-disabled]) {
+      background-color: var(--gray-2);
+      box-shadow: 0 0 0 1px var(--gray-a2), 0 1px 3px var(--black-a1);
+      /* Avoid the Chrome P3 bug with transition through red when changing light/dark mode */
+      transition: none;
+    }
+  }
+}
+
+/* soft */
+
+.rt-SwitchRoot:where(.rt-variant-soft) {
+  /* prettier-ignore */
+  &::before {
+    background-image:
+      linear-gradient(to right, var(--accent-a4) 40%, transparent 60%),
+      linear-gradient(to right, var(--accent-a4) 40%, transparent 60%),
+      /* Blend with white to increase contrast in dark mode */
+      linear-gradient(to right, var(--accent-a4) 40%, var(--white-a1) 60%),
+      linear-gradient(to right, var(--gray-a2) 40%, var(--gray-a3) 60%);
+  }
+  &:where([data-state='unchecked'])::before {
+    background-color: var(--gray-a3);
+  }
+  &:where(:active)::before {
+    background-color: var(--gray-a4);
+  }
+  &:where(.rt-high-contrast) {
+    &::before {
+      /* prettier-ignore */
+      background-image:
+        linear-gradient(to right, var(--switch-high-contrast-checked-color-overlay) 40%, transparent 60%),
+        linear-gradient(to right, var(--accent-a6) 40%, transparent 60%),
+        linear-gradient(to right, var(--accent-a6) 40%, transparent 60%),
+        linear-gradient(to right, var(--accent-a6) 40%, var(--white-a1) 60%),
+        linear-gradient(to right, var(--accent-a3) 40%, var(--gray-a3) 60%);
+    }
+    &:where([data-state='checked']:active)::before {
+      filter: var(--switch-high-contrast-checked-active-before-filter);
+    }
+  }
+  &:where([data-disabled]) {
+    mix-blend-mode: var(--switch-disabled-blend-mode);
+
+    &::before {
+      filter: none;
+      background-image: none;
+      background-color: var(--gray-a4);
+    }
+  }
+
+  & :where(.rt-SwitchThumb) {
+    filter: saturate(0.45);
+
+    &:where([data-state='unchecked']) {
+      box-shadow: 0 0 0 1px var(--black-a1), 0 1px 3px var(--black-a1), 0 1px 3px var(--black-a1),
+        0 2px 4px -1px var(--black-a1);
+    }
+
+    &:where([data-state='checked']) {
+      box-shadow: 0 0 0 1px var(--black-a1), 0 1px 3px var(--black-a2), 0 1px 3px var(--accent-a3),
+        0 2px 4px -1px var(--accent-a3);
+    }
+
+    &:where([data-disabled]) {
+      filter: none;
+      background-color: var(--gray-2);
+      box-shadow: 0 0 0 1px var(--gray-a2), 0 1px 3px var(--black-a1);
+      /* Avoid the Chrome P3 bug with transition through red when changing light/dark mode */
+      transition: none;
+    }
+  }
+}

package/src/components/switch.props.tsx

@@ -0,0 +1,21 @@
+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 variants = ['classic', 'surface', 'soft'] as const;
+
+const switchPropDefs = {
+  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
+  ...colorPropDef,
+  ...highContrastPropDef,
+  ...radiusPropDef,
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  variant: PropDef<(typeof variants)[number]>;
+};
+
+export { switchPropDefs };

package/src/components/switch.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Switch as SwitchPrimitive } from 'radix-ui';
+
+import { extractProps } from '../helpers/extract-props.js';
+import { marginPropDefs } from '../props/margin.props.js';
+import { switchPropDefs } from './switch.props.js';
+
+import type { MarginProps } from '../props/margin.props.js';
+import type { GetPropDefTypes } from '../props/prop-def.js';
+import type { ComponentPropsWithout } from '../helpers/component-props.js';
+
+type SwitchElement = React.ElementRef<typeof SwitchPrimitive.Root>;
+type SwitchOwnProps = GetPropDefTypes<typeof switchPropDefs>;
+interface SwitchProps
+  extends ComponentPropsWithout<
+      typeof SwitchPrimitive.Root,
+      'asChild' | 'color' | 'defaultValue' | 'children'
+    >,
+    MarginProps,
+    SwitchOwnProps {}
+const Switch = React.forwardRef<SwitchElement, SwitchProps>((props, forwardedRef) => {
+  const { className, color, radius, ...switchProps } = extractProps(
+    props,
+    switchPropDefs,
+    marginPropDefs
+  );
+  return (
+    <SwitchPrimitive.Root
+      data-accent-color={color}
+      data-radius={radius}
+      {...switchProps}
+      asChild={false}
+      ref={forwardedRef}
+      className={classNames('rt-reset', 'rt-SwitchRoot', className)}
+    >
+      <SwitchPrimitive.Thumb
+        className={classNames('rt-SwitchThumb', { 'rt-high-contrast': props.highContrast })}
+      />
+    </SwitchPrimitive.Root>
+  );
+});
+Switch.displayName = 'Switch';
+
+export { Switch };
+export type { SwitchProps };

package/src/components/tab-nav.css

@@ -0,0 +1,5 @@
+@import './_internal/base-tab-list.css';
+
+.rt-TabNavItem {
+  display: flex;
+}

package/src/components/tab-nav.props.tsx

@@ -0,0 +1,13 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+
+import type { PropDef } from '../props/prop-def.js';
+
+const tabNavLinkPropDefs = {
+  ...asChildPropDef,
+  active: { type: 'boolean', default: false },
+} satisfies {
+  active: PropDef<boolean>;
+};
+
+export { baseTabListPropDefs as tabNavRootPropDefs } from './_internal/base-tab-list.props.js';
+export { tabNavLinkPropDefs };

package/src/components/tab-nav.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { NavigationMenu } from 'radix-ui';
+
+import { tabNavRootPropDefs } from './tab-nav.props.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { getSubtree } from '../helpers/get-subtree.js';
+import { marginPropDefs } from '../props/margin.props.js';
+
+import type { tabNavLinkPropDefs } from './tab-nav.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 TabNavRootElement = React.ElementRef<typeof NavigationMenu.Root>;
+type TabNavRootElementProps = ComponentPropsWithout<'nav', RemovedProps>;
+type TabNavOwnProps = GetPropDefTypes<typeof tabNavRootPropDefs>;
+interface TabNavRootProps
+  extends Omit<TabNavRootElementProps, 'defaultValue' | 'dir' | 'color'>,
+    MarginProps,
+    TabNavOwnProps {}
+const TabNavRoot = React.forwardRef<TabNavRootElement, TabNavRootProps>((props, forwardedRef) => {
+  const { children, className, color, ...rootProps } = extractProps(
+    props,
+    tabNavRootPropDefs,
+    marginPropDefs
+  );
+  return (
+    <NavigationMenu.Root
+      className="rt-TabNavRoot"
+      data-accent-color={color}
+      {...rootProps}
+      asChild={false}
+      ref={forwardedRef}
+    >
+      <NavigationMenu.List
+        className={classNames('rt-reset', 'rt-BaseTabList', 'rt-TabNavList', className)}
+      >
+        {children}
+      </NavigationMenu.List>
+    </NavigationMenu.Root>
+  );
+});
+TabNavRoot.displayName = 'TabNav.Root';
+
+type TabNavLinkElement = React.ElementRef<typeof NavigationMenu.Link>;
+type TabNavLinkOwnProps = GetPropDefTypes<typeof tabNavLinkPropDefs>;
+interface TabNavLinkProps
+  extends ComponentPropsWithout<typeof NavigationMenu.Link, RemovedProps | 'onSelect'>,
+    TabNavLinkOwnProps {}
+const TabNavLink = React.forwardRef<TabNavLinkElement, TabNavLinkProps>((props, forwardedRef) => {
+  const { asChild, children, className, ...linkProps } = props;
+
+  return (
+    <NavigationMenu.Item className="rt-TabNavItem">
+      <NavigationMenu.Link
+        {...linkProps}
+        ref={forwardedRef}
+        className={classNames('rt-reset', 'rt-BaseTabListTrigger', 'rt-TabNavLink', className)}
+        onSelect={undefined}
+        asChild={asChild}
+      >
+        {getSubtree({ asChild, children }, (children) => (
+          <>
+            <span className="rt-BaseTabListTriggerInner rt-TabNavLinkInner">{children}</span>
+            <span className="rt-BaseTabListTriggerInnerHidden rt-TabNavLinkInnerHidden">
+              {children}
+            </span>
+          </>
+        ))}
+      </NavigationMenu.Link>
+    </NavigationMenu.Item>
+  );
+});
+TabNavLink.displayName = 'TabNav.Link';
+
+export { TabNavRoot as Root, TabNavLink as Link };
+export type { TabNavRootProps as RootProps, TabNavLinkProps as LinkProps };

package/src/components/table.css

@@ -0,0 +1,134 @@
+.rt-TableRootTable {
+  --table-row-background-color: transparent;
+  --table-row-box-shadow: inset 0 -1px var(--gray-a5);
+
+  width: 100%;
+  text-align: left;
+  vertical-align: top;
+  border-collapse: collapse;
+  border-radius: calc(var(--table-border-radius) - 1px);
+  border-spacing: 0;
+  box-sizing: border-box;
+
+  /* Makes "height: 100%" work on content inside cells */
+  height: 0;
+}
+
+.rt-TableHeader {
+  vertical-align: inherit;
+}
+
+.rt-TableBody {
+  vertical-align: inherit;
+}
+
+.rt-TableRow {
+  vertical-align: inherit;
+  color: var(--gray-12);
+}
+
+.rt-TableCell {
+  background-color: var(--table-row-background-color);
+  box-shadow: var(--table-row-box-shadow);
+  box-sizing: border-box;
+  vertical-align: inherit;
+  padding: var(--table-cell-padding);
+  /* Works as min-height */
+  height: var(--table-cell-min-height);
+
+  /* Inset with Table */
+  .rt-Inset :where(&:first-child) {
+    padding-left: var(--inset-padding-left, var(--table-cell-padding));
+  }
+  .rt-Inset :where(&:last-child) {
+    padding-right: var(--inset-padding-right, var(--table-cell-padding));
+  }
+}
+.rt-TableColumnHeaderCell {
+  font-weight: bold;
+}
+.rt-TableRowHeaderCell {
+  font-weight: normal;
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * SIZES                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+@breakpoints {
+  .rt-TableRoot {
+    &:where(.rt-r-size-1) {
+      --table-border-radius: var(--radius-3);
+      --table-cell-padding: var(--space-2);
+      --table-cell-min-height: calc(36px * var(--scaling));
+
+      & :where(.rt-TableRootTable) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+      }
+    }
+    &:where(.rt-r-size-2) {
+      --table-border-radius: var(--radius-4);
+      --table-cell-padding: var(--space-3);
+      --table-cell-min-height: calc(44px * var(--scaling));
+
+      & :where(.rt-TableRootTable) {
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+      }
+    }
+    &:where(.rt-r-size-3) {
+      --table-border-radius: var(--radius-4);
+      --table-cell-padding: var(--space-3) var(--space-4);
+      --table-cell-min-height: var(--space-8);
+
+      & :where(.rt-TableRootTable) {
+        font-size: var(--font-size-3);
+        line-height: var(--line-height-3);
+      }
+    }
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * VARIANTS                                                                                        *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+/* surface */
+
+.rt-TableRoot:where(.rt-variant-surface) {
+  box-sizing: border-box;
+  border: 1px solid var(--gray-a5);
+  border-radius: var(--table-border-radius);
+  background-color: var(--color-panel);
+  backdrop-filter: var(--backdrop-filter-panel);
+  background-clip: padding-box;
+  position: relative;
+
+  /* When possible, use half-transparent gray for nicer border blending with the background */
+  @supports (box-shadow: 0 0 0 1px color-mix(in oklab, white, black)) {
+    border-color: color-mix(in oklab, var(--gray-a5), var(--gray-6));
+  }
+
+  & :where(.rt-TableRootTable) {
+    overflow: hidden;
+
+    & :where(.rt-TableHeader) {
+      --table-row-background-color: var(--gray-a2);
+    }
+    & :where(.rt-TableBody) :where(.rt-TableRow:last-child) {
+      --table-row-box-shadow: none;
+    }
+  }
+}
+
+/* ghost */
+
+.rt-TableRoot:where(.rt-variant-ghost) {
+  --scrollarea-scrollbar-horizontal-margin-left: 0;
+  --scrollarea-scrollbar-horizontal-margin-right: 0;
+}