@graphprotocol/gds-react 0.1.2 → 0.2.1

package/src/icons/SidebarRightInteractiveIcon.tsx

@@ -1,10 +1,14 @@
-import type { SetOptional } from 'type-fest'
-
 import { Icon, type IconProps } from '../components/Icon.tsx'
 
-export interface SidebarRightInteractiveIconProps extends SetOptional<IconProps, 'alt'> {}
+export interface SidebarRightInteractiveIconProps extends Omit<IconProps, 'alt'> {
+  /** @default 'Toggle sidebar' */
+  alt?: IconProps['alt']
+}
 
-export function SidebarRightInteractiveIcon(props: SidebarRightInteractiveIconProps) {
+export function SidebarRightInteractiveIcon({
+  alt = 'Toggle sidebar',
+  ...props
+}: SidebarRightInteractiveIconProps) {
   return (
     <Icon
       src={
@@ -19,7 +23,7 @@ export function SidebarRightInteractiveIcon(props: SidebarRightInteractiveIconPr
           />
         </svg>
       }
-      alt=""
+      alt={alt}
       data-name="SidebarRightInteractive"
       {...props}
     />

package/src/tailwind-plugin.ts

@@ -7,7 +7,6 @@ import { AddressMeta } from './components/Address.meta.ts'
 import { AvatarMeta } from './components/Avatar.meta.ts'
 import { AvatarGroupMeta } from './components/AvatarGroup.meta.ts'
 import { AddonMeta } from './components/base/Addon.meta.ts'
-import { ButtonOrLinkMeta } from './components/base/ButtonOrLink.meta.ts'
 import { CheckableMeta } from './components/base/Checkable.meta.ts'
 import { FieldMeta } from './components/base/Field.meta.ts'
 import { TransitionMeta } from './components/base/Transition.meta.ts'
@@ -19,6 +18,7 @@ import { CheckboxMeta } from './components/Checkbox.meta.ts'
 import { ChipGroupMeta, ChipMeta } from './components/Chip.meta.ts'
 import { ClusterMeta } from './components/Cluster.meta.ts'
 import { CodeBlockMeta, CodeBlockTabsMeta } from './components/CodeBlock.meta.ts'
+import { CodeInlineMeta } from './components/CodeInline.meta.ts'
 import { CopyButtonMeta } from './components/CopyButton.meta.ts'
 import { CurrencyInputMeta } from './components/CurrencyInput.meta.ts'
 import { DescriptionListItemMeta, DescriptionListMeta } from './components/DescriptionList.meta.ts'
@@ -31,6 +31,7 @@ import { LinkMeta } from './components/Link.meta.ts'
 import { MenuItemMeta, MenuMeta } from './components/Menu.meta.ts'
 import { ModalMeta } from './components/Modal.meta.ts'
 import { OTCInputMeta } from './components/OTCInput.meta.ts'
+import { PaneContainerMeta, PaneMeta } from './components/Pane.meta.ts'
 import { RadioMeta } from './components/Radio.meta.ts'
 import { SearchMeta } from './components/Search.meta.ts'
 import {
@@ -78,17 +79,17 @@ const gdsTailwindPluginWithComponents: ReturnType<typeof createPlugin> = createP
     AvatarGroupMeta,
     BreadcrumbsItemMeta,
     BreadcrumbsMeta,
-    ButtonOrLinkMeta,
     ButtonMeta,
     ButtonGroupMeta,
     CardMeta,
-    CodeBlockMeta,
-    CodeBlockTabsMeta,
     CheckableMeta,
     CheckboxMeta,
     ChipMeta,
     ChipGroupMeta,
     ClusterMeta,
+    CodeBlockMeta,
+    CodeBlockTabsMeta,
+    CodeInlineMeta,
     CopyButtonMeta,
     CurrencyInputMeta,
     DescriptionListItemMeta,
@@ -104,6 +105,8 @@ const gdsTailwindPluginWithComponents: ReturnType<typeof createPlugin> = createP
     MenuMeta,
     ModalMeta,
     OTCInputMeta,
+    PaneContainerMeta,
+    PaneMeta,
     RadioMeta,
     SearchMeta,
     SegmentedControlMeta,
@@ -111,8 +114,8 @@ const gdsTailwindPluginWithComponents: ReturnType<typeof createPlugin> = createP
     StatusMeta,
     StepperMeta,
     SwitchMeta,
-    TabSetTabsMeta,
     TabSetTabMeta,
+    TabSetTabsMeta,
     TagMeta,
     TextAreaMeta,
     ToggleButtonMeta,

package/src/utils/InlineCounter.tsx

@@ -0,0 +1,17 @@
+import { useState, type ComponentProps } from 'react'
+
+export function InlineCounter(props: ComponentProps<'span'>) {
+  const [count, setCount] = useState(0)
+  return (
+    <span {...props}>
+      {count}{' '}
+      <button
+        type="button"
+        onClick={() => setCount((prev) => prev + 1)}
+        className="inline hover:underline"
+      >
+        (increment)
+      </button>
+    </span>
+  )
+}

package/src/utils/RenderCount.tsx

@@ -0,0 +1,7 @@
+import type { ComponentProps } from 'react'
+import { useRenderCount } from '@react-hookz/web'
+
+export function RenderCount(props: ComponentProps<'span'>) {
+  const renderCount = useRenderCount()
+  return <span {...props}>{renderCount}</span>
+}

package/src/utils/cn.ts

@@ -3,7 +3,9 @@
  *
  * @example
  *
- *     cn('base-class', condition && 'conditional-class', className)
+ * ```ts
+ * cn('base-class', condition && 'conditional-class', className)
+ * ```
  */
 export function cn(...classes: (string | undefined | null | false)[]): string {
   return classes.filter(Boolean).join(' ')

package/src/utils/getCSSPropsAttributes.ts

@@ -12,8 +12,14 @@ type AllCSSProps<C extends GDSComponent> = {
   [K in keyof ComponentCSSProps<C>]-?: ComponentCSSProps<C>[K] | undefined
 }
 
-// For props with a `defaultValue`, ensure they can be `undefined` (preventing destructuring defaults like `{ size = 'medium' }`).
-// For props without a `defaultValue`, allow any value since they're required and will never be `undefined`.
+/**
+ * Validates the passed values object:
+ *
+ * - Rejects keys that are not CSS props.
+ * - For props with a `defaultValue`, ensures they can be `undefined` (preventing destructuring
+ *   defaults, which would break `default-*` utilities).
+ * - For props without a `defaultValue`, allows any value since they're required.
+ */
 type ValidatePassedValues<C extends GDSComponent, T extends AllCSSProps<C>> = {
   [K in keyof T]: K extends keyof ComponentCSSPropsConfig<C>
     ? 'defaultValue' extends keyof ComponentCSSPropsConfig<C>[K]
@@ -21,12 +27,11 @@ type ValidatePassedValues<C extends GDSComponent, T extends AllCSSProps<C>> = {
         ? T[K]
         : never
       : T[K]
-    : T[K]
+    : `"${K & string}" is not a CSS prop of this component`
 }
 
 /**
- * Returns attributes to spread on the root element of a component that supports CSS Props. This
- * enables the CSS Props system to apply prop-based styling.
+ * Returns attributes to spread on the root element of a component that supports CSS props.
  *
  * @param component The component metadata object created with createComponent.
  * @param passedValues Object containing all the CSS prop values from the component props.
@@ -41,13 +46,13 @@ export function getCSSPropsAttributes<C extends GDSComponent, V extends AllCSSPr
   const customProperties: Record<string, string> = {}
 
   for (const propName in passedValues) {
-    const prop = component.getCSSPropByName(propName)
+    const cssProp = component.getCSSPropByName(propName)
     const value = passedValues[propName]
     if (value === undefined) continue
-    customProperties[`--gds-passed-${prop.kebabName}`] = getCSSPropRawValue(prop, value)
+    customProperties[`--gds-passed-${cssProp.kebabName}`] = getCSSPropRawValue(cssProp, value)
   }
 
   return {
-    style: { ...style, ...customProperties },
+    style: { ...customProperties, ...style },
   }
 }

package/src/utils/index.ts

@@ -2,8 +2,10 @@ export { cn } from './cn.ts'
 export { getAssetUrl } from './getAssetUrl.ts'
 export { getCSSPropsAttributes } from './getCSSPropsAttributes.ts'
 export { getReactNodeKey } from './getReactNodeKey.ts'
+export { InlineCounter } from './InlineCounter.tsx'
 export { isReactNode } from './isReactNode.ts'
 export { reactNodeToString } from './reactNodeToString.ts'
+export { RenderCount } from './RenderCount.tsx'
 export { splitProps } from './splitProps.ts'
 export { styleScheduler } from './styleScheduler.ts'
 export { trimReactNode } from './trimReactNode.tsx'

package/src/utils/splitProps.ts

@@ -10,28 +10,22 @@
  * destructured), `style`, `inert`, `hidden`, and `aria-hidden` go in `rootProps`, along with data
  * attributes, since they can be coupled to the `className` to apply styles conditionally, e.g.
  * `<Button data-highlighted={highlighted} className="data-[highlighted]:prop-variant-primary" />`.
- * However, data attributes can also be needed on the underlying element in some cases, so they are
- * also included in the `nestedProps`, except the ones starting with `data-gds-`, to avoid messing
- * with the CSS props or states systems.
  */
 export function splitProps<T extends Record<string, unknown>>(props: T) {
   const rootProps: Record<string, unknown> = {}
   const nestedProps: Record<string, unknown> = {}
 
   for (const [key, value] of Object.entries(props)) {
-    const isDataAttribute = key.startsWith('data-')
-    const isGDSDataAttribute = key.startsWith('data-gds-')
     const isRootProp =
       key === 'className' ||
       key === 'style' ||
       key === 'inert' ||
       key === 'hidden' ||
       key === 'aria-hidden' ||
-      isDataAttribute
+      key.startsWith('data-')
     if (isRootProp) {
       rootProps[key] = value
-    }
-    if (!isRootProp || (isDataAttribute && !isGDSDataAttribute)) {
+    } else {
       nestedProps[key] = value
     }
   }
@@ -49,7 +43,13 @@ export function splitProps<T extends Record<string, unknown>>(props: T) {
         : never]: T[K]
     }
     nestedProps: {
-      [K in keyof T as K extends 'className' | 'style' | 'inert' | 'hidden' | 'aria-hidden'
+      [K in keyof T as K extends
+        | 'className'
+        | 'style'
+        | 'inert'
+        | 'hidden'
+        | 'aria-hidden'
+        | `data-${string}`
         ? never
         : K]: T[K]
     }

package/src/utils/trimReactNode.tsx

@@ -12,14 +12,16 @@ import { Children, isValidElement, type ReactElement, type ReactNode } from 'rea
  *
  * @example
  *
- *     trimReactNode('  hello  ') // 'hello'
- *     trimReactNode(
- *       <>
- *         {' '}
- *         <span>test</span>{' '}
- *       </>,
- *     ) // <><span>test</span></>
- *     trimReactNode([' ', <div>content</div>, ' ']) // [<div>content</div>]
+ * ```tsx
+ * trimReactNode('  hello  ') // 'hello'
+ * trimReactNode(
+ *   <>
+ *     {' '}
+ *     <span>test</span>{' '}
+ *   </>,
+ * ) // <><span>test</span></>
+ * trimReactNode([' ', <div>content</div>, ' ']) // [<div>content</div>]
+ * ```
  *
  * @param node - The `ReactNode` to trim.
  * @returns A new `ReactNode` with leading and trailing whitespace removed.

package/dist/components/base/ButtonOrLink.meta.d.ts

@@ -1,2 +0,0 @@
-export declare const ButtonOrLinkMeta: import("@graphprotocol/gds-css").GDSComponent<import("@graphprotocol/gds-css").CSSPropsConfig, boolean>;
-//# sourceMappingURL=ButtonOrLink.meta.d.ts.map

package/dist/components/base/ButtonOrLink.meta.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonOrLink.meta.d.ts","sourceRoot":"","sources":["../../../src/components/base/ButtonOrLink.meta.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,yGAE3B,CAAA"}

package/dist/components/base/ButtonOrLink.meta.js

@@ -1,6 +0,0 @@
-import { createComponent } from '@graphprotocol/gds-css';
-// `ButtonOrLink` doesn't use CSS Props, but we register it for the `*-button-or-link` variants
-export const ButtonOrLinkMeta = createComponent('ButtonOrLink', {
-    containerName: null,
-});
-//# sourceMappingURL=ButtonOrLink.meta.js.map

package/dist/components/base/ButtonOrLink.meta.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonOrLink.meta.js","sourceRoot":"","sources":["../../../src/components/base/ButtonOrLink.meta.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAExD,+FAA+F;AAC/F,MAAM,CAAC,MAAM,gBAAgB,GAAG,eAAe,CAAC,cAAc,EAAE;IAC9D,aAAa,EAAE,IAAI;CACpB,CAAC,CAAA"}

package/src/components/base/ButtonOrLink.meta.ts

@@ -1,6 +0,0 @@
-import { createComponent } from '@graphprotocol/gds-css'
-
-// `ButtonOrLink` doesn't use CSS Props, but we register it for the `*-button-or-link` variants
-export const ButtonOrLinkMeta = createComponent('ButtonOrLink', {
-  containerName: null,
-})