SegmentedGroup - Convert to TypeScript

.changeset/small-mirrors-hope.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`SegmentedGroup` - Converted component to TypeScript

packages/components/src/components.ts

@@ -73,6 +73,7 @@ import HdsPageHeader from './components/hds/page-header/index.ts';
 import HdsPopoverPrimitive from './components/hds/popover-primitive/index.ts';
 import HdsReveal from './components/hds/reveal/index.ts';
 import HdsRichTooltip from './components/hds/rich-tooltip/index.ts';
+import HdsSegmentedGroup from './components/hds/segmented-group/index.ts';
 import HdsSeparator from './components/hds/separator/index.ts';
 import HdsSideNav from './components/hds/side-nav/index.ts';
 import HdsSideNavBase from './components/hds/side-nav/base.ts';
@@ -162,6 +163,7 @@ export {
   HdsPopoverPrimitive,
   HdsReveal,
   HdsRichTooltip,
+  HdsSegmentedGroup,
   HdsSeparator,
   HdsSideNav,
   HdsSideNavBase,

packages/components/src/components/hds/dropdown/index.ts

@@ -29,7 +29,7 @@ import type { HdsDropdownPositions } from './types';
 export const DEFAULT_POSITION = HdsDropdownPositionValues.BottomRight;
 export const POSITIONS: string[] = Object.values(HdsDropdownPositionValues);
 
-interface HdsDropdownSignature {
+export interface HdsDropdownSignature {
   Args: MenuPrimitiveSignature['Args'] & {
     height: string;
     isInline: boolean;

packages/components/src/components/hds/segmented-group/index.hbs

@@ -1,4 +1,3 @@
-{{! @glint-nocheck: not typesafe yet }}
 {{!
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0

packages/components/src/components/hds/segmented-group/index.ts

@@ -0,0 +1,28 @@
+import TemplateOnlyComponent from '@ember/component/template-only';
+
+import type { ComponentLike } from '@glint/template';
+import type { HdsButtonSignature } from '../button';
+import type { HdsDropdownSignature } from '../dropdown';
+import type { HdsFormSelectBaseSignature } from '../form/select/base';
+import type { HdsFormTextInputBaseSignature } from '../form/text-input/base';
+import type { HdsYieldSignature } from '../yield';
+
+interface HdsSegmentedGroupSignature {
+  Blocks: {
+    default: [
+      {
+        Button: ComponentLike<HdsButtonSignature>;
+        Dropdown: ComponentLike<HdsDropdownSignature>;
+        Select: ComponentLike<HdsFormSelectBaseSignature>;
+        TextInput: ComponentLike<HdsFormTextInputBaseSignature>;
+        Generic: ComponentLike<HdsYieldSignature>;
+      },
+    ];
+  };
+  Element: HTMLDivElement;
+}
+
+const HdsSegmentedGroupComponent =
+  TemplateOnlyComponent<HdsSegmentedGroupSignature>();
+
+export default HdsSegmentedGroupComponent;

packages/components/src/template-registry.ts

@@ -115,6 +115,7 @@ import type HdsRevealToggleButtonComponent from './components/hds/reveal/toggle/
 import type HdsRichTooltipComponent from './components/hds/rich-tooltip/index.ts';
 import type HdsRichTooltipBubbleComponent from './components/hds/rich-tooltip/bubble.ts';
 import type HdsRichTooltipToggleComponent from './components/hds/rich-tooltip/toggle.ts';
+import type HdsSegmentedGroupComponent from './components/hds/segmented-group';
 import type HdsSeparatorComponent from './components/hds/separator';
 import type HdsSideNavComponent from './components/hds/side-nav';
 import type HdsSideNavBaseComponent from './components/hds/side-nav/base';
@@ -546,6 +547,10 @@ export default interface HdsComponentsRegistry {
   'Hds::Reveal::Toggle::Button': typeof HdsRevealToggleButtonComponent;
   'hds/reveal/toggle/button': typeof HdsRevealToggleButtonComponent;
 
+  // Segmented Group
+  'Hds::SegmentedGroup': typeof HdsSegmentedGroupComponent;
+  'hds/segmented-group': typeof HdsSegmentedGroupComponent;
+
   // Separator
   'Hds::Separator': typeof HdsSeparatorComponent;
   'hds/separator': typeof HdsSeparatorComponent;