@kushagradhawan/kookie-ui 0.1.28 → 0.1.29

package/src/components/accordion.css

@@ -0,0 +1,254 @@
+/* Accordion Root */
+.rt-AccordionRoot {
+  border-radius: var(--radius-3);
+  overflow: hidden;
+}
+
+:where(.rt-AccordionRoot:where(.rt-variant-surface)) {
+  background-color: var(--color-surface);
+  box-shadow: inset 0 0 0 1px var(--gray-a6);
+}
+
+:where(.rt-AccordionRoot:where(.rt-variant-classic)) {
+  background-color: var(--color-surface);
+  box-shadow: var(--classic-inset-shadow-light);
+}
+
+:where(.rt-AccordionRoot:where(.rt-variant-soft)) {
+  background-color: var(--accent-a3);
+}
+
+:where(.rt-AccordionRoot:where(.rt-variant-outline)) {
+  box-shadow: inset 0 0 0 1px var(--gray-a7);
+}
+
+:where(.rt-AccordionRoot:where(.rt-variant-ghost)) {
+  background-color: transparent;
+}
+
+/* Panel background support */
+:where(.rt-AccordionRoot[data-panel-background="translucent"]) {
+  background-color: color-mix(in srgb, var(--color-panel-translucent), transparent var(--panel-opacity-light));
+  backdrop-filter: var(--backdrop-blur-panel);
+}
+
+/* Accordion Item */
+.rt-AccordionItem {
+  overflow: hidden;
+}
+
+:where(.rt-AccordionItem:not(:last-child)) {
+  border-bottom: 1px solid var(--gray-a6);
+}
+
+:where(.rt-AccordionRoot:where(.rt-variant-ghost)) :where(.rt-AccordionItem:not(:last-child)) {
+  border-bottom: 1px solid var(--gray-a4);
+}
+
+/* Accordion Header */
+.rt-AccordionHeader {
+  display: flex;
+}
+
+/* Accordion Trigger */
+.rt-AccordionTrigger {
+  all: unset;
+  font-family: inherit;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--font-size-2);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-3);
+  color: var(--gray-12);
+  cursor: pointer;
+  transition: var(--transition-standard);
+}
+
+/* Size variants */
+:where(.rt-AccordionRoot:where(.rt-r-size-1)) .rt-AccordionTrigger {
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--font-size-1);
+}
+
+:where(.rt-AccordionRoot:where(.rt-r-size-2)) .rt-AccordionTrigger {
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--font-size-2);
+}
+
+:where(.rt-AccordionRoot:where(.rt-r-size-3)) .rt-AccordionTrigger {
+  padding: var(--space-4) var(--space-5);
+  font-size: var(--font-size-3);
+}
+
+:where(.rt-AccordionRoot:where(.rt-r-size-4)) .rt-AccordionTrigger {
+  padding: var(--space-5) var(--space-6);
+  font-size: var(--font-size-4);
+}
+
+/* Trigger hover states */
+:where(.rt-AccordionTrigger:hover) {
+  background-color: var(--gray-a3);
+}
+
+:where(.rt-AccordionRoot:where(.rt-variant-soft)) :where(.rt-AccordionTrigger:hover) {
+  background-color: var(--accent-a4);
+}
+
+:where(.rt-AccordionRoot:where(.rt-variant-ghost)) :where(.rt-AccordionTrigger:hover) {
+  background-color: var(--gray-a2);
+}
+
+/* Trigger focus states */
+:where(.rt-AccordionTrigger:focus-visible) {
+  outline: var(--focus-outline-width) solid var(--focus-8);
+  outline-offset: var(--focus-outline-offset-inset);
+}
+
+/* Accordion Content */
+.rt-AccordionContent {
+  overflow: hidden;
+  /* remove padding here */
+  font-size: var(--font-size-2);
+  color: var(--gray-11);
+  line-height: var(--line-height-4);
+}
+
+.rt-AccordionContentInner {
+  padding: 0 var(--space-4) var(--space-3);
+}
+
+/* Size variants for content */
+:where(.rt-AccordionRoot:where(.rt-r-size-1)) .rt-AccordionContentInner {
+  padding: 0 var(--space-3) var(--space-2);
+  font-size: var(--font-size-1);
+}
+
+:where(.rt-AccordionRoot:where(.rt-r-size-2)) .rt-AccordionContentInner {
+  padding: 0 var(--space-4) var(--space-3);
+  font-size: var(--font-size-2);
+}
+
+:where(.rt-AccordionRoot:where(.rt-r-size-3)) .rt-AccordionContentInner {
+  padding: 0 var(--space-5) var(--space-4);
+  font-size: var(--font-size-3);
+}
+
+:where(.rt-AccordionRoot:where(.rt-r-size-4)) .rt-AccordionContentInner {
+  padding: 0 var(--space-6) var(--space-5);
+  font-size: var(--font-size-4);
+}
+
+/* Content animations */
+:where(.rt-AccordionContent[data-state="open"]) {
+  animation: rt-slide-down var(--duration-2) var(--ease-1);
+}
+
+:where(.rt-AccordionContent[data-state="closed"]) {
+  animation: rt-slide-up var(--duration-2) var(--ease-1);
+}
+
+@keyframes rt-slide-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes rt-slide-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+/* High contrast mode */
+:where(.rt-AccordionRoot[data-high-contrast]) .rt-AccordionTrigger {
+  color: var(--gray-12);
+}
+
+:where(.rt-AccordionRoot[data-high-contrast]) .rt-AccordionContent {
+  color: var(--gray-12);
+}
+
+/* Color accent support */
+:where(.rt-AccordionRoot:where(.rt-variant-soft)[data-accent-color]) :where(.rt-AccordionTrigger:hover) {
+  background-color: var(--accent-a4);
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  :where(.rt-AccordionContent[data-state="open"]),
+  :where(.rt-AccordionContent[data-state="closed"]) {
+    animation: none;
+  }
+} 
+
+/* Soft variant detailed styling */
+.rt-AccordionRoot:where(.rt-variant-soft) {
+  background-color: var(--accent-3);
+  color: var(--accent-12);
+  transition: var(--transition-background-blur);
+}
+
+/* Theme-level translucent override (root Theme sets data-panel-background on children) */
+:where([data-panel-background='translucent']) .rt-AccordionRoot:where(.rt-variant-soft) {
+  background-color: var(--accent-a3);
+  backdrop-filter: var(--backdrop-filter-components);
+}
+
+/* Component-level overrides */
+.rt-AccordionRoot:where(.rt-variant-soft[data-panel-background='solid']) {
+  background-color: var(--accent-3);
+  backdrop-filter: none;
+}
+
+.rt-AccordionRoot:where(.rt-variant-soft[data-panel-background='translucent']) {
+  background-color: var(--accent-a3);
+  backdrop-filter: var(--backdrop-filter-components);
+  --backdrop-filter-components: blur(var(--backdrop-blur-components));
+}
+
+/* Adjusted hover selectors to lower specificity */
+@media (hover: hover) {
+  :where(.rt-AccordionRoot.rt-variant-soft:hover) {
+    background-color: var(--accent-4);
+  }
+  :where([data-panel-background='translucent']) :where(.rt-AccordionRoot.rt-variant-soft:hover) {
+    background-color: var(--accent-a4);
+  }
+  :where(.rt-AccordionRoot.rt-variant-soft[data-panel-background='solid']:hover) {
+    background-color: var(--accent-4);
+    backdrop-filter: none;
+  }
+  :where(.rt-AccordionRoot.rt-variant-soft[data-panel-background='translucent']:hover) {
+    background-color: var(--accent-a4);
+    backdrop-filter: var(--backdrop-filter-components);
+  }
+}
+
+/* Ghost variant hover with lowered specificity */
+@media (hover: hover) {
+  :where(.rt-AccordionRoot.rt-variant-ghost:hover) {
+    background-color: var(--accent-2);
+  }
+  :where([data-panel-background='translucent']) :where(.rt-AccordionRoot.rt-variant-ghost:hover) {
+    background-color: var(--accent-a2);
+    backdrop-filter: var(--backdrop-filter-components);
+  }
+  :where(.rt-AccordionRoot.rt-variant-ghost[data-panel-background='solid']:hover) {
+    background-color: var(--accent-2);
+    backdrop-filter: none;
+  }
+  :where(.rt-AccordionRoot.rt-variant-ghost[data-panel-background='translucent']:hover) {
+    background-color: var(--accent-a2);
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+  }
+} 

