@kushagradhawan/kookie-ui 0.1.0

package/src/components/table.props.tsx

@@ -0,0 +1,83 @@
+import { paddingPropDefs } from '../props/padding.props.js';
+import { widthPropDefs } from '../props/width.props.js';
+
+import type { PropDef } from '../props/prop-def.js';
+
+const sizes = ['1', '2', '3'] as const;
+const variants = ['surface', 'ghost'] as const;
+const layoutValues = ['auto', 'fixed'] as const;
+
+const tableRootPropDefs = {
+  size: {
+    type: 'enum',
+    className: 'rt-r-size',
+    values: sizes,
+    default: '2',
+    responsive: true,
+  },
+  variant: {
+    type: 'enum',
+    className: 'rt-variant',
+    values: variants,
+    default: 'ghost',
+  },
+  layout: {
+    type: 'enum',
+    className: 'rt-r-tl',
+    values: layoutValues,
+    responsive: true,
+  },
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  variant: PropDef<(typeof variants)[number]>;
+  layout: PropDef<(typeof layoutValues)[number]>;
+};
+
+const rowAlign = ['start', 'center', 'end', 'baseline'] as const;
+
+const tableRowPropDefs = {
+  align: {
+    type: 'enum',
+    className: 'rt-r-va',
+    values: rowAlign,
+    parseValue: parseAlignValue,
+    responsive: true,
+  },
+} satisfies {
+  align: PropDef<(typeof rowAlign)[number]>;
+};
+
+function parseAlignValue(value: string) {
+  return {
+    baseline: 'baseline',
+    start: 'top',
+    center: 'middle',
+    end: 'bottom',
+  }[value];
+}
+
+const justifyValues = ['start', 'center', 'end'] as const;
+
+const tableCellPropDefs = {
+  justify: {
+    type: 'enum',
+    className: 'rt-r-ta',
+    values: justifyValues,
+    parseValue: parseJustifyValue,
+    responsive: true,
+  },
+  ...widthPropDefs,
+  ...paddingPropDefs,
+} satisfies {
+  justify: PropDef<(typeof justifyValues)[number]>;
+};
+
+function parseJustifyValue(value: string) {
+  return {
+    start: 'left',
+    center: 'center',
+    end: 'right',
+  }[value];
+}
+
+export { tableRootPropDefs, tableRowPropDefs, tableCellPropDefs };

package/src/components/table.tsx

