tinywidgets 0.0.11 → 1.0.0

package/src/Button/index.css.ts

@@ -1,57 +0,0 @@
-import {style, styleVariants} from '@vanilla-extract/css';
-import {axisLike, borderLike, radiusLike, theme} from '../index.css';
-
-const ghostLike = {
-  backgroundColor: 'transparent',
-  border: 0,
-};
-
-export const button = style([
-  axisLike,
-  radiusLike,
-  {
-    textAlign: 'left',
-    cursor: 'pointer',
-    padding: '0.5rem 1rem',
-    outlineOffset: '-2px',
-    backgroundColor: theme.background,
-    color: 'inherit',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    transition: 'background-color 0.2s,border-color 0.2s',
-    flexShrink: 0,
-    selectors: {
-      '&:hover': {
-        backgroundColor: theme.backgroundHover,
-      },
-    },
-  },
-]);
-
-export const buttonVariant = styleVariants({
-  default: borderLike,
-  accent: {
-    ...borderLike,
-    backgroundColor: theme.accent,
-    color: theme.accentContrast,
-    border: 0,
-    selectors: {
-      '&:hover': {
-        backgroundColor: theme.accentHover,
-      },
-    },
-  },
-  ghost: ghostLike,
-  item: {...ghostLike, width: '100%'},
-  icon: {...ghostLike, padding: '0.25rem'},
-});
-
-export const highlight = style({
-  backgroundColor: theme.backgroundHover,
-});
-
-export const labelStyle = style({
-  flex: 1,
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-});

package/src/Button/index.tsx

@@ -1,63 +0,0 @@
-/** @jsx createElement */
-/** @jsxFrag Fragment */
-
-import type {ComponentType, ReactNode, Ref} from 'react';
-import {iconSize} from '../index.css.ts';
-import {classNames, createElement, forwardRef, useCallback} from '../index.ts';
-import {button, buttonVariant, highlight, labelStyle} from './index.css.ts';
-
-export const Button = forwardRef(
-  (
-    {
-      icon: Icon,
-      label,
-      labelRight,
-      iconRight: IconRight,
-      onClick,
-      variant = 'default',
-      className,
-      href,
-      title,
-      current,
-    }: {
-      icon?: ComponentType<{className?: string}>;
-      label?: ReactNode;
-      labelRight?: ReactNode;
-      iconRight?: ComponentType<{className?: string}>;
-      onClick?: () => void;
-      variant?: keyof typeof buttonVariant;
-      className?: string;
-      href?: string;
-      title?: string;
-      current?: boolean;
-    },
-    ref: Ref<HTMLButtonElement>,
-  ) => {
-    const icon = Icon ? <Icon className={iconSize} /> : null;
-    const iconRight = IconRight ? <IconRight className={iconSize} /> : null;
-
-    const hrefClick = useCallback(
-      () => (href ? open(href, '_blank', 'noreferrer') : null),
-      [href],
-    );
-
-    return (
-      <button
-        className={classNames(
-          button,
-          buttonVariant[variant],
-          current && highlight,
-          className,
-        )}
-        onClick={onClick ?? hrefClick}
-        title={title}
-        ref={ref}
-      >
-        {icon}
-        {label ? <span className={labelStyle}>{label}</span> : null}
-        {labelRight}
-        {iconRight}
-      </button>
-    );
-  },
-);

package/src/Card/index.css.ts

@@ -1,9 +0,0 @@
-import {style} from '@vanilla-extract/css';
-import {borderLike, paddingLike, radiusLike} from '../index.css';
-
-export const card = style([
-  borderLike,
-  radiusLike,
-  paddingLike,
-  {height: 'fit-content'},
-]);

package/src/Card/index.tsx

@@ -1,13 +0,0 @@
-/** @jsx createElement */
-
-import type {ReactNode} from 'react';
-import {classNames, createElement} from '../';
-import {card} from './index.css';
-
-export const Card = ({
-  children,
-  className,
-}: {
-  children: ReactNode;
-  className?: string;
-}) => <div className={classNames(card, className)}>{children}</div>;

