@sybilion/uilib 1.0.20

package/src/components/ui/Card/Card.styl

@@ -0,0 +1,108 @@
+@import 'lib/theme.styl'
+
+.root
+  display flex
+  flex-direction column
+  gap var(--p-4)
+  max-height 100%
+  border-radius 20px
+  // border 1px solid var(--border)
+  background-color var(--card)
+  color var(--card-foreground)
+  position relative
+
+  &.padding-s
+    padding var(--p-4)
+  &.padding-m
+    padding var(--p-6)
+  &.padding-l
+    padding var(--p-8)
+
+.header
+  display flex
+  flex-direction column
+  align-items flex-start
+  justify-content space-between
+  // gap var(--p-1)
+
+  font-size var(--text-base)
+
+  &:has([data-slot="card-action"])
+    grid-template-columns 1fr auto
+
+.icon
+  display flex
+  align-items center
+  justify-content center
+  width var(--p-12)
+  height var(--p-12)
+  border-radius calc(var(--p-4) - 2px)
+  flex-shrink 0
+  box-shadow inset 0 0 0 1px var(--border)
+
+  &.withBackground
+    background var(--page-color)
+    box-shadow none
+
+  & > img
+  & > svg
+    width var(--p-5)
+    height var(--p-5)
+
+.headerText
+  flex-grow 1
+  overflow hidden
+
+.scroll
+  max-height 100%
+  overflow hidden
+  width calc(100% + var(--p-6))
+  padding-right var(--p-6)
+
+  & [data-slot="card-content"]
+    padding-right 1px
+
+// content:
+.centered
+.fullHeight
+  display flex
+  flex-direction column
+.centered
+  align-items center
+  justify-content center
+.fullHeight
+  flex-grow 1
+
+.title
+.description
+  line-clamp(2)
+
+.title
+  font-size var(--text-lg)
+  font-weight 500
+  line-height var(--p-7)
+  overflow hidden
+
+.description
+  max-width 100%
+  word-break break-word
+
+  font-size var(--text-sm)
+  color var(--muted-foreground)
+
+.action
+  grid-column-start 2
+  grid-row-span 2
+  grid-row-start 1
+  align-self start
+  justify-self end
+
+.footer
+  display flex
+  align-items center
+  justify-content space-between
+  flex-shrink 0
+  overflow hidden
+
+  &:global(.border-t)
+    padding-top 24px

package/src/components/ui/Card/Card.styl.d.ts

@@ -0,0 +1,21 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'action': string;
+  'centered': string;
+  'description': string;
+  'footer': string;
+  'fullHeight': string;
+  'header': string;
+  'headerText': string;
+  'icon': string;
+  'padding-l': string;
+  'padding-m': string;
+  'padding-s': string;
+  'root': string;
+  'scroll': string;
+  'title': string;
+  'withBackground': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/Card/Card.tsx

