@womp/kookie-ui 0.20.0 → 0.21.0

package/schemas/toggle-icon-button.json

@@ -1,304 +0,0 @@
-{
-  "$ref": "#/definitions/Toggle-icon-buttonSchema",
-  "definitions": {
-    "Toggle-icon-buttonSchema": {
-      "type": "object",
-      "properties": {
-        "as": {
-          "description": "HTML element type to render as",
-          "type": "string"
-        },
-        "asChild": {
-          "description": "Merge props with child element instead of rendering wrapper",
-          "type": "boolean"
-        },
-        "size": {
-          "default": "2",
-          "description": "Button size for responsive design and interface density",
-          "anyOf": [
-            {
-              "type": "string",
-              "enum": [
-                "1",
-                "2",
-                "3",
-                "4"
-              ]
-            },
-            {
-              "type": "object",
-              "properties": {
-                "initial": {
-                  "type": "string",
-                  "enum": [
-                    "1",
-                    "2",
-                    "3",
-                    "4"
-                  ]
-                },
-                "sm": {
-                  "type": "string",
-                  "enum": [
-                    "1",
-                    "2",
-                    "3",
-                    "4"
-                  ]
-                },
-                "md": {
-                  "type": "string",
-                  "enum": [
-                    "1",
-                    "2",
-                    "3",
-                    "4"
-                  ]
-                },
-                "lg": {
-                  "type": "string",
-                  "enum": [
-                    "1",
-                    "2",
-                    "3",
-                    "4"
-                  ]
-                },
-                "xl": {
-                  "type": "string",
-                  "enum": [
-                    "1",
-                    "2",
-                    "3",
-                    "4"
-                  ]
-                }
-              },
-              "additionalProperties": false
-            }
-          ]
-        },
-        "variant": {
-          "default": "solid",
-          "description": "Visual variant that determines the button's appearance and context",
-          "type": "string",
-          "enum": [
-            "raised",
-            "solid",
-            "soft",
-            "surface",
-            "outline",
-            "ghost"
-          ]
-        },
-        "color": {
-          "description": "Accent color for the button",
-          "type": "string",
-          "enum": [
-            "tomato",
-            "red",
-            "ruby",
-            "crimson",
-            "pink",
-            "plum",
-            "purple",
-            "violet",
-            "iris",
-            "indigo",
-            "blue",
-            "cyan",
-            "teal",
-            "jade",
-            "green",
-            "grass",
-            "brown",
-            "orange",
-            "sky",
-            "mint",
-            "lime",
-            "yellow",
-            "amber",
-            "gold",
-            "bronze",
-            "gray"
-          ]
-        },
-        "radius": {
-          "description": "Border radius for the button",
-          "type": "string",
-          "enum": [
-            "none",
-            "small",
-            "medium",
-            "large",
-            "full"
-          ]
-        },
-        "loading": {
-          "default": false,
-          "description": "Loading state that shows a spinner and disables interaction",
-          "type": "boolean"
-        },
-        "flush": {
-          "default": false,
-          "description": "Flush mode that removes visual padding for seamless text integration",
-          "type": "boolean"
-        },
-        "disabled": {
-          "default": false,
-          "description": "Disabled state",
-          "type": "boolean"
-        },
-        "type": {
-          "description": "Type attribute for form buttons",
-          "type": "string",
-          "enum": [
-            "button",
-            "submit",
-            "reset"
-          ]
-        },
-        "className": {
-          "description": "Additional CSS class name",
-          "type": "string"
-        },
-        "style": {
-          "description": "Inline styles",
-          "type": "object",
-          "propertyNames": {
-            "type": "string"
-          },
-          "additionalProperties": {
-            "type": [
-              "string",
-              "number"
-            ]
-          }
-        },
-        "tabIndex": {
-          "description": "Tab index for keyboard navigation",
-          "type": "number"
-        },
-        "aria-label": {
-          "description": "ARIA label for accessibility",
-          "type": "string"
-        },
-        "aria-labelledby": {
-          "description": "ARIA labelled by reference",
-          "type": "string"
-        },
-        "aria-describedby": {
-          "description": "ARIA described by reference",
-          "type": "string"
-        },
-        "aria-expanded": {
-          "description": "ARIA expanded state",
-          "type": "boolean"
-        },
-        "aria-pressed": {
-          "description": "ARIA pressed state",
-          "type": "boolean"
-        },
-        "aria-current": {
-          "description": "ARIA current state",
-          "anyOf": [
-            {
-              "type": "boolean"
-            },
-            {
-              "type": "string",
-              "enum": [
-                "page",
-                "step",
-                "location",
-                "date",
-                "time"
-              ]
-            }
-          ]
-        },
-        "aria-controls": {
-          "description": "ARIA controls reference",
-          "type": "string"
-        },
-        "aria-owns": {
-          "description": "ARIA owns reference",
-          "type": "string"
-        },
-        "data-*": {
-          "description": "Data attributes",
-          "type": "object",
-          "propertyNames": {
-            "type": "string"
-          },
-          "additionalProperties": {
-            "type": "string"
-          }
-        },
-        "id": {
-          "description": "ID attribute",
-          "type": "string"
-        },
-        "title": {
-          "description": "Title attribute for tooltip",
-          "type": "string"
-        },
-        "role": {
-          "description": "Role attribute",
-          "type": "string"
-        },
-        "children": {
-          "description": "Children elements (required for accessibility if no aria-label)"
-        },
-        "tooltip": {
-          "description": "Content to display in the tooltip on hover/focus",
-          "type": "string"
-        },
-        "tooltipSide": {
-          "default": "top",
-          "description": "Side of the button where the tooltip should appear",
-          "type": "string",
-          "enum": [
-            "top",
-            "right",
-            "bottom",
-            "left"
-          ]
-        },
-        "tooltipAlign": {
-          "default": "center",
-          "description": "Alignment of the tooltip relative to the button",
-          "type": "string",
-          "enum": [
-            "start",
-            "center",
-            "end"
-          ]
-        },
-        "tooltipDelayDuration": {
-          "description": "Delay before showing the tooltip (in milliseconds)",
-          "type": "number"
-        },
-        "tooltipDisableHoverableContent": {
-          "default": false,
-          "description": "Whether to disable hoverable content behavior",
-          "type": "boolean"
-        },
-        "pressed": {
-          "description": "Controlled pressed state",
-          "type": "boolean"
-        },
-        "defaultPressed": {
-          "description": "Default pressed state for uncontrolled usage",
-          "type": "boolean"
-        }
-      },
-      "additionalProperties": false
-    }
-  },
-  "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "title": "Toggle-icon-button Component Props",
-  "description": "Props schema for the toggle-icon-button component in Kookie UI",
-  "version": "1.0.0",
-  "source": "Zod schema"
-}

