Merge pull request #93 from esnet/release/2.0.1-beta.1

chore: merge release/2.0.1-beta.1 into develop

Author: FreddKM

.changeset/pre.json

@@ -0,0 +1,20 @@
+{
+  "mode": "pre",
+  "tag": "beta",
+  "initialVersions": {
+    "css-docs": "1.0.1",
+    "host-docs": "1.0.0",
+    "react-docs": "0.9.1",
+    "web-docs": "1.0.1",
+    "@repo/eslint-config": "0.1.1",
+    "@repo/typescript-config": "0.0.0",
+    "@esnet/pkts-tokens": "1.1.1",
+    "doc-ui": "1.3.1",
+    "@esnet/packets-ui-css": "0.1.0",
+    "@esnet/packets-ui-react": "0.9.1",
+    "@esnet/packets-ui-web": "0.1.1"
+  },
+  "changesets": [
+    "release-2-0-1"
+  ]
+}

.changeset/release-2-0-1.md

@@ -0,0 +1,37 @@
+---
+"@esnet/packets-ui-react": major
+"@esnet/packets-ui-web": major
+"@esnet/packets-ui-css": major
+---
+
+Release 2.0.1: CSS variable prefix rename, component style migration, new components, and bug fixes.
+
+**Breaking changes**
+
+- CSS custom property prefix renamed from `--esnet-` to `--pkts-` across all packages. Any consumer overriding or referencing `--esnet-*` variables must update to `--pkts-*`.
+- Internal tokens package renamed from `@esnet/esnet-tokens` to `@esnet/pkts-tokens`.
+
+**ui-react**
+
+- Migrated component styles for Accordion, CodeBlock, Dropdown, InputOption, InputRow, InputSelect, InputTypeahead, Label, SkeletonChip, Spacer, and Tooltip from inline/component-scoped CSS into `ui-css`.
+- Refactored Button and IconButton prop interface.
+- Fixed Accordion close behavior.
+- Fixed empty string selected value issue on InputSelect.
+- Fixed Typeahead component issues.
+- Fixed inert attribute handling on Dropdown.
+- Fixed PktsChip vertical padding for icon/avatar alignment.
+- Added missing stories for InputOption and Label.
+- Generated component documentation.
+
+**ui-web**
+
+- Added PktsChipGroup web component.
+- Renamed `--esnet-` CSS variable prefix to `--pkts-`.
+
+**ui-css**
+
+- Migrated styles for all components listed above from ui-react into ui-css, making them available to CSS-only and web component consumers.
+- Added padding tokens to replace hard-coded values.
+- Added tokens for several previously non-tokenized CSS values.
+- Fixed CSS variable shadow typo.
+- Updated component comment prefix from `esnet` to `pkts` in index.css.

Dockerfile

@@ -20,7 +20,7 @@ RUN pnpm run build
 RUN cd apps/host-docs && pnpm run build
 
 # React docs at /react
-RUN cd apps/react-docs && pnpm run build
+RUN cd apps/react-docs && pnpm run build:storybook
 
 # Web docs at /web
 RUN cd apps/web-docs && pnpm run build

apps/css-docs/CHANGELOG.md

@@ -1,5 +1,12 @@
 # css-docs
 
+## 1.0.2-beta.0
+
+### Patch Changes
+
+- Updated dependencies
+  - @esnet/packets-ui-css@1.0.0-beta.0
+
 ## 1.0.1
 
 ### Patch Changes

