@kushagradhawan/kookie-ui 0.1.0

package/src/components/select.tsx

@@ -0,0 +1,220 @@
+'use client';
+
+import * as React from 'react';
+import classNames from 'classnames';
+import { Select as SelectPrimitive, ScrollArea as ScrollAreaPrimitive } from 'radix-ui';
+
+import { extractProps } from '../helpers/extract-props.js';
+import { marginPropDefs } from '../props/margin.props.js';
+import { ChevronDownIcon, ThickCheckIcon } from './icons.js';
+import {
+  selectRootPropDefs,
+  selectTriggerPropDefs,
+  selectContentPropDefs,
+} from './select.props.js';
+import { useThemeContext, Theme } from './theme.js';
+
+import type { MarginProps } from '../props/margin.props.js';
+import type { GetPropDefTypes } from '../props/prop-def.js';
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+
+type SelectRootOwnProps = GetPropDefTypes<typeof selectRootPropDefs>;
+
+type SelectContextValue = SelectRootOwnProps;
+const SelectContext = React.createContext<SelectContextValue>({});
+
+interface SelectRootProps extends SelectPrimitive.SelectProps, SelectContextValue {}
+const SelectRoot: React.FC<SelectRootProps> = (props) => {
+  const { children, size = selectRootPropDefs.size.default, ...rootProps } = props;
+  return (
+    <SelectPrimitive.Root {...rootProps}>
+      <SelectContext.Provider value={React.useMemo(() => ({ size }), [size])}>
+        {children}
+      </SelectContext.Provider>
+    </SelectPrimitive.Root>
+  );
+};
+SelectRoot.displayName = 'Select.Root';
+
+type SelectTriggerElement = React.ElementRef<typeof SelectPrimitive.Trigger>;
+type SelectTriggerOwnProps = GetPropDefTypes<typeof selectTriggerPropDefs>;
+interface SelectTriggerProps
+  extends ComponentPropsWithout<typeof SelectPrimitive.Trigger, RemovedProps>,
+    MarginProps,
+    SelectTriggerOwnProps {}
+const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>(
+  (props, forwardedRef) => {
+    const context = React.useContext(SelectContext);
+    const { children, className, color, radius, placeholder, ...triggerProps } = extractProps(
+      // Pass size value from the context to generate styles
+      { size: context?.size, ...props },
+      // Pass size prop def to allow it to be extracted
+      { size: selectRootPropDefs.size },
+      selectTriggerPropDefs,
+      marginPropDefs
+    );
+    return (
+      <SelectPrimitive.Trigger asChild>
+        <button
+          data-accent-color={color}
+          data-radius={radius}
+          {...triggerProps}
+          ref={forwardedRef}
+          className={classNames('rt-reset', 'rt-SelectTrigger', className)}
+        >
+          <span className="rt-SelectTriggerInner">
+            <SelectPrimitive.Value placeholder={placeholder}>{children}</SelectPrimitive.Value>
+          </span>
+          <SelectPrimitive.Icon asChild>
+            <ChevronDownIcon className="rt-SelectIcon" />
+          </SelectPrimitive.Icon>
+        </button>
+      </SelectPrimitive.Trigger>
+    );
+  }
+);
+SelectTrigger.displayName = 'Select.Trigger';
+
+type SelectContentElement = React.ElementRef<typeof SelectPrimitive.Content>;
+type SelectContentOwnProps = GetPropDefTypes<typeof selectContentPropDefs>;
+interface SelectContentProps
+  extends ComponentPropsWithout<typeof SelectPrimitive.Content, RemovedProps>,
+    SelectContentOwnProps {
+  container?: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Portal>['container'];
+}
+const SelectContent = React.forwardRef<SelectContentElement, SelectContentProps>(
+  (props, forwardedRef) => {
+    const context = React.useContext(SelectContext);
+    const { className, children, color, container, ...contentProps } = extractProps(
+      // Pass size value from the context to generate styles
+      { size: context?.size, ...props },
+      // Pass size prop def to allow it to be extracted
+      { size: selectRootPropDefs.size },
+      selectContentPropDefs
+    );
+    const themeContext = useThemeContext();
+    const resolvedColor = color || themeContext.accentColor;
+    return (
+      <SelectPrimitive.Portal container={container}>
+        <Theme asChild>
+          <SelectPrimitive.Content
+            data-accent-color={resolvedColor}
+            sideOffset={4}
+            {...contentProps}
+            asChild={false}
+            ref={forwardedRef}
+            className={classNames(
+              { 'rt-PopperContent': contentProps.position === 'popper' },
+              'rt-SelectContent',
+              className
+            )}
+          >
+            <ScrollAreaPrimitive.Root type="auto" className="rt-ScrollAreaRoot">
+              <SelectPrimitive.Viewport asChild className="rt-SelectViewport">
+                <ScrollAreaPrimitive.Viewport
+                  className="rt-ScrollAreaViewport"
+                  style={{ overflowY: undefined }}
+                >
+                  {children}
+                </ScrollAreaPrimitive.Viewport>
+              </SelectPrimitive.Viewport>
+              <ScrollAreaPrimitive.Scrollbar
+                className="rt-ScrollAreaScrollbar rt-r-size-1"
+                orientation="vertical"
+              >
+                <ScrollAreaPrimitive.Thumb className="rt-ScrollAreaThumb" />
+              </ScrollAreaPrimitive.Scrollbar>
+            </ScrollAreaPrimitive.Root>
+          </SelectPrimitive.Content>
+        </Theme>
+      </SelectPrimitive.Portal>
+    );
+  }
+);
+SelectContent.displayName = 'Select.Content';
+
+type SelectItemElement = React.ElementRef<typeof SelectPrimitive.Item>;
+interface SelectItemProps
+  extends ComponentPropsWithout<typeof SelectPrimitive.Item, RemovedProps> {}
+const SelectItem = React.forwardRef<SelectItemElement, SelectItemProps>((props, forwardedRef) => {
+  const { className, children, ...itemProps } = props;
+  return (
+    <SelectPrimitive.Item
+      {...itemProps}
+      asChild={false}
+      ref={forwardedRef}
+      className={classNames('rt-SelectItem', className)}
+    >
+      <SelectPrimitive.ItemIndicator className="rt-SelectItemIndicator">
+        <ThickCheckIcon className="rt-SelectItemIndicatorIcon" />
+      </SelectPrimitive.ItemIndicator>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+});
+SelectItem.displayName = 'Select.Item';
+
+type SelectGroupElement = React.ElementRef<typeof SelectPrimitive.Group>;
+interface SelectGroupProps
+  extends ComponentPropsWithout<typeof SelectPrimitive.Group, RemovedProps> {}
+const SelectGroup = React.forwardRef<SelectGroupElement, SelectGroupProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <SelectPrimitive.Group
+      {...props}
+      asChild={false}
+      ref={forwardedRef}
+      className={classNames('rt-SelectGroup', className)}
+    />
+  )
+);
+SelectGroup.displayName = 'Select.Group';
+
+type SelectLabelElement = React.ElementRef<typeof SelectPrimitive.Label>;
+interface SelectLabelProps
+  extends ComponentPropsWithout<typeof SelectPrimitive.Label, RemovedProps> {}
+const SelectLabel = React.forwardRef<SelectLabelElement, SelectLabelProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <SelectPrimitive.Label
+      {...props}
+      asChild={false}
+      ref={forwardedRef}
+      className={classNames('rt-SelectLabel', className)}
+    />
+  )
+);
+SelectLabel.displayName = 'Select.Label';
+
+type SelectSeparatorElement = React.ElementRef<typeof SelectPrimitive.Separator>;
+interface SelectSeparatorProps
+  extends ComponentPropsWithout<typeof SelectPrimitive.Separator, RemovedProps> {}
+const SelectSeparator = React.forwardRef<SelectSeparatorElement, SelectSeparatorProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <SelectPrimitive.Separator
+      {...props}
+      asChild={false}
+      ref={forwardedRef}
+      className={classNames('rt-SelectSeparator', className)}
+    />
+  )
+);
+SelectSeparator.displayName = 'Select.Separator';
+
+export {
+  SelectRoot as Root,
+  SelectTrigger as Trigger,
+  SelectContent as Content,
+  SelectItem as Item,
+  SelectGroup as Group,
+  SelectLabel as Label,
+  SelectSeparator as Separator,
+};
+
+export type {
+  SelectRootProps as RootProps,
+  SelectTriggerProps as TriggerProps,
+  SelectContentProps as ContentProps,
+  SelectItemProps as ItemProps,
+  SelectGroupProps as GroupProps,
+  SelectLabelProps as LabelProps,
+  SelectSeparatorProps as SeparatorProps,
+};