package/src/components/aspect-ratio.tsx

@@ -1,3 +0,0 @@
-import { AspectRatio as AspectRatioPrimitive } from 'radix-ui';
-export const AspectRatio = AspectRatioPrimitive.Root;
-export type AspectRatioProps = AspectRatioPrimitive.AspectRatioProps;

package/src/components/checkbox-cards.css

@@ -1,124 +0,0 @@
-@import './_internal/base-card.css';
-@import './_internal/base-checkbox.css';
-
-.rt-CheckboxCardsRoot {
-  line-height: var(--line-height);
-  letter-spacing: var(--letter-spacing);
-  cursor: default;
-}
-
-.rt-CheckboxCardsItem {
-  --base-card-border-width: var(--border-width-standard);
-  --base-card-padding-right: calc(
-    var(--base-card-padding-left) * 2 + var(--checkbox-cards-item-checkbox-size)
-  );
-
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  cursor: var(--cursor-button);
-  -webkit-tap-highlight-color: transparent;
-
-  &:where(:has(:focus-visible)) {
-    outline: var(--focus-outline-width) solid var(--focus-8);
-    outline-offset: var(--focus-outline-offset-inset);
-
-    &::after {
-      outline: inherit;
-    }
-  }
-
-  & > * {
-    /* Avoid unintentional drag interactions (e.g. on images) */
-    pointer-events: none;
-  }
-  /* stylelint-disable-next-line selector-max-type */
-  & > :where(svg) {
-    /* Don't squish icons */
-    flex-shrink: 0;
-  }
-}
-
-.rt-CheckboxCardCheckbox {
-  position: absolute;
-  top: var(--base-card-padding-top);
-  right: var(--base-card-padding-left);
-}
-
-/* * * * * * * * * * * * * * * * * * * */
-/*                                     */
-/*                Sizes                */
-/*                                     */
-/* * * * * * * * * * * * * * * * * * * */
-
-@breakpoints {
-  .rt-CheckboxCardsRoot {
-    /* Size 1 */
-    &:where(.rt-r-size-1) {
-      font-size: var(--font-size-2);
-      --line-height: var(--line-height-2);
-      --letter-spacing: var(--letter-spacing-2);
-      /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: var(--mark-1, calc(16px * var(--scale)));
-    }
-    /* Size 2 */
-    &:where(.rt-r-size-2) {
-      font-size: var(--font-size-2);
-      --line-height: var(--line-height-2);
-      --letter-spacing: var(--letter-spacing-2);
-      /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: var(--mark-2, calc(20px * var(--scale)));
-    }
-    /* Size 3 */
-    &:where(.rt-r-size-3) {
-      font-size: var(--font-size-3);
-      --line-height: var(--line-height-3);
-      --letter-spacing: var(--letter-spacing-3);
-      /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: var(--mark-3, calc(24px * var(--scale)));
-    }
-    /* Size 4 */
-    &:where(.rt-r-size-4) {
-      font-size: var(--font-size-3);
-      --line-height: var(--line-height-3);
-      --letter-spacing: var(--letter-spacing-3);
-      /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: var(--mark-4, calc(26px * var(--scale)));
-    }
-  }
-}
-
-/* * * * * * * * * * * * * * * * * * * */
-/*                                     */
-/*         All tap highlights          */
-/*                                     */
-/* * * * * * * * * * * * * * * * * * * */
-
-/* Better -webkit-tap-highlight-color */
-.rt-CheckboxCardsItem {
-  @media (pointer: coarse) {
-    &:where(:active:not(:focus-visible)) {
-      &::before {
-        background-image: linear-gradient(var(--gray-a4), var(--gray-a4));
-      }
-    }
-  }
-}
-
-/* * * * * * * * * * * * * * * * * * * */
-/*                                     */
-/*            All disabled             */
-/*                                     */
-/* * * * * * * * * * * * * * * * * * * */
-
-.rt-CheckboxCardsItem:where(:has(:disabled)) {
-  cursor: var(--cursor-disabled);
-  color: var(--gray-a9);
-
-  &::before {
-    background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
-  }
-  &::selection {
-    background-color: var(--gray-a5);
-  }
-}