apps/css-docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-docs",
-  "version": "1.0.1",
+  "version": "1.0.2-beta.0",
   "private": true,
   "type": "module",
   "scripts": {

apps/host-docs/src/components-react.mdx

@@ -22,7 +22,7 @@ import { Meta } from "@storybook/blocks";
 
     ## Installation
 
-    For installation instructions, see **[Installing React Components →](/?path=/docs/about-installing-react-components--docs)**
+    For installation instructions, see <a href="/?path=/docs/about-installing-react-components--docs" target="_parent"><strong>Installing React Components →</strong></a>
 
   </div>
 </div>

apps/host-docs/src/components-web.mdx

@@ -22,7 +22,7 @@ import { Meta } from "@storybook/blocks";
 
     ## Installation
 
-    For installation instructions, see **[Installing Web Components →](/?path=/docs/about-installing-web-components--docs)**
+    For installation instructions, see <a href="/?path=/docs/about-installing-web-components--docs" target="_parent"><strong>Installing Web Components →</strong></a>
 
   </div>
 </div>

apps/host-docs/src/css.mdx

@@ -22,7 +22,7 @@ import { Meta } from "@storybook/blocks";
 
     ## Installation
 
-    For installation instructions, see **[Installing CSS Components →](/?path=/docs/about-installing-css-components--docs)**
+    For installation instructions, see <a href="/?path=/docs/about-installing-css-components--docs" target="_parent"><strong>Installing CSS Components →</strong></a>
 
   </div>
 </div>

apps/host-docs/src/design-tokens.mdx

@@ -75,9 +75,9 @@ const CustomButton = styled.button`
 
     If you're starting a new project or simply want to use Packets components, you **don't need design tokens**. Instead, use one of the component systems:
 
-    - **[Installing CSS Components →](/?path=/docs/about-installing-css-components--docs)** - For static sites and no-build projects
-    - **[Installing Web Components →](/?path=/docs/about-installing-web-components--docs)** - For framework-agnostic applications
-    - **[Installing React Components →](/?path=/docs/about-installing-react-components--docs)** - For React applications
+    - <a href="/?path=/docs/about-installing-css-components--docs" target="_parent"><strong>Installing CSS Components →</strong></a> - For static sites and no-build projects
+    - <a href="/?path=/docs/about-installing-web-components--docs" target="_parent"><strong>Installing Web Components →</strong></a> - For framework-agnostic applications
+    - <a href="/?path=/docs/about-installing-react-components--docs" target="_parent"><strong>Installing React Components →</strong></a> - For React applications
 
   </div>
 </div>
@@ -88,13 +88,13 @@ const CustomButton = styled.button`
 
     Browse the design tokens by category:
 
-    - **[Colors](/?path=/docs/design-tokens-colors--docs)** - Color ramps and semantic color tokens
-    - **[Spacing](/?path=/docs/design-tokens-spacing--docs)** - Margin, padding, and gap values
-    - **[Motion](/?path=/docs/design-tokens-motion--docs)** - Animation durations and easing functions
-    - **[Breakpoints](/?path=/docs/design-tokens-breakpoints--docs)** - Responsive breakpoint values
-    - **[Radius & Borders](/?path=/docs/design-tokens-radius-and-borders--docs)** - Border radius and border width values
-    - **[Elevation & Shadows](/?path=/docs/design-tokens-elevation-and-shadows--docs)** - Box shadow and elevation tokens
-    - **[Icons](/?path=/docs/design-tokens-icons--docs)** - Icon size and styling tokens
+    - <a href="/?path=/docs/design-tokens-colors--docs" target="_parent"><strong>Colors</strong></a> - Color ramps and semantic color tokens
+    - <a href="/?path=/docs/design-tokens-spacing--docs" target="_parent"><strong>Spacing</strong></a> - Margin, padding, and gap values
+    - <a href="/?path=/docs/design-tokens-motion--docs" target="_parent"><strong>Motion</strong></a> - Animation durations and easing functions
+    - <a href="/?path=/docs/design-tokens-breakpoints--docs" target="_parent"><strong>Breakpoints</strong></a> - Responsive breakpoint values
+    - <a href="/?path=/docs/design-tokens-radius-and-borders--docs" target="_parent"><strong>Radius & Borders</strong></a> - Border radius and border width values
+    - <a href="/?path=/docs/design-tokens-elevation-and-shadows--docs" target="_parent"><strong>Elevation & Shadows</strong></a> - Box shadow and elevation tokens
+    - <a href="/?path=/docs/design-tokens-icons--docs" target="_parent"><strong>Icons</strong></a> - Icon size and styling tokens
 
   </div>
 </div>

apps/host-docs/src/getting-started.mdx

@@ -29,7 +29,7 @@ import { Paintbrush, Globe, Atom } from "lucide-react";
       <code className="pkts-doc-code">npm install @esnet/packets-ui-css</code>
     </div>
     <div style={{padding: "14px 24px", borderTop: "1px solid rgba(128,128,128,0.12)"}}>
-      <a href="?path=/docs/about-installing-css-components--docs" className="pkts-link-blue">
+      <a href="?path=/docs/about-installing-css-components--docs" target="_parent" className="pkts-link-blue">
         Installation guide →
       </a>
     </div>
@@ -50,7 +50,7 @@ import { Paintbrush, Globe, Atom } from "lucide-react";
       <code className="pkts-doc-code">npm install @esnet/packets-ui-css @esnet/packets-ui-web</code>
     </div>
     <div style={{padding: "14px 24px", borderTop: "1px solid rgba(128,128,128,0.12)"}}>
-      <a href="?path=/docs/about-installing-web-components--docs" className="pkts-link-purple">
+      <a href="?path=/docs/about-installing-web-components--docs" target="_parent" className="pkts-link-purple">
         Installation guide →
       </a>
     </div>
@@ -71,7 +71,7 @@ import { Paintbrush, Globe, Atom } from "lucide-react";
       <code className="pkts-doc-code">npm install @esnet/packets-ui-css @esnet/packets-ui-react</code>
     </div>
     <div style={{padding: "14px 24px", borderTop: "1px solid rgba(128,128,128,0.12)"}}>
-      <a href="?path=/docs/about-installing-react-components--docs" className="pkts-link-cyan">
+      <a href="?path=/docs/about-installing-react-components--docs" target="_parent" className="pkts-link-cyan">
         Installation guide →
       </a>
     </div>
@@ -195,9 +195,9 @@ import { Paintbrush, Globe, Atom } from "lucide-react";
         </tr>
         <tr>
           <td><strong>Installation</strong></td>
-          <td><a href="?path=/docs/about-installing-css-components--docs" className="pkts-link-blue">CSS guide →</a></td>
-          <td><a href="?path=/docs/about-installing-web-components--docs" className="pkts-link-purple">Web guide →</a></td>
-          <td><a href="?path=/docs/about-installing-react-components--docs" className="pkts-link-cyan">React guide →</a></td>
+          <td><a href="?path=/docs/about-installing-css-components--docs" target="_parent" className="pkts-link-blue">CSS guide →</a></td>
+          <td><a href="?path=/docs/about-installing-web-components--docs" target="_parent" className="pkts-link-purple">Web guide →</a></td>
+          <td><a href="?path=/docs/about-installing-react-components--docs" target="_parent" className="pkts-link-cyan">React guide →</a></td>
         </tr>
       </tbody>
     </table>