Merge pull request #51 from getpingback/fix/range-picker-single

Fix/range picker single

CHANGELOG.md

@@ -99,11 +99,11 @@ All notable changes to this project will be documented in this file. See [standa
 
 ### Bug Fixes
 
-* export switch component ([1b4d904](https://github.com/getpingback/ui/commits/1b4d904917775735a7b6e5d898e54780601b51c7))
+<<<<<<< HEAD
+* select content width ([01303f4](https://github.com/getpingback/ui/commits/01303f48190edcb59d9d2995bf7b0c9adfd8166f))
 
-### [0.0.297](https://github.com/getpingback/ui/compare/v0.0.294...v0.0.297) (2024-12-18)
+### [0.0.291](https://github.com/getpingback/ui/compare/v0.0.290...v0.0.291) (2024-12-11)
 
-### [0.0.296](https://github.com/getpingback/ui/compare/v0.0.294...v0.0.296) (2024-12-18)
 
 ### [0.0.294](https://github.com/getpingback/ui/compare/v0.0.288...v0.0.294) (2024-12-18)
 
@@ -158,12 +158,12 @@ All notable changes to this project will be documented in this file. See [standa
 * create highlight prop ([e51a5ea](https://github.com/getpingback/ui/commits/e51a5eaa4387c7513535efda09d5ac137fbc0919))
 * create switch button with checked and disabled states ([cf5f965](https://github.com/getpingback/ui/commits/cf5f96529dde0c8092fececa0af8ad331fc37127))
 * use argtypes and default global values ([a8d4012](https://github.com/getpingback/ui/commits/a8d40123c144a5eb41a5b4adc46367dbb3bbc8a1))
+>>>>>>> main
 
 ### [0.0.287](https://github.com/getpingback/ui/compare/v0.0.284...v0.0.287) (2024-12-11)
 
 ### [0.0.286](https://github.com/getpingback/ui/compare/v0.0.284...v0.0.286) (2024-12-11)
 
-### [0.0.285](https://github.com/getpingback/ui/compare/v0.0.284...v0.0.285) (2024-12-11)
 
 ### [0.0.283](https://github.com/getpingback/ui/compare/v0.0.282...v0.0.283) (2024-12-11)
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@getpingback/ui",
   "author": "Pingback Team",
-  "version": "0.0.315",
+  "version": "0.0.316",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

src/components/badge/badge.tsx

@@ -1,67 +1,68 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils';
 
-const badgeVariants = cva("inline-flex items-center px-2.5 py-0.5 text-xs font-semibold w-fit", {
+const badgeVariants = cva('inline-flex items-center px-2.5 py-0.5 text-xs font-semibold w-fit', {
   variants: {
     type: {
-      green: "bg-badge-green text-badge-green-foreground",
-      gray: "bg-badge-gray text-badge-gray-foreground",
-      teal: "bg-badge-teal text-badge-teal-foreground",
-      red: "bg-badge-red text-badge-red-foreground",
-      yellow: "bg-badge-yellow text-badge-yellow-foreground",
-      purple: "bg-badge-purple text-badge-purple-foreground",
+      green: 'bg-badge-green text-badge-green-foreground',
+      gray: 'bg-badge-gray text-badge-gray-foreground',
+      teal: 'bg-badge-teal text-badge-teal-foreground',
+      red: 'bg-badge-red text-badge-red-foreground',
+      yellow: 'bg-badge-yellow text-badge-yellow-foreground',
+      purple: 'bg-badge-purple text-badge-purple-foreground',
+      orange: 'bg-badge-orange text-badge-orange-foreground'
     },
     variant: {
-      outline: "bg-transparent",
-      ghost: "border-none",
+      outline: 'bg-transparent',
+      ghost: 'border-none'
     },
     radius: {
-      full: "rounded-full",
-      medium: "rounded-md",
+      full: 'rounded-full',
+      medium: 'rounded-md'
     },
     transform: {
-      uppercase: "uppercase",
-    },
+      uppercase: 'uppercase'
+    }
   },
   compoundVariants: [
     {
-      variant: "outline",
-      type: "green",
-      className: "border border-badge-green",
+      variant: 'outline',
+      type: 'green',
+      className: 'border border-badge-green'
     },
     {
-      variant: "outline",
-      type: "gray",
-      className: "border border-badge-gray",
+      variant: 'outline',
+      type: 'gray',
+      className: 'border border-badge-gray'
     },
     {
-      variant: "outline",
-      type: "teal",
-      className: "border border-badge-teal",
+      variant: 'outline',
+      type: 'teal',
+      className: 'border border-badge-teal'
     },
     {
-      variant: "outline",
-      type: "red",
-      className: "border border-badge-red",
+      variant: 'outline',
+      type: 'red',
+      className: 'border border-badge-red'
     },
     {
-      variant: "outline",
-      type: "yellow",
-      className: "border border-badge-yellow",
+      variant: 'outline',
+      type: 'yellow',
+      className: 'border border-badge-yellow'
     },
     {
-      variant: "outline",
-      type: "purple",
-      className: "border border-badge-purple",
-    },
+      variant: 'outline',
+      type: 'purple',
+      className: 'border border-badge-purple'
+    }
   ],
   defaultVariants: {
-    type: "purple",
-    radius: "full",
-    variant: "ghost",
-  },
+    type: 'purple',
+    radius: 'full',
+    variant: 'ghost'
+  }
 });
 
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}

src/components/range-picker/constants.ts

@@ -140,11 +140,11 @@ export const RANGE_PICKER_STYLES = {
   day_range_end: 'bg-button-solid rounded-s-sm ',
   day_range_start: 'bg-button-solid rounded-e-sm',
   day_selected:
-    'text-button-solid-foreground hover:bg-button-solid hover:text-button-ghost-foreground focus:bg-button-solid focus:text-button-solid-foreground !font-medium',
+    'text-button-solid-foreground !bg-button-solid hover:bg-button-solid hover:text-button-ghost-foreground focus:bg-button-solid focus:text-button-solid-foreground !font-medium',
   day_today: 'bg-button-ghost text-button-ghost-foreground pb-current-day',
   day_outside:
     'day-outside text-button-ghost-foreground opacity-50 aria-selected:bg-[#9061F914] aria-selected:text-button-ghost-foreground',
   day_disabled: 'text-button-ghost-foreground opacity-50',
-  day_range_middle: 'aria-selected:bg-[#9061F914] aria-selected:!rounded-none aria-selected:text-informative-foreground ',
+  day_range_middle: 'aria-selected:!bg-[#9061F914] aria-selected:!rounded-none aria-selected:text-informative-foreground ',
   day_hidden: 'invisible'
 };

src/components/range-picker/range-picker.stories.tsx

@@ -10,25 +10,25 @@ const meta = {
 
   tags: ['autodocs'],
 
-  argTypes: {},
+  argTypes: {}
 } satisfies Meta<typeof RangePicker>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = () => {
   return (
-    <div className='w-full flex justify-center'>
-      <RangePicker type='range' onChange={(date) => console.log(date)} />
+    <div className="w-full flex justify-center">
+      <RangePicker type="range" onChange={(date) => console.log(date)} />
     </div>
   );
 };
 
 export const SingleType: Story = {
   args: {
     onChange: (date) => console.log(date),
-    type: 'single',
-  },
+    type: 'single'
+  }
 };
 
 export const MobileType: Story = {
@@ -37,20 +37,14 @@ export const MobileType: Story = {
     hideMenu: true,
     hideInputs: true,
     type: 'range',
-    numberOfMonths: 1,
-  },
+    numberOfMonths: 1
+  }
 };
 
 export const ShowInputsOnTop: Story = () => {
   return (
-    <div className='w-full flex justify-center'>
-      <RangePicker
-        type='range'
-        onChange={(date) => console.log(date)}
-        inputPosition='top'
-        hideMenu
-        numberOfMonths={1}
-      />
+    <div className="w-full flex justify-center">
+      <RangePicker type="range" onChange={(date) => console.log(date)} inputPosition="top" hideMenu numberOfMonths={1} />
     </div>
   );
 };

src/components/select/select.tsx

@@ -54,18 +54,18 @@ export function Select({ label, helperText, placeholder, options, value, onValue
           </RadixSelect.Icon>
         </RadixSelect.Trigger>
 
-        <RadixSelect.Content className="z-[9999999999] bg-background-accent border-divider rounded-lg shadow-modal overflow-hidden">
-          <RadixSelect.Viewport>
+        <RadixSelect.Content className="w-full z-[9999999999] bg-background-accent border-divider rounded-lg shadow-modal overflow-hidden">
+          <RadixSelect.Viewport className="w-full">
             {options.map((option) => (
               <RadixSelect.Item
                 key={option.value}
                 value={option.value}
                 disabled={option.isDisabled}
-                className={`relative flex items-center justify-between p-3 min-h-[48px] hover:outline-none data-[highlighted]:outline-none data-[highlighted]:text-primary-foreground data-[highlighted]:bg-list-hover ${
+                className={`w-full relative flex items-center justify-between p-3 min-h-[48px] hover:outline-none data-[highlighted]:outline-none data-[highlighted]:text-primary-foreground data-[highlighted]:bg-list-hover ${
                   option.isDisabled ? 'opacity-50 cursor-not-allowed' : ''
                 }`}
               >
-                <div className="flex flex-col">
+                <div className="w-full flex flex-col">
                   <RadixSelect.ItemText>
                     <span className="text-secondary-foreground text-sm font-medium">{option.label}</span>
                   </RadixSelect.ItemText>

src/styles/globals.css

@@ -19,6 +19,8 @@
     --badge-green-bg: #0e9f6e1f;
     --badge-purple-bg: #9061f914;
     --badge-purple-text: #9061f9;
+    --badge-orange-bg: #ff5a1f14;
+    --badge-orange-text: #ff5a1f;
 
     --buttons-solid_default: #9061f9;
     --button-solid-bg: #9061f9;

tailwind.config.js

@@ -275,6 +275,10 @@ const config = {
           purple: {
             DEFAULT: 'var(--badge-purple-bg)',
             foreground: 'var(--badge-purple-text)'
+          },
+          orange: {
+            DEFAULT: 'var(--badge-orange-bg)',
+            foreground: 'var(--badge-orange-text)'
           }
         },
         switch: {