@stack-spot/citric-react 0.41.1 → 0.42.0-beta.0

package/src/components/Tooltip.tsx

@@ -1,83 +1,83 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { useRef } from 'react'
-import { WithColorPalette, WithColorScheme } from '../types'
-import { Overlay } from './Overlay'
-import { BaseOverlayProps } from './Overlay/types'
-
-export interface BaseTooltipProps extends
-  Omit<BaseOverlayProps<'div'>, 'tag' | 'onRenderChild' | 'reference'>, WithColorPalette, WithColorScheme {
-  /**
-   * Whether or not to show the tooltip's arrow.
-   * 
-   * @default true
-   */
-  showArrow?: boolean,
-  /**
-   * The unique id of the HTML element to be created to show the tooltip. If not provided, a random number will be used.
-   */
-  tooltipId?: string,
-  /**
-   * Makes the tooltip text compact, centering it better when it's a single line.
-   * 
-   * Effectively, it makes the line height equals to 1 and applies a slightly larger padding.
-   * 
-   * @default true
-   */
-  compact?: boolean,
-  /**
-   * The max-width of the tooltip. Defaults to 250px.
-   */
-  maxWidth?: string,
-  /**
-   * A space between the tooltip and the element who triggered it.
-   * 
-   * @default '6px'
-   */
-  margin?: string,
-  /**
-   * Whether or not to disable the tooltip, i.e. not show it.
-   * 
-   * @default false
-   */
-  disabled?: boolean,
-}
-
-export type TooltipProps = Omit<React.JSX.IntrinsicElements['div'], 'content'> & BaseTooltipProps
-
-/**
- * Renders a tooltip overlay for its child. By default, the tooltip is rendered on hover, but this can be changed through the property
- * "triggerOn".
- * 
- * The content of the tooltip can be any React element.
- * 
- * @example
- * ```
- * <Tooltip content="This is some help for you">
- *   <IconButton icon="Question" />
- * </Tooltip>
- * ```
- */
-export const Tooltip = ({
-  tooltipId, children, showArrow = true, compact = true, attributes, colorScheme, colorPalette, disabled, maxWidth = '250px',
-  margin = '6px', ...props
-}: TooltipProps) => {
-  const id = useRef(tooltipId || `${Math.random()}`)
-  return disabled ? children : (
-    <Overlay
-      attributes={{
-        className: listToClass([attributes?.className, showArrow && 'with-arrow', compact && 'compact']),
-        style: { margin, maxWidth, lineHeight: typeof props.content === 'string' ? 'normal' : undefined, ...attributes?.style },
-        role: 'tooltip',
-        id: id.current,
-        'data-citric': 'tooltip',
-        'data-color-scheme': colorScheme,
-        'data-color-palette': colorPalette,
-        ...attributes,
-      }}
-      onRenderChild={e => e.setAttribute('aria-describedby', id.current)}
-      {...props}
-    >
-      {children}
-    </Overlay>
-  )
-}
+import { listToClass } from '@stack-spot/portal-theme'
+import { useRef } from 'react'
+import { WithColorPalette, WithColorScheme } from '../types'
+import { Overlay } from './Overlay'
+import { BaseOverlayProps } from './Overlay/types'
+
+export interface BaseTooltipProps extends
+  Omit<BaseOverlayProps<'div'>, 'tag' | 'onRenderChild' | 'reference'>, WithColorPalette, WithColorScheme {
+  /**
+   * Whether or not to show the tooltip's arrow.
+   * 
+   * @default true
+   */
+  showArrow?: boolean,
+  /**
+   * The unique id of the HTML element to be created to show the tooltip. If not provided, a random number will be used.
+   */
+  tooltipId?: string,
+  /**
+   * Makes the tooltip text compact, centering it better when it's a single line.
+   * 
+   * Effectively, it makes the line height equals to 1 and applies a slightly larger padding.
+   * 
+   * @default true
+   */
+  compact?: boolean,
+  /**
+   * The max-width of the tooltip. Defaults to 250px.
+   */
+  maxWidth?: string,
+  /**
+   * A space between the tooltip and the element who triggered it.
+   * 
+   * @default '6px'
+   */
+  margin?: string,
+  /**
+   * Whether or not to disable the tooltip, i.e. not show it.
+   * 
+   * @default false
+   */
+  disabled?: boolean,
+}
+
+export type TooltipProps = Omit<React.JSX.IntrinsicElements['div'], 'content'> & BaseTooltipProps
+
+/**
+ * Renders a tooltip overlay for its child. By default, the tooltip is rendered on hover, but this can be changed through the property
+ * "triggerOn".
+ * 
+ * The content of the tooltip can be any React element.
+ * 
+ * @example
+ * ```
+ * <Tooltip content="This is some help for you">
+ *   <IconButton icon="Question" />
+ * </Tooltip>
+ * ```
+ */
+export const Tooltip = ({
+  tooltipId, children, showArrow = true, compact = true, attributes, colorScheme, colorPalette, disabled, maxWidth = '250px',
+  margin = '6px', ...props
+}: TooltipProps) => {
+  const id = useRef(tooltipId || `${Math.random()}`)
+  return disabled ? children : (
+    <Overlay
+      attributes={{
+        className: listToClass([attributes?.className, showArrow && 'with-arrow', compact && 'compact']),
+        style: { margin, maxWidth, lineHeight: typeof props.content === 'string' ? 'normal' : undefined, ...attributes?.style },
+        role: 'tooltip',
+        id: id.current,
+        'data-citric': 'tooltip',
+        'data-color-scheme': colorScheme,
+        'data-color-palette': colorPalette,
+        ...attributes,
+      }}
+      onRenderChild={e => e.setAttribute('aria-describedby', id.current)}
+      {...props}
+    >
+      {children}
+    </Overlay>
+  )
+}