@@ -0,0 +1,137 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+import { tableRootPropDefs, tableRowPropDefs, tableCellPropDefs } from './table.props.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { getResponsiveClassNames } from '../helpers/get-responsive-styles.js';
+import { marginPropDefs } from '../props/margin.props.js';
+import { ScrollArea } from './scroll-area.js';
+
+import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+import type { MarginProps } from '../props/margin.props.js';
+import type { GetPropDefTypes } from '../props/prop-def.js';
+
+type TableRootElement = React.ElementRef<'div'>;
+type TableRootOwnProps = GetPropDefTypes<typeof tableRootPropDefs>;
+interface TableRootProps
+  extends ComponentPropsWithout<'div', RemovedProps>,
+    MarginProps,
+    TableRootOwnProps {}
+const TableRoot = React.forwardRef<TableRootElement, TableRootProps>((props, forwardedRef) => {
+  const { layout: layoutPropDef, ...rootPropDefs } = tableRootPropDefs;
+  const { className, children, layout, ...rootProps } = extractProps(
+    props,
+    rootPropDefs,
+    marginPropDefs
+  );
+  const tableLayoutClassNames = getResponsiveClassNames({
+    value: layout,
+    className: tableRootPropDefs.layout.className,
+    propValues: tableRootPropDefs.layout.values,
+  });
+  return (
+    <div ref={forwardedRef} className={classNames('rt-TableRoot', className)} {...rootProps}>
+      <ScrollArea>
+        <table className={classNames('rt-TableRootTable', tableLayoutClassNames)}>{children}</table>
+      </ScrollArea>
+    </div>
+  );
+});
+TableRoot.displayName = 'Table.Root';
+
+type TableHeaderElement = React.ElementRef<'thead'>;
+interface TableHeaderProps extends ComponentPropsWithout<'thead', RemovedProps> {}
+const TableHeader = React.forwardRef<TableHeaderElement, TableHeaderProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <thead {...props} ref={forwardedRef} className={classNames('rt-TableHeader', className)} />
+  )
+);
+TableHeader.displayName = 'Table.Header';
+
+type TableBodyElement = React.ElementRef<'tbody'>;
+interface TableBodyProps extends ComponentPropsWithout<'tbody', RemovedProps> {}
+const TableBody = React.forwardRef<TableBodyElement, TableBodyProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <tbody {...props} ref={forwardedRef} className={classNames('rt-TableBody', className)} />
+  )
+);
+TableBody.displayName = 'Table.Body';
+
+type TableRowElement = React.ElementRef<'tr'>;
+type TableRowOwnProps = GetPropDefTypes<typeof tableRowPropDefs>;
+interface TableRowProps extends ComponentPropsWithout<'tr', RemovedProps>, TableRowOwnProps {}
+const TableRow = React.forwardRef<TableRowElement, TableRowProps>((props, forwardedRef) => {
+  const { className, ...rowProps } = extractProps(props, tableRowPropDefs);
+  return <tr {...rowProps} ref={forwardedRef} className={classNames('rt-TableRow', className)} />;
+});
+TableRow.displayName = 'Table.Row';
+
+type TableCellElement = React.ElementRef<'td'>;
+type TableCellOwnProps = GetPropDefTypes<typeof tableCellPropDefs>;
+interface TableCellProps
+  extends ComponentPropsWithout<'td', RemovedProps | 'width'>,
+    TableCellOwnProps {}
+const TableCell = React.forwardRef<TableCellElement, TableCellProps>((props, forwardedRef) => {
+  const { className, ...cellProps } = extractProps(props, tableCellPropDefs);
+  return <td className={classNames('rt-TableCell', className)} ref={forwardedRef} {...cellProps} />;
+});
+TableCell.displayName = 'Table.Cell';
+
+type TableColumnHeaderCellElement = React.ElementRef<'th'>;
+interface TableColumnHeaderCellProps
+  extends ComponentPropsWithout<'th', RemovedProps>,
+    TableCellOwnProps {}
+const TableColumnHeaderCell = React.forwardRef<
+  TableColumnHeaderCellElement,
+  TableColumnHeaderCellProps
+>((props, forwardedRef) => {
+  const { className, ...cellProps } = extractProps(props, tableCellPropDefs);
+  return (
+    <th
+      className={classNames('rt-TableCell', 'rt-TableColumnHeaderCell', className)}
+      scope="col"
+      ref={forwardedRef}
+      {...cellProps}
+    />
+  );
+});
+TableColumnHeaderCell.displayName = 'Table.ColumnHeaderCell';
+
+type TableRowHeaderCellElement = React.ElementRef<'th'>;
+interface TableRowHeaderCellProps
+  extends ComponentPropsWithout<'th', RemovedProps>,
+    TableCellOwnProps {}
+const TableRowHeaderCell = React.forwardRef<TableRowHeaderCellElement, TableRowHeaderCellProps>(
+  (props, forwardedRef) => {
+    const { className, ...cellProps } = extractProps(props, tableCellPropDefs);
+    return (
+      <th
+        className={classNames('rt-TableCell', 'rt-TableRowHeaderCell', className)}
+        scope="row"
+        ref={forwardedRef}
+        {...cellProps}
+      />
+    );
+  }
+);
+TableRowHeaderCell.displayName = 'Table.RowHeaderCell';
+
+export {
+  TableRoot as Root,
+  TableHeader as Header,
+  TableBody as Body,
+  TableRow as Row,
+  TableCell as Cell,
+  TableColumnHeaderCell as ColumnHeaderCell,
+  TableRowHeaderCell as RowHeaderCell,
+};
+
+export type {
+  TableRootProps as RootProps,
+  TableHeaderProps as HeaderProps,
+  TableBodyProps as BodyProps,
+  TableRowProps as RowProps,
+  TableCellProps as CellProps,
+  TableColumnHeaderCellProps as ColumnHeaderCellProps,
+  TableRowHeaderCellProps as RowHeaderCellProps,
+};