package/src/Collapsible/index.css.ts

@@ -1,34 +0,0 @@
-import {style} from '@vanilla-extract/css';
-import {borderLike, dimensions, paddingLike, radiusLike} from '../index.css';
-
-export const collapsible = style([
-  borderLike,
-  radiusLike,
-  {
-    display: 'grid',
-    gridTemplateRows: 'max-content minmax(0, 0fr)',
-    transition: '.2s grid-template-rows ease-in-out',
-    overflow: 'hidden',
-    marginBottom: dimensions.padding,
-    selectors: {
-      '&:last-child': {
-        marginBottom: 0,
-      },
-    },
-  },
-]);
-
-export const collapsibleOpen = style({
-  gridTemplateRows: 'max-content minmax(0, 1fr)',
-});
-
-export const button = style({
-  margin: '-1px',
-});
-
-export const buttonOpen = style({
-  borderBottomLeftRadius: 0,
-  borderBottomRightRadius: 0,
-});
-
-export const content = style([paddingLike, {overflow: 'hidden'}]);

package/src/Collapsible/index.tsx

@@ -1,75 +0,0 @@
-/** @jsx createElement */
-
-import type {ComponentType, ReactNode} from 'react';
-import {ChevronDown, ChevronRight} from 'lucide-react';
-import {Button} from '../Button/index.tsx';
-import {
-  classNames,
-  createElement,
-  useCallback,
-  useRef,
-  useState,
-} from '../index.ts';
-import {
-  useCollapsibleOpen,
-  useSetCollapsibleOpen,
-} from '../stores/SessionStore.tsx';
-import {
-  button,
-  buttonOpen,
-  collapsible,
-  collapsibleOpen,
-  content,
-} from './index.css.ts';
-
-export const Collapsible = ({
-  id = '',
-  icon: Icon,
-  label = <div />,
-  labelRight = <div />,
-  startOpen = false,
-  className,
-  children,
-}: {
-  id?: string;
-  icon?: ComponentType<{className?: string}>;
-  label?: ReactNode;
-  labelRight?: ReactNode;
-  startOpen?: boolean;
-  className?: string;
-  children: ReactNode;
-}) => {
-  // State is in session Store if id is present, otherwise here in component.
-  const storedIsOpen = useCollapsibleOpen(id) ?? startOpen;
-  const setStoredIsOpen = useSetCollapsibleOpen(id);
-  const [stateIsOpen, setStateIsOpen] = useState(startOpen);
-
-  const isOpen = id ? storedIsOpen : stateIsOpen;
-  const setIsOpen = id ? setStoredIsOpen : setStateIsOpen;
-
-  const [render, setRender] = useState(isOpen);
-  const timer = useRef<Timer>();
-
-  const toggle = useCallback(() => {
-    setIsOpen(!isOpen);
-    clearTimeout(timer.current);
-    timer.current = setTimeout(() => setRender(!isOpen), isOpen ? 200 : 0);
-  }, [id, isOpen]);
-
-  return (
-    <div className={classNames(collapsible, isOpen && collapsibleOpen)}>
-      <Button
-        onClick={toggle}
-        icon={Icon}
-        label={label}
-        labelRight={labelRight}
-        iconRight={isOpen ? ChevronDown : ChevronRight}
-        className={classNames(button, render && buttonOpen)}
-        current={render}
-      />
-      {render ? (
-        <div className={classNames(content, className)}>{children}</div>
-      ) : null}
-    </div>
-  );
-};

package/src/Detail/index.tsx

