added useOrdinal to headless

Author: shairez

packages/kit-headless/src/components/carousel/carousel.tsx

@@ -9,7 +9,7 @@ import {
   useId,
   useStylesScoped$,
 } from '@builder.io/qwik';
-import { useOrdinal } from '@qwik-ui/utils';
+import { useOrdinal } from '../../utils/use-ordinal';
 
 import stylesButtons from './styles/buttons.css?inline';
 import stylesControl from './styles/control.css?inline';

packages/kit-headless/src/components/slider/slider.tsx

@@ -9,7 +9,6 @@ import {
   useSignal,
   useVisibleTask$,
 } from '@builder.io/qwik';
-import { OmitSignalClass } from '@qwik-ui/utils';
 
 export const getPercentage = (value: number, min = 0, max = 100) => {
   return ((value - min) * 100) / (max - min);
@@ -25,7 +24,7 @@ interface SliderContextService {
 
 export const sliderContext = createContextId<SliderContextService>('slider');
 
-export type SliderProps = OmitSignalClass<QwikIntrinsicElements['div']> & {
+export type SliderProps = QwikIntrinsicElements['div'] & {
   value: number;
   min: number;
   max: number;

packages/kit-headless/src/utils/use-ordinal.ts

@@ -0,0 +1,14 @@
+import { NoSerialize, noSerialize } from '@builder.io/qwik';
+
+export const useOrdinal: () => NoSerialize<(n: number) => string> = () => {
+  return noSerialize((n) => {
+    const pr = new Intl.PluralRules('en-GB', { type: 'ordinal' });
+    const suffixes = new Map([
+      ['one', 'st'],
+      ['two', 'nd'],
+      ['few', 'rd'],
+      ['other', 'th'],
+    ]);
+    return `${n}${suffixes.get(pr.select(n))}`;
+  });
+};