package/src/components/checkbox-cards.props.tsx

@@ -1,27 +0,0 @@
-import { cardPropDefs } from './card.props.js';
-import { asChildPropDef } from '../props/as-child.prop.js';
-import { colorPropDef } from '../props/color.prop.js';
-import { gridPropDefs } from './grid.props.js';
-
-import type { PropDef } from '../props/prop-def.js';
-
-const sizes = ['1', '2', '3', '4'] as const;
-// The same list as Card: a selectable card looks like any other card.
-const variants = cardPropDefs.variant.values;
-
-const checkboxCardsRootPropDefs = {
-  ...asChildPropDef,
-  /** The Card surface ladder: padding --surface-p-N, corner --radius-surface-N. Unset, it follows the Theme size. */
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
-  ...colorPropDef,
-  columns: { ...gridPropDefs.columns, default: 'repeat(auto-fit, minmax(200px, 1fr))' },
-  gap: { ...gridPropDefs.gap, default: '4' },
-} satisfies {
-  size: PropDef<(typeof sizes)[number]>;
-  variant: PropDef<(typeof variants)[number]>;
-  columns: PropDef<(typeof gridPropDefs.columns.values)[number]>;
-  gap: PropDef<(typeof gridPropDefs.gap.values)[number]>;
-};
-
-export { checkboxCardsRootPropDefs };