@@ -1,26 +0,0 @@
-/** @jsx createElement */
-
-import type {ReactNode} from 'react';
-import {classNames, createElement} from '../';
-import {detailCell, detailRow, detailTable} from './index.css';
-
-export const Detail = ({
-  data,
-  className,
-}: {
-  data: Record<string, ReactNode>;
-  className?: string;
-}) => {
-  return (
-    <table className={classNames(detailTable, className)}>
-      <tbody>
-        {Object.entries(data).map(([key, value]) => (
-          <tr key={key} className={detailRow}>
-            <th className={detailCell}>{key}:</th>
-            <td className={detailCell}>{value}</td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-};

package/src/Hr/index.tsx

@@ -1,8 +0,0 @@
-/** @jsx createElement */
-
-import {createElement} from '../';
-import {hr} from './index.css';
-
-export const Hr = () => {
-  return <hr className={hr} />;
-};

package/src/Metric/index.tsx

@@ -1,26 +0,0 @@
-/** @jsx createElement */
-
-import type {ComponentType, ReactNode} from 'react';
-import {classNames, createElement} from '../';
-import {iconSize} from '../index.css';
-import {metric, metricLabel, metricNumber} from './index.css';
-
-export const Metric = ({
-  icon: Icon,
-  label,
-  number,
-  className,
-}: {
-  icon?: ComponentType<{className?: string}>;
-  label: ReactNode;
-  number: ReactNode;
-  className?: string;
-}) => (
-  <div className={classNames(metric, className)}>
-    <div className={metricLabel}>
-      {Icon ? <Icon className={iconSize} /> : null}
-      {label}
-    </div>
-    <div className={metricNumber}>{number}</div>
-  </div>
-);

package/src/Summary/index.css.ts

@@ -1,17 +0,0 @@
-import {style} from '@vanilla-extract/css';
-
-export const summary = style({
-  display: 'flex',
-  flexDirection: 'row',
-  gap: '1rem',
-});
-
-export const summaryImage = style({
-  flex: '0 0 6rem',
-  width: '6rem',
-  height: '6rem',
-});
-
-export const summaryContent = style({
-  flex: 1,
-});

package/src/Summary/index.tsx

@@ -1,32 +0,0 @@
-/** @jsx createElement */
-
-import type {ComponentType, ReactNode} from 'react';
-import {classNames, createElement} from '../';
-import {Avatar} from '../Avatar';
-import {summary, summaryContent, summaryImage} from './index.css';
-
-export const Summary = ({
-  icon: Icon,
-  src,
-  label,
-  children,
-  className,
-}: {
-  icon?: ComponentType<{className?: string}>;
-  src?: string;
-  label: ReactNode;
-  children: ReactNode;
-  className?: string;
-}) => (
-  <div className={classNames(summary, className)}>
-    {src ? (
-      <Avatar src={src} className={summaryImage} />
-    ) : Icon ? (
-      <Icon className={summaryImage} />
-    ) : null}
-    <div className={summaryContent}>
-      <h2>{label}</h2>
-      {children}
-    </div>
-  </div>
-);

package/src/Tag/index.tsx

@@ -1,26 +0,0 @@
-/** @jsx createElement */
-
-import type {ComponentType, ReactNode} from 'react';
-import {classNames, createElement} from '../';
-import {Axis} from '../Axis';
-import {tag, tagIcon, tagVariant} from './index.css';
-
-export const Tag = ({
-  icon: Icon,
-  label,
-  title,
-  variant = 'default',
-}: {
-  icon?: ComponentType<{className?: string}>;
-  label?: ReactNode;
-  title?: string;
-  variant?: keyof typeof tagVariant;
-}) => {
-  const icon = Icon ? <Icon className={tagIcon} /> : null;
-  return (
-    <Axis className={classNames(tag, tagVariant[variant])} title={title}>
-      {icon}
-      {label}
-    </Axis>
-  );
-};

package/src/Ui/Header/DarkButton/index.tsx

@@ -1,19 +0,0 @@
-/** @jsx createElement */
-
-import { Moon, Sun, SunMoon } from 'lucide-react';
-import { Button } from '../../../Button/index.tsx';
-import { createElement } from '../../../index.ts';
-import {
-  useDarkChoice,
-  useToggleDarkChoiceCallback,
-} from '../../../stores/LocalStore.tsx';
-
-const icons = [Sun, Moon, SunMoon];
-
-export const DarkButton = () => (
-  <Button
-    variant="icon"
-    onClick={useToggleDarkChoiceCallback()}
-    icon={icons[useDarkChoice()]}
-  />
-);

package/src/Ui/Header/SideNav/index.css.ts

@@ -1,23 +0,0 @@
-import {style} from '@vanilla-extract/css';
-import {dimensions, paddingLike, theme} from '../../../index.css.ts';
-import {large} from '../../../index.ts';
-
-export const sideNav = style([
-  paddingLike,
-  {
-    position: 'fixed',
-    backgroundColor: theme.background2,
-    overflow: 'auto',
-    borderRight: `1px solid ${theme.border}`,
-    width: dimensions.sideNavWidth,
-    bottom: 0,
-    left: dimensions.sideNavWidthHidden,
-    top: dimensions.topNavHeight,
-    height: `calc(100dvh - ${dimensions.topNavHeight})`,
-    overscrollBehavior: 'contain',
-    transition: 'left .2s ease-in-out',
-  },
-  large({left: 0}),
-]);
-
-export const open = style({left: 0});

package/src/Ui/Header/SideNav/index.tsx

@@ -1,14 +0,0 @@
-/** @jsx createElement */
-
-import { type ReactNode } from 'react';
-import { classNames, createElement } from '../../../index.ts';
-import { useSideNavOpen } from '../../../stores/SessionStore.tsx';
-import { open, sideNav } from './index.css.ts';
-
-export const SideNav = ({sideNav: sideNavComponents}: {sideNav: ReactNode}) => {
-  return (
-    <nav className={classNames(sideNav, useSideNavOpen() && open)}>
-      {sideNavComponents}
-    </nav>
-  );
-};

package/src/Ui/Header/SideNavButton/index.css.ts

@@ -1,4 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { large } from '../../../index.ts';
-
-export const sideNavButton = style(large({display: 'none'}));

package/src/Ui/Header/SideNavButton/index.tsx

@@ -1,19 +0,0 @@
-/** @jsx createElement */
-
-import { Menu, X } from 'lucide-react';
-import { Button } from '../../../Button/index.tsx';
-import { createElement } from '../../../index.ts';
-import {
-  useSideNavOpen,
-  useToggleSideNavOpen,
-} from '../../../stores/SessionStore.tsx';
-import { sideNavButton } from './index.css.ts';
-
-export const SideNavButton = () => (
-  <Button
-    variant="icon"
-    onClick={useToggleSideNavOpen()}
-    icon={useSideNavOpen() ? X : Menu}
-    className={sideNavButton}
-  />
-);

package/src/Ui/Header/Title/index.css.ts

@@ -1,10 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { dimensions } from '../../../index.css.ts';
-import { large } from '../../../index.ts';
-
-export const title = style({
-  display: 'flex',
-  alignItems: 'center',
-  gap: dimensions.padding,
-  ...large({width: dimensions.titleWidth}),
-});

package/src/Ui/Header/Title/index.tsx

@@ -1,9 +0,0 @@
-/** @jsx createElement */
-
-import { type ReactNode } from 'react';
-import { createElement } from '../../../index.ts';
-import { title } from './index.css.ts';
-
-export const Title = ({title: titleComponents}: {title: ReactNode}) => {
-  return <nav className={title}>{titleComponents}</nav>;
-};

package/src/Ui/Header/TopNav/index.css.ts

@@ -1,9 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { axisLike } from '../../../index.css';
-
-export const topNav = style([
-  {
-    ...axisLike,
-    flex: 1,
-  },
-]);

package/src/Ui/Header/TopNav/index.tsx

@@ -1,18 +0,0 @@
-/** @jsx createElement */
-
-import type { ReactNode } from 'react';
-import { createElement } from '../../../index.ts';
-import { topNav } from './index.css.ts';
-
-export const TopNav = ({
-  topNavLeft = <div />,
-  topNavRight = <div />,
-}: {
-  topNavLeft?: ReactNode;
-  topNavRight?: ReactNode;
-}) => (
-  <nav className={topNav}>
-    {topNavLeft}
-    {topNavRight}
-  </nav>
-);

package/src/Ui/Header/index.css.ts

@@ -1,18 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { axisLike, dimensions, paddingLike, theme } from '../../index.css';
-
-export const header = style([
-  paddingLike,
-  axisLike,
-  {
-    position: 'fixed',
-    boxShadow: theme.shadow,
-    backdropFilter: 'blur(8px)',
-    backgroundColor: theme.backgroundHaze,
-    left: 0,
-    right: 0,
-    height: dimensions.topNavHeight,
-    borderBottom: `1px solid ${theme.border}`,
-    zIndex: 2,
-  },
-]);

package/src/Ui/Header/index.tsx

@@ -1,32 +0,0 @@
-/** @jsx createElement */
-
-import type { ReactNode } from 'react';
-import { createElement } from '../../index.ts';
-import { DarkButton } from './DarkButton/index.tsx';
-import { header } from './index.css.ts';
-import { SideNav } from './SideNav/index.tsx';
-import { SideNavButton } from './SideNavButton/index.tsx';
-import { Title } from './Title/index.tsx';
-import { TopNav } from './TopNav/index.tsx';
-
-export const Header = ({
-  title,
-  topNavLeft,
-  topNavRight,
-  sideNav,
-}: {
-  title: ReactNode;
-  topNavLeft?: ReactNode;
-  topNavRight?: ReactNode;
-  sideNav?: ReactNode;
-}) => {
-  return (
-    <header className={header}>
-      {sideNav ? <SideNavButton /> : null}
-      <Title title={title} />
-      <TopNav topNavLeft={topNavLeft} topNavRight={topNavRight} />
-      <DarkButton />
-      {sideNav ? <SideNav sideNav={sideNav} /> : null}
-    </header>
-  );
-};

package/src/Ui/Main/Article/index.css.ts

@@ -1,13 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { dimensions, paddingLike } from '../../../index.css';
-
-export const article = style([
-  paddingLike,
-  {
-    paddingTop: dimensions.padding,
-    flex: 1,
-    width: '100%',
-    // maxWidth: dimensions.articleWidth,
-    margin: '0 auto',
-  },
-]);

package/src/Ui/Main/Article/index.tsx

@@ -1,9 +0,0 @@
-/** @jsx createElement */
-
-import type { ReactNode } from 'react';
-import { createElement } from '../../../index.ts';
-import { article } from './index.css.ts';
-
-export const Article = ({article: articleComponents}: {article: ReactNode}) => {
-  return <article className={article}>{articleComponents}</article>;
-};

package/src/Ui/Main/Footer/index.css.ts

@@ -1,12 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { axisLike, dimensions, paddingLike, theme } from '../../../index.css';
-
-export const footer = style([
-  {
-    ...axisLike,
-    ...paddingLike,
-    background: theme.background,
-    height: dimensions.footerHeight,
-    borderTop: `1px solid ${theme.border}`,
-  },
-]);

package/src/Ui/Main/Footer/index.tsx

@@ -1,9 +0,0 @@
-/** @jsx createElement */
-
-import type { ReactNode } from 'react';
-import { createElement } from '../../../index.ts';
-import { footer } from './index.css.ts';
-
-export const Footer = ({footer: footerComponents}: {footer: ReactNode}) => {
-  return <footer className={footer}>{footerComponents}</footer>;
-};

package/src/Ui/Main/index.css.ts

@@ -1,16 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { dimensions, theme } from '../../index.css.ts';
-import { large } from '../../index.ts';
-
-export const main = style({
-  display: 'flex',
-  flex: 1,
-  flexDirection: 'column',
-  backgroundColor: theme.background,
-  overflow: 'auto',
-  paddingTop: dimensions.topNavHeight,
-});
-
-export const mainHasSideNav = style(
-  large({paddingLeft: dimensions.sideNavWidth}),
-);