@@ -0,0 +1,199 @@
+import cn from 'classnames';
+import {
+  AnchorHTMLAttributes,
+  DetailedHTMLProps,
+  HTMLAttributes,
+  useEffect,
+  useRef,
+} from 'react';
+
+import { TextWithDeferTooltip } from '#uilib/components/ui/TextWithDeferTooltip';
+import { Scroll } from '@homecode/ui';
+
+import S from './Card.styl';
+import type {
+  CardActionProps,
+  CardContentProps,
+  CardDescriptionProps,
+  CardFooterProps,
+  CardHeaderProps,
+  CardProps,
+  CardTitleProps,
+} from './Card.types';
+
+const SCROLL_OFFSET = 300;
+
+function Card({ className, paddingSize = 'm', ...props }: CardProps) {
+  return (
+    <div
+      className={cn(S.root, S[`padding-${paddingSize}`], className)}
+      {...props}
+    />
+  );
+}
+
+function LinkCard({
+  className,
+  ...props
+}: CardProps &
+  DetailedHTMLProps<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    HTMLAnchorElement
+  >) {
+  return (
+    <a
+      target="_blank"
+      rel="noopener noreferrer"
+      data-slot="link-card"
+      className={cn(S.root, className)}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({
+  className,
+  icon,
+  iconWithBackground = false,
+  textsClassName,
+  title,
+  titleClassName,
+  description,
+  descriptionClassName,
+  children,
+  tooltipProps,
+  ...props
+}: CardHeaderProps) {
+  return (
+    <div data-slot="card-header" className={cn(S.header, className)} {...props}>
+      {icon && (
+        <div className={cn(S.icon, iconWithBackground && S.withBackground)}>
+          {icon}
+        </div>
+      )}
+      {children}
+      {(title || description) && (
+        <div className={cn(S.headerText, textsClassName)}>
+          {title && (
+            <CardTitle className={titleClassName} {...tooltipProps}>
+              {title}
+            </CardTitle>
+          )}
+          {description && (
+            <CardDescription className={descriptionClassName} {...tooltipProps}>
+              {description}
+            </CardDescription>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function CardTitle({ className, ...props }: CardTitleProps) {
+  return (
+    <TextWithDeferTooltip
+      maxWidth={400}
+      data-slot="card-title"
+      className={cn(S.title, className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: CardDescriptionProps) {
+  return (
+    <TextWithDeferTooltip
+      maxWidth={400}
+      data-slot="card-description"
+      className={cn(S.description, className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: CardActionProps) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(S.action, className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({
+  className,
+  centered,
+  fullHeight,
+  noScroll,
+  children,
+  autoScrollBottom,
+  ...props
+}: CardContentProps) {
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const contentDiv = (
+    <div
+      data-slot="card-content"
+      className={cn(
+        className,
+        centered && S.centered,
+        fullHeight && S.fullHeight,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+
+  useEffect(() => {
+    if (!noScroll && autoScrollBottom) {
+      const inner = contentRef.current?.firstChild as HTMLDivElement;
+
+      if (!inner) return;
+
+      if (inner.scrollHeight > SCROLL_OFFSET) {
+        inner.scrollTo({
+          top: inner?.scrollHeight - inner.offsetHeight - SCROLL_OFFSET,
+          behavior: 'instant',
+        });
+      }
+
+      setTimeout(() => {
+        const top = inner.scrollHeight + 1000;
+        inner.scrollTo({ top, behavior: 'smooth' });
+      }, 0);
+    }
+  }, [noScroll, autoScrollBottom]);
+
+  if (noScroll) return contentDiv;
+
+  return (
+    // @ts-ignore
+    <Scroll y autoHide fadeSize="m" className={S.scroll} ref={contentRef}>
+      {contentDiv}
+    </Scroll>
+  );
+}
+
+function CardFooter({ className, ...props }: CardFooterProps) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(S.footer, className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  LinkCard,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+};

package/src/components/ui/Card/Card.types.ts

@@ -0,0 +1,35 @@
+import { TextWithDeferTooltipProps } from '#uilib/components/ui/TextWithDeferTooltip';
+
+export interface CardProps extends React.ComponentProps<'div'> {
+  paddingSize?: 's' | 'm' | 'l';
+}
+
+export interface CardHeaderProps extends Omit<
+  React.ComponentProps<'div'>,
+  'title'
+> {
+  className?: string;
+  textsClassName?: string;
+  icon?: React.ReactNode;
+  iconWithBackground?: boolean;
+  title?: React.ReactNode;
+  titleClassName?: string;
+  description?: React.ReactNode;
+  descriptionClassName?: string;
+  tooltipProps?: TextWithDeferTooltipProps;
+}
+
+export interface CardTitleProps extends TextWithDeferTooltipProps {}
+
+export interface CardDescriptionProps extends TextWithDeferTooltipProps {}
+
+export interface CardActionProps extends React.ComponentProps<'div'> {}
+
+export interface CardContentProps extends React.ComponentProps<'div'> {
+  centered?: boolean;
+  fullHeight?: boolean;
+  noScroll?: boolean;
+  autoScrollBottom?: boolean;
+}
+
+export interface CardFooterProps extends React.ComponentProps<'div'> {}

package/src/components/ui/Card/index.ts

@@ -0,0 +1,11 @@
+export {
+  Card,
+  LinkCard,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+} from './Card';
+export type { CardProps } from './Card.types';

package/src/components/ui/Chart/Chart.context.ts

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+
+import { ChartContextProps } from './Chart.types';
+
+export const ChartContext = createContext<ChartContextProps | null>(null);
+
+export function useChart() {
+  const context = useContext(ChartContext);
+
+  if (!context)
+    throw new Error('useChart must be used within a <ChartContainer />');
+
+  return context;
+}

package/src/components/ui/Chart/Chart.helpers.ts

@@ -0,0 +1,14 @@
+import { ChartConfig } from './Chart.types';
+
+export function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+) {
+  if (typeof payload !== 'object' || payload === null) {
+    return config[key];
+  }
+
+  // Simple direct lookup first
+  return config[key] || undefined;
+}

package/src/components/ui/Chart/Chart.styl

@@ -0,0 +1,184 @@
+// Chart container
+.chartContainer
+  display flex
+  aspect-ratio 16 / 9
+  justify-content center
+  max-width 100%
+  width 100%
+  font-size 0.75rem /* text-xs */
+  line-height 1rem
+  touch-action none
+
+  :global
+    .recharts-cartesian-axis-tick text
+      fill var(--muted-foreground)
+
+    .recharts-cartesian-grid line[stroke='#ccc']
+      stroke var(--border)
+
+      :global(.dark) &
+        stroke  var(--sb-slate-900)
+
+    .recharts-curve.recharts-tooltip-cursor
+      stroke var(--border) // / 0.5
+
+    .recharts-polar-grid [stroke='#ccc']
+      stroke var(--border)
+
+    .recharts-radial-bar-background-sector
+      fill var(--muted)
+
+    .recharts-rectangle.recharts-tooltip-cursor
+      fill var(--muted)
+
+    .recharts-reference-line [stroke='#ccc']
+      stroke var(--border)
+
+    .recharts-dot[stroke='#fff']
+      stroke transparent
+
+    .recharts-layer
+      outline none
+
+    .recharts-sector
+      outline none
+
+      &[stroke='#fff']
+        stroke transparent
+
+    .recharts-surface
+      outline none
+
+    // Layer ordering: grid (1), pin overlay (2), lines/dots/tooltip (3+)
+    .recharts-wrapper
+      position relative
+
+    .recharts-surface
+      position relative
+      z-index 1
+
+    // Tooltip wrapper is positioned absolutely, can have higher z-index
+    .recharts-tooltip-wrapper
+      z-index 3 !important
+      position relative
+
+    // Active dots and cursor
+    .recharts-active-dot
+      z-index 3
+
+// Chart grid styles
+.chartGrid
+  // stroke-dasharray 3 6
+  stroke-width 0.6
+
+
+// Tooltip styles
+.tooltipContainer
+  display grid
+  width minmax(300px, 100%)
+  min-width 8rem
+  align-items start
+  gap 0.375rem /* gap-1.5 */
+  padding 0.375rem 0.625rem /* py-1.5 px-2.5 */
+  border-radius 0.5rem /* rounded-lg */
+  border 1px solid var(--border) / 0.5
+  background-color var(--background)
+  font-size 0.75rem /* text-xs */
+  line-height 1rem
+  box-shadow 0 10px 10px -5px rgba(0 0 0 0.3), 0 0 2px 0 rgba(0 0 0 0.5) /* shadow-xl */
+  opacity 0
+  transition opacity 0.5s ease-out
+
+  .chartContainer:hover &
+    opacity 1
+    transition-duration 0.5s
+
+.tooltipItem
+  display flex
+  width 100%
+  flex-wrap wrap
+  align-items stretch
+  gap 0.5rem /* gap-2 */
+
+  & > svg
+    height 0.625rem /* h-2.5 */
+    width 0.625rem /* w-2.5 */
+    color var(--muted-foreground)
+
+.tooltipIndicator
+  flex-shrink 0
+  border-radius 2px
+  border-width 1px
+  border-color var(--color-border)
+  background-color var(--color-bg)
+
+  &.indicator-dot
+    height 0.625rem /* h-2.5 */
+    width 0.625rem /* w-2.5 */
+
+  &.indicator-line
+    width 0.25rem /* w-1 */
+
+  &.indicator-dashed
+    width 0
+    border-width 1.5px
+    border-style dashed
+    background-color transparent
+
+    &.nested
+      margin-top 0.125rem /* my-0.5 */
+      margin-bottom 0.125rem
+
+.tooltipContent
+  display flex
+  flex 1 1 0%
+  justify-content space-between
+  line-height 1
+
+.tooltipLabel
+  display grid
+  gap 0.375rem /* gap-1.5 */
+
+.tooltipValue
+  font-family ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
+  font-weight 500
+  font-variant-numeric tabular-nums
+  color var(--foreground)
+  margin-left var(--p-3)
+
+// Legend styles
+.legendContainer
+  display flex
+  align-items center
+  justify-content center
+  gap 1rem /* gap-4 */
+
+.legendItem
+  display flex
+  align-items center
+  gap 0.375rem /* gap-1.5 */
+
+  & > svg
+    height 0.75rem /* h-3 */
+    width 0.75rem /* w-3 */
+    color var(--muted-foreground)
+
+.legendIndicator
+  height 0.5rem /* h-2 */
+  width 0.5rem /* w-2 */
+  flex-shrink 0
+  border-radius 2px
+
+// Blinking animation for loading chart lines
+@keyframes chart-line-blink
+  from
+    opacity 0.5
+  to
+    opacity 1
+
+:global
+  .chart-line-blinking
+    path
+      animation chart-line-blink 1s ease-in-out infinite
+      animation-direction alternate
+

package/src/components/ui/Chart/Chart.styl.d.ts

@@ -0,0 +1,22 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'chart-line-blink': string;
+  'chartContainer': string;
+  'chartGrid': string;
+  'indicator-dashed': string;
+  'indicator-dot': string;
+  'indicator-line': string;
+  'legendContainer': string;
+  'legendIndicator': string;
+  'legendItem': string;
+  'nested': string;
+  'tooltipContainer': string;
+  'tooltipContent': string;
+  'tooltipIndicator': string;
+  'tooltipItem': string;
+  'tooltipLabel': string;
+  'tooltipValue': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/Chart/Chart.tsx

@@ -0,0 +1,23 @@
+import * as RechartsPrimitive from 'recharts';
+
+import { BaseChartWrapper } from './components/BaseChartWrapper';
+import { ChartContainer, ChartStyle } from './components/ChartContainer';
+import { ChartLegendContent } from './components/ChartLegendContent';
+import { ChartTooltipContent } from './components/ChartTooltipContent';
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+const ChartLegend = RechartsPrimitive.Legend;
+
+export * from './Chart.types';
+export { ChartTooltipItem } from './components/ChartTooltipItem';
+export { ChartLegendItem } from './components/ChartLegendItem';
+export { CustomChartLegend } from './components/CustomChartLegend/CustomChartLegend';
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+  BaseChartWrapper,
+};

package/src/components/ui/Chart/Chart.types.ts

@@ -0,0 +1,46 @@
+import { ComponentProps, ReactNode } from 'react';
+
+export const THEMES = { light: '', dark: '.dark' } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+export type ChartContextProps = {
+  config: ChartConfig;
+};
+
+type Payload = {
+  type: string;
+  name: string;
+  value: unknown;
+  payload: unknown;
+  color: string;
+};
+
+export type ChartTooltipContentProps = ComponentProps<'div'> & {
+  active?: boolean;
+  payload?: unknown[];
+  label?: string | number;
+  hideLabel?: boolean;
+  hideIndicator?: boolean;
+  indicator?: 'line' | 'dot' | 'dashed';
+  nameKey?: string;
+  labelKey?: string;
+  labelFormatter?: (label: unknown, payload: unknown[]) => ReactNode;
+  labelClassName?: string;
+  formatter?: (
+    value: unknown,
+    name: string,
+    props: unknown,
+    index: number,
+    payload: unknown,
+  ) => ReactNode;
+  color?: string;
+};