package/src/components/layout.tsx

@@ -1,101 +1,101 @@
-import { listToClass } from '@stack-spot/portal-theme'
-import { createElement } from 'react'
-import { HTMLTag, WithStyleShortcuts } from '../types'
-import { applyStyles } from '../utils/css'
-import { withRef } from '../utils/react'
-
-export const layout = {
-  center: 'center',
-  row: 'row',
-  column: 'column',
-}
-
-export interface BaseLayoutProps<T extends keyof HTMLTag> extends WithStyleShortcuts {
-  /**
-   * HTML tag to render.
-   * 
-   * @default 'div'
-   */
-  tag?: T,
-}
-
-export interface BaseRowProps<T extends keyof HTMLTag> extends BaseLayoutProps<T> {
-  /**
-   * Whether or not to center items horizontally.
-   * 
-   * @default true
-   */
-  center?: boolean,
-}
-
-export interface BaseColumnProps<T extends keyof HTMLTag> extends BaseLayoutProps<T> {
-  /**
-   * Whether or not to center items vertically.
-   * 
-   * @default false
-   */
-  center?: boolean,
-}
-
-export type CenterProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseLayoutProps<T>
-export type RowProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseRowProps<T>
-export type ColumnProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseColumnProps<T>
-
-/**
- * Centers the content both vertically and horizontally. Elements are placed in a column (flex).
- * 
- * This element accepts many style shortcuts as attributes: bg, fg, border, radius, justifyContent, alignItems, flex, gap, m, mt, mb, ml,
- * mr, p, pt, pb, pl, pr, w, h.
- * 
- * @example
- * ```
- * <Center w="200px" h="200px" gap="10px">
- *   <img src="/an-image.png" />
- *   <Text>This content is centered!</Text>
- * </Center>
- * ```
- */
-export const Center = withRef(
-  function Center<T extends keyof HTMLTag = 'div'>({ tag, className, ...props }: CenterProps<T>) {
-    return createElement(tag || 'div', { className: listToClass(['center', className]), ...applyStyles(props) })
-  },
-)
-
-/**
- * Creates a row (flex). The elements in this row are horizontally centered unless `center = false`.
- * 
- * @example
- * ```
- * <Row gap={3}>
- *   <Icon icon="Stack" />
- *   <Text>Stacks</Text>
- * </Row>
- * ```
- */
-export const Row = withRef(
-  function Row<T extends keyof HTMLTag = 'div'>({ tag, className, center, ...props }: RowProps<T>) {
-    return createElement(
-      tag || 'div',
-      { className: listToClass(['row', center === false && 'no-center', className]), ...applyStyles(props) },
-    )
-  },
-)
-
-/**
- * Creates a column (flex). The elements in this row are placed at the start of the horizontal axis, unless `center = true`, in this case,
- * they're centered.
- * 
- * @example
- * ```
- * <Column gap={5}>
- *   <Text>Item 1</Text>
- *   <Text>Item 2</Text>
- *   <Text>Item 3</Text>
- * </Row>
- * ```
- */
-export const Column = withRef(
-  function Column<T extends keyof HTMLTag = 'div'>({ tag, className, center, ...props }: ColumnProps<T>) {
-    return createElement(tag || 'div', { className: listToClass(['column', center && 'center', className]), ...applyStyles(props) })
-  },
-)
+import { listToClass } from '@stack-spot/portal-theme'
+import { createElement } from 'react'
+import { HTMLTag, WithStyleShortcuts } from '../types'
+import { applyStyles } from '../utils/css'
+import { withRef } from '../utils/react'
+
+export const layout = {
+  center: 'center',
+  row: 'row',
+  column: 'column',
+}
+
+export interface BaseLayoutProps<T extends keyof HTMLTag> extends WithStyleShortcuts {
+  /**
+   * HTML tag to render.
+   * 
+   * @default 'div'
+   */
+  tag?: T,
+}
+
+export interface BaseRowProps<T extends keyof HTMLTag> extends BaseLayoutProps<T> {
+  /**
+   * Whether or not to center items horizontally.
+   * 
+   * @default true
+   */
+  center?: boolean,
+}
+
+export interface BaseColumnProps<T extends keyof HTMLTag> extends BaseLayoutProps<T> {
+  /**
+   * Whether or not to center items vertically.
+   * 
+   * @default false
+   */
+  center?: boolean,
+}
+
+export type CenterProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseLayoutProps<T>
+export type RowProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseRowProps<T>
+export type ColumnProps<T extends keyof HTMLTag> = HTMLTag[T] & BaseColumnProps<T>
+
+/**
+ * Centers the content both vertically and horizontally. Elements are placed in a column (flex).
+ * 
+ * This element accepts many style shortcuts as attributes: bg, fg, border, radius, justifyContent, alignItems, flex, gap, m, mt, mb, ml,
+ * mr, p, pt, pb, pl, pr, w, h.
+ * 
+ * @example
+ * ```
+ * <Center w="200px" h="200px" gap="10px">
+ *   <img src="/an-image.png" />
+ *   <Text>This content is centered!</Text>
+ * </Center>
+ * ```
+ */
+export const Center = withRef(
+  function Center<T extends keyof HTMLTag = 'div'>({ tag, className, ...props }: CenterProps<T>) {
+    return createElement(tag || 'div', { className: listToClass(['center', className]), ...applyStyles(props) })
+  },
+)
+
+/**
+ * Creates a row (flex). The elements in this row are horizontally centered unless `center = false`.
+ * 
+ * @example
+ * ```
+ * <Row gap={3}>
+ *   <Icon icon="Stack" />
+ *   <Text>Stacks</Text>
+ * </Row>
+ * ```
+ */
+export const Row = withRef(
+  function Row<T extends keyof HTMLTag = 'div'>({ tag, className, center, ...props }: RowProps<T>) {
+    return createElement(
+      tag || 'div',
+      { className: listToClass(['row', center === false && 'no-center', className]), ...applyStyles(props) },
+    )
+  },
+)
+
+/**
+ * Creates a column (flex). The elements in this row are placed at the start of the horizontal axis, unless `center = true`, in this case,
+ * they're centered.
+ * 
+ * @example
+ * ```
+ * <Column gap={5}>
+ *   <Text>Item 1</Text>
+ *   <Text>Item 2</Text>
+ *   <Text>Item 3</Text>
+ * </Row>
+ * ```
+ */
+export const Column = withRef(
+  function Column<T extends keyof HTMLTag = 'div'>({ tag, className, center, ...props }: ColumnProps<T>) {
+    return createElement(tag || 'div', { className: listToClass(['column', center && 'center', className]), ...applyStyles(props) })
+  },
+)