package/src/components/accordion.props.tsx

@@ -0,0 +1,84 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+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', '4'] as const;
+const variants = ['classic', 'soft', 'surface', 'outline', 'ghost'] as const;
+const panelBackgrounds = ['solid', 'translucent'] as const;
+
+const accordionRootPropDefs = {
+  ...asChildPropDef,
+  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,
+  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
+  flush: { type: 'boolean', default: false },
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  variant: PropDef<(typeof variants)[number]>;
+  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
+  flush: PropDef<boolean>;
+};
+
+const accordionItemPropDefs = {
+  ...asChildPropDef,
+} satisfies {
+  asChild: PropDef<boolean>;
+};
+
+const accordionHeaderPropDefs = {
+  ...asChildPropDef,
+} satisfies {
+  asChild: PropDef<boolean>;
+};
+
+const accordionTriggerPropDefs = {
+  ...asChildPropDef,
+} satisfies {
+  asChild: PropDef<boolean>;
+};
+
+const accordionContentPropDefs = {
+  ...asChildPropDef,
+} satisfies {
+  asChild: PropDef<boolean>;
+};
+
+export {
+  accordionRootPropDefs,
+  accordionItemPropDefs,
+  accordionHeaderPropDefs,
+  accordionTriggerPropDefs,
+  accordionContentPropDefs,
+};
+
+export type AccordionRootOwnProps = {
+  size?: (typeof sizes)[number];
+  variant?: (typeof variants)[number];
+  color?: string;
+  highContrast?: boolean;
+  radius?: string;
+  panelBackground?: (typeof panelBackgrounds)[number];
+  flush?: boolean;
+};
+
+export type AccordionItemOwnProps = {
+  asChild?: boolean;
+};
+
+export type AccordionHeaderOwnProps = {
+  asChild?: boolean;
+};
+
+export type AccordionTriggerOwnProps = {
+  asChild?: boolean;
+};
+
+export type AccordionContentOwnProps = {
+  asChild?: boolean;
+};

