@womp/kookie-ui 0.20.0 → 0.21.0

package/src/components/tab-nav.tsx

@@ -1,82 +0,0 @@
-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 { useThemeSizeProps } from '../helpers/theme-size.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>((ownProps, forwardedRef) => {
-  const props = useThemeSizeProps(ownProps, tabNavRootPropDefs.size);
-  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, active, ...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}
-        aria-current={active ? 'page' : undefined}
-        data-active={active || undefined}
-      >
-        {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/theme-panel.css

@@ -1,67 +0,0 @@
-.rt-ThemePanelShortcut {
-  &:where(:focus-visible) {
-    outline-style: solid;
-    outline-width: 2px;
-    outline-offset: 2px;
-    outline-color: var(--accent-9);
-  }
-}
-
-.rt-ThemePanelSwatch,
-.rt-ThemePanelRadioCard {
-  position: relative;
-}
-
-.rt-ThemePanelSwatchInput,
-.rt-ThemePanelRadioCardInput {
-  appearance: none;
-  margin: 0;
-  outline: none;
-  outline-width: 2px;
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-}
-
-.rt-ThemePanelSwatch {
-  width: var(--space-5);
-  height: var(--space-5);
-  border-radius: 100%;
-
-  @media (--sm) {
-    width: var(--space-6);
-    height: var(--space-6);
-  }
-}
-
-.rt-ThemePanelSwatchInput {
-  outline-offset: 2px;
-
-  &:where(:checked) {
-    outline-style: solid;
-    outline-color: var(--gray-12);
-  }
-  &:where(:focus-visible) {
-    outline-style: solid;
-    outline-color: var(--accent-9);
-  }
-}
-
-.rt-ThemePanelRadioCard {
-  border-radius: var(--radius-1);
-  box-shadow: 0 0 0 1px var(--gray-7);
-}
-
-.rt-ThemePanelRadioCardInput {
-  outline-offset: -1px;
-
-  &:where(:checked) {
-    outline-style: solid;
-    outline-color: var(--gray-12);
-  }
-  &:where(:focus-visible) {
-    background-color: var(--accent-a3);
-    outline-style: solid;
-    outline-color: var(--accent-9);
-  }
-}