package/src/context/CitricContext.tsx

@@ -1,4 +1,4 @@
-import { createContext } from 'react'
-import { CitricController } from '../types'
-
-export const CitricContext = createContext<CitricController | undefined>(undefined)
+import { createContext } from 'react'
+import { CitricController } from '../types'
+
+export const CitricContext = createContext<CitricController | undefined>(undefined)

package/src/context/CitricProvider.tsx

@@ -1,14 +1,14 @@
-import { FallbackBoundary } from '../components/FallbackBoundary'
-import { CitricController } from '../types'
-import { CitricContext } from './CitricContext'
-
-/**
- * An optional provider for customizing the behavior of the Design System. This accepts a CitricController as its value.
- */
-export const CitricProvider = ({ children, value }: { children: React.ReactNode, value?: CitricController }) => (
-  <CitricContext.Provider value={value}>
-    <FallbackBoundary>
-      {children}
-    </FallbackBoundary>
-  </CitricContext.Provider>
-)
+import { FallbackBoundary } from '../components/FallbackBoundary'
+import { CitricController } from '../types'
+import { CitricContext } from './CitricContext'
+
+/**
+ * An optional provider for customizing the behavior of the Design System. This accepts a CitricController as its value.
+ */
+export const CitricProvider = ({ children, value }: { children: React.ReactNode, value?: CitricController }) => (
+  <CitricContext.Provider value={value}>
+    <FallbackBoundary>
+      {children}
+    </FallbackBoundary>
+  </CitricContext.Provider>
+)