package/src/components/accordion.tsx

@@ -0,0 +1,162 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Accordion as AccordionPrimitive } from 'radix-ui';
+
+import {
+  accordionRootPropDefs,
+  accordionItemPropDefs,
+  accordionHeaderPropDefs,
+  accordionTriggerPropDefs,
+  accordionContentPropDefs,
+} from './accordion.props.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { requireReactElement } from '../helpers/require-react-element.js';
+
+import type {
+  AccordionRootOwnProps,
+  AccordionItemOwnProps,
+  AccordionHeaderOwnProps,
+  AccordionTriggerOwnProps,
+  AccordionContentOwnProps,
+} from './accordion.props.js';
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+
+// Root component
+type AccordionRootElement = React.ElementRef<typeof AccordionPrimitive.Root>;
+interface AccordionRootProps
+  extends ComponentPropsWithout<typeof AccordionPrimitive.Root, RemovedProps>,
+    AccordionRootOwnProps {}
+
+const AccordionRoot = React.forwardRef<AccordionRootElement, AccordionRootProps>(
+  (props, forwardedRef) => {
+    const { className, panelBackground, flush, radius, ...extractedRadixProps } = extractProps(
+      props,
+      accordionRootPropDefs,
+    );
+
+    const radixProps = extractedRadixProps as React.ComponentPropsWithoutRef<
+      typeof AccordionPrimitive.Root
+    >;
+
+    // Ensure single accordions can collapse by default unless explicitly set
+    if (radixProps.type === 'single' && radixProps.collapsible === undefined) {
+      radixProps.collapsible = true;
+    }
+
+    return (
+      <AccordionPrimitive.Root
+        {...radixProps}
+        ref={forwardedRef}
+        className={classNames('rt-AccordionRoot', className)}
+        data-panel-background={panelBackground}
+        data-flush={flush || undefined}
+        data-radius={radius}
+      />
+    );
+  },
+);
+AccordionRoot.displayName = 'Accordion.Root';
+
+// Item component
+type AccordionItemElement = React.ElementRef<typeof AccordionPrimitive.Item>;
+interface AccordionItemProps
+  extends ComponentPropsWithout<typeof AccordionPrimitive.Item, RemovedProps>,
+    AccordionItemOwnProps {}
+
+const AccordionItem = React.forwardRef<AccordionItemElement, AccordionItemProps>(
+  (props, forwardedRef) => {
+    const { className, ...itemProps } = extractProps(props, accordionItemPropDefs);
+
+    return (
+      <AccordionPrimitive.Item
+        {...itemProps}
+        ref={forwardedRef}
+        className={classNames('rt-AccordionItem', className)}
+      />
+    );
+  },
+);
+AccordionItem.displayName = 'Accordion.Item';
+
+// Header component
+type AccordionHeaderElement = React.ElementRef<typeof AccordionPrimitive.Header>;
+interface AccordionHeaderProps
+  extends ComponentPropsWithout<typeof AccordionPrimitive.Header, RemovedProps>,
+    AccordionHeaderOwnProps {}
+
+const AccordionHeader = React.forwardRef<AccordionHeaderElement, AccordionHeaderProps>(
+  (props, forwardedRef) => {
+    const { className, ...headerProps } = extractProps(props, accordionHeaderPropDefs);
+
+    return (
+      <AccordionPrimitive.Header
+        {...headerProps}
+        ref={forwardedRef}
+        className={classNames('rt-AccordionHeader', className)}
+      />
+    );
+  },
+);
+AccordionHeader.displayName = 'Accordion.Header';
+
+// Trigger component
+type AccordionTriggerElement = React.ElementRef<typeof AccordionPrimitive.Trigger>;
+interface AccordionTriggerProps
+  extends ComponentPropsWithout<typeof AccordionPrimitive.Trigger, RemovedProps>,
+    AccordionTriggerOwnProps {}
+
+const AccordionTrigger = React.forwardRef<AccordionTriggerElement, AccordionTriggerProps>(
+  ({ children, ...props }, forwardedRef) => {
+    const { className, ...triggerProps } = extractProps(props, accordionTriggerPropDefs);
+
+    return (
+      <AccordionPrimitive.Trigger
+        {...triggerProps}
+        ref={forwardedRef}
+        className={classNames('rt-AccordionTrigger', className)}
+      >
+        {children}
+      </AccordionPrimitive.Trigger>
+    );
+  },
+);
+AccordionTrigger.displayName = 'Accordion.Trigger';
+
+// Content component
+type AccordionContentElement = React.ElementRef<typeof AccordionPrimitive.Content>;
+interface AccordionContentProps
+  extends ComponentPropsWithout<typeof AccordionPrimitive.Content, RemovedProps>,
+    AccordionContentOwnProps {}
+
+const AccordionContent = React.forwardRef<AccordionContentElement, AccordionContentProps>(
+  (props, forwardedRef) => {
+    const { className, children, ...contentProps } = extractProps(props, accordionContentPropDefs);
+
+    return (
+      <AccordionPrimitive.Content
+        {...contentProps}
+        ref={forwardedRef}
+        className={classNames('rt-AccordionContent', className)}
+      >
+        <div className="rt-AccordionContentInner">{children}</div>
+      </AccordionPrimitive.Content>
+    );
+  },
+);
+AccordionContent.displayName = 'Accordion.Content';
+
+export {
+  AccordionRoot as Root,
+  AccordionItem as Item,
+  AccordionHeader as Header,
+  AccordionTrigger as Trigger,
+  AccordionContent as Content,
+};
+
+export type {
+  AccordionRootProps as RootProps,
+  AccordionItemProps as ItemProps,
+  AccordionHeaderProps as HeaderProps,
+  AccordionTriggerProps as TriggerProps,
+  AccordionContentProps as ContentProps,
+};

package/src/components/index.css

@@ -8,6 +8,7 @@
 /* Import Text before other components as it’s commonly extended */
 @import './text.css';
 
+@import './accordion.css';
 @import './alert-dialog.css';
 @import './avatar.css';
 @import './badge.css';

package/src/components/index.tsx

@@ -1,4 +1,5 @@
 export { AccessibleIcon, type AccessibleIconProps } from './accessible-icon.js';
+export * as Accordion from './accordion.js';
 export * as AlertDialog from './alert-dialog.js';
 export { AspectRatio, type AspectRatioProps } from './aspect-ratio.js';
 export { Avatar, type AvatarProps } from './avatar.js';