package/src/components/separator.css

@@ -0,0 +1,46 @@
+.rt-Separator {
+  display: block;
+  background-color: var(--accent-a6);
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * ORIENTATION                                                                                     *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+@breakpoints {
+  .rt-Separator {
+    &:where(.rt-r-orientation-horizontal) {
+      width: var(--separator-size);
+      height: 1px;
+    }
+    &:where(.rt-r-orientation-vertical) {
+      width: 1px;
+      height: var(--separator-size);
+    }
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * SIZES                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+@breakpoints {
+  .rt-Separator {
+    &:where(.rt-r-size-1) {
+      --separator-size: var(--space-4);
+    }
+    &:where(.rt-r-size-2) {
+      --separator-size: var(--space-6);
+    }
+    &:where(.rt-r-size-3) {
+      --separator-size: var(--space-9);
+    }
+    &:where(.rt-r-size-4) {
+      --separator-size: 100%;
+    }
+  }
+}

package/src/components/separator.props.tsx

@@ -0,0 +1,26 @@
+import { colorPropDef } from '../props/color.prop.js';
+
+import type { PropDef } from '../props/prop-def.js';
+
+const orientationValues = ['horizontal', 'vertical'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
+
+const separatorPropDefs = {
+  orientation: {
+    type: 'enum',
+    className: 'rt-r-orientation',
+    values: orientationValues,
+    default: 'horizontal',
+    responsive: true,
+  },
+  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },
+  color: { ...colorPropDef.color, default: 'gray' },
+  decorative: { type: 'boolean', default: true },
+} satisfies {
+  orientation: PropDef<(typeof orientationValues)[number]>;
+  size: PropDef<(typeof sizes)[number]>;
+  color: typeof colorPropDef.color;
+  decorative: PropDef<boolean>;
+};
+
+export { separatorPropDefs };

package/src/components/separator.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+import { separatorPropDefs } from './separator.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 SeparatorElement = React.ElementRef<'span'>;
+type SeparatorOwnProps = GetPropDefTypes<typeof separatorPropDefs>;
+interface SeparatorProps
+  extends ComponentPropsWithout<'span', RemovedProps>,
+    MarginProps,
+    SeparatorOwnProps {}
+const Separator = React.forwardRef<SeparatorElement, SeparatorProps>((props, forwardedRef) => {
+  const { className, color, decorative, ...separatorProps } = extractProps(
+    props,
+    separatorPropDefs,
+    marginPropDefs
+  );
+  return (
+    <span
+      data-accent-color={color}
+      role={decorative ? undefined : 'separator'}
+      {...separatorProps}
+      ref={forwardedRef}
+      className={classNames('rt-Separator', className)}
+    />
+  );
+});
+Separator.displayName = 'Separator';
+
+export { Separator };
+export type { SeparatorProps };

package/src/components/skeleton.css

@@ -0,0 +1,55 @@
+.rt-Skeleton {
+  --skeleton-radius: var(--skeleton-radius-override);
+  --skeleton-height: var(--skeleton-height-override);
+  border-radius: var(--radius-1);
+  animation: rt-skeleton-pulse 1000ms infinite alternate-reverse !important;
+  background-image: none !important;
+  background-clip: border-box !important;
+  border: none !important;
+  box-shadow: none !important;
+  box-decoration-break: clone !important;
+  color: transparent !important;
+  outline: none !important;
+  pointer-events: none !important;
+  user-select: none !important;
+  cursor: default !important;
+}
+
+/*
+ * Take font differences out of equation for inline Skeletons that just wrap text.
+ * This makes the dimensions consistent between the following non-Skeleton and Skeleton text:
+ * ```
+ * <Text>Example text</Text>
+ *
+ * <Text>
+ *   <Skeleton>Example text</Skeleton>
+ * </Text>
+ * ```
+ *
+ * Will NOT collapse Skeletons as the browsers use line-height on inline elements just for alignment.
+ */
+.rt-Skeleton:where([data-inline-skeleton]) {
+  line-height: 0;
+  /* Font metrics on Arial yield much nicer height for the text background bounding box */
+  font-family: Arial, sans-serif !important;
+}
+
+:where(.rt-Skeleton:empty) {
+  display: block;
+  height: var(--space-3);
+}
+
+.rt-Skeleton > *,
+.rt-Skeleton::after,
+.rt-Skeleton::before {
+  visibility: hidden !important;
+}
+
+@keyframes rt-skeleton-pulse {
+  from {
+    background-color: var(--gray-a3);
+  }
+  to {
+    background-color: var(--gray-a4);
+  }
+}

package/src/components/skeleton.props.tsx

@@ -0,0 +1,14 @@
+import { heightPropDefs } from '../props/height.props.js';
+import { widthPropDefs } from '../props/width.props.js';
+
+import type { PropDef } from '../props/prop-def.js';
+
+const skeletonPropDefs = {
+  loading: { type: 'boolean', default: true },
+  ...widthPropDefs,
+  ...heightPropDefs,
+} satisfies {
+  loading: PropDef<boolean>;
+};
+
+export { skeletonPropDefs };

package/src/components/skeleton.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Slot } from 'radix-ui';
+
+import { inert } from '../helpers/inert.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { marginPropDefs } from '../props/margin.props.js';
+import { skeletonPropDefs } from './skeleton.props.js';
+
+import type { MarginProps } from '../props/margin.props.js';
+import type { GetPropDefTypes } from '../props/prop-def.js';
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+
+type SkeletonElement = React.ElementRef<'span'>;
+type SkeletonOwnProps = GetPropDefTypes<typeof skeletonPropDefs>;
+interface SkeletonProps
+  extends ComponentPropsWithout<'span', RemovedProps>,
+    MarginProps,
+    SkeletonOwnProps {}
+const Skeleton = React.forwardRef<SkeletonElement, SkeletonProps>((props, forwardedRef) => {
+  const { children, className, loading, ...skeletonProps } = extractProps(
+    props,
+    skeletonPropDefs,
+    marginPropDefs
+  );
+
+  if (!loading) return children;
+
+  const Tag = React.isValidElement(children) ? Slot.Root : 'span';
+
+  return (
+    <Tag
+      ref={forwardedRef}
+      aria-hidden
+      className={classNames('rt-Skeleton', className)}
+      data-inline-skeleton={React.isValidElement(children) ? undefined : true}
+      tabIndex={-1}
+      // @ts-expect-error
+      inert={inert}
+      {...skeletonProps}
+    >
+      {children}
+    </Tag>
+  );
+});
+Skeleton.displayName = 'Skeleton';
+
+export { Skeleton };
+export type { SkeletonProps };