package/src/components/tabs.css

@@ -0,0 +1,10 @@
+@import './_internal/base-tab-list.css';
+
+.rt-TabsContent {
+  position: relative;
+  outline: 0;
+}
+
+.rt-TabsContent:where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+}

package/src/components/tabs.props.tsx

@@ -0,0 +1,12 @@
+import { asChildPropDef } from '../props/as-child.prop.js';
+
+const tabsRootPropDefs = {
+  ...asChildPropDef,
+};
+
+const tabsContentPropDefs = {
+  ...asChildPropDef,
+};
+
+export { baseTabListPropDefs as tabsListPropDefs } from './_internal/base-tab-list.props.js';
+export { tabsRootPropDefs, tabsContentPropDefs };

package/src/components/tabs.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Tabs as TabsPrimitive } from 'radix-ui';
+
+import { tabsListPropDefs } from './tabs.props.js';
+import { extractProps } from '../helpers/extract-props.js';
+import { marginPropDefs } from '../props/margin.props.js';
+
+import type { tabsContentPropDefs, tabsRootPropDefs } from './tabs.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 TabsRootElement = React.ElementRef<typeof TabsPrimitive.Root>;
+type TabsRootOwnProps = GetPropDefTypes<typeof tabsRootPropDefs>;
+interface TabsRootProps
+  extends ComponentPropsWithout<typeof TabsPrimitive.Root, 'asChild' | 'color' | 'defaultChecked'>,
+    MarginProps,
+    TabsRootOwnProps {}
+const TabsRoot = React.forwardRef<TabsRootElement, TabsRootProps>((props, forwardedRef) => {
+  const { className, ...rootProps } = extractProps(props, marginPropDefs);
+  return (
+    <TabsPrimitive.Root
+      {...rootProps}
+      ref={forwardedRef}
+      className={classNames('rt-TabsRoot', className)}
+    />
+  );
+});
+TabsRoot.displayName = 'Tabs.Root';
+
+type TabsListElement = React.ElementRef<typeof TabsPrimitive.List>;
+type TabsListOwnProps = GetPropDefTypes<typeof tabsListPropDefs>;
+interface TabsListProps
+  extends ComponentPropsWithout<typeof TabsPrimitive.List, RemovedProps>,
+    MarginProps,
+    TabsListOwnProps {}
+const TabsList = React.forwardRef<TabsListElement, TabsListProps>((props, forwardedRef) => {
+  const { className, color, ...listProps } = extractProps(props, tabsListPropDefs, marginPropDefs);
+  return (
+    <TabsPrimitive.List
+      data-accent-color={color}
+      {...listProps}
+      asChild={false}
+      ref={forwardedRef}
+      className={classNames('rt-BaseTabList', 'rt-TabsList', className)}
+    />
+  );
+});
+TabsList.displayName = 'Tabs.List';
+
+type TabsTriggerElement = React.ElementRef<typeof TabsPrimitive.Trigger>;
+interface TabsTriggerProps
+  extends ComponentPropsWithout<typeof TabsPrimitive.Trigger, RemovedProps> {}
+const TabsTrigger = React.forwardRef<TabsTriggerElement, TabsTriggerProps>(
+  (props, forwardedRef) => {
+    const { className, children, ...triggerProps } = props;
+    return (
+      <TabsPrimitive.Trigger
+        {...triggerProps}
+        asChild={false}
+        ref={forwardedRef}
+        className={classNames('rt-reset', 'rt-BaseTabListTrigger', 'rt-TabsTrigger', className)}
+      >
+        <span className="rt-BaseTabListTriggerInner rt-TabsTriggerInner">{children}</span>
+        <span className="rt-BaseTabListTriggerInnerHidden rt-TabsTriggerInnerHidden">
+          {children}
+        </span>
+      </TabsPrimitive.Trigger>
+    );
+  }
+);
+TabsTrigger.displayName = 'Tabs.Trigger';
+
+type TabsContentElement = React.ElementRef<typeof TabsPrimitive.Content>;
+type TabsContentOwnProps = GetPropDefTypes<typeof tabsContentPropDefs>;
+interface TabsContentProps
+  extends ComponentPropsWithout<typeof TabsPrimitive.Content, RemovedProps>,
+    MarginProps,
+    TabsContentOwnProps {}
+const TabsContent = React.forwardRef<TabsContentElement, TabsContentProps>(
+  (props, forwardedRef) => {
+    const { className, ...contentProps } = extractProps(props, marginPropDefs);
+    return (
+      <TabsPrimitive.Content
+        {...contentProps}
+        ref={forwardedRef}
+        className={classNames('rt-TabsContent', className)}
+      />
+    );
+  }
+);
+TabsContent.displayName = 'Tabs.Content';
+
+export { TabsRoot as Root, TabsList as List, TabsTrigger as Trigger, TabsContent as Content };
+export type {
+  TabsRootProps as RootProps,
+  TabsListProps as ListProps,
+  TabsTriggerProps as TriggerProps,
+  TabsContentProps as ContentProps,
+};