package/src/context/hooks.ts

@@ -1,6 +1,6 @@
-import { useContext } from 'react'
-import { CitricContext } from './CitricContext'
-
-export function useCitricController() {
-  return useContext(CitricContext)
-}
+import { useContext } from 'react'
+import { CitricContext } from './CitricContext'
+
+export function useCitricController() {
+  return useContext(CitricContext)
+}

package/src/index.ts

@@ -1,58 +1,59 @@
-export * from './components/Accordion'
-export * from './components/Alert'
-export * from './components/AsyncContent'
-export * from './components/Avatar'
-export * from './components/AvatarGroup'
-export * from './components/Badge'
-export * from './components/Blockquote'
-export * from './components/Breadcrumb'
-export * from './components/Button'
-export * from './components/ButtonLink'
-export * from './components/Card'
-export * from './components/Checkbox'
-export * from './components/CheckboxGroup'
-export * from './components/Circle'
-export * from './components/CitricComponent'
-export * from './components/Divider'
-export * from './components/ErrorBoundary'
-export * from './components/FallbackBoundary'
-export * from './components/Favorite'
-export * from './components/FieldGroup'
-export * from './components/Form'
-export * from './components/FormGroup'
-export * from './components/Icon'
-export * from './components/IconBox'
-export * from './components/ImageBox'
-export * from './components/ImageWithFallback'
-export * from './components/Input'
-export * from './components/layout'
-export * from './components/Link'
-export * from './components/MenuOverlay'
-export * from './components/MenuOverlay/types'
-export * from './components/Overlay'
-export * from './components/Overlay/types'
-export * from './components/Pagination'
-export * from './components/ProgressBar'
-export * from './components/ProgressCircular'
-export * from './components/RadioGroup'
-export * from './components/Rating'
-export * from './components/Select'
-export * from './components/Select/MultiSelect'
-export * from './components/SelectBox'
-export * from './components/Skeleton'
-export * from './components/Slider'
-export * from './components/SmartTable'
-export * from './components/Stepper'
-export * from './components/Table'
-export * from './components/Tabs'
-export * from './components/Tabs/TabController'
-export * from './components/Tabs/types'
-export * from './components/Text'
-export * from './components/Textarea'
-export * from './components/Tooltip'
-export * from './context/CitricProvider'
-export type { CitricController } from './types'
-export * from './utils/checkbox'
-export * from './utils/radio'
-export * from './utils/ValueController'
-
+export * from './components/Accordion'
+export * from './components/Alert'
+export * from './components/AsyncContent'
+export * from './components/Autocomplete'
+export * from './components/Avatar'
+export * from './components/AvatarGroup'
+export * from './components/Badge'
+export * from './components/Blockquote'
+export * from './components/Breadcrumb'
+export * from './components/Button'
+export * from './components/ButtonLink'
+export * from './components/Card'
+export * from './components/Checkbox'
+export * from './components/CheckboxGroup'
+export * from './components/Circle'
+export * from './components/CitricComponent'
+export * from './components/Divider'
+export * from './components/ErrorBoundary'
+export * from './components/FallbackBoundary'
+export * from './components/Favorite'
+export * from './components/FieldGroup'
+export * from './components/Form'
+export * from './components/FormGroup'
+export * from './components/Icon'
+export * from './components/IconBox'
+export * from './components/ImageBox'
+export * from './components/ImageWithFallback'
+export * from './components/Input'
+export * from './components/layout'
+export * from './components/Link'
+export * from './components/MenuOverlay'
+export * from './components/MenuOverlay/types'
+export * from './components/Overlay'
+export * from './components/Overlay/types'
+export * from './components/Pagination'
+export * from './components/ProgressBar'
+export * from './components/ProgressCircular'
+export * from './components/RadioGroup'
+export * from './components/Rating'
+export * from './components/Select'
+export * from './components/Select/MultiSelect'
+export * from './components/SelectBox'
+export * from './components/Skeleton'
+export * from './components/Slider'
+export * from './components/SmartTable'
+export * from './components/Stepper'
+export * from './components/Table'
+export * from './components/Tabs'
+export * from './components/Tabs/TabController'
+export * from './components/Tabs/types'
+export * from './components/Text'
+export * from './components/Textarea'
+export * from './components/Tooltip'
+export * from './context/CitricProvider'
+export type { CitricController } from './types'
+export * from './utils/checkbox'
+export * from './utils/radio'
+export * from './utils/ValueController'
+