package/src/components/checkbox-cards.tsx

@@ -1,141 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import classNames from 'classnames';
-import { Context } from 'radix-ui/internal';
-
-import * as CheckboxGroupPrimitive from './checkbox-group.primitive.js';
-import { createCheckboxGroupScope } from './checkbox-group.primitive.js';
-import { checkboxCardsRootPropDefs } from './checkbox-cards.props.js';
-import { baseCheckboxPropDefs } from './_internal/base-checkbox.props.js';
-import { Grid } from './grid.js';
-import { ThickCheckIcon } from './icons.js';
-import { extractProps } from '../helpers/extract-props.js';
-import { useThemeSizeProps } from '../helpers/theme-size.js';
-import { marginPropDefs } from '../props/margin.props.js';
-
-import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
-import type { MarginProps } from '../props/margin.props.js';
-import type { Responsive, GetPropDefTypes } from '../props/prop-def.js';
-
-const CHECKBOX_CARD_GROUP_NAME = 'CheckboxCards';
-
-type ScopedProps<P> = P & { __scopeCheckboxCards?: Context.Scope };
-const [createCheckboxCardsContext] = Context.createContextScope(CHECKBOX_CARD_GROUP_NAME, [
-  createCheckboxGroupScope,
-]);
-const useCheckboxGroupScope = createCheckboxGroupScope();
-
-type CheckboxCardsContextValue = {
-  size?: Responsive<(typeof checkboxCardsRootPropDefs.size.values)[number]>;
-  variant?: (typeof checkboxCardsRootPropDefs.variant.values)[number];
-};
-
-const [CheckboxCardsProvider, useCheckboxCardsContext] =
-  createCheckboxCardsContext<CheckboxCardsContextValue>(CHECKBOX_CARD_GROUP_NAME);
-
-type CheckboxCardsRootElement = React.ElementRef<typeof CheckboxGroupPrimitive.Root>;
-type CheckboxCardsRootOwnProps = GetPropDefTypes<typeof checkboxCardsRootPropDefs>;
-interface CheckboxCardsRootProps
-  extends ComponentPropsWithout<
-      typeof CheckboxGroupPrimitive.Root,
-      'asChild' | 'color' | 'defaultChecked'
-    >,
-    MarginProps,
-    CheckboxCardsRootOwnProps {}
-const CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCardsRootProps>(
-  (ownProps: ScopedProps<CheckboxCardsRootProps>, forwardedRef) => {
-    const props = useThemeSizeProps(ownProps, checkboxCardsRootPropDefs.size);
-    const {
-      __scopeCheckboxCards,
-      className,
-      color,
-      ...rootProps
-    } = extractProps(props, checkboxCardsRootPropDefs, marginPropDefs);
-    const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxCards);
-    return (
-      <CheckboxCardsProvider
-        scope={__scopeCheckboxCards}
-        size={props.size ?? checkboxCardsRootPropDefs.size.default}
-        variant={props.variant}
-      >
-        <Grid asChild>
-          <CheckboxGroupPrimitive.Root
-            {...checkboxGroupScope}
-            data-accent-color={color}
-            {...rootProps}
-            ref={forwardedRef}
-            className={classNames('rt-CheckboxCardsRoot', className)}
-          />
-        </Grid>
-      </CheckboxCardsProvider>
-    );
-  },
-);
-CheckboxCardsRoot.displayName = 'CheckboxCards.Root';
-
-type CheckboxCardsItemElement = React.ElementRef<typeof CheckboxGroupPrimitive.Item>;
-interface CheckboxCardsItemProps
-  extends ComponentPropsWithout<typeof CheckboxGroupPrimitive.Item, RemovedProps>,
-    MarginProps {}
-const CheckboxCardsItem = React.forwardRef<
-  CheckboxCardsItemElement,
-  ScopedProps<CheckboxCardsItemProps>
->(({ __scopeCheckboxCards, children, className, style, ...props }, forwardedRef) => {
-  const context = useCheckboxCardsContext('CheckboxCardsItem', __scopeCheckboxCards);
-  const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxCards);
-
-  const { className: checkboxClassName } = extractProps(
-    // Pass size and variant values from the context to generate styles
-    {
-      size: context?.size,
-      variant: context?.variant || 'solid',
-    },
-    // Pass size & variant prop defs to allow it to be extracted
-    baseCheckboxPropDefs,
-  );
-  const variantClass = context?.variant ? `rt-variant-${context.variant}` : undefined;
-  // extractProps writes the responsive size classes (`md:rt-r-size-3`) a template string cannot.
-  const { className: sizeClass } = extractProps(
-    { size: context?.size },
-    { size: checkboxCardsRootPropDefs.size },
-  );
-
-  return (
-    <label
-      className={classNames(
-        'rt-BaseCard',
-        'rt-CheckboxCardsItem',
-        variantClass,
-        sizeClass,
-        className,
-      )}
-      style={style}
-    >
-      {children}
-      <CheckboxGroupPrimitive.Item
-        {...checkboxGroupScope}
-        {...props}
-        ref={forwardedRef}
-        className={classNames(
-          'rt-reset',
-          'rt-BaseCheckboxRoot',
-          'rt-CheckboxCardCheckbox',
-          checkboxClassName,
-        )}
-      >
-        <CheckboxGroupPrimitive.Indicator
-          {...checkboxGroupScope}
-          asChild
-          className="rt-BaseCheckboxIndicator"
-        >
-          <ThickCheckIcon />
-        </CheckboxGroupPrimitive.Indicator>
-      </CheckboxGroupPrimitive.Item>
-    </label>
-  );
-});
-CheckboxCardsItem.displayName = 'CheckboxCards.Item';
-
-export { CheckboxCardsRoot as Root, CheckboxCardsItem as Item };
-export type { CheckboxCardsRootProps as RootProps, CheckboxCardsItemProps as ItemProps };

package/src/components/container.css

@@ -1,43 +0,0 @@
-.radix-themes {
-  --container-1: 448px;
-  --container-2: 688px;
-  --container-3: 880px;
-  --container-4: 1136px;
-}
-
-.rt-Container {
-  display: flex;
-  box-sizing: border-box;
-  flex-direction: column;
-  align-items: center;
-  flex-shrink: 0;
-  flex-grow: 1;
-  min-width: 0;
-}
-
-.rt-ContainerInner {
-  width: 100%;
-}
-
-/***************************************************************************************************
- *                                                                                                 *
- * SIZES                                                                                           *
- *                                                                                                 *
- ***************************************************************************************************/
-
-@breakpoints {
-  .rt-ContainerInner {
-    :where(.rt-Container.rt-r-size-1) & {
-      max-width: var(--container-1);
-    }
-    :where(.rt-Container.rt-r-size-2) & {
-      max-width: var(--container-2);
-    }
-    :where(.rt-Container.rt-r-size-3) & {
-      max-width: var(--container-3);
-    }
-    :where(.rt-Container.rt-r-size-4) & {
-      max-width: var(--container-4);
-    }
-  }
-}