package/src/components/text-area.css

@@ -0,0 +1,251 @@
+.rt-TextAreaRoot {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+
+  font-family: var(--default-font-family);
+  font-weight: var(--font-weight-regular);
+  font-style: normal;
+  text-align: start;
+
+  /* Allows the `resize` property to work on the div */
+  overflow: hidden;
+
+  &:where(:focus-within) {
+    outline: 2px solid var(--focus-8);
+    outline-offset: -1px;
+  }
+}
+
+.rt-TextAreaInput {
+  border-radius: inherit;
+  resize: none;
+
+  display: block;
+  width: 100%;
+  flex-grow: 1;
+
+  /* scrollbar */
+  & {
+    /* Arrow mouse cursor over the scrollbar */
+    cursor: auto;
+  }
+  &::-webkit-scrollbar {
+    width: var(--space-3);
+    height: var(--space-3);
+  }
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-thumb {
+    background-clip: content-box;
+    border: var(--space-1) solid transparent;
+    border-radius: var(--space-3);
+  }
+  &::-webkit-scrollbar-track {
+    background-color: var(--gray-a3);
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--gray-a8);
+  }
+  @media (hover: hover) {
+    :where(&:not(:disabled))::-webkit-scrollbar-thumb:hover {
+      background-color: var(--gray-a9);
+    }
+  }
+  &:where(:autofill, [data-com-onepassword-filled]) {
+    /* Reliably removes native autofill colors */
+    background-clip: text;
+    -webkit-text-fill-color: var(--gray-12);
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * SIZES                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.rt-TextAreaRoot {
+  box-sizing: border-box;
+  padding: var(--text-area-border-width);
+}
+.rt-TextAreaInput {
+  padding: var(--text-area-padding-y) var(--text-area-padding-x);
+}
+
+@breakpoints {
+  .rt-TextAreaRoot {
+    &:where(.rt-r-size-1) {
+      min-height: var(--space-8);
+      border-radius: var(--radius-2);
+
+      & :where(.rt-TextAreaInput) {
+        /* Clip text to border */
+        --text-area-padding-y: calc(var(--space-1) - var(--text-area-border-width));
+        --text-area-padding-x: calc(var(--space-1) * 1.5 - var(--text-area-border-width));
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
+      }
+    }
+    &:where(.rt-r-size-2) {
+      min-height: var(--space-9);
+      border-radius: var(--radius-2);
+
+      & :where(.rt-TextAreaInput) {
+        /* Clip text to border */
+        --text-area-padding-y: calc(var(--space-1) * 1.5 - var(--text-area-border-width));
+        --text-area-padding-x: calc(var(--space-2) - var(--text-area-border-width));
+        font-size: var(--font-size-2);
+        line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
+      }
+    }
+    &:where(.rt-r-size-3) {
+      min-height: 80px;
+      border-radius: var(--radius-3);
+
+      & :where(.rt-TextAreaInput) {
+        /* Clip text to border */
+        --text-area-padding-y: calc(var(--space-2) - var(--text-area-border-width));
+        --text-area-padding-x: calc(var(--space-3) - var(--text-area-border-width));
+        font-size: var(--font-size-3);
+        line-height: var(--line-height-3);
+        letter-spacing: var(--letter-spacing-3);
+      }
+    }
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * VARIANTS                                                                                        *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+/* surface */
+.rt-TextAreaRoot:where(.rt-variant-surface) {
+  --text-area-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-area-border-width) var(--gray-a7);
+  color: var(--gray-12);
+
+  & :where(.rt-TextAreaInput) {
+    &::placeholder {
+      color: var(--gray-a10);
+    }
+  }
+
+  /* prettier-ignore */
+  &:where(:has(.rt-TextAreaInput: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-TextAreaInput: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-area-border-width) var(--gray-a6);
+  }
+}
+
+/* classic */
+.rt-TextAreaRoot:where(.rt-variant-classic) {
+  --text-area-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(:focus-within) {
+    box-shadow:
+      inset 0 0 0 1px var(--focus-8),
+      var(--shadow-1);
+  }
+
+  & :where(.rt-TextAreaInput) {
+    &::placeholder {
+      color: var(--gray-a10);
+    }
+  }
+
+  /* prettier-ignore */
+  &:where(:has(.rt-TextAreaInput: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-TextAreaInput:where(:disabled, :read-only))) {
+    /* Blend with grey */
+    background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
+    box-shadow: none;
+  }
+}
+
+/* soft */
+.rt-TextAreaRoot:where(.rt-variant-soft) {
+  --text-area-border-width: 0px;
+
+  background-color: var(--accent-a3);
+  color: var(--accent-12);
+
+  & :where(.rt-TextAreaInput) {
+    &::selection {
+      /* Use gray selection when component color is gray */
+      background-color: var(--accent-a5);
+    }
+    &::placeholder {
+      color: var(--accent-12);
+      opacity: 0.65;
+    }
+  }
+
+  &:where(:focus-within) {
+    /* Use gray outline when component color is gray */
+    outline-color: var(--accent-8);
+  }
+
+  /* prettier-ignore */
+  &:where(:has(.rt-TextAreaInput: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-TextAreaInput:where(:disabled, :read-only))) {
+    background-color: var(--gray-a3);
+  }
+}
+
+/* all disabled and read-only text-areas */
+.rt-TextAreaInput {
+  &: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);
+    }
+    &::selection {
+      background-color: var(--gray-a5);
+    }
+    .rt-TextAreaRoot:where(:focus-within:has(&)) {
+      outline-color: var(--gray-8);
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+import { colorPropDef } from '../props/color.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 resizeValues = ['none', 'vertical', 'horizontal', 'both'] as const;
+
+// prettier-ignore
+const textAreaPropDefs = {
+  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
+  resize: { type: 'enum', className: 'rt-r-resize', values: resizeValues,  responsive: true },
+  ...colorPropDef,
+  ...radiusPropDef,
+} satisfies {
+  size: PropDef<(typeof sizes)[number]>;
+  variant: PropDef<(typeof variants)[number]>;
+  resize: PropDef<(typeof resizeValues)[number]>;
+    };
+
+export { textAreaPropDefs };

package/src/components/text-area.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+import { textAreaPropDefs } from './text-area.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 TextAreaElement = React.ElementRef<'textarea'>;
+type TextAreaOwnProps = GetPropDefTypes<typeof textAreaPropDefs> & {
+  defaultValue?: string;
+  value?: string;
+};
+interface TextAreaProps
+  extends ComponentPropsWithout<'textarea', RemovedProps | 'size' | 'value'>,
+    MarginProps,
+    TextAreaOwnProps {}
+const TextArea = React.forwardRef<TextAreaElement, TextAreaProps>((props, forwardedRef) => {
+  const { className, color, radius, style, ...textAreaProps } = extractProps(
+    props,
+    textAreaPropDefs,
+    marginPropDefs
+  );
+  return (
+    <div
+      data-accent-color={color}
+      data-radius={radius}
+      className={classNames('rt-TextAreaRoot', className)}
+      style={style}
+    >
+      <textarea className="rt-reset rt-TextAreaInput" ref={forwardedRef} {...textAreaProps} />
+    </div>
+  );
+});
+TextArea.displayName = 'TextArea';
+
+export { TextArea };
+export type { TextAreaProps };